309 lines
9.8 KiB
TypeScript
309 lines
9.8 KiB
TypeScript
import React from 'react';
|
||
|
||
/**
|
||
* E2. H5页面 - 券分享页 + 活动落地页 + 注册引导页
|
||
*
|
||
* 券信息展示 + 「打开App购买」/「小程序购买」引导
|
||
*/
|
||
|
||
// === 券分享页 ===
|
||
export const SharePage: React.FC = () => {
|
||
return (
|
||
<div style={{
|
||
minHeight: '100vh',
|
||
background: 'linear-gradient(180deg, #6C5CE7 0%, #F8F9FC 40%)',
|
||
fontFamily: "'Inter', -apple-system, sans-serif",
|
||
}}>
|
||
{/* Header */}
|
||
<div style={{ padding: '48px 24px 0', textAlign: 'center' }}>
|
||
<div style={{
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
padding: '8px 16px',
|
||
background: 'rgba(255,255,255,0.2)',
|
||
borderRadius: 999,
|
||
color: 'white',
|
||
fontSize: 13,
|
||
}}>
|
||
<span style={{ fontSize: 16 }}>💎</span>
|
||
<span>来自 Genex 的分享</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Coupon Card */}
|
||
<div style={{
|
||
margin: '24px 20px',
|
||
background: 'white',
|
||
borderRadius: 20,
|
||
boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
|
||
overflow: 'hidden',
|
||
}}>
|
||
{/* Image */}
|
||
<div style={{
|
||
height: 180,
|
||
background: 'linear-gradient(135deg, #6C5CE7, #9B8FFF)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}>
|
||
<span style={{ fontSize: 64, opacity: 0.3 }}>🎫</span>
|
||
</div>
|
||
|
||
{/* Info */}
|
||
<div style={{ padding: 24 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
|
||
<div style={{
|
||
width: 32, height: 32, borderRadius: 8,
|
||
background: '#F1F3F8',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
fontSize: 14, fontWeight: 700, color: '#6C5CE7',
|
||
}}>S</div>
|
||
<span style={{ fontSize: 13, color: '#5C6478' }}>Starbucks</span>
|
||
<span style={{
|
||
padding: '1px 6px', borderRadius: 999,
|
||
background: 'rgba(0,196,140,0.1)',
|
||
border: '1px solid rgba(0,196,140,0.3)',
|
||
fontSize: 10, fontWeight: 700, color: '#00C48C',
|
||
}}>AAA</span>
|
||
</div>
|
||
|
||
<h2 style={{ fontSize: 20, fontWeight: 600, color: '#141723', margin: '0 0 12px' }}>
|
||
星巴克 $25 礼品卡
|
||
</h2>
|
||
|
||
<div style={{
|
||
padding: 16,
|
||
background: '#F3F1FF',
|
||
borderRadius: 12,
|
||
marginBottom: 16,
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
|
||
<span style={{ fontSize: 14, fontWeight: 700, color: '#6C5CE7' }}>$</span>
|
||
<span style={{ fontSize: 32, fontWeight: 700, color: '#6C5CE7', lineHeight: 1 }}>21.25</span>
|
||
<span style={{ fontSize: 13, color: '#A0A8BE', textDecoration: 'line-through' }}>$25</span>
|
||
<span style={{
|
||
padding: '2px 8px',
|
||
background: 'linear-gradient(135deg, #6C5CE7, #9B8FFF)',
|
||
color: 'white', fontSize: 11, fontWeight: 700, borderRadius: 999,
|
||
}}>8.5折</span>
|
||
</div>
|
||
<div style={{ fontSize: 12, color: '#00C48C', marginTop: 6 }}>
|
||
比面值节省 $3.75
|
||
</div>
|
||
</div>
|
||
|
||
{/* Info rows */}
|
||
{[
|
||
{ label: '有效期', value: '2026/12/31' },
|
||
{ label: '使用门店', value: '全国 12,800+ 门店' },
|
||
].map((item, i) => (
|
||
<div key={i} style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
padding: '10px 0',
|
||
borderBottom: '1px solid #F1F3F8',
|
||
fontSize: 13,
|
||
}}>
|
||
<span style={{ color: '#5C6478' }}>{item.label}</span>
|
||
<span style={{ color: '#141723', fontWeight: 500 }}>{item.value}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* CTA Buttons */}
|
||
<div style={{ padding: '0 20px 32px' }}>
|
||
<button style={{
|
||
width: '100%',
|
||
height: 52,
|
||
background: '#6C5CE7',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: 12,
|
||
fontSize: 16,
|
||
fontWeight: 600,
|
||
cursor: 'pointer',
|
||
marginBottom: 12,
|
||
}}>
|
||
打开 App 购买
|
||
</button>
|
||
<button style={{
|
||
width: '100%',
|
||
height: 52,
|
||
background: 'white',
|
||
color: '#6C5CE7',
|
||
border: '1.5px solid #6C5CE7',
|
||
borderRadius: 12,
|
||
fontSize: 16,
|
||
fontWeight: 600,
|
||
cursor: 'pointer',
|
||
}}>
|
||
小程序购买
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// === 活动落地页 ===
|
||
export const ActivityPage: React.FC = () => {
|
||
return (
|
||
<div style={{
|
||
minHeight: '100vh',
|
||
background: '#F8F9FC',
|
||
fontFamily: "'Inter', -apple-system, sans-serif",
|
||
}}>
|
||
{/* Activity Banner */}
|
||
<div style={{
|
||
height: 240,
|
||
background: 'linear-gradient(135deg, #6C5CE7, #4834D4)',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
color: 'white',
|
||
}}>
|
||
<h1 style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>新用户专享</h1>
|
||
<p style={{ fontSize: 16, opacity: 0.8, margin: '8px 0 0' }}>首单立减 $10，限时优惠</p>
|
||
</div>
|
||
|
||
{/* Coupon Grid */}
|
||
<div style={{ padding: 20 }}>
|
||
<h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>活动好券</h3>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||
{Array.from({ length: 4 }, (_, i) => (
|
||
<div key={i} style={{
|
||
background: 'white',
|
||
borderRadius: 12,
|
||
overflow: 'hidden',
|
||
border: '1px solid #F1F3F8',
|
||
}}>
|
||
<div style={{
|
||
height: 100,
|
||
background: '#F3F1FF',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}>
|
||
<span style={{ fontSize: 32, opacity: 0.4 }}>🎫</span>
|
||
</div>
|
||
<div style={{ padding: 10 }}>
|
||
<div style={{ fontSize: 12, color: '#5C6478' }}>品牌 {i + 1}</div>
|
||
<div style={{ fontSize: 16, fontWeight: 700, color: '#6C5CE7' }}>
|
||
${(i + 1) * 8.5}
|
||
</div>
|
||
<div style={{ fontSize: 11, color: '#A0A8BE', textDecoration: 'line-through' }}>
|
||
${(i + 1) * 10}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* CTA */}
|
||
<button style={{
|
||
width: '100%',
|
||
height: 48,
|
||
marginTop: 24,
|
||
background: '#6C5CE7',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: 12,
|
||
fontSize: 15,
|
||
fontWeight: 600,
|
||
cursor: 'pointer',
|
||
}}>
|
||
立即参与
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// === 注册引导页 ===
|
||
export const RegisterGuidePage: React.FC = () => {
|
||
return (
|
||
<div style={{
|
||
minHeight: '100vh',
|
||
background: 'white',
|
||
fontFamily: "'Inter', -apple-system, sans-serif",
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: 40,
|
||
}}>
|
||
{/* Logo */}
|
||
<div style={{
|
||
width: 72, height: 72,
|
||
background: 'linear-gradient(135deg, #6C5CE7, #9B8FFF)',
|
||
borderRadius: 18,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginBottom: 24,
|
||
boxShadow: '0 4px 16px rgba(108,92,231,0.3)',
|
||
}}>
|
||
<span style={{ fontSize: 32 }}>💎</span>
|
||
</div>
|
||
|
||
<h1 style={{ fontSize: 24, fontWeight: 700, color: '#141723', margin: '0 0 8px' }}>
|
||
加入 Genex
|
||
</h1>
|
||
<p style={{ fontSize: 15, color: '#5C6478', margin: '0 0 40px', textAlign: 'center' }}>
|
||
让每一张券都有价值<br />
|
||
注册即享首单立减优惠
|
||
</p>
|
||
|
||
{/* Features */}
|
||
{[
|
||
{ icon: '🎫', title: '海量优惠券', desc: '餐饮、购物、娱乐全覆盖' },
|
||
{ icon: '💰', title: '超值折扣', desc: '最低7折起，省钱又省心' },
|
||
{ icon: '🔒', title: '安全交易', desc: '平台担保，放心购买' },
|
||
].map((f, i) => (
|
||
<div key={i} style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
width: '100%',
|
||
maxWidth: 320,
|
||
padding: '14px 0',
|
||
}}>
|
||
<div style={{
|
||
width: 44, height: 44, borderRadius: 12,
|
||
background: '#F3F1FF',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
fontSize: 20, marginRight: 16, flexShrink: 0,
|
||
}}>{f.icon}</div>
|
||
<div>
|
||
<div style={{ fontSize: 15, fontWeight: 600, color: '#141723' }}>{f.title}</div>
|
||
<div style={{ fontSize: 12, color: '#5C6478' }}>{f.desc}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
<div style={{ width: '100%', maxWidth: 320, marginTop: 32 }}>
|
||
<button style={{
|
||
width: '100%', height: 52,
|
||
background: '#6C5CE7', color: 'white',
|
||
border: 'none', borderRadius: 12,
|
||
fontSize: 16, fontWeight: 600, cursor: 'pointer',
|
||
marginBottom: 12,
|
||
}}>
|
||
立即注册
|
||
</button>
|
||
<button style={{
|
||
width: '100%', height: 52,
|
||
background: 'transparent', color: '#6C5CE7',
|
||
border: '1.5px solid #6C5CE7', borderRadius: 12,
|
||
fontSize: 16, fontWeight: 600, cursor: 'pointer',
|
||
}}>
|
||
已有账号，登录
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SharePage;
|