优惠券详情

pages.json

@@ -27,7 +27,7 @@
 				"navigationBarTitleText": "社区活动"
 			}
 
-		},						
+		},
 		{
 			"path": "pages/appCenter/index",
 			"style": {
@@ -72,45 +72,49 @@
 			}
 		},
 		{
-			"path" : "pages/self/enterpriseInfo",
-			"style" : 
-			{
-				"navigationBarTitleText" : "企业资料"
+			"path": "pages/self/enterpriseInfo",
+			"style": {
+				"navigationBarTitleText": "企业资料"
 			}
 		},
 		{
-			"path" : "pages/self/commonQuestion",
-			"style" : 
-			{
-				"navigationBarTitleText" : "常见问题"
+			"path": "pages/self/commonQuestion",
+			"style": {
+				"navigationBarTitleText": "常见问题"
 			}
 		},
 		{
-			"path" : "pages/self/auth",
-			"style" : 
-			{
-				"navigationBarTitleText" : "认证信息"
+			"path": "pages/self/auth",
+			"style": {
+				"navigationBarTitleText": "认证信息"
 			}
 		},
 		{
-			"path" : "pages/self/enterpriseTeam",
-			"style" : 
-			{
-				"navigationBarTitleText" : "企业团队"
+			"path": "pages/self/enterpriseTeam",
+			"style": {
+				"navigationBarTitleText": "企业团队"
 			}
 		},
 		{
-			"path" : "pages/self/authSetting",
-			"style" : 
-			{
-				"navigationBarTitleText" : "权限设置"
+			"path": "pages/self/authSetting",
+			"style": {
+				"navigationBarTitleText": "权限设置"
 			}
 		},
 		{
-			"path" : "pages/self/coupon",
-			"style" : 
-			{
-				"navigationBarTitleText" : "我的优惠券"
+			"path": "pages/self/coupon",
+			"style": {
+				"navigationBarTitleText": "我的优惠券"
+			}
+		},
+		{
+			"path": "pages/self/couponDetail",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationBarBackgroundColor": "#ff6e6e",
+				"navigationBarTextStyle": "white",
+				"backgroundColor": "#FFFFFF",
+				"backgroundColorTop": "#ff6e6e"
 			}
 		}
 	],

pages/self/coupon.vue

@@ -7,7 +7,7 @@
 		</view>
 		<!-- 未使用 -->
 		<view v-if="tabActive === 1" class="coupon-panel">
-			<view class="item">
+			<view class="item" @click="handleOpenCouponDetail">
 				<view class="name">三八女神节特惠券【通用】</view>
 				<view class="desc">使用范围：所有产品品类可用</view>
 				<view class="desc">使用条件：满100元可用</view>
@@ -117,7 +117,13 @@ export default {
 			]
 		};
 	},
-	methods: {}
+	methods: {
+		handleOpenCouponDetail() {
+			uni.navigateTo({
+				url: 'couponDetail'
+			});
+		}
+	}
 };
 </script>
 

pages/self/couponDetail.vue

@@ -0,0 +1,95 @@
+<template>
+	<view class="page-wrap">
+		<view class="header-panel">
+			<view class="price">38</view>
+			<view class="text">三八女神节特惠券【通用券】</view>
+			<view class="text">满100元可用</view>
+			<view class="time">有效期：至 2023.12.31</view>
+			<button class="btn">立即使用</button>
+		</view>
+		<view class="desc-panel">
+			<view class="title">使用说明：</view>
+			<view class="text">1、使用范围：所有品类可用。</view>
+			<view class="text">2、可用于带<view class="tag">可用优惠券</view>标签的产品使用。</view>
+			<view class="text">3、满足使用条件使用时，可享受对应的价格优惠。</view>
+			<view class="text">4、一个订单仅限使用一张。</view>
+			<view class="text">5、优惠券不能与其他优惠同时享用。</view>
+			<view class="text">6、请注意使用日期，避免失效。</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.page-wrap{
+	min-height: 100%;
+	background: #fff;
+}
+.header-panel{
+	height: 494.51rpx;
+	background: #ff6e6e;
+	text-align: center;
+	color: #fff;
+	.price{
+		font-size: 137.36rpx;
+		&:before{
+			content: '￥';
+			font-size: 76.92rpx;
+		}
+	}
+	.text{
+		font-size: 27.47rpx;
+		line-height: 1.5;
+		margin-bottom: 13.74rpx;
+	}
+	.time{
+		font-size: 27.47rpx;
+		color: #B63F40;
+		line-height: 1.5;
+		margin-bottom: 20.6rpx;
+	}
+	.btn{
+		width: 384.62rpx;
+		height: 89.29rpx;
+		background: #fff;
+		border: none;
+		border-radius: 13.74rpx;
+		font-size: 32.97rpx;
+		color: #FF6E6E;
+		line-height: 89.29rpx;
+	}
+}
+.desc-panel{
+	padding: 41.21rpx 31.59rpx;
+	.title{
+		font-size: 32.97rpx;
+	}
+	.text{
+		font-size: 27.47rpx;
+		word-break: break-all;
+		line-height: 49.45rpx;
+	}
+	.tag{
+		display: inline-block;
+		font-size: 21.98rpx;
+		color: #F97631;
+		line-height: 34.34rpx;
+		border: 1rpx solid #F97631;
+		padding: 0 13.74rpx;
+		vertical-align: text-bottom;
+		margin: 0 13.74rpx;
+	}
+}
+</style>