433 lines
9.7 KiB
Vue
433 lines
9.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="general-code-container">
|
|||
|
|
<!-- 页面标题 -->
|
|||
|
|
<view class="page-header">
|
|||
|
|
<view class="header-left" @click="goBack">
|
|||
|
|
<view class="back-icon">←</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="header-title">通用会员推广码</view>
|
|||
|
|
<view class="header-right" @click="refreshCode">
|
|||
|
|
<view class="refresh-btn">刷新</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 推广码信息 -->
|
|||
|
|
<view class="code-info-section">
|
|||
|
|
<view class="section-title">推广码信息</view>
|
|||
|
|
<view class="info-card">
|
|||
|
|
<view class="info-row">
|
|||
|
|
<view class="info-label">推广码</view>
|
|||
|
|
<view class="info-value">{{ generalCode }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<view class="info-label">生成时间</view>
|
|||
|
|
<view class="info-value">{{ createTime }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<view class="info-label">有效期</view>
|
|||
|
|
<view class="info-value">{{ validityPeriod }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<view class="info-label">使用次数</view>
|
|||
|
|
<view class="info-value">{{ usageCount }}次</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 推广二维码 -->
|
|||
|
|
<view class="qrcode-section">
|
|||
|
|
<view class="section-title">推广二维码</view>
|
|||
|
|
<view class="qrcode-card">
|
|||
|
|
<view class="qrcode-image">
|
|||
|
|
<!-- 模拟二维码图片 -->
|
|||
|
|
<view class="mock-qrcode">
|
|||
|
|
<view class="qrcode-pattern"></view>
|
|||
|
|
<view class="qrcode-text">{{ generalCode }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="qrcode-hint">
|
|||
|
|
这是通用推广二维码，适用于所有渠道的推广活动
|
|||
|
|
</view>
|
|||
|
|
<view class="qrcode-actions">
|
|||
|
|
<view class="action-btn download-btn" @click="downloadQrcode">
|
|||
|
|
下载二维码
|
|||
|
|
</view>
|
|||
|
|
<view class="action-btn share-btn" @click="shareQrcode">
|
|||
|
|
分享二维码
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 使用记录 -->
|
|||
|
|
<view class="usage-record-section">
|
|||
|
|
<view class="section-title">使用记录</view>
|
|||
|
|
<view class="record-card">
|
|||
|
|
<view class="record-header">
|
|||
|
|
<view class="header-item">时间</view>
|
|||
|
|
<view class="header-item">使用人</view>
|
|||
|
|
<view class="header-item">操作</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="record-list">
|
|||
|
|
<view
|
|||
|
|
v-for="(record, index) in usageRecords"
|
|||
|
|
:key="index"
|
|||
|
|
class="record-item"
|
|||
|
|
>
|
|||
|
|
<view class="record-cell">{{ record.time }}</view>
|
|||
|
|
<view class="record-cell">{{ record.user }}</view>
|
|||
|
|
<view class="record-cell">{{ record.action }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="record-footer">
|
|||
|
|
<view class="footer-text">
|
|||
|
|
共 {{ totalRecords }} 条记录，显示最近 {{ usageRecords.length }} 条
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted } from "vue"
|
|||
|
|
|
|||
|
|
// 推广码信息
|
|||
|
|
const generalCode = ref('GC202601290001')
|
|||
|
|
const createTime = ref('2026-01-29 10:00:00')
|
|||
|
|
const validityPeriod = ref('永久有效')
|
|||
|
|
const usageCount = ref(123)
|
|||
|
|
|
|||
|
|
// 使用记录
|
|||
|
|
const usageRecords = ref([
|
|||
|
|
{
|
|||
|
|
time: '2026-01-29 15:30:00',
|
|||
|
|
user: '张三',
|
|||
|
|
action: '扫码注册'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
time: '2026-01-29 14:20:00',
|
|||
|
|
user: '李四',
|
|||
|
|
action: '购买会员'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
time: '2026-01-29 13:10:00',
|
|||
|
|
user: '王五',
|
|||
|
|
action: '扫码注册'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const totalRecords = ref(100)
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// 实际项目中应从接口获取通用推广码信息
|
|||
|
|
// loadGeneralCodeInfo()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 返回上一页
|
|||
|
|
function goBack() {
|
|||
|
|
uni.navigateBack({ delta: 1 })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 刷新推广码
|
|||
|
|
function refreshCode() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '刷新推广码',
|
|||
|
|
content: '刷新推广码后，原推广码将失效，确定要刷新吗？',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.showLoading({ title: '刷新中...' })
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
// 模拟刷新后生成新的推广码
|
|||
|
|
generalCode.value = 'GC' + new Date().getTime().toString().substring(0, 12)
|
|||
|
|
createTime.value = new Date().toLocaleString('zh-CN')
|
|||
|
|
usageCount.value = 0
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '推广码已刷新',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
// 实际项目中应调用接口刷新推广码
|
|||
|
|
// refreshGeneralCode()
|
|||
|
|
}, 1500)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下载二维码
|
|||
|
|
function downloadQrcode() {
|
|||
|
|
uni.showLoading({ title: '下载中...' })
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '二维码已下载',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
// 实际项目中应调用接口下载二维码
|
|||
|
|
// downloadGeneralQrcode()
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 分享二维码
|
|||
|
|
function shareQrcode() {
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
itemList: ['分享到微信', '分享到朋友圈', '复制推广链接'],
|
|||
|
|
success: function(res) {
|
|||
|
|
switch(res.tapIndex) {
|
|||
|
|
case 0:
|
|||
|
|
uni.showToast({ title: '分享到微信', duration: 1000 })
|
|||
|
|
break
|
|||
|
|
case 1:
|
|||
|
|
uni.showToast({ title: '分享到朋友圈', duration: 1000 })
|
|||
|
|
break
|
|||
|
|
case 2:
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: `https://example.com/register?code=${generalCode.value}`,
|
|||
|
|
success: function() {
|
|||
|
|
uni.showToast({ title: '推广链接已复制', duration: 1000 })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
page {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
min-height: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
view {
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: inherit;
|
|||
|
|
}
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
.general-code-container {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 页面头部 */
|
|||
|
|
.page-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 120rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-left {
|
|||
|
|
width: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-icon {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #303133;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-right {
|
|||
|
|
width: 60rpx;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #409eff;
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 通用部分样式 */
|
|||
|
|
.code-info-section,
|
|||
|
|
.qrcode-section,
|
|||
|
|
.usage-record-section {
|
|||
|
|
padding: 32rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin: 0 16rpx 16rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
padding-left: 12rpx;
|
|||
|
|
border-left: 8rpx solid #409eff;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 推广码信息 */
|
|||
|
|
.info-card {
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-row:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-label {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-value {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #303133;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 推广二维码 */
|
|||
|
|
.qrcode-card {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qrcode-image {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mock-qrcode {
|
|||
|
|
width: 300rpx;
|
|||
|
|
height: 300rpx;
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qrcode-pattern {
|
|||
|
|
width: 240rpx;
|
|||
|
|
height: 240rpx;
|
|||
|
|
background-color: #303133;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qrcode-text {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qrcode-hint {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #606266;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qrcode-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
padding: 12rpx 24rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.download-btn {
|
|||
|
|
background-color: #ecf5ff;
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-btn {
|
|||
|
|
background-color: #f0f9eb;
|
|||
|
|
color: #67c23a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 使用记录 */
|
|||
|
|
.record-card {
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
padding-bottom: 16rpx;
|
|||
|
|
border-bottom: 1rpx solid #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-item {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #606266;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-cell {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #303133;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.record-footer {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-text {
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
</style>
|