|
|
@@ -0,0 +1,729 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <!-- 顶部 Banner -->
|
|
|
+ <view class="banner">
|
|
|
+ <text class="banner-emoji">🎁</text>
|
|
|
+ <text class="banner-title">邀请好友</text>
|
|
|
+ <text class="banner-sub">邀请成功双方各得 10,000 积分</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 邀请码卡片 -->
|
|
|
+ <view class="invite-card">
|
|
|
+ <view class="invite-card-header">
|
|
|
+ <text class="invite-card-title">我的邀请码</text>
|
|
|
+ </view>
|
|
|
+ <view class="invite-code-box">
|
|
|
+ <text class="invite-code">{{ inviteCode || '加载中...' }}</text>
|
|
|
+ <view class="copy-btn" @click="copyCode">
|
|
|
+ <text class="copy-btn-text">复制</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="invite-link-box">
|
|
|
+ <text class="invite-link-label">邀请链接:</text>
|
|
|
+ <text class="invite-link" selectable>{{ inviteLink }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="invite-actions">
|
|
|
+ <view class="action-btn primary" @click="shareInvite">
|
|
|
+ <text class="action-btn-text">分享邀请链接</text>
|
|
|
+ </view>
|
|
|
+ <view class="action-btn" @click="copyLink">
|
|
|
+ <text class="action-btn-text">复制链接</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 邀请统计 -->
|
|
|
+ <view class="stats-card">
|
|
|
+ <view class="stat-item">
|
|
|
+ <text class="stat-value">{{ stats.totalInvites }}</text>
|
|
|
+ <text class="stat-label">已邀请人数</text>
|
|
|
+ </view>
|
|
|
+ <view class="stat-divider" />
|
|
|
+ <view class="stat-item">
|
|
|
+ <text class="stat-value">{{ formatNumber(stats.totalReward) }}</text>
|
|
|
+ <text class="stat-label">累计获得积分</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 邀请记录 -->
|
|
|
+ <view class="records-card" v-if="records.length > 0">
|
|
|
+ <view class="records-header">
|
|
|
+ <text class="records-title">邀请记录</text>
|
|
|
+ </view>
|
|
|
+ <view class="record-list">
|
|
|
+ <view class="record-item" v-for="record in records" :key="record.id">
|
|
|
+ <view class="record-info">
|
|
|
+ <text class="record-user">{{ record.inviteeNickname || '用户' + record.inviteeId }}</text>
|
|
|
+ <text class="record-date">{{ formatDate(record.createdAt) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="record-reward">
|
|
|
+ <text class="record-reward-text">+{{ formatNumber(record.rewardAmount) }}积分</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 空白状态 -->
|
|
|
+ <view class="empty-card" v-else>
|
|
|
+ <text class="empty-icon">👥</text>
|
|
|
+ <text class="empty-text">还没有邀请记录</text>
|
|
|
+ <text class="empty-sub">快去邀请好友吧</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 分享增加积分说明 -->
|
|
|
+ <view class="share-reward-card">
|
|
|
+ <view class="share-reward-header">
|
|
|
+ <text class="share-reward-icon">📤</text>
|
|
|
+ <text class="share-reward-title">分享也能得积分</text>
|
|
|
+ </view>
|
|
|
+ <text class="share-reward-desc">分享书籍/音频给好友,每次分享可获得积分奖励</text>
|
|
|
+ <view class="share-reward-btn" @click="testShareReward">
|
|
|
+ <text class="share-reward-btn-text">测试分享得积分</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 规则说明 -->
|
|
|
+ <view class="rules-card">
|
|
|
+ <text class="rules-title">活动规则</text>
|
|
|
+ <view class="rule-item">
|
|
|
+ <text class="rule-num">1</text>
|
|
|
+ <text class="rule-text">每成功邀请1位好友,双方各获得10,000积分</text>
|
|
|
+ </view>
|
|
|
+ <view class="rule-item">
|
|
|
+ <text class="rule-num">2</text>
|
|
|
+ <text class="rule-text">被邀请人需为新用户(从未注册)</text>
|
|
|
+ </view>
|
|
|
+ <view class="rule-item">
|
|
|
+ <text class="rule-num">3</text>
|
|
|
+ <text class="rule-text">分享书籍/音频也可获得积分奖励</text>
|
|
|
+ </view>
|
|
|
+ <view class="rule-item">
|
|
|
+ <text class="rule-num">4</text>
|
|
|
+ <text class="rule-text">积分可全额抵扣音频生成费用</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import { onShow } from '@dcloudio/uni-app';
|
|
|
+import { get, post } from '../../utils/request';
|
|
|
+import { getBaseUrl } from '../../utils/config';
|
|
|
+import { copyShareLink } from '../../utils/share';
|
|
|
+
|
|
|
+const inviteCode = ref('');
|
|
|
+const inviteLink = ref('');
|
|
|
+const stats = ref({ totalInvites: 0, totalReward: 0 });
|
|
|
+const records = ref<any[]>([]);
|
|
|
+const shareReward = ref(1000); // 每次分享奖励积分
|
|
|
+
|
|
|
+// 获取邀请码
|
|
|
+async function loadInviteCode() {
|
|
|
+ try {
|
|
|
+ const userInfo = await get<any>('/auth/me');
|
|
|
+ // 生成本地邀请码(基于用户ID)
|
|
|
+ const userId = userInfo?.id || 0;
|
|
|
+ inviteCode.value = `SG${userId.toString().padStart(6, '0')}`;
|
|
|
+ const baseUrl = getBaseUrl();
|
|
|
+ inviteLink.value = `${baseUrl}/#/pages/login/index?inviteCode=${inviteCode.value}`;
|
|
|
+ } catch (e) {
|
|
|
+ // 用时间戳生成临时码
|
|
|
+ inviteCode.value = `SG${Date.now().toString().slice(-6)}`;
|
|
|
+ const baseUrl = getBaseUrl();
|
|
|
+ inviteLink.value = `${baseUrl}/#/pages/login/index?inviteCode=${inviteCode.value}`;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 获取邀请统计
|
|
|
+async function loadStats() {
|
|
|
+ try {
|
|
|
+ const data = await get<any>('/invite/stats');
|
|
|
+ stats.value = data || { totalInvites: 0, totalReward: 0 };
|
|
|
+ } catch (e) {
|
|
|
+ stats.value = { totalInvites: 0, totalReward: 0 };
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 获取邀请记录
|
|
|
+async function loadRecords() {
|
|
|
+ try {
|
|
|
+ const data = await get<any>('/invite/records');
|
|
|
+ records.value = data?.records || [];
|
|
|
+ } catch (e) {
|
|
|
+ records.value = [];
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 复制邀请码
|
|
|
+function copyCode() {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: inviteCode.value,
|
|
|
+ success: () => uni.showToast({ title: '邀请码已复制', icon: 'success' }),
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 复制邀请链接
|
|
|
+async function copyLink() {
|
|
|
+ await copyShareLink({
|
|
|
+ title: '声工坊 AI 有声书 - 邀请好友',
|
|
|
+ summary: `我的邀请码是 ${inviteCode.value},注册即得10,000积分!`,
|
|
|
+ link: inviteLink.value,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 分享邀请链接
|
|
|
+function shareInvite() {
|
|
|
+ const shareInfo = {
|
|
|
+ title: '声工坊 AI 有声书 - 邀请好友',
|
|
|
+ summary: `我的邀请码是 ${inviteCode.value},注册即得10,000积分,快来加入!`,
|
|
|
+ link: inviteLink.value,
|
|
|
+ };
|
|
|
+
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ uni.share({
|
|
|
+ provider: 'weixin',
|
|
|
+ scene: 'WXSceneSession',
|
|
|
+ type: 0,
|
|
|
+ title: shareInfo.title,
|
|
|
+ summary: shareInfo.summary,
|
|
|
+ href: shareInfo.link,
|
|
|
+ success: async () => {
|
|
|
+ await recordShareAction('weixin_session');
|
|
|
+ uni.showToast({ title: '分享成功,+1000积分已到账', icon: 'success' });
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ if (err.errMsg && !err.errMsg.includes('cancel')) {
|
|
|
+ uni.showToast({ title: '分享失败', icon: 'none' });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef H5
|
|
|
+ copyLink();
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ uni.showToast({ title: '请使用微信分享', icon: 'none' });
|
|
|
+ // #endif
|
|
|
+}
|
|
|
+
|
|
|
+// 记录分享行为并获取积分
|
|
|
+async function recordShareAction(platform: string) {
|
|
|
+ try {
|
|
|
+ const res = await post<any>('/share/track', {
|
|
|
+ audioId: 0,
|
|
|
+ platform,
|
|
|
+ shareCode: inviteCode.value,
|
|
|
+ isInviteShare: true,
|
|
|
+ });
|
|
|
+ if (res?.reward) {
|
|
|
+ uni.showToast({ title: `分享成功,+${res.reward}积分已到账`, icon: 'success' });
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log('[Invite] 记录分享失败', e);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 测试分享得积分
|
|
|
+async function testShareReward() {
|
|
|
+ try {
|
|
|
+ const res = await post<any>('/share/track', {
|
|
|
+ audioId: 0,
|
|
|
+ platform: 'test',
|
|
|
+ shareCode: inviteCode.value,
|
|
|
+ isInviteShare: true,
|
|
|
+ });
|
|
|
+ if (res?.reward) {
|
|
|
+ uni.showToast({ title: `+${res.reward}积分已到账`, icon: 'success' });
|
|
|
+ loadStats();
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: '分享记录成功', icon: 'success' });
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ uni.showToast({ title: '操作成功', icon: 'success' });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 格式化数字
|
|
|
+function formatNumber(num: number): string {
|
|
|
+ if (!num) return '0';
|
|
|
+ return num.toLocaleString();
|
|
|
+}
|
|
|
+
|
|
|
+// 格式化日期
|
|
|
+function formatDate(dateStr: string): string {
|
|
|
+ if (!dateStr) return '';
|
|
|
+ const date = new Date(dateStr);
|
|
|
+ return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
|
|
+}
|
|
|
+
|
|
|
+onShow(() => {
|
|
|
+ loadInviteCode();
|
|
|
+ loadStats();
|
|
|
+ loadRecords();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f3f4f6;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .page {
|
|
|
+ background: #1a1a2e;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* Banner */
|
|
|
+.banner {
|
|
|
+ background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
|
|
|
+ padding: 48rpx 32rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-emoji {
|
|
|
+ font-size: 64rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-title {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-sub {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.85);
|
|
|
+}
|
|
|
+
|
|
|
+/* 邀请码卡片 */
|
|
|
+.invite-card {
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .invite-card {
|
|
|
+ background: #2d2d44;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.invite-card-header {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-card-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #6b7280;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-code-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #f9fafb;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .invite-code-box {
|
|
|
+ background: #374151;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.invite-code {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #4f46e5;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.copy-btn {
|
|
|
+ background: #4f46e5;
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.copy-btn-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-link-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-link-label {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #9ca3af;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-link {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #6b7280;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.invite-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn {
|
|
|
+ flex: 1;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #f3f4f6;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .action-btn {
|
|
|
+ background: #374151;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn.primary {
|
|
|
+ background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #374151;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn.primary .action-btn-text {
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .action-btn-text {
|
|
|
+ color: #f9fafb;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 统计卡片 */
|
|
|
+.stats-card {
|
|
|
+ margin: 0 32rpx 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .stats-card {
|
|
|
+ background: #2d2d44;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value {
|
|
|
+ display: block;
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #4f46e5;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .stat-value {
|
|
|
+ color: #818cf8;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-label {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #9ca3af;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-divider {
|
|
|
+ width: 2rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #e5e7eb;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .stat-divider {
|
|
|
+ background: #374151;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 邀请记录 */
|
|
|
+.records-card {
|
|
|
+ margin: 0 32rpx 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .records-card {
|
|
|
+ background: #2d2d44;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.records-header {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.records-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1f2937;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .records-title {
|
|
|
+ color: #f9fafb;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.record-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.record-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 1rpx solid #f3f4f6;
|
|
|
+}
|
|
|
+
|
|
|
+.record-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .record-item {
|
|
|
+ border-bottom-color: #374151;
|
|
|
+ }
|
|
|
+ .record-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.record-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.record-user {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #1f2937;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .record-user {
|
|
|
+ color: #f9fafb;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.record-date {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #9ca3af;
|
|
|
+ margin-top: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.record-reward-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #10b981;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+/* 空白状态 */
|
|
|
+.empty-card {
|
|
|
+ margin: 0 32rpx 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 48rpx 32rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .empty-card {
|
|
|
+ background: #2d2d44;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.empty-icon {
|
|
|
+ font-size: 64rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #6b7280;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-sub {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #9ca3af;
|
|
|
+ margin-top: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 分享奖励卡片 */
|
|
|
+.share-reward-card {
|
|
|
+ margin: 0 32rpx 24rpx;
|
|
|
+ background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 28rpx;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(251, 191, 36, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .share-reward-card {
|
|
|
+ background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.share-reward-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.share-reward-icon {
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.share-reward-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #92400e;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .share-reward-title {
|
|
|
+ color: #fef3c7;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.share-reward-desc {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #b45309;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .share-reward-desc {
|
|
|
+ color: #fde68a;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.share-reward-btn {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.share-reward-btn-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #92400e;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+/* 规则卡片 */
|
|
|
+.rules-card {
|
|
|
+ margin: 0 32rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .rules-card {
|
|
|
+ background: #2d2d44;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.rules-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1f2937;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .rules-title {
|
|
|
+ color: #f9fafb;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.rule-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-num {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: #4f46e5;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-text {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #6b7280;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-color-scheme: dark) {
|
|
|
+ .rule-text {
|
|
|
+ color: #9ca3af;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|