108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { t } from '@/i18n';
|
|
// Taro mini-program component
|
|
|
|
/**
|
|
* 分享卡片组件
|
|
*
|
|
* 用于生成小程序分享图片/卡片
|
|
* 包含券信息 + 品牌 + 价格 + 小程序码
|
|
*/
|
|
|
|
interface ShareCardProps {
|
|
brand: string;
|
|
name: string;
|
|
price: string;
|
|
faceValue: string;
|
|
discount: string;
|
|
}
|
|
|
|
const ShareCard: React.FC<ShareCardProps> = ({
|
|
brand, name, price, faceValue, discount,
|
|
}) => {
|
|
return (
|
|
<view className="share-card">
|
|
{/* Header */}
|
|
<view className="share-header">
|
|
<view className="share-logo">
|
|
<text className="share-logo-text">G</text>
|
|
</view>
|
|
<text className="share-brand">Genex · {brand}</text>
|
|
</view>
|
|
|
|
{/* Coupon Info */}
|
|
<view className="share-body">
|
|
<text className="share-name">{name}</text>
|
|
<view className="share-price-row">
|
|
<text className="share-price">{price}</text>
|
|
<text className="share-face">{faceValue}</text>
|
|
<view className="share-discount">
|
|
<text className="share-discount-text">{discount}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
{/* Footer with QR */}
|
|
<view className="share-footer">
|
|
<view className="share-qr">
|
|
<text className="share-qr-placeholder">{t('share_miniapp_code')}</text>
|
|
</view>
|
|
<view className="share-cta">
|
|
<text className="share-cta-title">{t('share_scan_miniapp')}</text>
|
|
<text className="share-cta-desc">{t('share_buy_coupons')}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
);
|
|
};
|
|
|
|
export default ShareCard;
|
|
|
|
/*
|
|
CSS:
|
|
|
|
.share-card {
|
|
width: 560rpx; background: white;
|
|
border-radius: 24rpx; overflow: hidden;
|
|
box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1);
|
|
}
|
|
.share-header {
|
|
display: flex; align-items: center;
|
|
padding: 24rpx 28rpx;
|
|
background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
|
|
}
|
|
.share-logo {
|
|
width: 48rpx; height: 48rpx; background: rgba(255,255,255,0.2);
|
|
border-radius: 10rpx; display: flex;
|
|
align-items: center; justify-content: center;
|
|
}
|
|
.share-logo-text { color: white; font-weight: 700; font-size: 24rpx; }
|
|
.share-brand { color: white; font-size: 26rpx; font-weight: 600; margin-left: 12rpx; }
|
|
|
|
.share-body { padding: 28rpx; }
|
|
.share-name { font-size: 32rpx; font-weight: 600; color: #141723; }
|
|
.share-price-row { display: flex; align-items: flex-end; margin-top: 16rpx; }
|
|
.share-price { font-size: 40rpx; font-weight: 700; color: #6C5CE7; }
|
|
.share-face { font-size: 24rpx; color: #A0A8BE; text-decoration: line-through; margin-left: 12rpx; }
|
|
.share-discount {
|
|
margin-left: 12rpx; padding: 4rpx 12rpx;
|
|
background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
|
|
border-radius: 999rpx;
|
|
}
|
|
.share-discount-text { color: white; font-size: 22rpx; font-weight: 700; }
|
|
|
|
.share-footer {
|
|
display: flex; align-items: center;
|
|
padding: 20rpx 28rpx; border-top: 1rpx solid #F1F3F8;
|
|
}
|
|
.share-qr {
|
|
width: 80rpx; height: 80rpx; background: #F3F1FF;
|
|
border-radius: 8rpx; display: flex;
|
|
align-items: center; justify-content: center;
|
|
}
|
|
.share-qr-placeholder { font-size: 16rpx; color: #A0A8BE; }
|
|
.share-cta { margin-left: 16rpx; }
|
|
.share-cta-title { font-size: 24rpx; font-weight: 600; color: #141723; }
|
|
.share-cta-desc { font-size: 20rpx; color: #A0A8BE; }
|
|
*/
|