From 2103d00b3d590ab28e5a781939c8ffef8b6a123a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=B3=BD=E7=BE=A4?= <1986070059@qq.com>
Date: Thu, 2 Jul 2026 17:58:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E6=83=A0=E5=88=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                            |   2 +-
 pages/mine/mine.vue                   |  12 +
 pages/other_package/coupon/coupon.vue | 355 ++++++++++++++++++++++++++
 3 files changed, 368 insertions(+), 1 deletion(-)
 create mode 100644 pages/other_package/coupon/coupon.vue

diff --git a/pages.json b/pages.json
index 954d491..63dbb7d 100644
--- a/pages.json
+++ b/pages.json
@@ -558,7 +558,7 @@
       "root": "pages/other_package",
       "pages": [
         {
-          "path": "productInfo/evaluateDetail",
+          "path": "coupon/coupon",
           "style": {
             "navigationStyle": "custom"
           }
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 103c9cb..afac13f 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -295,6 +295,12 @@ export default {
           title: "钱包",
           url: "https://static.tbmall.xin/static/mine/apply_purse.png",
           path: "/pages/mine_package/mine_purse/mine_purse",
+        },
+         {
+          id: 6,
+          title: "优惠券",
+          url: "https://static.tbmall.xin/static/mine/apply_prize.png",
+          path: "/pages/other_package/coupon/coupon",
         },
         {
           id: 2,
@@ -455,6 +461,12 @@ export default {
      * @param {Object} item
      */
     jumpTool(item) {
+      // 优惠券
+      if (item.id === 6) {
+        uni.navigateTo({
+          url: item.path,
+        });
+      }
       // 客服
       if (item.id === 7) {
         uni.navigateTo({
diff --git a/pages/other_package/coupon/coupon.vue b/pages/other_package/coupon/coupon.vue
new file mode 100644
index 0000000..9484cef
--- /dev/null
+++ b/pages/other_package/coupon/coupon.vue
@@ -0,0 +1,355 @@
+<template>
+	<view class="content">
+		<TopSafe></TopSafe>
+		<Header title="优惠券" />
+		
+		<!-- 顶部分类 Tab 栏 -->
+		<view class="tab-container">
+			<view 
+				v-for="(item, index) in tabs" 
+				:key="index" 
+				class="tab-item" 
+				:class="{ active: currentTab === index }"
+				@click="switchTab(index)"
+			>
+				<text class="tab-text">{{ item }}</text>
+				<view class="active-line" v-if="currentTab === index"></view>
+			</view>
+		</view>
+
+		<!-- 优惠券列表区域 -->
+		<view class="coupon-list">
+			<view 
+				v-for="(coupon, index) in filteredCoupons" 
+				:key="index" 
+				class="coupon-card"
+				:class="{ 'disabled': coupon.status === 'expired' }"
+			>
+				<!-- 左侧：金额与门槛 -->
+				<view class="card-left">
+					<view class="price-box">
+						<text class="currency">¥</text>
+						<text class="amount">{{ coupon.amount }}</text>
+					</view>
+					<text class="condition">{{ coupon.condition }}</text>
+				</view>
+				
+				<!-- 带有上下半圆凹槽的虚线分割线 -->
+				<view class="divider-wrapper">
+					<view class="notch top-notch"></view>
+					<view class="divider-line"></view>
+					<view class="notch bottom-notch"></view>
+				</view>
+
+				<!-- 右侧：详细内容 -->
+				<view class="card-right">
+					<view class="info-content">
+						<view class="title">{{ coupon.title }}</view>
+						<view class="description">{{ coupon.description }}</view>
+						
+						<!-- 状态/倒计时文本 -->
+						<view v-if="coupon.status === 'active'" class="countdown">
+							仅剩 {{ coupon.timeLeft }}
+						</view>
+						<view v-else class="expired-text">
+							已失效
+						</view>
+					</view>
+					
+					<!-- 按钮：仅在有效状态下显示 -->
+					<view v-if="coupon.status === 'active'" class="use-btn" @click="useCoupon(coupon)">
+						使用
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<up-toast ref="uToastRef"></up-toast>
+	</view>
+</template>
+
+<script>
+import Header from '@/components/common/header.vue';
+import TopSafe from '@/components/common/top-safe.nvue'
+import MyBtn from '@/components/common/my-btn.vue'
+
+export default {
+	components: { Header, TopSafe, MyBtn },
+	data() {
+		return {
+			currentTab: 0,
+			tabs: ['全部', '可使用', '已失效'],
+			coupons: [
+				{
+					amount: 12,
+					condition: '无门槛',
+					title: '限时秒杀优惠券',
+					description: '云南白药牙膏儿膏儿膏儿...',
+					timeLeft: '14:20:55',
+					status: 'active'
+				},
+				{
+					amount: 8,
+					condition: '无门槛',
+					title: '限时秒杀优惠券',
+					description: '云南白药牙膏儿膏儿膏儿...',
+					timeLeft: '14:20:55',
+					status: 'active'
+				},
+				{
+					amount: 12,
+					condition: '无门槛',
+					title: '限时秒杀优惠券',
+					description: '牛肉干儿牛肉干儿牛肉干',
+					timeLeft: '',
+					status: 'expired'
+				}
+			]
+		};
+	},
+	computed: {
+		filteredCoupons() {
+			if (this.currentTab === 1) {
+				return this.coupons.filter(item => item.status === 'active');
+			} else if (this.currentTab === 2) {
+				return this.coupons.filter(item => item.status === 'expired');
+			}
+			return this.coupons;
+		}
+	},
+	methods: {
+		switchTab(index) {
+			this.currentTab = index;
+		},
+		useCoupon(coupon) {
+			uni.showToast({
+				title: `去使用 ${coupon.amount} 元券`,
+				icon: 'none'
+			});
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+	background-color: #f7f8fa;
+	min-height: 100vh;
+}
+
+/* ================= 顶部分类 Tab 栏像素级还原 ================= */
+.tab-container {
+	display: flex;
+	background-color: #ffffff;
+	padding: 0 40rpx;
+	height: 100rpx;
+	align-items: center;
+	border-bottom: 2rpx solid #fcfcfc;
+	
+	.tab-item {
+		margin-right: 54rpx;
+		position: relative;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+		
+		.tab-text {
+			font-size: 28rpx;
+			color: #9c9c9c; /* 未激活时为较淡的灰色 */
+			transition: all 0.2s ease;
+		}
+		
+		&.active {
+			.tab-text {
+				color: #692bc7; /* 完美的深紫激活色 */
+				font-weight: bold;
+			}
+		}
+
+		/* 独立的底部短下划线控制 */
+		.active-line {
+			position: absolute;
+			bottom: 12rpx;
+			width: 52rpx; /* 缩短下划线宽度，完美贴合字宽 */
+			height: 5rpx;  /* 加粗 */
+			background-color: #692bc7;
+			border-radius: 4rpx;
+		}
+	}
+}
+
+/* ================= 优惠券列表区域 ================= */
+.coupon-list {
+	padding: 30rpx 24rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+}
+
+/* 优惠券单卡片基本样式 */
+.coupon-card {
+	background-color: #fff4f4; /* 淡淡的红粉色底 */
+	border-radius: 16rpx;
+	display: flex;
+	height: 196rpx;
+	position: relative;
+	
+	/* 左侧面：金额区 */
+	.card-left {
+		width: 190rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex-shrink: 0;
+		
+		.price-box {
+			display: flex;
+			align-items: flex-end; /* 底部对齐 */
+			color: #ff1224;
+			font-weight: bold;
+			
+			.currency {
+				font-size: 26rpx;
+				margin-right: 2rpx;
+				margin-bottom: 6rpx; /* 让¥符号优雅落地 */
+			}
+			
+			.amount {
+				font-size: 64rpx;
+				line-height: 64rpx;
+			}
+		}
+		
+		.condition {
+			font-size: 24rpx;
+			color: #ff1224;
+			margin-top: 10rpx;
+		}
+	}
+	
+	/* 带有上下半圆凹槽的虚线分割线组件 */
+	.divider-wrapper {
+		width: 2rpx;
+		position: relative;
+		margin: 10rpx 0;
+		display: flex;
+		justify-content: center;
+		
+		.divider-line {
+			width: 0;
+			height: 100%;
+			border-left: 2rpx dashed #ffcbd0;
+		}
+		
+		/* 模拟卡片边缘剪票口的半圆凹槽 */
+		.notch {
+			position: absolute;
+			width: 16rpx;
+			height: 16rpx;
+			background-color: #f7f8fa; /* 颜色和页面大背景融为一体 */
+			border-radius: 50%;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+		.top-notch {
+			top: -18rpx;
+		}
+		.bottom-notch {
+			bottom: -18rpx;
+		}
+	}
+	
+	/* 右侧面：内容与按钮区 */
+	.card-right {
+		flex: 1;
+		padding: 26rpx 24rpx 24rpx 36rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		box-sizing: border-box;
+		
+		.info-content {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			flex: 1;
+			overflow: hidden;
+			
+			.title {
+				font-size: 30rpx;
+				color: #2c2c2c;
+				font-weight: bold;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			
+			.description {
+				font-size: 24rpx;
+				color: #6a6a6a;
+				margin-top: 8rpx;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			
+			.countdown {
+				font-size: 22rpx;
+				color: #ff5260;
+				margin-top: 14rpx;
+			}
+		}
+		
+		/* 立即使用按钮 */
+		.use-btn {
+			width: 120rpx;
+			height: 56rpx;
+			background-color: #ff1a2e;
+			color: #ffffff;
+			font-size: 24rpx;
+			border-radius: 12rpx; /* 原图接近微圆角矩形，而非纯半圆 */
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+			margin-left: 16rpx;
+			font-weight: 500;
+			
+			&:active {
+				opacity: 0.8;
+			}
+		}
+	}
+	
+	/* ======= 已失效状态覆盖 ======= */
+	&.disabled {
+		background-color: #f4f4f4; /* 换成失效灰底 */
+		
+		.card-left {
+			.price-box { color: #9c9c9c; }
+			.condition { color: #9c9c9c; }
+		}
+		
+		.divider-wrapper {
+			.divider-line { border-left-color: #e2e2e2; }
+		}
+		
+		.card-right {
+			.info-content {
+				.title { color: #2c2c2c; } /* 失效标题依然清晰 */
+				.description { color: #9c9c9c; }
+			}
+			.expired-text {
+				font-size: 22rpx;
+				color: #bcbcbc;
+				margin-top: 14rpx;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file