From fbc074229fd4736f1ae2793c9daebf04726188b2 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 22 五月 2026 18:27:27 +0800
Subject: [PATCH] 提交

---
 small-program/pages/luggage-storage/luggage-storage.vue |  529 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 501 insertions(+), 28 deletions(-)

diff --git a/small-program/pages/luggage-storage/luggage-storage.vue b/small-program/pages/luggage-storage/luggage-storage.vue
index 55bc07d..4c8ef9c 100644
--- a/small-program/pages/luggage-storage/luggage-storage.vue
+++ b/small-program/pages/luggage-storage/luggage-storage.vue
@@ -1,5 +1,15 @@
 <template>
 	<view class="luggage-page">
+		<view class="nav-bar" :style="{ paddingTop: statusbarHeight + 'px' }">
+			<view class="nav-content" :style="{ height: navHeight + 'px' }">
+				<view class="nav-left" @click="goBack">
+					<u-icon name="arrow-left" :size="26" color="#333333"></u-icon>
+				</view>
+				<text class="nav-title">琛屾潕瀵勫瓨</text>
+				<view class="nav-right"></view>
+			</view>
+		</view>
+		<!-- <view class="top-placeholder" :style="{ height: statusbarHeight + navHeight + 'px' }"></view> -->
 		<view class="top-gradient-bg"></view>
 		<view class="mode-tabs">
 			<view
@@ -7,7 +17,7 @@
 				:key="item.value"
 				class="mode-tab"
 				:class="{ active: activeMode === item.value }"
-				@tap="switchMode(item.value)"
+				@click="switchMode(item.value)"
 			>
 				<text>{{ item.label }}</text>
 				<view v-if="activeMode === item.value" class="mode-line"></view>
@@ -219,6 +229,18 @@
 				</view>
 
 				<view class="section-card simple-card">
+					<view class="form-row" @click="selectCoupon">
+						<text class="form-label">骞冲彴浼樻儬鍒�</text>
+						<view class="form-value-wrap">
+							<view style="display: flex; flex-direction: column; align-items: flex-end;">
+								<text :class="selectedCoupon && selectedCoupon.value > 0 ? 'coupon-value-red' : 'form-value-placeholder'">{{ selectedCoupon && selectedCoupon.value > 0 ? '-锟�' + selectedCoupon.value.toFixed(2) : '閫夋嫨浼樻儬鍒�' }}</text>
+							</view>
+							<u-icon name="arrow-right" size="14" color="#999999"></u-icon>
+						</view>
+					</view>
+				</view>
+
+				<view class="section-card simple-card">
 					<view class="form-row no-border">
 						<text class="form-label">澶囨敞</text>
 						<input v-model="form.remark" class="form-input" :class="{ 'filled-input': form.remark }" type="text" placeholder="璇疯緭鍏�" placeholder-style="color: #B2B2B2;" placeholder-class="input-placeholder" />
@@ -226,7 +248,65 @@
 				</view>
 
 			</view>
+			<view style="width: 100%; height: 104rpx;" v-if="amountData"></view>
+			<view style="width: 100%; height: calc(112rpx + env(safe-area-inset-bottom));"></view>
 		</scroll-view>
+
+		<!-- 浼樻儬鍒搁�夋嫨寮圭獥 -->
+		<u-popup :show="showCouponPopup" mode="bottom" round="24" :closeOnClickOverlay="true" @close="showCouponPopup = false">
+			<view class="coupon-popup-wrap">
+				<view class="coupon-popup-head">
+					<text class="coupon-popup-title">閫夋嫨浼樻儬鍒�</text>
+					<view class="coupon-popup-close" @tap="showCouponPopup = false">
+						<u-icon name="close" size="28" color="#999999"></u-icon>
+					</view>
+				</view>
+				<scroll-view scroll-y class="coupon-list-scroll">
+					<template v-if="couponList.length > 0">
+						<view
+							v-for="(coupon, index) in couponList"
+							:key="index"
+							class="coupon-item"
+							:class="{ active: selectedCouponIndex === index }"
+							@click="toggleCoupon(index)"
+						>
+							<!-- 涓婂崐閮ㄥ垎 -->
+							<view class="coupon-item-top">
+								<view class="coupon-item-left">
+									<text class="coupon-name" v-if="coupon.couponType === 0">骞冲彴婊″噺鍒�</text>
+									<text class="coupon-validity">鏈夋晥鏈焮{ formatDate(coupon.startDate) }}~{{ formatDate(coupon.endDate) }}</text>
+								</view>
+								<view class="coupon-item-right">
+									<text class="coupon-amount">锟{ ((coupon.price || 0) / 100).toFixed(2) }}</text>
+									<text class="coupon-desc">婊{((coupon.limitPrice || 0) / 100).toFixed(2)}}鍙敤</text>
+								</view>
+							</view>
+							
+							<!-- 铏氱嚎鍒嗛殧 -->
+							<view class="coupon-divider"></view>
+							
+							<!-- 涓嬪崐閮ㄥ垎 -->
+							<view class="coupon-item-bottom">
+								<view class="coupon-usage" @click.stop="toggleUsage(index)">
+									<text class="coupon-usage-label">浣跨敤璇存槑</text>
+									<u-icon :name="showUsageIndex === index ? 'arrow-up' : 'arrow-down'" size="14" color="#999999"></u-icon>
+								</view>
+								<u-icon v-if="selectedCouponIndex === index" name="checkmark-circle-fill" size="24" color="#1890FF"></u-icon>
+							</view>
+							
+							<!-- 浣跨敤璇存槑鍐呭 -->
+							<view v-if="showUsageIndex === index" class="coupon-usage-content">
+								<text class="coupon-usage-text">{{ coupon.info }}</text>
+							</view>
+						</view>
+					</template>
+					<view class="coupon-list-scroll-wu" v-else>鏆傛棤浼樻儬鍒�</view>
+				</scroll-view>
+				<view class="coupon-confirm-btn-wrap">
+					<view class="coupon-confirm-btn active-submit-btn" @click="confirmCoupon">纭畾閫夋嫨</view>
+				</view>
+			</view>
+		</u-popup>
 
 		<u-popup :show="showStorePopup" mode="bottom" round="24" :closeOnClickOverlay="true" @close="showStorePopup = false">
 			<view class="store-popup-wrap">
@@ -342,6 +422,12 @@
 						</view>
 						<text class="amount-row-value">{{ '锟�' + amountData.insuranceFee }}</text>
 					</view>
+					<view v-if="selectedCoupon" class="amount-row amount-row-extra">
+						<view class="amount-row-left">
+							<text class="amount-row-label">骞冲彴浼樻儬鍒�</text>
+						</view>
+						<text class="amount-row-discount">-锟{ selectedCoupon.value || selectedCoupon.amount || 0 }}</text>
+					</view>
 				</view>
 				<view class="agreement-bar popup-agreement-bar" @click="toggleAgreement">
 					<image class="agreement-icon" :src="agreementChecked ? '/static/icon/ic_accept_sel@2x.png' : '/static/icon/ic_accept@2x.png'" mode="widthFix" />
@@ -353,8 +439,8 @@
 				<view class="bottom-action-row popup-action-row">
 					<view class="total-wrap">
 						<text class="total-label">鎬昏垂鐢�</text>
-						<text class="total-price">{{ amountData ? '锟�' + amountData.totalPrice : '锟�--' }}</text>
-						<view style="display: flex; align-items: center;" @click="showAmountPopup = false">
+						<text class="total-price">{{ amountData ? '锟�' + (amountData.totalPrice - (selectedCoupon ? selectedCoupon.value || selectedCoupon.amount || 0 : 0)).toFixed(2) : '锟�--' }}</text>
+						<view style="width: 100rpx; height: 40rpx; display: flex; align-items: center;" @click="showAmountPopup = false">
 							<text class="detail-text">鏄庣粏</text>
 							<u-icon name="arrow-up" size="13" color="#7B7F86"></u-icon>
 						</view>
@@ -373,11 +459,11 @@
 				<text class="agreement-link" @click="goRichText(1)">銆婇殣绉佹斂绛栥��</text>
 			</view>
 			<view class="bottom-action-row">
-				<view class="total-wrap">
+				<view class="total-wrap" @click.stop="openAmountPopup">
 					<text class="total-label">鎬昏垂鐢�</text>
-					<text class="total-price">{{ amountData ? '锟�' + amountData.totalPrice : '锟�--' }}</text>
+					<text class="total-price">{{ amountData ? '锟�' + (amountData.totalPrice - (selectedCoupon ? selectedCoupon.value || 0 : 0)).toFixed(2) : '锟�--' }}</text>
 					<template v-if="amountData">
-						<text class="detail-text detail-click" @tap.stop="openAmountPopup">鏄庣粏</text>
+						<text class="detail-text detail-click">鏄庣粏</text>
 						<u-icon name="arrow-down" size="18" color="#999999"></u-icon>
 					</template>
 				</view>
@@ -456,8 +542,13 @@
 				actions: [
 					{ name: '閫夋嫨鏈嶅姟鐐�' },
 					{ name: '閫夋嫨鍦板潃绨�' }
-				]
-			}
+				],
+				selectedCoupon: null,
+			showCouponPopup: false,
+			couponList: [],
+			selectedCouponIndex: -1,
+			showUsageIndex: -1,
+		}
 		},
 		watch: {
 			'form.insurance': {
@@ -474,7 +565,7 @@
 			}
 		},
 		computed: {
-			...mapState(['latitude', 'longitude', 'cityId']),
+			...mapState(['latitude', 'longitude', 'cityId', 'statusbarHeight', 'navHeight', 'userInfo']),
 			servicePointPlaceholder() {
 				return this.activeMode === 'city' ? '閫夋嫨瀵勯�佹湇鍔$偣' : '閫夋嫨瀵勫瓨鏈嶅姟鐐�'
 			},
@@ -505,22 +596,129 @@
 			this.getContactInfo()
 			
 			if (uni.getStorageSync('selectedStore')) {
-				this.selectedStore = uni.getStorageSync('selectedStore')
+				const store = uni.getStorageSync('selectedStore')
+				this.selectedStore = store
+				this.sendStore = store
 				uni.removeStorageSync('selectedStore')
 			}
 
 			uni.$on('updateAddress', (data) => {
+				this.receiveStore = null
 				this.form.receiver = data.name
 				this.form.mobile = data.phone
 				this.receiveAddr = data
 				this.receiveAddr.addr = data.provinceName + data.cityName + data.districtName + data.addr
 			})
+
+			uni.$on('selectCoupon', (data) => {
+				this.selectedCoupon = data
+				if (this.activeMode === 'city') {
+					this.calculateRemotePrice()
+				} else {
+					this.calculateLocalPrice()
+				}
+			})
+		},
+		onUnload() {
+			uni.$off('updateAddress')
+			uni.$off('selectCoupon')
 		},
 		methods: {
+			formatDate(dateStr) {
+				if (!dateStr) return ''
+				const date = new Date(dateStr)
+				const year = String(date.getFullYear()).slice(2)
+				const month = String(date.getMonth() + 1).padStart(2, '0')
+				const day = String(date.getDate()).padStart(2, '0')
+				const hours = String(date.getHours()).padStart(2, '0')
+				const minutes = String(date.getMinutes()).padStart(2, '0')
+				return `${year}.${month}.${day} ${hours}:${minutes}`
+			},
+			hasFormData() {
+				if (this.form.receiver || this.form.mobile || this.form.arriveTime || 
+					this.form.pickupTime || this.form.goodType || this.form.insurance || 
+					this.form.remark || this.form.goodsImages.length > 0 ||
+					this.selectedStore || this.sendStore || this.receiveStore || 
+					this.receiveAddr || this.amountData) {
+					return true
+				}
+				if (this.luggageTypes.some(item => item.count > 0)) {
+					return true
+				}
+				return false
+			},
+			goBack() {
+				if (this.hasFormData()) {
+					uni.showModal({
+						title: '鎻愮ず',
+						content: '绂诲紑鍚庡綋鍓嶉〉闈㈠唴瀹瑰け鏁堬紝鏄惁纭绂诲紑锛�',
+						confirmText: '纭绂诲紑',
+						cancelText: '鍙栨秷',
+						success: (res) => {
+							if (res.confirm) {
+								uni.navigateBack()
+							}
+						}
+					})
+				} else {
+					uni.navigateBack()
+				}
+			},
+			getCouponId() {
+				if (this.selectedCoupon && this.selectedCoupon.id && this.selectedCoupon.id > 0) {
+					return this.selectedCoupon.id
+				} else if (this.selectedCoupon && this.selectedCoupon.id === 0) {
+					return null
+				}
+				return -1
+			},
+			selectCoupon() {
+				this.showCouponPopup = true
+			},
+			toggleUsage(index) {
+				if (this.showUsageIndex === index) {
+					this.showUsageIndex = -1
+				} else {
+					this.showUsageIndex = index
+				}
+			},
+			toggleCoupon(index) {
+				if (this.selectedCouponIndex === index) {
+					// 閲嶅鐐瑰嚮锛屽彇娑堥�夋嫨
+					this.selectedCouponIndex = -1
+				} else {
+					// 閫夋嫨浼樻儬鍒�
+					this.selectedCouponIndex = index
+				}
+			},
+			confirmCoupon() {
+				if (this.selectedCouponIndex >= 0 && this.selectedCouponIndex < this.couponList.length) {
+					const coupon = this.couponList[this.selectedCouponIndex]
+					this.selectedCoupon = {
+						id: coupon.id,
+						name: coupon.name,
+						value: coupon.value || coupon.amount / 100,
+						price: coupon.amount
+					}
+					this.showCouponPopup = false
+					if (this.activeMode === 'city') {
+						this.calculateRemotePrice()
+					} else {
+						this.calculateLocalPrice()
+					}
+				} else if (this.selectedCouponIndex === -1) {
+					// 鍙栨秷閫夋嫨浼樻儬鍒�
+					this.selectedCoupon = { id: 0, name: '涓嶄娇鐢ㄤ紭鎯犲埜', value: 0 }
+					this.showCouponPopup = false
+					if (this.activeMode === 'city') {
+						this.calculateRemotePrice()
+					} else {
+						this.calculateLocalPrice()
+					}
+				}
+			},
 			caozuo(e) {
 				var that = this;
-				this.receiveStore = null
-				this.receiveAddr = null
 				if (e.name === '閫夋嫨鏈嶅姟鐐�') {
 					that.storePopupType = 'receive'
 					that.showStorePopup = true
@@ -623,12 +821,8 @@
 			},
 			switchMode(mode) {
 				this.activeMode = mode
-				this.selectedStore = null
-				this.sendStore = null
 				this.receiveStore = null
 				this.receiveAddr = null
-				this.form.receiver = ''
-				this.form.mobile = ''
 				this.form.arriveTime = ''
 				this.form.pickupTime = ''
 				this.form.goodType = ''
@@ -752,12 +946,11 @@
 			async getContactInfo() {
 				const res = await this.$u.api.getContactInfo({})
 				if (res.code === 200 && res.data) {
-					if (res.data.name) {
-						this.form.receiver = res.data.name
-					}
-					if (res.data.phone) {
-						this.form.mobile = res.data.phone
-					}
+					this.form.receiver = res.data.name || this.userInfo.name || ''
+					this.form.mobile = res.data.phone || this.userInfo.telephone || ''
+				} else {
+					this.form.receiver = this.userInfo.name || ''
+					this.form.mobile = this.userInfo.telephone || ''
 				}
 			},
 			async getNearbyShopList() {
@@ -819,7 +1012,8 @@
 					depositStartTime: this.form.arriveTime + ':00',
 					depositEndTime: this.form.pickupTime + ':00',
 					items: luggageList,
-					declaredAmount: this.form.insurance || 0
+					declaredAmount: this.form.insurance || 0,
+					couponId: this.getCouponId()
 				})
 				if (res.code === 200) {
 					res.data.itemList.forEach(item => {
@@ -827,7 +1021,26 @@
 					})
 					res.data.totalPrice = res.data.totalPrice / 100
 					res.data.insuranceFee = res.data.insuranceFee / 100
+					if (res.data.selectedCoupon) {
+						res.data.selectedCoupon.value = res.data.selectedCoupon.price / 100
+					}
+					if (res.data.availableCoupons) {
+						res.data.availableCoupons.forEach(coupon => {
+							coupon.value = coupon.price / 100
+						})
+						this.couponList = res.data.availableCoupons
+					}
 					this.amountData = res.data
+					if (res.data.selectedCoupon) {
+						this.selectedCoupon = res.data.selectedCoupon
+						// 鎵惧埌瀵瑰簲鐨勪紭鎯犲埜绱㈠紩
+						if (res.data.availableCoupons) {
+							const index = res.data.availableCoupons.findIndex(coupon => coupon.id === res.data.selectedCoupon.id)
+							if (index !== -1) {
+								this.selectedCouponIndex = index
+							}
+						}
+					}
 				}
 			},
 			async calculateRemotePrice() {
@@ -872,7 +1085,8 @@
 					toLgt: toLgt,
 					urgent: this.isUrgent,
 					items: luggageList,
-					declaredAmount: this.form.insurance || 0
+					declaredAmount: this.form.insurance || 0,
+					couponId: this.getCouponId()
 				})
 				if (res.code === 200) {
 					res.data.itemList.forEach(item => {
@@ -880,11 +1094,30 @@
 					})
 					res.data.totalPrice = res.data.totalPrice / 100
 					res.data.insuranceFee = res.data.insuranceFee / 100
+					if (res.data.selectedCoupon) {
+						res.data.selectedCoupon.value = res.data.selectedCoupon.price / 100
+					}
+					if (res.data.availableCoupons) {
+						res.data.availableCoupons.forEach(coupon => {
+							coupon.value = coupon.price / 100
+						})
+						this.couponList = res.data.availableCoupons
+					}
 					this.serviceTimes = [
 						{ id: 0, name: '鏍囧噯杈�', serviceTime: res.data.standardHours, price: res.data.itemPrice / 100 },
 						{ id: 1, name: '鎬ラ�熻揪', serviceTime: res.data.urgentHours, price: (res.data.urgentFee + res.data.itemPrice) / 100 }
 					]
 					this.amountData = res.data
+					if (res.data.selectedCoupon) {
+						this.selectedCoupon = res.data.selectedCoupon
+						// 鎵惧埌瀵瑰簲鐨勪紭鎯犲埜绱㈠紩
+						if (res.data.availableCoupons) {
+							const index = res.data.availableCoupons.findIndex(coupon => coupon.id === res.data.selectedCoupon.id)
+							if (index !== -1) {
+								this.selectedCouponIndex = index
+							}
+						}
+					}
 				}
 			},
 			async createOrder() {
@@ -975,7 +1208,8 @@
 					takePhone: this.form.mobile,
 					takeUser: this.form.receiver,
 					type: this.activeMode === 'local' ? 0 : 1,
-					isUrgent: this.isUrgent
+					isUrgent: this.isUrgent,
+					couponId: this.getCouponId()
 				}
 				if (this.activeMode === 'local') {
 					orderParams.depositShopId = this.selectedStore.id
@@ -1041,10 +1275,40 @@
 		background: #f5f6f8;
 	}
 
+	.nav-bar {
+		position: sticky;
+		top: 0;
+		left: 0;
+		right: 0;
+		background: #ffffff;
+		z-index: 100;
+		.nav-content {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 30rpx;
+			.nav-left {
+				width: 40rpx;
+				height: 40rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.nav-title {
+				font-size: 34rpx;
+				font-weight: 600;
+				color: #333333;
+			}
+			.nav-right {
+				width: 40rpx;
+			}
+		}
+	}
+
 	.top-gradient-bg {
 		position: absolute;
 		left: 0;
-		top: 88rpx;
+		top: 0;
 		width: 100%;
 		height: 480rpx;
 		background: linear-gradient(180deg, #15b9f7 0%, #f7f7f7 100%);
@@ -1088,7 +1352,6 @@
 
 	.page-scroll {
 		position: relative;
-		z-index: 1;
 		height: calc(100vh - 88rpx - 186rpx - env(safe-area-inset-bottom));
 	}
 
@@ -1159,7 +1422,7 @@
 	}
 
 	.store-list-scroll {
-		max-height: 70vh;
+		max-height: 60vh;
 		min-height: 50vh;
 		margin-top: 30rpx;
 	}
@@ -1502,6 +1765,26 @@
 		font-weight: 500;
 		font-size: 30rpx;
 		color: #222222;
+	}
+
+	.form-value-wrap {
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+		flex: 1;
+		justify-content: flex-end;
+	}
+
+	.form-value-text {
+		font-weight: 400;
+		font-size: 28rpx;
+		color: #333333;
+	}
+
+	.form-value-placeholder {
+		font-weight: 400;
+		font-size: 28rpx;
+		color: #B2B2B2;
 	}
 
 	.form-input {
@@ -1914,6 +2197,24 @@
 		color: #222222;
 	}
 
+	.amount-row-right {
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+	}
+
+	.amount-row-placeholder {
+		font-weight: 400;
+		font-size: 30rpx;
+		color: #999999;
+	}
+
+	.amount-row-discount {
+		font-weight: 400;
+		font-size: 30rpx;
+		color: #FF4D4F;
+	}
+
 	.popup-agreement-bar {
 		margin-top: 12rpx;
 	}
@@ -1989,6 +2290,7 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
+		z-index: 1;
 		padding: 0 0 env(safe-area-inset-bottom);
 		background: #ffffff;
 		box-sizing: border-box;
@@ -2043,4 +2345,175 @@
 	.active-submit-btn {
 		background: #10B2FA;
 	}
+
+	/* 浼樻儬鍒稿脊绐楁牱寮� */
+	.coupon-popup-wrap {
+		background: #ffffff;
+		border-radius: 24rpx 24rpx 0 0;
+		padding: 0 30rpx 16rpx 30rpx;
+		box-sizing: border-box;
+	}
+
+	.coupon-popup-head {
+		position: relative;
+		height: 96rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.coupon-popup-title {
+		font-weight: 600;
+		font-size: 32rpx;
+		color: #222222;
+	}
+
+	.coupon-popup-close {
+		position: absolute;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 56rpx;
+		height: 56rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.coupon-list-scroll {
+		max-height: 60vh;
+		min-height: 20vh;
+		padding-bottom: 20rpx;
+	}
+
+	.coupon-list-scroll-wu {
+		width: 100%;
+		height: 20vh;
+		line-height: 20vh;
+		text-align: center;
+		font-weight: 400;
+		font-size: 30rpx;
+		color: #999999;
+	}
+
+	.coupon-item {
+		background: #F7F8FA;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		margin-bottom: 16rpx;
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+		border: 2rpx solid transparent;
+		transition: all 0.3s;
+	}
+
+	.coupon-item-top {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+	}
+
+	.coupon-item-bottom {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.coupon-divider {
+		height: 1rpx;
+		background: repeating-linear-gradient(to right, #CCCCCC 0, #CCCCCC 8rpx, transparent 8rpx, transparent 16rpx);
+		margin: 12rpx 0;
+	}
+
+	.coupon-item.active {
+		background: #E6F7FF;
+		border-color: #1890FF;
+	}
+
+	.coupon-item-left {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 12rpx;
+	}
+
+	.coupon-name {
+		font-weight: 500;
+		font-size: 30rpx;
+		color: #222222;
+	}
+
+	.coupon-validity {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+	}
+
+	.coupon-usage {
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #666666;
+	}
+
+	.coupon-usage-label {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #666666;
+	}
+
+	.coupon-usage-content {
+		
+	}
+
+	.coupon-usage-text {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #666666;
+		line-height: 1.5;
+	}
+
+	.coupon-item-right {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 12rpx;
+	}
+
+	.coupon-amount {
+		font-weight: 600;
+		font-size: 32rpx;
+		color: #FF4D4F;
+	}
+
+	.coupon-desc {
+		font-weight: 400;
+		font-size: 22rpx;
+		color: #FF4D4F;
+		border-radius: 12rpx;
+	}
+
+	.coupon-confirm-btn-wrap {
+		padding: 24rpx 0;
+	}
+
+	.coupon-confirm-btn {
+		height: 88rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+		font-size: 32rpx;
+		color: #FFFFFF;
+		border-radius: 44rpx;
+	}
+
+	.coupon-value-red {
+		font-weight: 400;
+		font-size: 30rpx;
+		color: #FF4D4F;
+	}
 </style>

--
Gitblit v1.9.3