370 lines
8.1 KiB
Vue
370 lines
8.1 KiB
Vue
<template>
|
|
<view class="promotion-code-page">
|
|
<!-- 推广码卡片 -->
|
|
<view class="code-card gradient-bg">
|
|
<view class="card-header">
|
|
<text class="card-title">我的推广码</text>
|
|
<text class="card-subtitle">分享给好友即可获得佣金</text>
|
|
</view>
|
|
|
|
<view class="code-display">
|
|
<text class="code-text">{{ promotionCode }}</text>
|
|
</view>
|
|
|
|
<view class="code-actions">
|
|
<button class="action-btn primary" @click="copyCode">
|
|
<text class="btn-icon">📋</text>
|
|
<text>复制推广码</text>
|
|
</button>
|
|
<button class="action-btn" @click="shareCode">
|
|
<text class="btn-icon">📤</text>
|
|
<text>分享推广码</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 推广二维码 -->
|
|
<view class="qrcode-section">
|
|
<view class="section-header">
|
|
<text class="section-title">推广二维码</text>
|
|
</view>
|
|
<view class="qrcode-container">
|
|
<image class="qrcode-image" :src="qrcodeUrl" mode="aspectFit"></image>
|
|
<button class="save-btn" @click="saveQrcode">保存二维码</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 推广数据 -->
|
|
<view class="stats-section">
|
|
<view class="section-header">
|
|
<text class="section-title">推广数据</text>
|
|
</view>
|
|
<view class="stats-grid">
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ stats.viewCount }}</text>
|
|
<text class="stat-label">浏览次数</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ stats.registerCount }}</text>
|
|
<text class="stat-label">注册人数</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ stats.orderCount }}</text>
|
|
<text class="stat-label">成交订单</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-value">{{ stats.conversionRate }}%</text>
|
|
<text class="stat-label">转化率</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 推广链接 -->
|
|
<view class="link-section">
|
|
<view class="section-header">
|
|
<text class="section-title">推广链接</text>
|
|
</view>
|
|
<view class="link-item">
|
|
<text class="link-text">{{ promotionLink }}</text>
|
|
<button class="copy-link-btn" @click="copyLink">复制</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { distributorApi } from '@/api/index.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
promotionCode: '',
|
|
qrcodeUrl: '',
|
|
promotionLink: '',
|
|
stats: {
|
|
viewCount: 0,
|
|
registerCount: 0,
|
|
orderCount: 0,
|
|
conversionRate: 0
|
|
}
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.loadPromotionData()
|
|
},
|
|
|
|
methods: {
|
|
async loadPromotionData() {
|
|
try {
|
|
const res = await distributorApi.getPromotionCode()
|
|
if (res.code === 200 && res.data) {
|
|
this.promotionCode = res.data.code || ''
|
|
this.promotionLink = res.data.link || ''
|
|
this.qrcodeUrl = res.data.qrcodeUrl || ''
|
|
this.stats = {
|
|
viewCount: res.data.viewCount || 0,
|
|
registerCount: res.data.registerCount || 0,
|
|
orderCount: res.data.orderCount || 0,
|
|
conversionRate: res.data.conversionRate || 0
|
|
}
|
|
} else {
|
|
// 模拟数据
|
|
this.promotionCode = 'XZ' + Date.now().toString().slice(-8)
|
|
this.qrcodeUrl = '/static/images/qrcode-placeholder.png'
|
|
this.promotionLink = `https://xz.com/register?code=${this.promotionCode}`
|
|
this.stats = {
|
|
viewCount: 128,
|
|
registerCount: 15,
|
|
orderCount: 8,
|
|
conversionRate: 6.25
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('加载推广数据失败:', error)
|
|
uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
|
|
}
|
|
},
|
|
|
|
copyCode() {
|
|
uni.setClipboardData({
|
|
data: this.promotionCode,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '推广码已复制',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
copyLink() {
|
|
uni.setClipboardData({
|
|
data: this.promotionLink,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '链接已复制',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
shareCode() {
|
|
// 微信小程序使用转发功能，需要在页面配置中启用
|
|
uni.showModal({
|
|
title: '分享推广码',
|
|
content: '请点击右上角"..."按钮，选择"转发"分享给好友',
|
|
showCancel: false
|
|
})
|
|
},
|
|
|
|
// 微信小程序转发配置
|
|
onShareAppMessage() {
|
|
return {
|
|
title: `习正陪伴 - 我的推广码：${this.promotionCode}`,
|
|
path: `/pages/index/index?code=${this.promotionCode}`,
|
|
imageUrl: this.qrcodeUrl
|
|
}
|
|
},
|
|
|
|
// 微信小程序分享到朋友圈
|
|
onShareTimeline() {
|
|
return {
|
|
title: `习正陪伴 - 我的推广码：${this.promotionCode}`,
|
|
query: `code=${this.promotionCode}`,
|
|
imageUrl: this.qrcodeUrl
|
|
}
|
|
},
|
|
|
|
saveQrcode() {
|
|
uni.downloadFile({
|
|
url: this.qrcodeUrl,
|
|
success: (res) => {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '二维码已保存',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.promotion-code-page {
|
|
min-height: 100vh;
|
|
background: #f0f9f7;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
|
|
}
|
|
|
|
.code-card {
|
|
border-radius: 20rpx;
|
|
padding: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(125, 211, 192, 0.3);
|
|
}
|
|
|
|
.card-header {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.card-title {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.card-subtitle {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.code-display {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
text-align: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.code-text {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
.code-actions {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10rpx;
|
|
padding: 24rpx;
|
|
border-radius: 12rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
border: none;
|
|
|
|
&.primary {
|
|
background: #ffffff;
|
|
color: #7dd3c0;
|
|
}
|
|
}
|
|
|
|
.btn-icon {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.qrcode-section, .stats-section, .link-section {
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.qrcode-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.qrcode-image {
|
|
width: 400rpx;
|
|
height: 400rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.save-btn {
|
|
width: 300rpx;
|
|
padding: 20rpx;
|
|
background: #7dd3c0;
|
|
color: #ffffff;
|
|
border-radius: 12rpx;
|
|
font-size: 28rpx;
|
|
border: none;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
background: #f0f9f7;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.stat-value {
|
|
display: block;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #7dd3c0;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.link-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
padding: 20rpx;
|
|
background: #f0f9f7;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.link-text {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.copy-link-btn {
|
|
padding: 16rpx 32rpx;
|
|
background: #7dd3c0;
|
|
color: #ffffff;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
border: none;
|
|
}
|
|
</style>
|