fix：修复bug

2026-01-22 10:52:58 +08:00
parent b0daa7b59b
commit 6a1dff4b94
46 changed files with 3779 additions and 2522 deletions
@@ -2,30 +2,63 @@
 	<view class="my-card-page">
 		<!-- 会员卡列表 -->
 		<view class="card-list" v-if="cardList.length > 0">
-			<view v-for="card in cardList" :key="card.id" class="card-item" @click="viewCardDetail(card)">
-				<view class="card-header">
-					<text class="card-name">{{ card.name }}</text>
-					<view class="card-status" :class="getStatusClass(card.status)">
-						<text class="status-text">{{ getStatusText(card.status) }}</text>
+			<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 class="card-info">
-					<text class="info-label">{{ $t('myCard.type') }}：</text>
-					<text class="info-value">{{ card.cardType === 'COUNT' ? $t('myCard.timesCard') :
-						$t('myCard.durationCard') }}</text>
-				</view>
-				<view class="card-info" v-if="card.type === 'times'">
-					<text class="info-label">{{ $t('myCard.remainingTimes') }}：</text>
-					<text class="info-value highlight">{{ card.remainingTimes }}/{{ card.totalTimes }}</text>
-				</view>
-				<view class="card-info" v-if="card.type === 'duration'">
-					<text class="info-label">{{ $t('myCard.remainingDuration') }}：</text>
-					<text class="info-value highlight">{{ card.remainingDuration }}{{ $t('myCard.hours') }}</text>
-				</view>
-				<view class="card-info">
-					<text class="info-label">{{ $t('myCard.validPeriod') }}：</text>
-					<text class="info-value">{{ card.startDate }} - {{ card.endDate }}</text>
+				<!-- 使用情况和操作按钮 -->
+				<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>

@@ -41,202 +74,403 @@
 </template>

 <script setup>
-import { ref, onMounted } from 'vue'
-import { useI18n } from '@/utils/i18n.js'
-import {
-	getMemberCardsByStatus
-} from '@/config/api/member.js'
-const { t: $t } = useI18n()
+	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 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 -> time
-				totalTimes: item.totalCount,
-				remainingTimes: item.remainingCount,
-				remainingDuration: item.singleLimitMinutes,
-				status: item.status,
-				startDate: item.startTime,
-				endDate: item.endTime,
-				positionName: item.positionName,
-				purchasePrice: item.purchasePrice,
-				// 添加可能的其他字段
-				...item
-			}))
-		} else {
-			cardList.value = []
+	// 获取会员卡列表
+	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'
+			})
 		}
-	} 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 getStatusClass = (status) => {
-	const statusMap = {
-		'unused': 'active',
-		'expired': 'expired',
-		'used': 'used',
-		'active': 'active' // 兼容原始状态
+	// 去使用会员卡
+	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'
+				})
+			}
+		}
 	}
-	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') // 兼容原始状态
+	// 去购买
+	const goToBuy = () => {
+		uni.navigateTo({
+			url: '/pages/purchase/index'
+		})
 	}
-	return statusMap[status] || $t('myCard.active') // 默认为active
-}

-// 查看卡详情
-const viewCardDetail = (card) => {
-	// TODO: 跳转到卡详情页面
-	// uni.showToast({
-	// 	title: $t('common.functionDeveloping'),
-	// 	icon: 'none'
-	// })
-}
-
-// 去购买
-const goToBuy = () => {
-	uni.navigateTo({
-		url: '/pages/purchase/index'
+	onMounted(() => {
+		uni.setNavigationBarTitle({
+			title: t('user.myCards')
+		})
+		getCardList()
 	})
-}
-
-onMounted(() => {
-	uni.setNavigationBarTitle({
-		title: $t('user.myCards')
-	})
-	getCardList()
-})
 </script>

 <style lang="scss" scoped>
-.my-card-page {
-	min-height: 100vh;
-	background-color: #f5f5f5;
-	padding: 20rpx;
-}
-
-.card-list {
-	display: flex;
-	flex-direction: column;
-	gap: 20rpx;
-}
-
-.card-item {
-	background-color: #ffffff;
-	border-radius: 20rpx;
-	padding: 30rpx;
-	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
-}
-
-.card-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 20rpx;
-	padding-bottom: 20rpx;
-	border-bottom: 1rpx solid #f0f0f0;
-}
-
-.card-name {
-	font-size: 32rpx;
-	font-weight: 600;
-	color: #333;
-}
-
-.card-status {
-	padding: 8rpx 16rpx;
-	border-radius: 20rpx;
-	font-size: 22rpx;
-
-	&.active {
-		background-color: #e8f5e8;
-		color: #4caf50;
+	.my-card-page {
+		min-height: 100vh;
+		background-color: #f5f5f5;
+		padding: 24rpx;
 	}

-	&.expired {
-		background-color: #ffeaea;
-		color: #f44336;
+	.card-list {
+		display: flex;
+		flex-direction: column;
+		gap: 24rpx;
 	}

-	&.used {
-		background-color: #f0f0f0;
-		color: #999;
-	}
-}
+	.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-info {
-	display: flex;
-	align-items: center;
-	margin-bottom: 12rpx;
-
-	.info-label {
-		font-size: 26rpx;
-		color: #666;
 	}

-	.info-value {
-		font-size: 26rpx;
-		color: #333;
+	// 卡片头部
+	.card-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		margin-bottom: 16rpx;
+	}

-		&.highlight {
-			color: #FF6B00;
-			font-weight: 600;
+	.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;
+			}
 		}
 	}
-}

-.empty-state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 120rpx 0;
+	// 地区信息
+	.card-region {
+		margin-bottom: 24rpx;
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+		gap: 16rpx;

-	.empty-icon {
-		width: 200rpx;
-		height: 200rpx;
-		margin-bottom: 40rpx;
-		opacity: 0.5;
+		.region-text {
+			font-size: 26rpx;
+			color: #666666;
+			line-height: 36rpx;
+		}
 	}

-	.empty-text {
-		font-size: 28rpx;
-		color: #999;
-		margin-bottom: 40rpx;
+	// 卡片底部
+	.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 ; */
 	}

-	.buy-btn {
-		padding: 20rpx 60rpx;
-		background-color: #B8741A;
-		border-radius: 48rpx;
+	.card-usage-info {
+		flex: 1;

-		.buy-text {
-			font-size: 28rpx;
-			color: #ffffff;
+		.usage-text {
+			font-size: 26rpx;
+			color: #D4A574;
 			font-weight: 500;
+			line-height: 36rpx;
 		}
 	}
-}
-</style>
+
+	.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>