fnvtk/soul-yongping
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

删除 Kbone 小程序开发技能相关文档，优化项目结构以提升可维护性。

Browse Source
This commit is contained in:
乘风
2026-02-04 11:36:19 +08:00
parent f7808e48db
commit fa9e1e59ce
81 changed files with 16703 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

553
miniprogram/pages/referral/referral.js Normal file
View File

@@ -0,0 +1,553 @@
/**
* Soul创业派对 - 分销中心页
*
* 可见数据：
* - 绑定用户数（当前有效绑定）
* - 通过链接进的人数（总访问量）
* - 带来的付款人数（已转化购买）
* - 收益统计（90%归分发者）
*/
const app = getApp()
Page({
data: {
statusBarHeight: 44,
isLoggedIn: false,
userInfo: null,
// === 核心可见数据 ===
bindingCount: 0, // 绑定用户数（当前有效）
visitCount: 0, // 通过链接进的人数
paidCount: 0, // 带来的付款人数
unboughtCount: 0, // 待购买人数（绑定但未付款）
expiredCount: 0, // 已过期人数
// === 收益数据 ===
earnings: 0, // 已结算收益
pendingEarnings: 0, // 待结算收益
withdrawnEarnings: 0, // 已提现金额
shareRate: 90, // 分成比例（90%）
// === 统计数据 ===
referralCount: 0, // 总推荐人数
expiringCount: 0, // 即将过期人数
// 邀请码
referralCode: '',
// 绑定用户列表
showBindingList: true,
activeTab: 'active',
activeBindings: [],
convertedBindings: [],
expiredBindings: [],
currentBindings: [],
totalBindings: 0,
// 收益明细
earningsDetails: [],
// 海报
showPosterModal: false,
isGeneratingPoster: false
},
onLoad() {
this.setData({ statusBarHeight: app.globalData.statusBarHeight })
this.initData()
},
onShow() {
this.initData()
},
// 初始化数据
async initData() {
const { isLoggedIn, userInfo } = app.globalData
if (isLoggedIn && userInfo) {
// 生成邀请码
const referralCode = userInfo.referralCode || 'SOUL' + (userInfo.id || Date.now().toString(36)).toUpperCase().slice(-6)
// 尝试从API获取真实数据
let realData = null
try {
const res = await app.request('/api/referral/data', {
method: 'GET',
data: { userId: userInfo.id }
})
if (res.success) {
realData = res.data
console.log('[Referral] 获取推广数据成功:', realData)
}
} catch (e) {
console.log('[Referral] 获取推广数据失败，使用本地数据')
}
// 使用真实数据或默认值
let activeBindings = realData?.activeUsers || []
let convertedBindings = realData?.convertedUsers || []
let expiredBindings = realData?.expiredUsers || []
// 兼容旧字段名
if (!activeBindings.length && realData?.activeBindings) {
activeBindings = realData.activeBindings
}
if (!convertedBindings.length && realData?.convertedBindings) {
convertedBindings = realData.convertedBindings
}
if (!expiredBindings.length && realData?.expiredBindings) {
expiredBindings = realData.expiredBindings
}
const expiringCount = activeBindings.filter(b => b.daysRemaining <= 7 && b.daysRemaining > 0).length
// 计算各类统计
const bindingCount = realData?.bindingCount || activeBindings.length
const paidCount = realData?.paidCount || convertedBindings.length
const expiredCount = realData?.expiredCount || expiredBindings.length
const unboughtCount = bindingCount // 绑定中但未付款的
// 格式化用户数据
const formatUser = (user, type) => ({
id: user.id,
nickname: user.nickname || '用户' + (user.id || '').slice(-4),
avatar: user.avatar,
status: type,
daysRemaining: user.daysRemaining || 0,
bindingDate: user.bindingDate ? this.formatDate(user.bindingDate) : '--',
commission: user.commission || 0,
orderAmount: user.orderAmount || 0
})
this.setData({
isLoggedIn: true,
userInfo,
// 核心可见数据
bindingCount,
visitCount: realData?.visitCount || 0,
paidCount,
unboughtCount,
expiredCount,
// 收益数据
earnings: realData?.earnings || 0,
pendingEarnings: realData?.pendingEarnings || 0,
withdrawnEarnings: realData?.withdrawnEarnings || 0,
shareRate: realData?.shareRate || 90,
// 统计
referralCount: realData?.referralCount || realData?.stats?.totalBindings || activeBindings.length + convertedBindings.length,
expiringCount,
referralCode,
activeBindings: activeBindings.map(u => formatUser(u, 'active')),
convertedBindings: convertedBindings.map(u => formatUser(u, 'converted')),
expiredBindings: expiredBindings.map(u => formatUser(u, 'expired')),
currentBindings: activeBindings.map(u => formatUser(u, 'active')),
totalBindings: activeBindings.length + convertedBindings.length + expiredBindings.length,
// 收益明细
earningsDetails: realData?.earningsDetails || []
})
}
},
// 切换Tab
switchTab(e) {
const tab = e.currentTarget.dataset.tab
let currentBindings = []
if (tab === 'active') {
currentBindings = this.data.activeBindings
} else if (tab === 'converted') {
currentBindings = this.data.convertedBindings
} else {
currentBindings = this.data.expiredBindings
}
this.setData({ activeTab: tab, currentBindings })
},
// 切换绑定列表显示
toggleBindingList() {
this.setData({ showBindingList: !this.data.showBindingList })
},
// 复制邀请链接
copyLink() {
const link = `https://soul.quwanzhi.com/?ref=${this.data.referralCode}`
wx.setClipboardData({
data: link,
success: () => wx.showToast({ title: '链接已复制', icon: 'success' })
})
},
// 生成推广海报
async generatePoster() {
wx.showLoading({ title: '生成中...', mask: true })
this.setData({ showPosterModal: true, isGeneratingPoster: true })
try {
const ctx = wx.createCanvasContext('promoPosterCanvas', this)
const { userInfo, earnings, referralCount, distributorShare } = this.data
const userId = userInfo?.id || ''
// 获取小程序码（带推荐人参数）
let qrcodeImage = null
try {
// scene格式：ref=用户ID前20位
const scene = userId ? `ref=${userId.slice(0,20)}` : 'ref=soul'
console.log('[Poster] 请求小程序码, scene:', scene)
const qrRes = await app.request('/api/miniprogram/qrcode', {
method: 'POST',
data: {
scene,
page: 'pages/index/index',
width: 280
}
})
console.log('[Poster] 小程序码响应:', qrRes?.success, qrRes?.image?.length)
if (qrRes && qrRes.success && qrRes.image) {
qrcodeImage = qrRes.image
console.log('[Poster] 小程序码获取成功')
} else {
console.log('[Poster] 响应无效:', qrRes)
}
} catch (e) {
console.error('[Poster] 获取小程序码失败:', e)
}
// 海报尺寸 300x450
const width = 300
const height = 450
// 背景渐变
const grd = ctx.createLinearGradient(0, 0, 0, height)
grd.addColorStop(0, '#0f0c29')
grd.addColorStop(0.5, '#302b63')
grd.addColorStop(1, '#24243e')
ctx.setFillStyle(grd)
ctx.fillRect(0, 0, width, height)
// 顶部装饰
ctx.setFillStyle('#FFD700')
ctx.fillRect(0, 0, width, 5)
// 标题
ctx.setFillStyle('#FFD700')
ctx.setFontSize(20)
ctx.fillText('📚 Soul创业派对', 20, 45)
// 副标题
ctx.setFillStyle('rgba(255,255,255,0.8)')
ctx.setFontSize(12)
ctx.fillText('来自派对房的真实商业故事', 20, 70)
// 书籍介绍区域
ctx.setFillStyle('rgba(255,255,255,0.05)')
ctx.fillRect(15, 90, width - 30, 100)
ctx.setFillStyle('#ffffff')
ctx.setFontSize(14)
ctx.fillText('✨ 62个真实商业案例', 25, 115)
ctx.fillText('💡 私域运营实战经验', 25, 140)
ctx.fillText('🎯 从0到1创业方法论', 25, 165)
// 推广者信息
ctx.setFillStyle('#00CED1')
ctx.setFontSize(13)
ctx.fillText(`推荐人: ${userInfo?.nickname || '创业者'}`, 20, 220)
// 统计数据
ctx.setFillStyle('rgba(255,255,255,0.6)')
ctx.setFontSize(11)
ctx.fillText(`已推荐 ${referralCount} 位好友阅读`, 20, 245)
// 优惠信息
ctx.setFillStyle('rgba(255,215,0,0.15)')
ctx.fillRect(15, 265, width - 30, 50)
ctx.setFillStyle('#FFD700')
ctx.setFontSize(14)
ctx.fillText('🎁 专属福利', 25, 290)
ctx.setFillStyle('#ffffff')
ctx.setFontSize(12)
ctx.fillText('通过此码购买立享5%优惠', 25, 308)
// 底部区域
ctx.setFillStyle('rgba(0,206,209,0.1)')
ctx.fillRect(0, height - 80, width, 80)
// 底部提示
ctx.setFillStyle('#ffffff')
ctx.setFontSize(13)
ctx.fillText('长按识别 立即购买', 20, height - 50)
ctx.setFillStyle('rgba(255,255,255,0.6)')
ctx.setFontSize(11)
ctx.fillText('扫码立即阅读', 20, height - 28)
// 绘制小程序码
const drawQRCode = () => {
return new Promise((resolve) => {
if (qrcodeImage) {
const fs = wx.getFileSystemManager()
const filePath = `${wx.env.USER_DATA_PATH}/qrcode_promo_${Date.now()}.png`
const base64Data = qrcodeImage.replace(/^data:image\/\w+;base64,/, '')
fs.writeFile({
filePath,
data: base64Data,
encoding: 'base64',
success: () => {
ctx.drawImage(filePath, width - 75, height - 70, 60, 60)
resolve()
},
fail: () => {
this.drawQRPlaceholder(ctx, width, height)
resolve()
}
})
} else {
this.drawQRPlaceholder(ctx, width, height)
resolve()
}
})
}
await drawQRCode()
ctx.draw(true, () => {
wx.hideLoading()
this.setData({ isGeneratingPoster: false })
})
} catch (e) {
console.error('生成海报失败:', e)
wx.hideLoading()
wx.showToast({ title: '生成失败', icon: 'none' })
this.setData({ showPosterModal: false, isGeneratingPoster: false })
}
},
// 绘制小程序码占位符
drawQRPlaceholder(ctx, width, height) {
ctx.setFillStyle('#ffffff')
ctx.beginPath()
ctx.arc(width - 45, height - 40, 30, 0, Math.PI * 2)
ctx.fill()
ctx.setFillStyle('#00CED1')
ctx.setFontSize(9)
ctx.fillText('扫码', width - 52, height - 42)
ctx.fillText('购买', width - 52, height - 30)
},
// 关闭海报弹窗
closePosterModal() {
this.setData({ showPosterModal: false })
},
// 保存海报
savePoster() {
wx.canvasToTempFilePath({
canvasId: 'promoPosterCanvas',
success: (res) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
wx.showToast({ title: '已保存到相册', icon: 'success' })
this.setData({ showPosterModal: false })
},
fail: (err) => {
if (err.errMsg.includes('auth deny')) {
wx.showModal({
title: '提示',
content: '需要相册权限才能保存海报',
confirmText: '去设置',
success: (res) => {
if (res.confirm) {
wx.openSetting()
}
}
})
} else {
wx.showToast({ title: '保存失败', icon: 'none' })
}
}
})
},
fail: () => {
wx.showToast({ title: '生成图片失败', icon: 'none' })
}
}, this)
},
// 阻止冒泡
stopPropagation() {},
// 分享到朋友圈 - 随机文案
shareToMoments() {
// 10条随机文案，基于书的内容
const shareTexts = [
`🔥 在派对房里听到的真实故事，比虚构的小说精彩100倍！\n\n电动车出租月入5万、私域一年赚1000万、一个人的公司月入10万...\n\n62个真实案例，搜"Soul创业派对"小程序看全部！\n\n#创业 #私域 #商业`,
`💡 今天终于明白：会赚钱的人，都在用"流量杠杆"\n\n抖音、Soul、飞书...同一套内容，撬动不同平台的流量。\n\n《Soul创业派对》里的实战方法，受用终身！\n\n#流量 #副业 #创业派对`,
`📚 一个70后大健康私域，一个月150万流水是怎么做到的？\n\n答案在《Soul创业派对》第9章，全是干货。\n\n搜小程序"Soul创业派对"，我在里面等你\n\n#大健康 #私域运营 #真实案例`,
`🎯 "分钱不是分你的钱，是分不属于对方的钱"\n\n这句话改变了我对商业合作的认知。\n\n推荐《Soul创业派对》，创业者必读！\n\n#云阿米巴 #商业思维 #创业`,
`✨ 资源整合高手的社交方法论，在派对房里学到了\n\n"先让对方赚到钱，自己才能长久赚钱"\n\n这本《Soul创业派对》，每章都是实战经验\n\n#资源整合 #社交 #创业故事`,
`🚀 AI工具推广：一个隐藏的高利润赛道\n\n客单价高、复购率高、需求旺盛...\n\n《Soul创业派对》里的商业机会，你发现了吗？\n\n#AI #副业 #商业机会`,
`💰 美业整合：一个人的公司如何月入十万？\n\n不开店、不囤货、轻资产运营...\n\n《Soul创业派对》告诉你答案！\n\n#美业 #轻创业 #月入十万`,
`🌟 3000万流水是怎么跑出来的？\n\n不是靠运气，是靠系统。\n\n《Soul创业派对》里的电商底层逻辑，值得反复看\n\n#电商 #创业 #商业系统`,
`📖 "人与人之间的关系，归根结底就三个东西：利益、情感、价值观"\n\n在派对房里聊出的金句，都在《Soul创业派对》里\n\n#人性 #商业 #创业派对`,
`🔔 未来职业的三个方向：技术型、资源型、服务型\n\n你属于哪一种？\n\n《Soul创业派对》帮你找到答案！\n\n#职业规划 #创业 #未来`
]
// 随机选择一条文案
const randomIndex = Math.floor(Math.random() * shareTexts.length)
const shareText = shareTexts[randomIndex]
wx.setClipboardData({
data: shareText,
success: () => {
wx.showModal({
title: '文案已复制',
content: '请打开微信朋友圈，粘贴分享文案，配合推广海报一起发布效果更佳！\n\n再次点击可获取新的随机文案',
showCancel: false,
confirmText: '去发朋友圈'
})
}
})
},
// 提现 - 直接到微信零钱（无门槛）
async handleWithdraw() {
const pendingEarnings = parseFloat(this.data.pendingEarnings) || 0
if (pendingEarnings <= 0) {
wx.showToast({ title: '暂无可提现收益', icon: 'none' })
return
}
// 确认提现
wx.showModal({
title: '确认提现',
content: `将提现 ¥${pendingEarnings.toFixed(2)} 到您的微信零钱`,
confirmText: '立即提现',
success: async (res) => {
if (res.confirm) {
await this.doWithdraw(pendingEarnings)
}
}
})
},
// 执行提现
async doWithdraw(amount) {
wx.showLoading({ title: '提现中...' })
try {
const userId = app.globalData.userInfo?.id
if (!userId) {
wx.hideLoading()
wx.showToast({ title: '请先登录', icon: 'none' })
return
}
const res = await app.request('/api/withdraw', {
method: 'POST',
data: { userId, amount }
})
wx.hideLoading()
if (res.success) {
wx.showModal({
title: '提现成功 🎉',
content: `¥${amount.toFixed(2)} 已到账您的微信零钱`,
showCancel: false,
confirmText: '好的'
})
// 刷新数据
this.initData()
} else {
if (res.needBind) {
wx.showModal({
title: '需要绑定微信',
content: '请先在设置中绑定微信账号后再提现',
confirmText: '去绑定',
success: (modalRes) => {
if (modalRes.confirm) {
wx.navigateTo({ url: '/pages/settings/settings' })
}
}
})
} else {
wx.showToast({ title: res.error || '提现失败', icon: 'none' })
}
}
} catch (e) {
wx.hideLoading()
console.error('[Referral] 提现失败:', e)
wx.showToast({ title: '提现失败，请重试', icon: 'none' })
}
},
// 显示通知
showNotification() {
wx.showToast({ title: '暂无新消息', icon: 'none' })
},
// 显示设置
showSettings() {
wx.showActionSheet({
itemList: ['自动提现设置', '收益通知设置'],
success: (res) => {
if (res.tapIndex === 0) {
wx.showToast({ title: '自动提现功能开发中', icon: 'none' })
} else {
wx.showToast({ title: '通知设置开发中', icon: 'none' })
}
}
})
},
// 分享 - 带推荐码
onShareAppMessage() {
return {
title: '📚 Soul创业派对 - 来自派对房的真实商业故事',
path: `/pages/index/index?ref=${this.data.referralCode}`,
imageUrl: '/assets/share-cover.png'
}
},
// 分享到朋友圈
onShareTimeline() {
return {
title: `Soul创业派对 - 62个真实商业案例`,
query: `ref=${this.data.referralCode}`
}
},
goBack() {
wx.navigateBack()
},
// 格式化日期
formatDate(dateStr) {
if (!dateStr) return '--'
const d = new Date(dateStr)
const month = (d.getMonth() + 1).toString().padStart(2, '0')
const day = d.getDate().toString().padStart(2, '0')
return `${month}-${day}`
}
})

4
miniprogram/pages/referral/referral.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationStyle": "custom"
}

223
miniprogram/pages/referral/referral.wxml Normal file
View File

@@ -0,0 +1,223 @@
<!--分销中心 - 按照Web版本1:1还原-->
<view class="page">
<!-- 导航栏 -->
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
<view class="nav-back" bindtap="goBack">
<text class="back-icon">‹</text>
</view>
<text class="nav-title">推广中心</text>
<view class="nav-right">
<view class="nav-btn" bindtap="showNotification">🔔</view>
<view class="nav-btn" bindtap="showSettings">⚙️</view>
</view>
</view>
<view style="height: {{statusBarHeight + 44}}px;"></view>
<view class="content">
<!-- 过期提醒横幅 -->
<view class="expiring-banner" wx:if="{{expiringCount > 0}}">
<view class="banner-icon">⚠️</view>
<view class="banner-content">
<text class="banner-title">{{expiringCount}} 位用户绑定即将过期</text>
<text class="banner-desc">30天内未付款将解除绑定关系</text>
</view>
</view>
<!-- 收益卡片 -->
<view class="earnings-card">
<view class="earnings-bg"></view>
<view class="earnings-main">
<view class="earnings-header">
<view class="earnings-left">
<view class="wallet-icon">💰</view>
<view class="earnings-info">
<text class="earnings-label">累计收益</text>
<text class="commission-rate">{{shareRate}}% 返利</text>
</view>
</view>
<view class="earnings-right">
<text class="earnings-value">¥{{earnings}}</text>
<text class="pending-text">待结算: ¥{{pendingEarnings}}</text>
</view>
</view>
<view class="earnings-detail">
<text class="detail-item">已提现: ¥{{withdrawnEarnings}}</text>
</view>
<view class="withdraw-btn {{pendingEarnings <= 0 ? 'btn-disabled' : ''}}" bindtap="handleWithdraw">
{{pendingEarnings <= 0 ? '暂无收益' : '立即提现 ¥' + pendingEarnings}}
</view>
</view>
</view>
<!-- 核心数据统计（重点可见数据） -->
<view class="stats-grid">
<view class="stat-card highlight">
<text class="stat-value brand">{{bindingCount}}</text>
<text class="stat-label">绑定中</text>
<text class="stat-tip">当前有效绑定</text>
</view>
<view class="stat-card highlight">
<text class="stat-value gold">{{paidCount}}</text>
<text class="stat-label">已付款</text>
<text class="stat-tip">成功转化</text>
</view>
<view class="stat-card">
<text class="stat-value orange">{{unboughtCount}}</text>
<text class="stat-label">待购买</text>
<text class="stat-tip">绑定未付款</text>
</view>
<view class="stat-card">
<text class="stat-value gray">{{expiredCount}}</text>
<text class="stat-label">已过期</text>
<text class="stat-tip">绑定已失效</text>
</view>
</view>
<!-- 访问量统计 -->
<view class="visit-stat">
<text class="visit-label">总访问量</text>
<text class="visit-value">{{visitCount}}</text>
<text class="visit-tip">人通过你的链接进入</text>
</view>
<!-- 推广规则 -->
<view class="rules-card">
<view class="rules-header">
<view class="rules-icon">📋</view>
<text class="rules-title">推广规则</text>
</view>
<view class="rules-list">
<text class="rule-item">• <text class="brand">链接带ID</text>：谁发的链接，进的人就绑谁</text>
<text class="rule-item">• <text class="brand">一级、一月</text>：只有一级分销，绑定有效期30天</text>
<text class="rule-item">• <text class="orange">长期不发</text>：别人发得多，过期后客户会被「抢走」</text>
<text class="rule-item">• <text class="gold">每天发</text>：持续发的人绑定续期，收益越来越高</text>
<text class="rule-item">• <text class="brand">{{shareRate}}%给分发</text>：好友付款后，你得 {{shareRate}}% 收益</text>
</view>
</view>
<!-- 绑定用户列表 -->
<view class="binding-card">
<view class="binding-header" bindtap="toggleBindingList">
<view class="binding-title">
<text class="binding-icon">👥</text>
<text class="title-text">绑定用户</text>
<text class="binding-count">({{totalBindings}})</text>
</view>
<text class="toggle-icon">{{showBindingList ? '▲' : '▼'}}</text>
</view>
<block wx:if="{{showBindingList}}">
<!-- Tab切换 -->
<view class="binding-tabs">
<view
class="tab-item {{activeTab === 'active' ? 'tab-active' : ''}}"
bindtap="switchTab"
data-tab="active"
>绑定中 ({{activeBindings.length}})</view>
<view
class="tab-item {{activeTab === 'converted' ? 'tab-active' : ''}}"
bindtap="switchTab"
data-tab="converted"
>已付款 ({{convertedBindings.length}})</view>
<view
class="tab-item {{activeTab === 'expired' ? 'tab-active' : ''}}"
bindtap="switchTab"
data-tab="expired"
>已过期 ({{expiredBindings.length}})</view>
</view>
<!-- 用户列表 -->
<view class="binding-list">
<block wx:if="{{currentBindings.length === 0}}">
<view class="empty-state">
<text class="empty-icon">👤</text>
<text class="empty-text">暂无用户</text>
</view>
</block>
<block wx:else>
<view
class="binding-item"
wx:for="{{currentBindings}}"
wx:key="id"
>
<view class="user-avatar {{item.status === 'converted' ? 'avatar-converted' : item.status === 'expired' ? 'avatar-expired' : ''}}">
<text wx:if="{{item.status === 'converted'}}">✓</text>
<text wx:elif="{{item.status === 'expired'}}">⏰</text>
<text wx:else>{{item.nickname[0] || '用'}}</text>
</view>
<view class="user-info">
<text class="user-name">{{item.nickname || '匿名用户'}}</text>
<text class="user-time">绑定于 {{item.bindingDate}}</text>
</view>
<view class="user-status">
<block wx:if="{{item.status === 'converted'}}">
<text class="status-amount">+¥{{item.commission}}</text>
<text class="status-order">订单 ¥{{item.orderAmount}}</text>
</block>
<block wx:else>
<text class="status-tag {{item.daysRemaining <= 3 ? 'tag-red' : item.daysRemaining <= 7 ? 'tag-orange' : 'tag-green'}}">
{{item.status === 'expired' ? '已过期' : item.daysRemaining + '天'}}
</text>
</block>
</view>
</view>
</block>
</view>
</block>
</view>
<!-- 分享按钮 -->
<view class="share-section">
<view class="share-item" bindtap="generatePoster">
<view class="share-icon poster">🖼️</view>
<view class="share-info">
<text class="share-title">生成推广海报</text>
<text class="share-desc">一键生成精美海报分享</text>
</view>
<text class="share-arrow">→</text>
</view>
<button class="share-item share-btn-wechat" open-type="share">
<view class="share-icon wechat">💬</view>
<view class="share-info">
<text class="share-title">分享给好友</text>
<text class="share-desc">直接发送小程序卡片</text>
</view>
<text class="share-arrow">→</text>
</button>
<view class="share-item" bindtap="shareToMoments">
<view class="share-icon link">📝</view>
<view class="share-info">
<text class="share-title">复制朋友圈文案</text>
<text class="share-desc">一键复制推广文案</text>
</view>
<text class="share-arrow">→</text>
</view>
</view>
</view>
<!-- 海报生成弹窗 -->
<view class="modal-overlay" wx:if="{{showPosterModal}}" bindtap="closePosterModal">
<view class="modal-content poster-modal" catchtap="stopPropagation">
<view class="modal-header">
<text class="modal-title">推广海报</text>
<view class="modal-close" bindtap="closePosterModal">✕</view>
</view>
<!-- 海报预览 -->
<view class="poster-preview">
<canvas canvas-id="promoPosterCanvas" class="poster-canvas" style="width: 300px; height: 450px;"></canvas>
</view>
<view class="poster-actions">
<view class="poster-btn btn-save" bindtap="savePoster">
<text class="btn-icon">💾</text>
<text>保存到相册</text>
</view>
</view>
<text class="poster-tip">保存后可分享到朋友圈或发送给好友</text>
</view>
</view>
</view>

148
miniprogram/pages/referral/referral.wxss Normal file
View File

@@ -0,0 +1,148 @@
/* 分销中心页面样式 - 1:1还原Web版本 */
.page { min-height: 100vh; background: #000; padding-bottom: 64rpx; }
/* 导航栏 */
.nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0,0,0,0.9); backdrop-filter: blur(40rpx); display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; height: 88rpx; }
.nav-back { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.back-icon { font-size: 40rpx; color: rgba(255,255,255,0.6); font-weight: 300; }
.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; }
.nav-right { display: flex; gap: 16rpx; }
.nav-btn { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; }
.content { padding: 24rpx; width: 100%; box-sizing: border-box; }
/* 过期提醒横幅 */
.expiring-banner { display: flex; align-items: center; gap: 24rpx; padding: 24rpx; background: rgba(255,165,0,0.1); border: 2rpx solid rgba(255,165,0,0.3); border-radius: 24rpx; margin-bottom: 24rpx; }
.banner-icon { width: 80rpx; height: 80rpx; background: rgba(255,165,0,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40rpx; flex-shrink: 0; }
.banner-content { flex: 1; }
.banner-title { font-size: 28rpx; font-weight: 500; color: #fff; display: block; }
.banner-desc { font-size: 24rpx; color: rgba(255,165,0,0.8); margin-top: 4rpx; display: block; }
/* 收益卡片 */
.earnings-card { position: relative; background: linear-gradient(135deg, rgba(0,206,209,0.15) 0%, rgba(32,178,170,0.1) 50%, rgba(0,139,139,0.05) 100%); border: 2rpx solid rgba(0,206,209,0.2); border-radius: 32rpx; padding: 40rpx; margin-bottom: 24rpx; overflow: hidden; width: 100%; box-sizing: border-box; }
.earnings-bg { position: absolute; top: -50rpx; right: -50rpx; width: 200rpx; height: 200rpx; background: rgba(0,206,209,0.1); border-radius: 50%; filter: blur(60rpx); }
.earnings-main { position: relative; }
.earnings-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32rpx; }
.earnings-left { display: flex; align-items: center; gap: 16rpx; }
.wallet-icon { width: 80rpx; height: 80rpx; background: rgba(0,206,209,0.2); border-radius: 20rpx; display: flex; align-items: center; justify-content: center; font-size: 40rpx; }
.earnings-info { display: flex; flex-direction: column; gap: 4rpx; }
.earnings-label { font-size: 24rpx; color: rgba(255,255,255,0.6); }
.commission-rate { font-size: 24rpx; color: #00CED1; font-weight: 500; }
.earnings-right { text-align: right; }
.earnings-value { font-size: 56rpx; font-weight: 700; color: #fff; display: block; }
.pending-text { font-size: 22rpx; color: rgba(255,255,255,0.5); }
.withdraw-btn { padding: 24rpx; background: #00CED1; color: #000; font-size: 28rpx; font-weight: 600; text-align: center; border-radius: 24rpx; }
.withdraw-btn.btn-disabled { background: rgba(0,206,209,0.3); color: rgba(0,0,0,0.5); }
/* 收益详情 */
.earnings-detail { padding-top: 16rpx; border-top: 2rpx solid rgba(255,255,255,0.1); margin-bottom: 24rpx; }
.detail-item { font-size: 24rpx; color: rgba(255,255,255,0.5); }
/* 核心数据统计 */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
.stat-card { background: #1c1c1e; border-radius: 24rpx; padding: 28rpx 20rpx; text-align: center; position: relative; }
.stat-card.highlight { background: linear-gradient(135deg, rgba(0,206,209,0.1) 0%, rgba(0,206,209,0.05) 100%); border: 2rpx solid rgba(0,206,209,0.2); }
.stat-value { font-size: 48rpx; font-weight: 700; color: #fff; display: block; }
.stat-value.brand { color: #00CED1; }
.stat-value.gold { color: #FFD700; }
.stat-value.orange { color: #FFA500; }
.stat-value.gray { color: #9E9E9E; }
.stat-label { font-size: 24rpx; color: rgba(255,255,255,0.7); margin-top: 8rpx; display: block; font-weight: 500; }
.stat-tip { font-size: 20rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; display: block; }
/* 访问量统计 */
.visit-stat { display: flex; align-items: center; justify-content: center; gap: 12rpx; padding: 20rpx 32rpx; background: rgba(255,255,255,0.05); border-radius: 16rpx; margin-bottom: 24rpx; }
.visit-label { font-size: 24rpx; color: rgba(255,255,255,0.5); }
.visit-value { font-size: 32rpx; font-weight: 700; color: #00CED1; }
.visit-tip { font-size: 24rpx; color: rgba(255,255,255,0.5); }
/* 推广规则 */
.rules-card { background: rgba(0,206,209,0.05); border: 2rpx solid rgba(0,206,209,0.2); border-radius: 24rpx; padding: 24rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
.rules-header { display: flex; align-items: center; gap: 16rpx; margin-bottom: 16rpx; }
.rules-icon { width: 56rpx; height: 56rpx; background: rgba(0,206,209,0.2); border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; }
.rules-title { font-size: 28rpx; font-weight: 500; color: #fff; }
.rules-list { padding-left: 8rpx; }
.rule-item { font-size: 24rpx; color: rgba(255,255,255,0.6); line-height: 2; display: block; margin-bottom: 4rpx; }
.rule-item .gold { color: #FFD700; font-weight: 500; }
.rule-item .brand { color: #00CED1; font-weight: 500; }
.rule-item .orange { color: #FFA500; font-weight: 500; }
/* 绑定用户卡片 */
.binding-card { background: #1c1c1e; border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
.binding-header { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
.binding-title { display: flex; align-items: center; gap: 12rpx; }
.binding-icon { font-size: 36rpx; }
.title-text { font-size: 30rpx; font-weight: 600; color: #fff; }
.binding-count { font-size: 26rpx; color: rgba(255,255,255,0.5); }
.toggle-icon { font-size: 24rpx; color: rgba(255,255,255,0.5); }
/* Tab切换 */
.binding-tabs { display: flex; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
.tab-item { flex: 1; padding: 24rpx 0; text-align: center; font-size: 26rpx; color: rgba(255,255,255,0.5); position: relative; }
.tab-item.tab-active { color: #00CED1; }
.tab-item.tab-active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80rpx; height: 4rpx; background: #00CED1; border-radius: 4rpx; }
/* 用户列表 */
.binding-list { max-height: 640rpx; overflow-y: auto; }
.empty-state { padding: 80rpx 0; text-align: center; }
.empty-icon { font-size: 64rpx; display: block; margin-bottom: 16rpx; }
.empty-text { font-size: 26rpx; color: rgba(255,255,255,0.5); }
.binding-item { display: flex; align-items: center; padding: 24rpx 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
.binding-item:last-child { border-bottom: none; }
.user-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; color: #00CED1; margin-right: 24rpx; flex-shrink: 0; }
.user-avatar.avatar-converted { background: rgba(76,175,80,0.2); color: #4CAF50; }
.user-avatar.avatar-expired { background: rgba(158,158,158,0.2); color: #9E9E9E; }
.user-info { flex: 1; }
.user-name { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
.user-time { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
.user-status { text-align: right; }
.status-amount { font-size: 28rpx; color: #4CAF50; font-weight: 600; display: block; }
.status-order { font-size: 22rpx; color: rgba(255,255,255,0.5); }
.status-tag { font-size: 22rpx; padding: 8rpx 16rpx; border-radius: 16rpx; }
.status-tag.tag-green { background: rgba(76,175,80,0.2); color: #4CAF50; }
.status-tag.tag-orange { background: rgba(255,165,0,0.2); color: #FFA500; }
.status-tag.tag-red { background: rgba(244,67,54,0.2); color: #F44336; }
/* 邀请码卡片 */
.invite-card { background: #1c1c1e; border-radius: 32rpx; padding: 32rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; }
.invite-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
.invite-title { font-size: 28rpx; font-weight: 600; color: #fff; }
.invite-code-box { background: rgba(0,206,209,0.15); padding: 12rpx 24rpx; border-radius: 16rpx; }
.invite-code { font-size: 26rpx; font-weight: 600; color: #00CED1; font-family: monospace; letter-spacing: 2rpx; }
.invite-tip { font-size: 24rpx; color: rgba(255,255,255,0.5); }
.invite-tip .gold { color: #FFD700; }
.invite-tip .brand { color: #00CED1; }
/* 分享区域 */
.share-section { display: flex; flex-direction: column; gap: 16rpx; width: 100%; }
.share-item { display: flex; align-items: center; background: #1c1c1e; border-radius: 24rpx; padding: 24rpx 32rpx; border: none; margin: 0; text-align: left; width: 100%; box-sizing: border-box; }
.share-item::after { border: none; }
.share-icon { width: 96rpx; height: 96rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; font-size: 48rpx; margin-right: 24rpx; flex-shrink: 0; }
.share-icon.poster { background: rgba(103,58,183,0.2); }
.share-icon.wechat { background: rgba(7,193,96,0.2); }
.share-icon.link { background: rgba(158,158,158,0.2); }
.share-info { flex: 1; text-align: left; }
.share-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; text-align: left; }
.share-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; text-align: left; }
.share-arrow { font-size: 28rpx; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.share-btn-wechat { line-height: normal; font-size: inherit; padding: 24rpx 32rpx !important; margin: 0 !important; width: 100% !important; }
/* 弹窗 */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(20rpx); display: flex; align-items: flex-end; justify-content: center; z-index: 1000; }
.modal-content { width: 100%; max-width: 750rpx; background: #1c1c1e; border-radius: 48rpx 48rpx 0 0; padding: 48rpx; padding-bottom: calc(48rpx + env(safe-area-inset-bottom)); animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32rpx; }
.modal-title { font-size: 36rpx; font-weight: 600; color: #fff; }
.modal-close { width: 64rpx; height: 64rpx; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: rgba(255,255,255,0.6); }
/* 海报弹窗 */
.poster-modal { padding-bottom: calc(64rpx + env(safe-area-inset-bottom)); }
.poster-preview { display: flex; justify-content: center; margin: 32rpx 0; padding: 24rpx; background: rgba(0,0,0,0.3); border-radius: 24rpx; }
.poster-canvas { border-radius: 16rpx; box-shadow: 0 16rpx 48rpx rgba(0,0,0,0.5); }
.poster-actions { display: flex; gap: 24rpx; margin-bottom: 24rpx; }
.poster-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12rpx; padding: 28rpx; border-radius: 24rpx; font-size: 30rpx; font-weight: 500; color: #fff; }
.btn-save { background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); }
.btn-icon { font-size: 32rpx; }
.poster-tip { font-size: 24rpx; color: rgba(255,255,255,0.4); text-align: center; display: block; }