476 lines
11 KiB
Vue
476 lines
11 KiB
Vue
<template>
|
||
<view class="my-card-page">
|
||
<!-- 会员卡列表 -->
|
||
<view class="card-list" v-if="cardList.length > 0">
|
||
<view v-for="card in cardList" :key="card.id" style="position: relative;background-color: #f5f5f5;"
|
||
@click="viewCardDetail(card)" :style="card.cardType==='COUNT'?'height: 240rpx;':'height: 200rpx;'">
|
||
<view
|
||
style="height: 120rpx;background-color: #ffffff;z-index: 999;border-radius: 25rpx;padding: 32rpx;position: absolute;top: 0;left: 0;right: 0;">
|
||
<!-- 卡片头部：标题和日期 -->
|
||
<view class="card-header">
|
||
<text class="card-name">{{ card.name }}</text>
|
||
<view class="card-date">
|
||
<text class="date-text" v-if="card.status !== 'expired'">{{ card.endDate }}{{
|
||
$t('myCard.expire') }}</text>
|
||
<text class="date-text expired" v-else>{{ $t('myCard.expiredOn') }}{{ card.endDate }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 地区信息 -->
|
||
<view class="card-region">
|
||
<text
|
||
class="region-text">{{ $t('myCard.onlyForRegionBefore') }}{{ card.positionName }}{{ $t('myCard.onlyForRegionAfter') }}</text>
|
||
<!-- 状态标签 / 去使用按钮 -->
|
||
<view v-if="card.status !== 'expired'" class="status-tag active"
|
||
style="display: flex; align-items: center; gap: 4rpx; background-color: #FFE2B8; border-radius: 26rpx; padding: 6rpx 20rpx;"
|
||
@click.stop="handleUseCard(card)">
|
||
<text class="status-text" style="color: #D4A574;">{{ $t('myCard.toUse') }}</text>
|
||
<!-- <uv-icon name="scan" size="12" color="#D4A574"></uv-icon> -->
|
||
</view>
|
||
<view v-else class="status-tag" :class="getStatusClass(card.status)">
|
||
<text class="status-text">{{ getStatusText(card.status) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 使用情况和操作按钮 -->
|
||
<view style="position: absolute; bottom: -10rpx; left: 0; right: 0; padding: 20rpx;z-index:1;"
|
||
v-if="card.cardType==='COUNT'">
|
||
<view class="card-footer">
|
||
<!-- 次卡信息 -->
|
||
<view v-if="card.cardType === 'COUNT'" class="card-usage-info">
|
||
<text class="usage-text">{{ $t('myCard.remainingTimes') }}{{ card.remainingCount }}{{
|
||
$t('myCard.times') }}</text>
|
||
</view>
|
||
<!-- 时长卡信息 -->
|
||
<view v-if="card.cardType === 'TIME'" class="card-usage-info">
|
||
<text class="usage-text">{{ $t('myCard.durationCard') }}</text>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="card-actions">
|
||
<!-- 续卡按钮（仅次卡显示） -->
|
||
<view v-if="card.cardType === 'COUNT'" class="renew-btn" @click.stop="renewCard(card)">
|
||
<text class="renew-text">{{ $t('myCard.renew') }}</text>
|
||
<uv-icon name="arrow-right" size="14" color="#D4A574"></uv-icon>
|
||
<!-- <text class="arrow">{{ '>' }}</text> -->
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" v-else>
|
||
<image class="empty-icon" src="/static/empty-card.png" mode="aspectFit"></image>
|
||
<text class="empty-text">{{ $t('myCard.noCards') }}</text>
|
||
<view class="buy-btn" @click="goToBuy">
|
||
<text class="buy-text">{{ $t('myCard.buyNow') }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted
|
||
} from 'vue'
|
||
import {
|
||
useI18n
|
||
} from '@/utils/i18n.js'
|
||
import {
|
||
getMemberCardsByStatus
|
||
} from '@/config/api/member.js'
|
||
import {
|
||
getQueryString
|
||
} from '@/util/index.js'
|
||
import {
|
||
getDeviceInfo
|
||
} from '@/config/api/device.js'
|
||
import {
|
||
getInUseOrder,
|
||
getUnpaidOrder
|
||
} from '@/config/api/order.js'
|
||
const {
|
||
t
|
||
} = useI18n()
|
||
|
||
// 会员卡列表
|
||
const cardList = ref([])
|
||
|
||
// 获取会员卡列表
|
||
const getCardList = async () => {
|
||
try {
|
||
const response = await getMemberCardsByStatus()
|
||
// 处理API返回的数据，转换为模板需要的格式
|
||
if (response.code === 200 && response.data) {
|
||
cardList.value = response.data.map(item => ({
|
||
id: item.id,
|
||
name: item.cardName,
|
||
cardType: item.cardType, // TIME 或 COUNT
|
||
// 次卡相关
|
||
totalCount: item.totalCount,
|
||
remainingCount: item.remainingCount,
|
||
singleLimitMinutesForCount: item.singleLimitMinutesForCount,
|
||
// 时长卡相关
|
||
cycleDays: item.cycleDays,
|
||
dailyLimitCount: item.dailyLimitCount,
|
||
singleLimitMinutes: item.singleLimitMinutes,
|
||
currentCycleStartTime: item.currentCycleStartTime,
|
||
currentCycleUsedCount: item.currentCycleUsedCount,
|
||
// 通用信息
|
||
status: item.status,
|
||
startDate: item.startTime?.split(' ')[0] || item.startTime,
|
||
endDate: item.endTime?.split(' ')[0] || item.endTime,
|
||
positionId: item.positionId,
|
||
positionName: item.positionName,
|
||
purchasePrice: item.purchasePrice,
|
||
remark: item.remark
|
||
}))
|
||
} else {
|
||
cardList.value = []
|
||
}
|
||
} catch (error) {
|
||
console.error('获取会员卡列表失败:', error)
|
||
uni.showToast({
|
||
title: t('myCard.getListFailed'),
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 计算进度条宽度
|
||
const getProgressWidth = (used, total) => {
|
||
if (!total || total === 0) return '0%'
|
||
const percentage = (used / total) * 100
|
||
return `${Math.min(percentage, 100)}%`
|
||
}
|
||
|
||
// 获取状态类名
|
||
const getStatusClass = (status) => {
|
||
const statusMap = {
|
||
'unused': 'active',
|
||
'expired': 'expired',
|
||
'used': 'used',
|
||
'active': 'active' // 兼容原始状态
|
||
}
|
||
return statusMap[status] || 'active' // 默认为active
|
||
}
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status) => {
|
||
const statusMap = {
|
||
'unused': t('myCard.active'), // unused表示未使用，即活跃状态
|
||
'expired': t('myCard.expired'),
|
||
'used': t('myCard.used'),
|
||
'active': t('myCard.active') // 兼容原始状态
|
||
}
|
||
return statusMap[status] || t('myCard.active') // 默认为active
|
||
}
|
||
|
||
// 查看卡详情
|
||
const viewCardDetail = (card) => {
|
||
// TODO: 跳转到卡详情页面
|
||
// uni.showToast({
|
||
// title: t('common.functionDeveloping'),
|
||
// icon: 'none'
|
||
// })
|
||
}
|
||
|
||
// 续卡
|
||
const renewCard = (card) => {
|
||
uni.navigateTo({
|
||
url: `/pages/purchase/index?positionId=${card.positionId}`
|
||
})
|
||
}
|
||
|
||
// 去使用会员卡
|
||
const handleUseCard = async (card) => {
|
||
try {
|
||
const scanResult = await new Promise((resolve, reject) => {
|
||
uni.scanCode({
|
||
success: resolve,
|
||
fail: reject
|
||
})
|
||
})
|
||
|
||
console.log('扫码结果:', scanResult);
|
||
let deviceNo;
|
||
// 兼容不同平台的扫码结果
|
||
if (scanResult.scanType === 'QR_CODE' || scanResult.scanType === 'qrCode') {
|
||
deviceNo = getQueryString(scanResult.result, 'deviceNo')
|
||
} else if (scanResult.path) {
|
||
deviceNo = getQueryString(scanResult.path, 'deviceNo')
|
||
} else {
|
||
deviceNo = scanResult.result
|
||
}
|
||
|
||
if (!deviceNo) {
|
||
uni.showToast({
|
||
title: t('home.invalidQRCode'),
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: t('common.getting')
|
||
})
|
||
|
||
// 检查是否有使用中的订单
|
||
const inUseRes = await getInUseOrder()
|
||
if (inUseRes && inUseRes.code === 200 && inUseRes.data) {
|
||
uni.hideLoading()
|
||
const inUseOrder = inUseRes.data
|
||
uni.reLaunch({
|
||
url: `/pages/order/detail?orderId=${inUseOrder.orderId}&deviceId=${deviceNo || inUseOrder.deviceNo}`
|
||
})
|
||
return
|
||
}
|
||
|
||
// 检查是否有待支付订单
|
||
const orderRes = await getUnpaidOrder()
|
||
if (orderRes && orderRes.code === 200 && orderRes.data) {
|
||
uni.hideLoading()
|
||
const unpaidOrder = orderRes.data
|
||
uni.navigateTo({
|
||
url: `/pages/order/payment?orderId=${unpaidOrder.orderId}`
|
||
})
|
||
return
|
||
}
|
||
|
||
// 获取设备信息并跳转详情
|
||
const deviceInfoRes = await getDeviceInfo(deviceNo)
|
||
uni.hideLoading()
|
||
|
||
if (deviceInfoRes.code === 200 && deviceInfoRes.data && deviceInfoRes.data.device) {
|
||
const deviceInfo = deviceInfoRes.data.device
|
||
let url = `/pages/device/detail?deviceNo=${deviceNo}`
|
||
if (deviceInfo.feeConfig) {
|
||
url += `&feeConfig=${encodeURIComponent(deviceInfo.feeConfig)}`
|
||
}
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/device/detail?deviceNo=${deviceNo}`
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('扫码处理失败:', error)
|
||
if (error && error.errMsg !== 'scanCode:fail cancel') {
|
||
uni.showToast({
|
||
title: t('home.scanFailed'),
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 去购买
|
||
const goToBuy = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/purchase/index'
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
uni.setNavigationBarTitle({
|
||
title: t('user.myCards')
|
||
})
|
||
getCardList()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.my-card-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.card-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.card-item {
|
||
// background-color: #ffffff;
|
||
border-radius: 25rpx;
|
||
padding: 32rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
position: relative;
|
||
z-index: 5;
|
||
|
||
}
|
||
|
||
// 卡片头部
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.card-name {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.card-date {
|
||
.date-text {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 34rpx;
|
||
|
||
&.expired {
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 地区信息
|
||
.card-region {
|
||
margin-bottom: 24rpx;
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
|
||
.region-text {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
|
||
// 卡片底部
|
||
.card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
/* padding-top: 24rpx ; */
|
||
position: absolute;
|
||
background: rgba(255, 244, 227, 1);
|
||
z-index: 1;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
border-radius: 0 0 25rpx 25rpx;
|
||
padding: 20rpx;
|
||
/* text-align: 30rpx ; */
|
||
}
|
||
|
||
.card-usage-info {
|
||
flex: 1;
|
||
|
||
.usage-text {
|
||
font-size: 26rpx;
|
||
color: #D4A574;
|
||
font-weight: 500;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.card-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
// 续卡按钮
|
||
.renew-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
padding: 8rpx 16rpx;
|
||
// background-color: #FFF9F0;
|
||
border-radius: 8rpx;
|
||
|
||
.renew-text {
|
||
font-size: 24rpx;
|
||
color: #D4A574;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 24rpx;
|
||
color: #D4A574;
|
||
}
|
||
}
|
||
|
||
// 状态标签
|
||
.status-tag {
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
|
||
.status-text {
|
||
font-size: 24rpx;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
&.active {
|
||
// background-color: #FFF9F0;
|
||
|
||
.status-text {
|
||
color: #D4A574;
|
||
}
|
||
}
|
||
|
||
&.expired {
|
||
// background-color: #F5F5F5;
|
||
|
||
.status-text {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
&.used {
|
||
// background-color: #F5F5F5;
|
||
|
||
.status-text {
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 120rpx 0;
|
||
|
||
.empty-icon {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-bottom: 40rpx;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.buy-btn {
|
||
padding: 20rpx 60rpx;
|
||
background-color: #B8741A;
|
||
border-radius: 48rpx;
|
||
|
||
.buy-text {
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
</style> |