fix:修复bug

subPackages/business/device-orderDetail.vue

@@ -0,0 +1,783 @@
+<template>
+	<view class="order-detail-container">
+		<!-- 状态标题 -->
+		<!-- <view class="status-header">
+			<view class="status-icon">
+				<uv-icon name="checkbox-mark" size="40" color="#07c160"></uv-icon>
+			</view>
+			<text class="status-text">{{ statusText }}</text>
+		</view> -->
+
+		<!-- 产品信息卡片 -->
+		<view class="product-card">
+			<image 
+				:src="orderDetail.pictureUrl || orderDetail.productImage || '/static/default-product.png'" 
+				mode="aspectFill" 
+				class="product-image"
+			></image>
+			<view class="product-info">
+				<view class="product-name">{{ orderDetail.productName || orderDetail.deviceName || '风电者2026新款风扇、充电宝、暖手宝三合一' }}</view>
+				<view class="product-style">款式：{{ orderDetail.optionName || orderDetail.style || '标准' }}</view>
+				<view class="product-price">¥{{ orderDetail.price || orderDetail.totalAmount }}</view>
+			</view>
+		</view>
+
+		<!-- 订单信息 -->
+		<view class="info-section">
+			<view class="section-title">订单信息</view>
+			
+			<view class="info-item">
+				<text class="label">订单号</text>
+				<text class="value">{{ orderDetail.orderNo || '-' }}</text>
+			</view>
+			
+			<view class="info-item" v-if="orderDetail.outTradeNo">
+				<text class="label">交易单号</text>
+				<text class="value">{{ orderDetail.outTradeNo }}</text>
+			</view>
+			
+			<view class="info-item">
+				<text class="label">订单状态</text>
+				<text class="value" :style="{color: statusColor}">{{ statusText }}</text>
+			</view>
+			
+			<view class="info-item">
+				<text class="label">创建时间</text>
+				<text class="value">{{ orderDetail.createTime || '-' }}</text>
+			</view>
+			
+			<view class="info-item">
+				<text class="label">支付方式</text>
+				<text class="value">{{ paymentMethodText }}</text>
+			</view>
+			
+			<view class="info-item">
+				<text class="label">支付时间</text>
+				<text class="value">{{ orderDetail.payTime || '未支付' }}</text>
+			</view>
+			
+			<view class="info-item">
+				<text class="label">收货人</text>
+				<text class="value">{{ receiverInfo }}</text>
+			</view>
+			
+			<view class="info-item">
+				<text class="label">收货地址</text>
+				<text class="value address">{{ orderDetail.receiverAddress || '-' }}</text>
+			</view>
+			
+			<view class="info-item" v-if="orderDetail.expressageNo">
+				<text class="label">快递单号</text>
+				<text class="value">{{ orderDetail.expressageNo }}</text>
+			</view>
+			
+			<view class="info-item" v-if="orderDetail.remark">
+				<text class="label">备注</text>
+				<text class="value address">{{ orderDetail.remark }}</text>
+			</view>
+		</view>
+
+		<!-- 费用信息 -->
+		<view class="info-section">
+			<view class="section-title">费用信息</view>
+			
+			<view class="info-item" v-if="orderDetail.quantity">
+				<text class="label">数量</text>
+				<text class="value">x{{ orderDetail.quantity }}</text>
+			</view>
+			
+			<view class="info-item">
+				<text class="label">单价</text>
+				<text class="value">¥ {{ orderDetail.price || orderDetail.totalAmount }}</text>
+			</view>
+			
+			<view class="info-item total">
+				<text class="label">合计</text>
+				<text class="value highlight">¥ {{ totalAmount }}</text>
+			</view>
+		</view>
+
+		<!-- 底部按钮 -->
+		<view class="bottom-actions">
+			<!-- 待付款状态：显示取消订单和立即支付 -->
+			<template v-if="orderDetail.status === 0 || orderDetail.status === '0'">
+				<view class="action-btn secondary" @click="onCancelOrder">
+					取消订单
+				</view>
+				<view class="action-btn primary" @click="onPayNow">
+					立即支付
+				</view>
+			</template>
+			
+			<!-- 已完成/已取消状态：显示删除订单和再次定制 -->
+			<template v-else-if="orderDetail.status === 3 || orderDetail.status === '3' || orderDetail.status === 4 || orderDetail.status === '4'">
+				<view class="action-btn secondary" @click="onDeleteOrder">
+					删除订单
+				</view>
+				<view class="action-btn primary" @click="onReorder(orderDetail.productId)">
+					再次定制
+				</view>
+			</template>
+			
+			<!-- 其他状态：显示联系客服和再次定制 -->
+			<template v-else>
+				<view class="action-btn secondary" @click="onContactService">
+					联系客服
+				</view>
+				<view class="action-btn primary" @click="onReorder(orderDetail.productId)">
+					再次定制
+				</view>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, computed, onMounted, onUnmounted } from 'vue';
+	import { onLoad } from '@dcloudio/uni-app';
+	import { 
+		queryById, 
+		getProductOrderDetail, 
+		deleteProductOrder, 
+		cancelProductOrder,
+		createWxPayment
+	} from '../../config/api/order.js';
+	// import { getSystemParamByKey } from '../../config/api/system.js';
+	import { useI18n } from '@/utils/i18n.js'
+	
+	const { t } = useI18n()
+
+	const orderDetail = ref({});
+	const orderId = ref('');
+	const countdownText = ref('');
+	let countdownTimer = null;
+
+	// 订单状态文本
+	const statusText = computed(() => {
+		const status = orderDetail.value.status;
+		if (status === 0 || status === '0') {
+			return '待付款';
+		}
+		if (status === 1 || status === '1') {
+			return '待发货';
+		}
+		if (status === 2 || status === '2') {
+			return '待收货';
+		}
+		if (status === 3 || status === '3') {
+			return '已完成';
+		}
+		if (status === 4 || status === '4') {
+			return '已取消';
+		}
+		if (status === 5 || status === '5') {
+			return '退款中';
+		}
+		return '待付款';
+	});
+
+	// 订单状态颜色
+	const statusColor = computed(() => {
+		const status = orderDetail.value.status;
+		if (status === 0 || status === '0') {
+			return '#ff976a'; // 待付款 - 橙色
+		}
+		if (status === 1 || status === '1') {
+			return '#1989fa'; // 待发货 - 蓝色
+		}
+		if (status === 2 || status === '2') {
+			return '#1989fa'; // 待收货 - 蓝色
+		}
+		if (status === 3 || status === '3') {
+			return '#07c160'; // 已完成 - 绿色
+		}
+		if (status === 4 || status === '4') {
+			return '#999'; // 已取消 - 灰色
+		}
+		if (status === 5 || status === '5') {
+			return '#ff6b6b'; // 退款中 - 红色
+		}
+		return '#ff976a';
+	});
+
+	// 支付方式文本
+	const paymentMethodText = computed(() => {
+		const payWay = orderDetail.value.payWay;
+		if (payWay === 'wx_score_pay') return '微信支付';
+		if (payWay === 'wx_global_pay') return '微信支付';
+		if (payWay === 'wx_member_pay') return '微信支付';
+		return '微信支付';
+	});
+
+	// 收货人信息
+	const receiverInfo = computed(() => {
+		const name = orderDetail.value.receiverName || '-';
+		const phone = orderDetail.value.receiverPhone || '-';
+		return `${name}  ${phone}`;
+	});
+
+	// 总金额
+	const totalAmount = computed(() => {
+		return orderDetail.value.totalAmount || orderDetail.value.amount || orderDetail.value.payAmount || '99.0';
+	});
+
+	// 页面加载
+	onLoad(async (options) => {
+		if (options && options.orderId) {
+			orderId.value = options.orderId;
+			await loadOrderDetail();
+		}
+	});
+
+	// 根据订单状态设置页面标题
+	const updatePageTitle = () => {
+		const status = orderDetail.value.status;
+		let title = '订单详情';
+		
+		if (status === 0 || status === '0') {
+			title = '待付款';
+			// 如果有倒计时文本，添加到标题中
+			if (countdownText.value) {
+				title = `${title} ${countdownText.value}`;
+			}
+		} else if (status === 1 || status === '1') {
+			title = '待发货';
+		} else if (status === 2 || status === '2') {
+			title = '待收货';
+		} else if (status === 3 || status === '3') {
+			title = '已完成';
+		} else if (status === 4 || status === '4') {
+			title = '已取消';
+		} else if (status === 5 || status === '5') {
+			title = '退款中';
+		}
+		
+		uni.setNavigationBarTitle({
+			title: title
+		});
+	};
+
+	// 启动倒计时
+	const startCountdown = () => {
+		// 清除之前的定时器
+		if (countdownTimer) {
+			clearInterval(countdownTimer);
+			countdownTimer = null;
+		}
+
+		const status = orderDetail.value.status;
+		const expireTime = orderDetail.value.expireTime;
+
+		// 只有待付款状态且有过期时间才显示倒计时
+		if ((status === 0 || status === '0') && expireTime) {
+			// 计算倒计时
+			const updateCountdown = () => {
+				const now = new Date().getTime();
+				const expireTimestamp = new Date(expireTime).getTime();
+				const diff = expireTimestamp - now;
+
+				if (diff > 0) {
+					// 计算总分钟数和秒数
+					const totalMinutes = Math.floor(diff / (1000 * 60));
+					const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+					// 格式化为 MM:SS
+					const minutesStr = String(totalMinutes).padStart(2, '0');
+					const secondsStr = String(seconds).padStart(2, '0');
+
+					countdownText.value = `${minutesStr}:${secondsStr}`;
+					updatePageTitle();
+				} else {
+					// 倒计时结束
+					countdownText.value = '';
+					if (countdownTimer) {
+						clearInterval(countdownTimer);
+						countdownTimer = null;
+					}
+					// 重新加载订单详情（订单可能已自动取消）
+					loadOrderDetail();
+				}
+			};
+
+			// 立即执行一次
+			updateCountdown();
+			// 每秒更新一次
+			countdownTimer = setInterval(updateCountdown, 1000);
+		} else {
+			countdownText.value = '';
+			updatePageTitle();
+		}
+	};
+
+	// 组件卸载时清除定时器
+	onUnmounted(() => {
+		if (countdownTimer) {
+			clearInterval(countdownTimer);
+			countdownTimer = null;
+		}
+	});
+
+	// 加载订单详情
+	const loadOrderDetail = async () => {
+		try {
+			uni.showLoading({
+				title: '加载中...'
+			});
+
+			const res = await getProductOrderDetail(orderId.value);
+			
+			if (res.code === 200 && res.data) {
+				const data = res.data;
+				orderDetail.value = {
+					// 基础信息
+					id: data.id,
+					orderNo: data.orderNo,
+					outTradeNo: data.outTradeNo,
+					userId: data.userId,
+					
+					
+					// 状态信息
+					status: data.status,
+					payStatus: data.payStatus,
+					
+					// 金额信息
+					totalAmount: data.totalAmount,
+					payAmount: data.payAmount,
+					price: data.price,
+					
+					// 时间信息
+					createTime: data.createTime,
+					updateTime: data.updateTime,
+					payTime: data.payTime,
+					expireTime: data.expireTime, // 订单自动取消时间
+					
+					// 收货信息
+					receiverName: data.receiverName,
+					receiverPhone: data.receiverPhone,
+					receiverAddress: data.receiverAddress,
+					
+					// 物流信息
+					expressageNo: data.expressageNo,
+					
+					// 备注
+					remark: data.remark,
+					
+					// 商品信息
+					productName: data.productName,
+					optionName: data.optionName,
+					pictureUrl: data.pictureUrl,
+					color: data.color,
+					quantity: data.quantity,
+					productId:data.productId,
+					
+					// 兼容旧字段
+					orderId: data.id,
+					deviceId: data.deviceNo || '',
+					deviceName: data.deviceName || '',
+					style: data.optionName || data.style || data.deviceStyle || '',
+					payWay: data.payWay || 'wx_global_pay',
+					phone: data.receiverPhone,
+					address: data.receiverAddress,
+					deposit: data.deposit || '0',
+					package: data.package || '',
+					amount: data.payAmount,
+					productImage: data.pictureUrl || data.productImage || ''
+				};
+				
+				// 启动倒计时
+				startCountdown();
+			}
+
+			uni.hideLoading();
+		} catch (error) {
+			uni.hideLoading();
+			console.error('加载订单详情失败:', error);
+			uni.showToast({
+				title: '加载失败',
+				icon: 'none'
+			});
+		}
+	};
+
+	// 退款/售后
+	const onRefund = () => {
+		uni.showToast({
+			title: '退款/售后功能开发中',
+			icon: 'none'
+		});
+	};
+
+	// 取消订单
+	const onCancelOrder = () => {
+		uni.showModal({
+			title: '提示',
+			content: '确定要取消这个订单吗？',
+			success: async (res) => {
+				if (res.confirm) {
+					try {
+						uni.showLoading({
+							title: '取消中...',
+							mask: true
+						});
+						
+						const result = await cancelProductOrder(orderDetail.value.id);
+						
+						uni.hideLoading();
+						
+						if (result && result.code === 200) {
+							uni.showToast({
+								title: '订单已取消',
+								icon: 'success'
+							});
+							
+							// 重新加载订单详情
+							await loadOrderDetail();
+						} else {
+							throw new Error(result?.msg || '取消失败');
+						}
+					} catch (error) {
+						uni.hideLoading();
+						console.error('取消订单失败:', error);
+						uni.showToast({
+							title: error.message || '取消失败',
+							icon: 'none'
+						});
+					}
+				}
+			}
+		});
+	};
+
+	// 删除订单
+	const onDeleteOrder = () => {
+		uni.showModal({
+			title: '提示',
+			content: '确定要删除这个订单吗？',
+			success: async (res) => {
+				if (res.confirm) {
+					try {
+						uni.showLoading({
+							title: '删除中...',
+							mask: true
+						});
+						
+						const result = await deleteProductOrder(orderDetail.value.id);
+						
+						uni.hideLoading();
+						
+						if (result && result.code === 200) {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'success'
+							});
+							
+							// 返回订单列表
+							setTimeout(() => {
+								uni.navigateBack();
+							}, 1500);
+						} else {
+							throw new Error(result?.msg || '删除失败');
+						}
+					} catch (error) {
+						uni.hideLoading();
+						console.error('删除订单失败:', error);
+						uni.showToast({
+							title: error.message || '删除失败',
+							icon: 'none'
+						});
+					}
+				}
+			}
+		});
+	};
+
+	// 立即支付
+	const onPayNow = async () => {
+		try {
+			uni.showLoading({
+				title: '正在创建支付...',
+				mask: true
+			});
+			
+			const res = await createWxPayment(orderDetail.value.orderNo);
+
+			if (res && res.code === 200 && res.data) {
+				uni.hideLoading();
+				
+				const payParams = res.data;
+				
+				// 调用微信支付
+				uni.requestPayment({
+					timeStamp: payParams.timeStamp,
+					nonceStr: payParams.nonceStr,
+					package: payParams.package,
+					signType: payParams.signType,
+					paySign: payParams.paySign,
+					success: async (payRes) => {
+						console.log('支付成功:', payRes);
+						uni.showToast({
+							title: '支付成功',
+							icon: 'success',
+							duration: 2000
+						});
+						
+						// 重新加载订单详情
+						await loadOrderDetail();
+					},
+					fail: async (err) => {
+						console.error('支付失败:', err);
+						
+						// 判断是用户取消还是支付失败
+						if (err.errMsg && err.errMsg.includes('cancel')) {
+							// 用户取消支付，调用取消订单接口
+							try {
+								await cancelProductOrder(orderDetail.value.id);
+								uni.showToast({
+									title: '支付已取消',
+									icon: 'none'
+								});
+								
+								// 重新加载订单详情
+								await loadOrderDetail();
+							} catch (cancelError) {
+								console.error('取消订单失败:', cancelError);
+								uni.showToast({
+									title: '支付已取消',
+									icon: 'none'
+								});
+							}
+						} else {
+							// 支付失败
+							uni.showToast({
+								title: '支付失败，请重试',
+								icon: 'none'
+							});
+						}
+					}
+				});
+			} else {
+				uni.hideLoading();
+				uni.showToast({
+					title: res?.msg || '创建支付订单失败',
+					icon: 'none'
+				});
+			}
+		} catch (error) {
+			console.error('支付异常:', error);
+			uni.hideLoading();
+			uni.showToast({
+				title: error.message || '支付失败，请重试',
+				icon: 'none'
+			});
+		}
+	};
+
+	// 联系客服
+	const onContactService = async () => {
+
+
+				const phoneNumber = uni.getStorageSync('customerPhone');
+				
+				// 拨打客服电话
+				uni.makePhoneCall({
+					phoneNumber: phoneNumber,
+					success: () => {
+						console.log('拨打电话成功');
+					},
+					fail: (err) => {
+						console.error('拨打电话失败:', err);
+						uni.showToast({
+							title: '拨打电话失败',
+							icon: 'none'
+						});
+					}
+				});
+
+	};
+
+	// 再次定制
+	const onReorder = (order) => {
+		if(order){
+			uni.navigateTo({
+				url: `/subPackages/business/device-goods?productId=${order}`
+			});
+		}
+		// console.log(order);
+		
+	};
+</script>
+
+<style lang="scss" scoped>
+	.order-detail-container {
+		min-height: 100vh;
+		background: #f7f8fa;
+		padding-bottom: 120rpx;
+
+		// 状态头部
+		.status-header {
+			background: #fff;
+			padding: 60rpx 0 40rpx;
+			text-align: center;
+
+			.status-icon {
+				margin-bottom: 20rpx;
+			}
+
+			.status-text {
+				font-size: 36rpx;
+				color: #333;
+				font-weight: 600;
+			}
+		}
+
+		// 产品卡片
+		.product-card {
+			background: #fff;
+			margin: 20rpx;
+			padding: 24rpx;
+			border-radius: 16rpx;
+			display: flex;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+			.product-image {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 12rpx;
+				background: #f5f5f5;
+				flex-shrink: 0;
+			}
+
+			.product-info {
+				flex: 1;
+				margin-left: 20rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				.product-name {
+					font-size: 28rpx;
+					color: #333;
+					font-weight: 500;
+					line-height: 1.4;
+					margin-bottom: 12rpx;
+				}
+
+				.product-style {
+					font-size: 24rpx;
+					color: #999;
+					margin-bottom: 8rpx;
+				}
+
+				.product-price {
+					font-size: 32rpx;
+					color: #07c160;
+					font-weight: 600;
+				}
+			}
+		}
+
+		// 信息区块
+		.info-section {
+			background: #fff;
+			margin: 20rpx;
+			padding: 24rpx;
+			border-radius: 16rpx;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+			.section-title {
+				font-size: 28rpx;
+				color: #333;
+				font-weight: 600;
+				margin-bottom: 24rpx;
+			}
+
+			.info-item {
+				display: flex;
+				justify-content: space-between;
+				margin-bottom: 20rpx;
+				font-size: 28rpx;
+				height: 50rpx;
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+
+				.label {
+					color: #999;
+					flex-shrink: 0;
+					width: 140rpx;
+				}
+
+				.value {
+					color: #333;
+					flex: 1;
+					text-align: right;
+					word-break: break-all;
+
+					&.address {
+						text-align: right;
+					}
+				}
+
+				&.total {
+					margin-top: 12rpx;
+					padding-top: 20rpx;
+					border-top: 1rpx dashed #e5e5e5;
+
+					.label {
+						color: #333;
+						font-weight: 500;
+					}
+
+					.value.highlight {
+						color: #07c160;
+						font-size: 36rpx;
+						font-weight: 600;
+					}
+				}
+			}
+		}
+
+		// 底部按钮
+		.bottom-actions {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background: #fff;
+			padding: 20rpx;
+			display: flex;
+			justify-content: flex-end;
+			gap: 20rpx;
+			box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
+			z-index: 100;
+
+			.action-btn {
+				width: 180rpx;
+				height: 64rpx;
+				border-radius: 12rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 26rpx;
+				font-weight: 500;
+
+				&.secondary {
+					background: #fff;
+					color: #07c160;
+					border: 2rpx solid #07c160;
+				}
+
+				&.primary {
+					background: #07c160;
+					color: #fff;
+				}
+
+				&:active {
+					opacity: 0.8;
+				}
+			}
+		}
+	}
+</style>
+

subPackages/business/device-orderList.vue

@@ -0,0 +1,796 @@
+<template>
+	<view class="order-container">
+		<!-- 状态切换 -->
+		<view class="status-tabs">
+			<view v-for="(tab, index) in orderStatusTabs" :key="index" class="tab-item"
+				:class="{ active: currentTab === index }" @click="switchTab(index)">
+				{{ tab.text }}
+			</view>
+		</view>
+
+		<!-- 订单列表 -->
+		<view class="order-list">
+		<view class="empty-state" v-if="orderList.length === 0">
+			<view class="empty-icon">
+				<image src="/static/orderList.png" mode="aspectFill" class="empty-icon"></image>
+			</view>
+			<text class="empty-text">{{ $t('order.noOrderRecord') }}</text>
+		</view>
+
+			<DeviceOrderItemCard
+				v-for="(order, index) in orderList"
+				:key="index"
+				:order="order"
+				@click="navigateToDeviceOrderDetail"
+				@delete="handleDeleteOrder"
+				@pay="handlePayment"
+			/>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		onMounted,
+		onUnmounted
+	} from 'vue';
+    import DeviceOrderItemCard from '../../components/DeviceOrderItemCard.vue';
+	import {
+		onLoad,
+		onShow
+	} from '@dcloudio/uni-app';
+	import {
+		getOrderList,
+		getProductOrderList,
+		queryById,
+		getOrderByOrderNoScorePayStatus,
+		cancelOrder,
+		createWxPayment,
+		deleteProductOrder,
+		cancelProductOrder,
+	} from '../../config/api/order.js';
+	import{
+		createProductOrder
+	}from "@/config/api/product.js"
+	import {
+		updateUserBalance
+	} from '../../config/api/user.js';
+	import {
+		URL
+	} from '../../config/url.js';
+	import { useI18n } from '@/utils/i18n.js'
+	
+	const { t } = useI18n()
+
+	// 初始化状态
+	const currentTab = ref(0);
+	const orderList = ref([]);
+
+	// 订单状态映射
+	const orderStatusMap = reactive({
+		'0': {
+			text: '待付款',
+			class: 'status-waiting'
+		},
+		'1': {
+			text: '待发货',
+			class: 'status-shipping'
+		},
+		'2': {
+			text: '待收货',
+			class: 'status-receiving'
+		},
+		'3': {
+			text: '已完成',
+			class: 'status-finished'
+		},
+		'4': {
+			text: '已取消',
+			class: 'status-cancelled'
+		},
+		'5': {
+			text: '退款中',
+			class: 'status-refunding'
+		}
+	});
+
+	// 订单状态标签
+	const orderStatusTabs = reactive([
+		{
+			text: '全部',
+			status: []
+		},
+		{
+			text: '待付款',
+			status: [0]
+		},
+		{
+			text: '待发货',
+			status: [1]
+		},
+		{
+			text: '待收货',
+			status: [2]
+		},
+		{
+			text: '已完成',
+			status: [3]
+		},
+		{
+			text: '已取消',
+			status: [4]
+		},
+		// {
+		// 	text: '退款中',
+		// 	status: [5]
+		// }
+	]);
+
+	// 页面加载
+	onLoad(async (options) => {
+		// 如果有传入orderId参数，说明是从设备租借页面跳转过来的
+		if (options && options.orderId) {
+			try {
+				// 获取特定订单信息
+				const res = await queryById(options.orderId);
+				if (res.code === 200 && res.data) {
+					// 获取到的订单数据
+					const orderData = res.data;
+
+					// 使用实际的startTime字段，如果没有则尝试使用createTime
+					const orderStartTime = orderData.startTime || orderData.createTime || '';
+
+					// 格式化订单数据
+					const formattedOrder = {
+						orderNo: orderData.orderId,
+						status: orderData.orderStatus,
+						deviceId: orderData.deviceNo,
+						payWay: orderData.payWay,
+						startTime: orderStartTime,
+						endTime: orderData.endTime || '',
+						positionName: orderData.positionName || orderData.positionLocation || '',
+						deviceName: orderData.deviceName || '',
+						amount: orderData.payAmount || orderData.actualDeviceAmount || orderData.currentFee || orderData.residueAmount || '0.00'
+					};
+
+					// 将订单添加到列表开头
+					orderList.value = [formattedOrder, ...orderList.value];
+
+					// 根据订单状态切换到对应标签
+					const tabIndex = orderStatusTabs.findIndex(tab =>
+						tab.status.includes(orderData.orderStatus)
+					);
+
+					if (tabIndex !== -1) {
+						switchTab(tabIndex);
+					}
+				}
+			} catch (error) {
+				console.error('获取订单详情失败:', error);
+			}
+		}
+
+		// 获取订单列表
+		await loadOrderList();
+	});
+
+	// 页面显示时刷新订单列表
+	onShow(async () => {
+		// 根据当前选中的标签刷新对应状态的订单
+		const statusArray = orderStatusTabs[currentTab.value].status;
+		const statusValue = statusArray.length === 0 ? undefined : statusArray[0];
+		await loadOrderList(statusValue);
+	});
+
+	// 切换标签
+	const switchTab = async (index) => {
+		currentTab.value = index;
+		// 根据状态获取订单列表
+		const statusArray = orderStatusTabs[index].status;
+		// 如果是全部，传undefined；否则传第一个数字状态值
+		const statusValue = statusArray.length === 0 ? undefined : statusArray[0];
+		await loadOrderList(statusValue);
+	};
+
+	// 加载订单列表
+	const loadOrderList = async (statusList) => {
+		try {
+			let params = {};
+			if(statusList !== undefined){
+				params = {
+					status: statusList
+				}
+			}
+			const res = await getProductOrderList(params);
+			
+			// 根据实际接口返回结构处理数据
+			if (res.code === 200 && res.data) {
+				// 支持两种数据结构：res.data.rows 或 res.data.records
+				const dataList = res.data.rows || res.data.records || [];
+				
+				// 处理订单列表数据
+				orderList.value = dataList.map(item => {
+					return {
+						// 基础信息
+						id: item.id,
+						orderNo: item.orderNo,
+						orderId: item.id,
+						userId: item.userId,
+						
+						// 状态信息
+						status: item.status,
+						orderStatus: item.status,
+						payStatus: item.payStatus,
+						
+						// 金额信息
+						totalAmount: item.totalAmount,
+						payAmount: item.payAmount,
+						price: item.price,
+						
+						// 时间信息
+						createTime: item.createTime,
+						payTime: item.payTime,
+						
+						// 收货信息
+						receiverName: item.receiverName,
+						receiverPhone: item.receiverPhone,
+						receiverAddress: item.receiverAddress,
+						
+						// 物流信息
+						expressageNo: item.expressageNo,
+						
+						// 备注
+						remark: item.remark,
+						
+						// 商品信息
+						productName: item.productName,
+						optionName: item.optionName,
+						pictureUrl: item.pictureUrl,
+						color: item.color,
+						quantity: item.quantity,
+						
+						// 兼容旧字段
+						deviceId: item.deviceNo || '',
+						deviceName: item.productName || item.deviceName || '',
+						productImage: item.pictureUrl || '',
+						style: item.optionName || item.style || item.deviceStyle || '',
+						payWay: item.payWay || '',
+						startTime: item.createTime || item.startTime || '',
+						endTime: item.endTime || '',
+						positionName: item.positionName || item.positionLocation || '',
+						amount: item.payAmount || item.totalAmount || '0.00'
+					};
+				});
+			}
+		} catch (error) {
+			console.error('获取订单列表失败:', error);
+			uni.showToast({
+				title: t('order.getOrderListFailed'),
+				icon: 'none'
+			});
+		}
+	};
+
+	// 处理订单完成事件
+	const handleOrderCompleted = (orderData) => {
+		console.log('订单列表页收到订单完成事件:', orderData)
+		// 刷新订单列表，根据当前选中的标签刷新对应状态的订单
+		const statusArray = orderStatusTabs[currentTab.value].status
+		const statusValue = statusArray.length === 0 ? undefined : statusArray[0]
+		loadOrderList(statusValue)
+	}
+
+	// 设置页面标题并监听订单完成事件
+	onMounted(() => {
+		uni.setNavigationBarTitle({
+			title: t('order.myDeviceOrders')
+		})
+		
+		// 监听订单完成事件
+		uni.$on('orderCompleted', handleOrderCompleted)
+	})
+	
+	// 页面卸载时移除事件监听
+	onUnmounted(() => {
+		uni.$off('orderCompleted', handleOrderCompleted)
+	})
+
+	// 同步订单状态
+	const getOrderStatus = async (order) => {
+		try {
+			const res = await getOrderByOrderNoScorePayStatus(order.orderNo);
+			if (res.code === 200) {
+				uni.showToast({
+					title: t('order.syncSuccess'),
+					icon: 'success'
+				});
+				const statusArray = orderStatusTabs[currentTab.value].status;
+				const statusValue = statusArray.length === 0 ? undefined : statusArray[0];
+				await loadOrderList(statusValue);
+			}
+		} catch (error) {
+			uni.showToast({
+				title: t('order.syncFailed'),
+				icon: 'none'
+			});
+		}
+	};
+
+	// 跳转到订单详情页面（统一入口）
+	const navigateToOrderDetail = (order) => {
+		uni.navigateTo({
+			url: `/pages/order/detail?orderId=${order.orderId || order.orderNo}&deviceId=${order.deviceId}`
+		});
+	};
+
+	// 组件事件：归还设备（实际跳转到订单详情页）
+	const onReturnDevice = (order) => {
+		navigateToOrderDetail(order);
+	};
+	
+	// 跳转到订单详情页
+	const navigateToDetails = (order) => {
+		navigateToOrderDetail(order);
+	};
+	
+	// 立即支付
+	const handlePayment = async (order) => {
+		try {
+			uni.showLoading({
+				title: '正在创建支付...',
+				mask: true
+			});
+			console.log(order);
+			
+			// 调用后端创建微信支付订单接口（使用订单号）
+			// const res = await createWxPayment(order.orderNo);
+			const res = await createProductOrder({orderNo:order.orderNo});
+
+			if (res && res.code === 200 && res.data) {
+				uni.hideLoading();
+				
+				const payParams = res.data;
+				
+				// 调用微信支付
+				uni.requestPayment({
+					timeStamp: payParams.timeStamp,
+					nonceStr: payParams.nonceStr,
+					package: payParams.package,
+					signType: payParams.signType,
+					paySign: payParams.paySign,
+					success: async (payRes) => {
+						console.log('支付成功:', payRes);
+						uni.showToast({
+							title: '支付成功',
+							icon: 'success',
+							duration: 2000
+						});
+						
+						// 刷新订单列表
+						const statusArray = orderStatusTabs[currentTab.value].status;
+						const statusValue = statusArray.length === 0 ? undefined : statusArray[0];
+						await loadOrderList(statusValue);
+					},
+					fail: async (err) => {
+						console.error('支付失败:', err);
+						
+						// 判断是用户取消还是支付失败
+						if (err.errMsg && err.errMsg.includes('cancel')) {
+							// 用户取消支付，调用取消订单接口
+							try {
+								// await cancelProductOrder(order.id || order.orderId);
+								// uni.showToast({
+								// 	title: '支付已取消',
+								// 	icon: 'none'
+								// });
+								
+								// 刷新订单列表
+								const statusArray = orderStatusTabs[currentTab.value].status;
+								const statusValue = statusArray.length === 0 ? undefined : statusArray[0];
+								await loadOrderList(statusValue);
+							} catch (cancelError) {
+								console.error('取消订单失败:', cancelError);
+								uni.showToast({
+									title: '支付已取消',
+									icon: 'none'
+								});
+							}
+						} else {
+							// 支付失败
+							uni.showToast({
+								title: '支付失败，请重试',
+								icon: 'none'
+							});
+						}
+					}
+				});
+			} else {
+				uni.hideLoading();
+				uni.showToast({
+					title: res?.msg || '创建支付订单失败',
+					icon: 'none'
+				});
+			}
+		} catch (error) {
+			console.error('支付异常:', error);
+			uni.hideLoading();
+			uni.showToast({
+				title: error.message || '支付失败，请重试',
+				icon: 'none'
+			});
+		}
+	};
+	
+	// 取消订单
+	const handleCancelOrder = async (order) => {
+		try {
+			uni.showModal({
+				title: t('order.confirmCancel'),
+				content: t('order.confirmCancelContent'),
+				success: async (res) => {
+					if (res.confirm) {
+						uni.showLoading({
+							title: t('common.processing')
+						});
+						
+						const result = await cancelOrder({
+							orderId: order.orderNo
+						});
+						
+						if (result) {
+							uni.hideLoading();
+							uni.showToast({
+								title: t('order.cancelSuccess'),
+								icon: 'success'
+							});
+							
+							// 刷新订单列表
+							await loadOrderList();
+						} else {
+							throw new Error(result.msg || t('order.cancelFailed'));
+						}
+					}
+				}
+			});
+		} catch (error) {
+			uni.hideLoading();
+			uni.showToast({
+				title: error.message || t('order.cancelFailed'),
+				icon: 'none'
+			});
+		}
+	};
+
+	// 跳转到设备订单详情页
+	const navigateToDeviceOrderDetail = (order) => {
+		uni.navigateTo({
+			url: `/subPackages/business/device-orderDetail?orderId=${order.orderId || order.orderNo}`
+		});
+	};
+
+	// 处理删除订单
+	const handleDeleteOrder = (order) => {
+		uni.showModal({
+			title: '提示',
+			content: '确定要删除这个订单吗？',
+			success: async (res) => {
+				if (res.confirm) {
+					try {
+						uni.showLoading({
+							title: '删除中...',
+							mask: true
+						});
+						
+						// 调用删除订单接口
+						const result = await deleteProductOrder(order.id || order.orderId);
+						
+						uni.hideLoading();
+						
+						if (result && result.code === 200) {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'success'
+							});
+							
+							// 刷新订单列表
+							const statusArray = orderStatusTabs[currentTab.value].status;
+							const statusValue = statusArray.length === 0 ? undefined : statusArray[0];
+							await loadOrderList(statusValue);
+						} else {
+							throw new Error(result?.msg || '删除失败');
+						}
+					} catch (error) {
+						uni.hideLoading();
+						console.error('删除订单失败:', error);
+						uni.showToast({
+							title: error.message || '删除失败',
+							icon: 'none'
+						});
+					}
+				}
+			}
+		});
+	};
+</script>
+
+<style lang="scss" scoped>
+	.order-container {
+		min-height: 100vh;
+		background: #f7f8fa;
+		padding-bottom: 30rpx;
+
+		// 状态标签栏
+		.status-tabs {
+			display: flex;
+			background: #fff;
+			padding: 0 20rpx;
+			position: sticky;
+			top: 0;
+			z-index: 10;
+			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+            .tab-item {
+				flex: 1;
+				height: 90rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 28rpx;
+				color: #666;
+				position: relative;
+
+				&.active {
+                    color: #07c160;
+					font-weight: 500;
+
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: 0;
+						left: 50%;
+						transform: translateX(-50%);
+						width: 40rpx;
+						height: 4rpx;
+                        background: #07c160;
+						border-radius: 2rpx;
+					}
+				}
+			}
+		}
+
+		// 订单列表
+		.order-list {
+			padding: 20rpx;
+
+			// 订单项
+			.order-item {
+				background: #fff;
+				border-radius: 16rpx;
+				margin-bottom: 20rpx;
+				overflow: hidden;
+				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+				// 订单头部
+				.order-header {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 24rpx;
+					border-bottom: 1rpx solid #f0f0f0;
+
+					.order-id {
+						font-size: 26rpx;
+						color: #666;
+					}
+
+					.order-status {
+						font-size: 26rpx;
+						font-weight: 500;
+
+						&.status-waiting {
+							color: #FF9800;
+						}
+
+						&.status-shipping {
+							color: #1989fa;
+						}
+
+						&.status-receiving {
+							color: #1989fa;
+						}
+
+						&.status-finished {
+							color: #07c160;
+						}
+
+						&.status-cancelled {
+							color: #9E9E9E;
+						}
+
+						&.status-refunding {
+							color: #ff6b6b;
+						}
+
+						&.status-express-return {
+							color: #FF9800;
+						}
+					}
+				}
+
+				// 订单内容
+				.order-body {
+					padding: 24rpx;
+
+					.device-info {
+						margin-bottom: 20rpx;
+						display: flex;
+						justify-content: space-between;
+						align-items: flex-start;
+
+						.device-left {
+							flex: 1;
+							margin-right: 20rpx;
+
+							.device-name {
+								font-size: 32rpx;
+								font-weight: 500;
+								color: #333;
+								margin-bottom: 6rpx;
+							}
+
+							.device-id {
+								font-size: 26rpx;
+								color: #999;
+								margin-bottom: 0;
+							}
+						}
+
+						.device-right {
+
+							// 支付分标识
+							.payment-badge {
+								display: inline-flex;
+								align-items: center;
+								padding: 6rpx 12rpx;
+								border-radius: 8rpx;
+								white-space: nowrap;
+
+								&.wx-score {
+									background: rgba(7, 193, 96, 0.08);
+
+									.badge-icon {
+										width: 32rpx;
+										height: 26rpx;
+										margin-right: 8rpx;
+									}
+
+									.badge-text {
+										font-size: 22rpx;
+										color: #07c160;
+										display: flex;
+										align-items: center;
+
+										.divider {
+											margin: 0 6rpx;
+										}
+
+										.highlight {
+											font-weight: 500;
+										}
+									}
+								}
+
+								&.member {
+									background: rgba(25, 118, 210, 0.08);
+
+									.badge-text {
+										font-size: 22rpx;
+										color: #1976D2;
+										font-weight: 500;
+									}
+								}
+
+								&.deposit {
+									background: #f5f5f5;
+
+									.badge-text {
+										font-size: 22rpx;
+										color: #666;
+										font-weight: 500;
+									}
+								}
+							}
+						}
+					}
+
+					.order-times {
+						.time-row {
+							display: flex;
+							font-size: 26rpx;
+							margin-bottom: 8rpx;
+
+							.time-label {
+								color: #999;
+								width: 140rpx;
+							}
+
+							.time-value {
+								color: #333;
+								flex: 1;
+							}
+						}
+					}
+				}
+
+				// 订单底部
+				.order-footer {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 20rpx 24rpx;
+					background: #fafafa;
+					border-top: 1rpx solid #f0f0f0;
+
+					.price {
+						font-size: 34rpx;
+						font-weight: 500;
+						color: #ff6b6b;
+					}
+
+					.actions {
+						display: flex;
+						flex-wrap: wrap;
+                        justify-content: flex-end;
+
+						.action-item {
+							font-size: 26rpx;
+							padding: 10rpx 30rpx;
+							border-radius: 30rpx;
+							margin-left: 20rpx;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+                            margin-bottom: 10rpx;
+
+                            &.primary {
+                                background: #07c160;
+                                color: #fff;
+                            }
+
+							&.secondary {
+								background: #f5f5f5;
+								color: #666;
+								border: 1rpx solid #e0e0e0;
+							}
+
+							&:active {
+								opacity: 0.8;
+							}
+						}
+					}
+				}
+			}
+
+			// 空状态
+			.empty-state {
+				padding: 100rpx 0;
+				text-align: center;
+
+				.empty-icon {
+					width: 180rpx;
+					height: 180rpx;
+					margin: 0 auto 30rpx;
+					background: #f5f5f5;
+					// border-radius: 50%;
+				}
+
+				.empty-text {
+					font-size: 28rpx;
+					color: #999;
+				}
+			}
+		}
+	}
+</style>

subPackages/business/my-card.vue

@@ -0,0 +1,479 @@
+<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: 240rpx;'">
+				<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: 20rpx; padding: 6rpx 20rpx;"
+							@click.stop="handleUseCard(card)">
+							<text class="status-text" style="color: #A16300;">{{ $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: -20rpx; left: 0; right: 0; padding: 20rpx;z-index:1;">
+					<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-else class="card-usage-info">
+							<text class="usage-text">每日限用次数：{{card.dailyLimitCount}}次</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>
+
+							</view>
+							<view v-else class="renew-btn">
+								<text class="renew-text">单次限时：{{card.singleLimitMinutes}}分钟</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: 20rpx;
+		padding-top: 50rpx;
+		position: absolute;
+		background: rgba(255, 244, 227, 1);
+		z-index: 1;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		border-radius: 0 0 25rpx 25rpx;
+		
+		/* 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>

subPackages/business/my-coupon.vue

@@ -0,0 +1,542 @@
+<template>
+	<view class="my-coupon-page">
+		<!-- Tab 切换 -->
+		<!-- 		<view class="tab-container">
+			<view class="tab-item" :class="{ active: currentTab === 'available' }" @click="switchTab('available')">
+				<text class="tab-text">{{ $t('myCoupon.available') }}</text>
+			</view>
+			<view class="tab-item" :class="{ active: currentTab === 'used' }" @click="switchTab('used')">
+				<text class="tab-text">{{ $t('myCoupon.used') }}</text>
+			</view>
+			<view class="tab-item" :class="{ active: currentTab === 'expired' }" @click="switchTab('expired')">
+				<text class="tab-text">{{ $t('myCoupon.expired') }}</text>
+			</view>
+		</view> -->
+
+		<!-- 优惠券列表 -->
+		<view class="coupon-list" v-if="filteredCoupons.length > 0">
+			<view v-for="coupon in filteredCoupons" :key="coupon.id" class="coupon-item-wrapper">
+				<view class="coupon-item" :class="getCouponClass(coupon.status)">
+
+					<!-- 虚线上下圆形缺口 -->
+					<view class="coupon-circle-top"></view>
+					<view class="coupon-circle-bottom"></view>
+
+					<view class="coupon-left">
+						<view class="coupon-value">
+							<text v-if="coupon.type === 'cash'" class="coupon-unit">¥</text>
+							<text class="coupon-amount">{{ coupon.type === 'discount' ? coupon.discount : coupon.value }}</text>
+							<text v-if="coupon.type === 'discount'" class="coupon-unit">折</text>
+						</view>
+						<view style="display: flex;flex-direction: column;">
+							<text class="coupon-condition">{{ coupon.condition }}</text>
+							<text class="coupon-validity-left">{{ coupon.validity }}</text>
+						</view>
+					</view>
+					<view class="coupon-divider"></view>
+					<view class="coupon-right">
+						<!-- <text class="coupon-name">{{ coupon.name }}</text> -->
+						<!-- <text class="coupon-region" v-if="coupon.positionName"
+							style="font-size: 22rpx; color: #999; margin-top: 4rpx;">
+							{{ $t('myCoupon.onlyForRegionBefore') }}{{ coupon.positionName }}{{ $t('myCoupon.onlyForRegionAfter') }}
+						</text> -->
+						<view class="use-btn" v-if="coupon.status == 'unused'" @click="useCoupon(coupon)">
+							<text class="use-text">{{ $t('myCoupon.useNow') }}</text>
+						</view>
+						<text class="coupon-status" v-else>{{ getStatusText(coupon.status) }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 空状态 -->
+		<view class="empty-state" v-else>
+			<image class="empty-icon" src="/static/empty-coupon.png" mode="aspectFit"></image>
+			<text class="empty-text">{{ getEmptyText() }}</text>
+			<view class="buy-btn" @click="goToBuy" v-if="currentTab === 'available'">
+				<text class="buy-text">{{ $t('myCoupon.buyNow') }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from '@/utils/i18n.js'
+import { getUserCoupons } from '@/config/api/coupon.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()
+
+// 当前选中的 Tab
+const currentTab = ref('available')
+
+// // Tab 与 API 状态的映射
+// const tabToStatusMap = {
+// 	available: 'unused',
+// 	used: 'used',
+// 	expired: 'expired'
+// }
+
+// 优惠券列表
+const couponList = ref([])
+
+// 过滤后的优惠券
+const filteredCoupons = computed(() => {
+	return couponList.value;
+})
+
+// 获取优惠券列表
+const getCouponList = async () => {
+	try {
+		// const apiStatus = tabToStatusMap[currentTab.value]
+		const res = await getUserCoupons('')
+
+		if (res.code === 200 && res.data) {
+			// 将后端数据转换为前端需要的格式
+			couponList.value = (res.data || []).map(item => {
+				// 判断优惠券类型：discount_coupon 折扣券，deduction_coupon 抵扣券
+				const isCashCoupon = item.couponType === 'deduction_coupon'
+
+				// 格式化使用条件
+				let condition = '无门槛'
+				if (item.usableCondition && item.usableCondition > 0) {
+					condition = `满${item.usableCondition}可用`
+				}
+
+				// 格式化有效期
+				let validity = ''
+				if (currentTab.value === 'used') {
+					// 已使用显示使用时间
+					validity = item.couponStartTime ? `使用时间 ${item.couponStartTime.split(' ')[0]}` : ''
+				} else if (item.couponEndTime) {
+					validity = `于 ${item.couponEndTime.split(' ')[0]} 过期`
+				}
+				console.log(item.status);
+
+				return {
+					id: item.id,
+					name: item.couponName || '优惠券',
+					type: isCashCoupon ? 'cash' : 'discount',
+					value: item.deductAmount ? parseFloat(item.deductAmount) : 0,
+					discount: item.discountRate ? parseFloat(item.discountRate) * 10 : null,
+					condition: condition,
+					validity: validity,
+					status: item.status,
+					positionName: item.positionName
+				}
+			})
+		} else {
+			couponList.value = []
+		}
+	} catch (error) {
+		console.error('获取优惠券列表失败:', error)
+		couponList.value = []
+		uni.showToast({
+			title: t('myCoupon.getListFailed'),
+			icon: 'none'
+		})
+	}
+}
+
+// 切换 Tab
+const switchTab = (tab) => {
+	currentTab.value = tab
+	getCouponList()
+}
+
+// 获取优惠券样式类名
+const getCouponClass = (status) => {
+	return status === 'unused' ? '' : 'disabled'
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+	const statusMap = {
+		'used': t('myCoupon.usedStatus'),
+		'expired': t('myCoupon.expiredStatus'),
+		'refunded':t('myCoupon.refundedStatus')
+	}
+	console.log("获取状态文本："+statusMap[status]);
+	return statusMap[status] || ''
+}
+
+// 获取空状态文本
+const getEmptyText = () => {
+	const textMap = {
+		'available': t('myCoupon.noAvailableCoupons'),
+		'used': t('myCoupon.noUsedCoupons'),
+		'expired': t('myCoupon.noExpiredCoupons')
+	}
+	return textMap[currentTab.value] || ''
+}
+
+// 使用优惠券
+const useCoupon = async (coupon) => {
+	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?tab=coupon'
+	})
+}
+
+onMounted(() => {
+	uni.setNavigationBarTitle({
+		title: t('user.myCoupons')
+	})
+	getCouponList()
+})
+</script>
+
+<style lang="scss" scoped>
+// 优惠券样式变量封装
+$coupon-theme-color: #A16300;
+$coupon-divider-color: #B8741A;
+$coupon-bg-faded: #f5f5f5;
+$coupon-active-bg-start: #FFF4E6;
+$coupon-active-bg-end: #FFE8CC;
+$coupon-divider-left: 65%;
+$coupon-circle-radius: 16rpx;
+
+.my-coupon-page {
+	min-height: 100vh;
+	background-color: #f5f5f5;
+}
+
+/* Tab 切换 */
+.tab-container {
+	position: sticky;
+	top: 0;
+	display: flex;
+	background-color: #ffffff;
+	z-index: 999;
+	padding: 20rpx 0;
+}
+
+.tab-item {
+	flex: 1;
+	text-align: center;
+	padding: 20rpx 0;
+	position: relative;
+
+	.tab-text {
+		font-size: 28rpx;
+		color: #666;
+		font-weight: 500;
+	}
+
+	&.active {
+		.tab-text {
+			color: #333;
+			font-weight: 600;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 60rpx;
+			height: 6rpx;
+			background-color: #FFA928;
+			border-radius: 3rpx;
+		}
+	}
+}
+
+.coupon-list {
+	padding: 20rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.coupon-item-wrapper {
+	position: relative;
+}
+
+.coupon-item {
+	background: #FFF4E3;
+	border-radius: 20rpx;
+	padding: 40rpx 30rpx;
+	display: flex;
+	align-items: stretch;
+	position: relative;
+	overflow: visible;
+	min-height: 180rpx;
+	box-sizing: border-box;
+	border: 2rpx solid transparent;
+	transition: all 0.3s;
+
+	&.selected {
+		border-color: $coupon-divider-color;
+		box-shadow: 0 4rpx 20rpx rgba(184, 116, 26, 0.2);
+
+		.coupon-circle-top,
+		.coupon-circle-bottom {
+			background-color: $coupon-active-bg-start;
+			border: 2rpx solid $coupon-divider-color;
+		}
+	}
+
+	&.disabled {
+		background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+		opacity: 0.6;
+
+		.coupon-value,
+		.coupon-condition,
+		.coupon-name {
+			color: #999;
+		}
+
+		.coupon-circle-top,
+		.coupon-circle-bottom {
+			background-color: #f5f5f5;
+		}
+	}
+}
+
+/* 虚线顶部圆形缺口 */
+.coupon-circle-top {
+	position: absolute;
+	left: $coupon-divider-left+4%;
+	top: -$coupon-circle-radius;
+	transform: translateX(-50%);
+	width: $coupon-circle-radius * 2;
+	height: $coupon-circle-radius * 2;
+	border-radius: 50%;
+	background-color: $coupon-bg-faded;
+	z-index: 10;
+}
+
+/* 虚线底部圆形缺口 */
+.coupon-circle-bottom {
+	position: absolute;
+	left: $coupon-divider-left+4%;
+	bottom: -$coupon-circle-radius;
+	transform: translateX(-50%);
+	width: $coupon-circle-radius * 2;
+	height: $coupon-circle-radius * 2;
+	border-radius: 50%;
+	background-color: $coupon-bg-faded;
+	z-index: 10;
+}
+
+.coupon-left {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8rpx;
+}
+
+.coupon-value {
+	display: flex;
+	align-items: flex-end; // 单位在脚
+	color: $coupon-theme-color;
+	line-height: 1;
+	width:120rpx;
+}
+
+.coupon-amount {
+	font-size: 56rpx; // 值要大
+	font-weight: 700;
+}
+
+.coupon-unit {
+	font-size: 24rpx; // 单位小
+	font-weight: 500;
+	margin-bottom: 6rpx; // 微调单位垂直位置，使其更贴合“脚”
+	margin-left: 4rpx;
+	margin-right: 4rpx;
+}
+
+.coupon-condition {
+	font-size: 24rpx;
+	color: #000;
+	font-weight: 600;
+}
+
+.coupon-validity-left {
+	font-size: 22rpx;
+	color: #999;
+	margin-top: 8rpx;
+}
+
+.coupon-divider {
+	width: 2rpx;
+	height: 100%;
+	position: absolute;
+	left: $coupon-divider-left;
+	transform: translateX(-50%);
+	top: 0;
+	bottom: 0;
+	align-self: stretch;
+	background: repeating-linear-gradient(to bottom,
+			$coupon-divider-color 0rpx,
+			$coupon-divider-color 8rpx,
+			transparent 8rpx,
+			transparent 16rpx);
+	margin: 0 30rpx;
+}
+
+.coupon-right {
+	// flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+	align-items: center;
+	margin: auto 0;
+	width: 160rpx;
+	// align-content: center;
+	// transform: translateY(50%);
+}
+
+.coupon-name {
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #333;
+}
+
+.coupon-validity {
+	font-size: 22rpx;
+	color: #999;
+}
+
+.use-btn {
+	// margin-top: 10rpx;
+	// padding: 12rpx 28rpx;
+	// background-color: #B8741A;
+	// border-radius: 40rpx;
+
+	.use-text {
+		font-size: 28rpx;
+		color: #A16300;
+		font-weight: 600;
+	}
+}
+
+.coupon-status {
+	margin-top: 10rpx;
+	font-size: 24rpx;
+	color: #999;
+}
+
+.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>

subPackages/business/position/detail.vue

@@ -0,0 +1,361 @@
+<template>
+	<view class="position-detail-page">
+		<!-- 顶部设备柜图示 -->
+		<view class="device-illustration">
+			<image v-if="positionInfo.deviceImg" :src="positionInfo.deviceImg" class="device-img" mode="aspectFit"></image>
+			<image v-else src="/static/device-info.png" class="device-img" mode="aspectFit"></image>
+		</view>
+
+		<!-- 场地信息卡片 -->
+		<view class="info-card">
+			<!-- 场地名称 -->
+			<view class="position-name">{{ positionInfo.name || $t('common.loading') }}</view>
+
+			<!-- 地址信息 -->
+			<view class="info-item" v-if="positionInfo.location">
+				<image src="/static/device-location.png" class="item-icon" mode="aspectFit"></image>
+				<text class="item-text">{{ positionInfo.location }}</text>
+			</view>
+
+			<!-- 营业时间 -->
+			<view class="info-item" v-if="positionInfo.workTime && positionInfo.workTime !== '0'">
+				<image src="/static/device-time.png" class="item-icon" mode="aspectFit"></image>
+				<text class="item-text">{{ $t('location.businessHours') }}{{ positionInfo.workTime }}</text>
+			</view>
+
+			<!-- 计费信息 -->
+			<view class="info-item">
+				<image src="/static/device-price.png" class="item-icon" mode="aspectFit"></image>
+				<text class="item-text">{{ $t('device.pricing') }}：{{ pricingText }}</text>
+			</view>
+			
+			<!-- 可用数量信息 -->
+			<view class="info-item" v-if="positionInfo.availablePowerBankCount !== undefined && positionInfo.availablePowerBankCount !== null">
+				<image src="/static/device-info.png" class="item-icon" mode="aspectFit"></image>
+				<text class="item-text">可租借风扇：{{ positionInfo.availablePowerBankCount }} 台</text>
+			</view>
+			
+			<view class="info-item" v-if="positionInfo.availableEmptyGridCount !== undefined && positionInfo.availableEmptyGridCount !== null">
+				<image src="/static/device-info.png" class="item-icon" mode="aspectFit"></image>
+				<text class="item-text">可归还空位：{{ positionInfo.availableEmptyGridCount }} 个</text>
+			</view>
+
+			<!-- 按钮组 -->
+			<view class="button-group">
+				<view style="display: flex;flex-direction: row;gap: 10rpx;">
+					<view class="status-btn" v-if="isRentable">{{ $t('location.rent') }}</view>
+					<view class="status-btn" v-if="isReturnable">{{ $t('location.return') }}</view>
+				</view>
+
+				<view class="nav-btn" @click.stop="navigateToPosition">{{ $t('location.navigateHere') }}</view>
+			</view>
+		</view>
+
+		<!-- 底部操作按钮 -->
+		<view class="footer-actions">
+			<button class="action-btn btn-outline" @click="reportError">{{ $t('device.reportError') }}</button>
+			<button class="action-btn btn-primary" @click="scanCode">{{ $t('device.scanToUse') }}</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import {
+	ref,
+	computed,
+	onMounted
+} from 'vue'
+import {
+	onLoad
+} from '@dcloudio/uni-app'
+import {
+	getNearbyDevices,
+	transformDeviceData
+} from '@/config/api/device.js'
+import { useI18n } from '@/utils/i18n.js'
+
+const { t } = useI18n()
+
+	const positionInfo = ref({})
+	const positionId = ref('')
+
+	const isRentable = computed(() => {
+		if (typeof positionInfo.value?.canRent !== 'undefined') {
+			return !!positionInfo.value.canRent
+		}
+		return String(positionInfo.value?.status || '').toLowerCase() === 'online'
+	})
+
+	const isReturnable = computed(() => {
+		if (typeof positionInfo.value?.canReturn !== 'undefined') {
+			return !!positionInfo.value.canReturn
+		}
+		return String(positionInfo.value?.status || '').toLowerCase() === 'online'
+	})
+
+	const pricingText = computed(() => {
+		// 使用设备的 remark 字段作为计费信息
+		if (positionInfo.value?.remark) {
+			return positionInfo.value.remark
+		}
+		// 如果 remark 为空，显示默认提示
+		return '暂无计费信息'
+	})
+
+	onLoad(async (options) => {
+		if (options.positionId) {
+			positionId.value = options.positionId
+			await loadPositionDetail()
+		}
+	})
+
+	const loadPositionDetail = async () => {
+		try {
+			uni.showLoading({
+				title: t('common.loading')
+			})
+			
+			// 获取用户位置用于查询附近设备
+			let userLocation = null
+			try {
+				userLocation = uni.getStorageSync('userLocation')
+			} catch (e) {
+				console.warn('获取用户位置失败:', e)
+			}
+			
+			if (!userLocation || !userLocation.latitude || !userLocation.longitude) {
+				// 如果没有用户位置，使用默认位置
+				userLocation = { latitude: 39.916527, longitude: 116.397128 }
+			}
+			
+			const res = await getNearbyDevices({
+				userLatitude: userLocation.latitude,
+				userLongitude: userLocation.longitude,
+				queryType: 'rent', // 查询可租借设备
+				radiusKm: 50, // 扩大查询范围以确保能找到目标设备
+				pageNum: 1,
+				pageSize: 100
+			})
+
+			if (res.code === 200) {
+				const devices = res.data?.records || []
+				// 将设备数据转换为统一格式
+				const positions = devices.map(transformDeviceData)
+				
+				const position = positions.find(p => p.positionId === positionId.value)
+				if (position) {
+					positionInfo.value = position
+				} else {
+					uni.showToast({
+						title: t('location.notExist'),
+						icon: 'none'
+					})
+				}
+			}
+		} catch (e) {
+			console.error('加载设备详情失败:', e)
+			uni.showToast({
+				title: t('common.loadFailed'),
+				icon: 'none'
+			})
+		} finally {
+			uni.hideLoading()
+		}
+	}
+
+	const navigateToPosition = () => {
+		if (!positionInfo.value.latitude || !positionInfo.value.longitude) {
+			uni.showToast({
+				title: t('location.coordinateError'),
+				icon: 'none'
+			})
+			return
+		}
+
+		const latitude = parseFloat(positionInfo.value.latitude)
+		const longitude = parseFloat(positionInfo.value.longitude)
+
+		// 验证坐标有效性
+		if (isNaN(latitude) || isNaN(longitude) ||
+			latitude < -90 || latitude > 90 ||
+			longitude < -180 || longitude > 180 ||
+			(latitude === 0 && longitude === 0)) {
+			uni.showToast({
+				title: t('location.coordinateError'),
+				icon: 'none'
+			})
+			return
+		}
+
+		uni.openLocation({
+			latitude,
+			longitude,
+			name: positionInfo.value.name,
+			address: positionInfo.value.location
+		})
+	}
+
+	const reportError = () => {
+		uni.navigateTo({
+			url: '/pages/feedback/index'
+		})
+	}
+
+	const scanCode = () => {
+		uni.scanCode({
+			scanType: ['qrCode', 'barCode'],
+			success: (res) => {
+				console.log('扫码结果:', res)
+				// 处理扫码结果，跳转到设备详情页
+				if (res.result) {
+					// 假设二维码内容是设备号
+					uni.navigateTo({
+						url: `/pages/device/detail?deviceNo=${res.result}`
+					})
+				}
+			},
+			fail: (err) => {
+				console.error('扫码失败:', err)
+			uni.showToast({
+				title: this.$t('home.scanFailed'),
+				icon: 'none'
+			})
+			}
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+	.position-detail-page {
+		min-height: 100vh;
+		background: linear-gradient(180deg, #D1FFE1 0%, #F5F9F7 100%);
+		padding-bottom: 200rpx;
+	}
+
+	.device-illustration {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 40rpx 0 30rpx;
+
+		.device-img {
+			width: 480rpx;
+			height: 480rpx;
+		}
+	}
+
+	.info-card {
+		background: #ffffff;
+		margin: 0 32rpx;
+		border-radius: 32rpx;
+		padding: 44rpx 36rpx 36rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+
+		.position-name {
+			font-size: 44rpx;
+			font-weight: 700;
+			color: #1A1A1A;
+			margin-bottom: 32rpx;
+			line-height: 1.3;
+		}
+
+		.info-item {
+			display: flex;
+			align-items: flex-start;
+			margin-bottom: 20rpx;
+
+			.item-icon {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 12rpx;
+				margin-top: 2rpx;
+				flex-shrink: 0;
+			}
+
+			.item-text {
+				flex: 1;
+				font-size: 28rpx;
+				color: #666666;
+				line-height: 1.6;
+			}
+		}
+
+		.button-group {
+			display: flex;
+			gap: 12rpx;
+			margin-top: 36rpx;
+			justify-content: space-between;
+			flex-wrap: wrap;
+
+			.status-btn {
+				padding: 12rpx 28rpx;
+				border-radius: 40rpx;
+				font-size: 26rpx;
+				font-weight: 500;
+				border: 2rpx solid #3EAB64;
+				color: #3EAB64;
+				background: #ffffff;
+			}
+
+			.nav-btn {
+				padding: 12rpx 28rpx;
+				border-radius: 40rpx;
+				font-size: 26rpx;
+				font-weight: 500;
+				border: 2rpx solid #3EAB64;
+				color: #ffffff;
+				background: #3EAB64;
+
+				&:active {
+					opacity: 0.8;
+				}
+			}
+		}
+	}
+
+	.footer-actions {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #ffffff;
+		padding: 24rpx 32rpx;
+		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+		box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.08);
+		display: flex;
+		gap: 16rpx;
+
+		.action-btn {
+			flex: 1;
+			height: 96rpx;
+			border-radius: 48rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 32rpx;
+			font-weight: 600;
+			border: none;
+
+			&.btn-outline {
+				border: 2rpx solid #3EAB64;
+				color: #3EAB64;
+				background: #ffffff;
+			}
+
+			&.btn-primary {
+				background: #3EAB64;
+				color: #ffffff;
+			}
+
+			&:active {
+				opacity: 0.85;
+				transform: scale(0.98);
+			}
+
+			&::after {
+				border: none;
+			}
+		}
+	}
+</style>
+