442 lines
8.7 KiB
Plaintext
442 lines
8.7 KiB
Plaintext
<template>
|
|
<view class="member-code-page">
|
|
<!-- 沉浸式状态栏 -->
|
|
<view class="status-bar"></view>
|
|
|
|
<!-- 顶部导航 -->
|
|
<view class="nav-bar">
|
|
<image class="back-icon" src="/static/icons/back.svg" @click="Service.GoPageBack()" mode="aspectFit" />
|
|
<text class="nav-title">会员码</text>
|
|
<view class="nav-placeholder"></view>
|
|
</view>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<view class="content">
|
|
<!-- 会员卡片 -->
|
|
<view class="member-card">
|
|
<!-- 用户信息 -->
|
|
<view class="user-section">
|
|
<image class="user-avatar" :src="Service.GetMateUrlByImg(userData.headImg)" mode="aspectFill" />
|
|
<view class="user-info">
|
|
<text class="user-name">{{ userData.nick }}</text>
|
|
<!-- ID和会员等级标签在一排 -->
|
|
<view class="tags-row">
|
|
<view class="user-id-tag" @click="copyMemberId">
|
|
<text class="ri-vip-crown-2-fill id-icon"></text>
|
|
<text class="id-text">ID: {{ userData.userNo }}</text>
|
|
<text class="ri-file-copy-line id-copy"></text>
|
|
</view>
|
|
<!-- <view class="user-member-tag">
|
|
<text class="ri-vip-crown-fill member-icon"></text>
|
|
<text class="member-text">黄金会员</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分割线 -->
|
|
<view class="divider"></view>
|
|
|
|
<!-- 条形码区域 -->
|
|
<view class="barcode-section">
|
|
<u-barcode :value="code" :displayValue='false' :width="300" :height="100" />
|
|
<text class="barcode-number">{{ code }}</text>
|
|
</view>
|
|
|
|
<!-- 二维码区域 -->
|
|
<view class="qrcode-section">
|
|
<view class="qrcode-wrapper" >
|
|
<view class="qrcode-placeholder">
|
|
<up-qrcode cid="ex1" :size="180" :val="erCode"></up-qrcode>
|
|
</view>
|
|
</view>
|
|
<text class="code-tip">向商家出示会员码，扫码享受积分优惠</text>
|
|
</view>
|
|
|
|
<!-- 刷新提示 -->
|
|
<view class="refresh-section">
|
|
<text class="ri-time-line refresh-icon"></text>
|
|
<text class="refresh-text">{{ refreshCountdown }}秒后自动刷新</text>
|
|
<view class="refresh-btn" @click="refreshCode">
|
|
<text class="ri-refresh-line btn-icon"></text>
|
|
<text class="btn-text">刷新</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 温馨提示 -->
|
|
<view class="tips-section">
|
|
<view class="tips-title">
|
|
<text class="ri-lightbulb-line tips-icon"></text>
|
|
<text class="title-text">温馨提示</text>
|
|
</view>
|
|
<view class="tips-list">
|
|
<text class="tips-item">• 会员码每分钟自动更新，确保使用安全</text>
|
|
<text class="tips-item">• 结账时请向商家出示此码</text>
|
|
<text class="tips-item">• 消费可获得积分，积分可抵扣现金</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import { vpUserService, Service } from '@/Service/vp/vpUserService'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
// 用户数据
|
|
const user = ref({
|
|
nickname: '美食达人',
|
|
avatar: 'https://picsum.photos/200/200?random=100',
|
|
points: 2580,
|
|
memberLevel: 'gold',
|
|
memberId: '8888888',
|
|
memberCode: 'VIP8888888888888'
|
|
})
|
|
let code = ref('')
|
|
let erCode = ref('')
|
|
|
|
let userData = ref<any>({})
|
|
|
|
// 刷新倒计时（秒）
|
|
const refreshCountdown = ref(60)
|
|
let refreshTimer = ref(0)
|
|
let countdownTimer = ref(0)
|
|
|
|
|
|
onLoad(() => {
|
|
fetchUserInfo()
|
|
getCode()
|
|
startAutoRefresh()
|
|
})
|
|
|
|
// 获取用户信息
|
|
const fetchUserInfo = () => {
|
|
vpUserService.GetUserInfo().then(res => {
|
|
if (res.code == 0) {
|
|
userData.value = res.data.userInfo
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
const getCode=()=>{
|
|
vpUserService.GetUserCode().then(res => {
|
|
if (res.code==0){
|
|
code.value=res.data.code
|
|
erCode.value=res.data.erCode
|
|
}
|
|
})
|
|
}
|
|
|
|
// 刷新会员码
|
|
const refreshCode = () => {
|
|
getCode()
|
|
// 重置倒计时
|
|
refreshCountdown.value = 60
|
|
Service.Msg('会员码已刷新')
|
|
}
|
|
|
|
|
|
// 复制会员ID
|
|
const copyMemberId = () => {
|
|
uni.setClipboardData({
|
|
data: userData.value.userNo,
|
|
success: () => {
|
|
Service.Msg('会员ID已复制')
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
// 开始自动刷新
|
|
const startAutoRefresh = () => {
|
|
// 清除之前的定时器
|
|
if (refreshTimer.value) {
|
|
clearInterval(refreshTimer.value)
|
|
}
|
|
if (countdownTimer.value) {
|
|
clearInterval(countdownTimer.value)
|
|
}
|
|
|
|
// 倒计时定时器（每秒更新）
|
|
countdownTimer.value = setInterval(() => {
|
|
refreshCountdown.value--
|
|
if (refreshCountdown.value <= 0) {
|
|
refreshCountdown.value = 60
|
|
getCode()
|
|
}
|
|
}, 1000)
|
|
}
|
|
|
|
|
|
|
|
// 清理定时器
|
|
onUnmounted(() => {
|
|
if (refreshTimer) {
|
|
clearInterval(refreshTimer.value)
|
|
}
|
|
if (countdownTimer) {
|
|
clearInterval(countdownTimer.value)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 引入全局标签样式 */
|
|
@import '@/styles/member-tags.scss';
|
|
|
|
/* 现代化会员码页面 */
|
|
.member-code-page {
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #FFF4E6 0%, #F5F5F5 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 状态栏 */
|
|
.status-bar {
|
|
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
|
|
/* 导航栏 */
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 24rpx;
|
|
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
|
}
|
|
|
|
.back-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
padding: 8rpx;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.nav-placeholder {
|
|
width: 40rpx;
|
|
}
|
|
|
|
/* 内容区域 */
|
|
.content {
|
|
flex: 1;
|
|
padding: 32rpx 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 会员卡片 */
|
|
.member-card {
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(255, 107, 0, 0.12);
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
/* 用户信息区域 */
|
|
.user-section {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 48rpx;
|
|
margin-right: 20rpx;
|
|
border: 3rpx solid #FF6B00;
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
/* 分割线 */
|
|
.divider {
|
|
height: 1rpx;
|
|
background: linear-gradient(90deg, transparent, #E0E0E0, transparent);
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
/* 条形码区域 */
|
|
.barcode-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.barcode-wrapper {
|
|
width: 480rpx;
|
|
background: #F8F8F8;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx 32rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.barcode-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.barcode-lines {
|
|
font-size: 40rpx;
|
|
color: #000000;
|
|
letter-spacing: 2rpx;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
}
|
|
|
|
.barcode-number {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
/* 二维码区域 */
|
|
.qrcode-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.qrcode-wrapper {
|
|
width: 360rpx;
|
|
height: 360rpx;
|
|
background: #F8F8F8;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.qrcode-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #000000;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.qrcode-icon {
|
|
font-size: 200rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.code-tip {
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
/* 刷新区域 */
|
|
.refresh-section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.refresh-icon {
|
|
font-size: 24rpx;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.refresh-text {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
}
|
|
|
|
.refresh-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.btn-icon {
|
|
font-size: 20rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btn-text {
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 温馨提示 */
|
|
.tips-section {
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.tips-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.tips-icon {
|
|
font-size: 28rpx;
|
|
color: #FFA500;
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
}
|
|
|
|
.tips-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.tips-item {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
line-height: 1.6;
|
|
}
|
|
</style> |