领券中心

pages.json

@@ -116,6 +116,13 @@
 				"backgroundColor": "#FFFFFF",
 				"backgroundColorTop": "#ff6e6e"
 			}
+		},
+		{
+			"path" : "pages/self/couponCenter",
+			"style" : 
+			{
+				"navigationBarTitleText" : "领券中心"
+			}
 		}
 	],
 	"globalStyle": {

pages/self/coupon.vue

@@ -92,7 +92,7 @@
 				</view>
 			</view>
 		</view>
-		<button class="foot-btn">去领券中心看看</button>
+		<button class="foot-btn" @click="handleOpenCouponCenter()">去领券中心看看</button>
 	</view>
 </template>
 
@@ -122,6 +122,11 @@ export default {
 			uni.navigateTo({
 				url: 'couponDetail'
 			});
+		},
+		handleOpenCouponCenter(){
+			uni.navigateTo({
+				url: 'couponCenter'
+			});
 		}
 	}
 };

pages/self/couponCenter.vue

@@ -0,0 +1,192 @@
+<template>
+	<view class="page-wrap">
+		<view class="coupon-panel">
+			<view class="item">
+				<view class="name">
+					<view class="price">38</view>
+					<view class="text">三八女神节特惠券</view>
+				</view>
+				<view class="desc time">有效日期：至 2023-12-31</view>
+				<view class="desc">所有产品品类通用</view>
+				<view class="desc">满100元可用</view>
+				<view class="side">
+					<text class="number">仅剩\n17张</text>
+					<button class="btn">可领2张</button>
+				</view>
+			</view>
+			<view class="item disabled">
+				<view class="name">
+					<view class="price">38</view>
+					<view class="text">三八女神节特惠券</view>
+				</view>
+				<view class="desc time">有效日期：至 2023-12-31</view>
+				<view class="desc">所有产品品类通用</view>
+				<view class="desc">满100元可用</view>
+				<view class="side">
+					<view class="over">已领完</view>
+					<text>持续发放中\n下次再领</text>
+				</view>
+			</view>
+			<view class="item">
+				<view class="name">
+					<view class="price">38</view>
+					<view class="text">三八女神节特惠券</view>
+				</view>
+				<view class="desc time">有效日期：至 2023-12-31</view>
+				<view class="desc">所有产品品类通用</view>
+				<view class="desc">满100元可用</view>
+				<view class="side">
+					<text class="number">仅剩\n17张</text>
+					<button class="btn">可领2张</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.coupon-panel {
+	padding: 13.74rpx 0;
+	.item {
+		width: 708.79rpx;
+		height: 192.31rpx;
+		border-radius: 8.24rpx;
+		position: relative;
+		overflow: hidden;
+		padding: 27.47rpx 233.52rpx 27.47rpx 41.21rpx;
+		box-sizing: border-box;
+		margin: 13.74rpx auto;
+		&:before {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			background: #fff;
+			-webkit-mask-image: radial-gradient(circle at 13.74rpx 50%, transparent 13.74rpx, red 13.74rpx);
+			-webkit-mask-position: -13.74rpx;
+			z-index: -1;
+		}
+		&::after {
+			content: '';
+			position: absolute;
+			right: -27.47rpx;
+			top: 0;
+			height: 100%;
+			width: 239.01rpx;
+			background: #00bdef;
+			-webkit-mask-image: radial-gradient(circle at 5rpx, transparent 6rpx, red 6rpx);
+			-webkit-mask-position: -6rpx;
+			-webkit-mask-size: 100% 19rpx;
+			z-index: -1;
+		}
+		&.disabled::after {
+			background: #ccc;
+		}
+	}
+	.name {
+		font-size: 30.22rpx;
+		height: 68.68rpx;
+		display: flex;
+		align-items: center;
+		margin-top: -14rpx;
+		.text {
+			flex: 1;
+			width: 0;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.price {
+			line-height: 1;
+			margin: -14rpx 10rpx 0 0;
+		}
+	}
+	.desc {
+		font-size: 24.73rpx;
+		color: #999;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		line-height: 1.3;
+	}
+	.side {
+		position: absolute;
+		right: 0;
+		top: 0;
+		height: 100%;
+		width: 211.54rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 21.98rpx;
+		color: #fff;
+		padding-top: 27.47rpx;
+		text-align: center;
+	}
+	.price {
+		font-size: 68.68rpx;
+		&:before {
+			content: '￥';
+			font-size: 38.46rpx;
+		}
+	}
+	.number {
+		font-size: 27.47rpx;
+		line-height: 38.46rpx;
+	}
+	.over{
+		font-size: 30.22rpx;
+		margin: 13.74rpx 0 20.6rpx;
+	}
+	.time{
+		color: #000;
+	}
+	.btn{
+		width: 164.84rpx;
+		height: 49.45rpx;
+		background: #fff;
+		border-radius: 8.24rpx;
+		color: #00BDEF;
+		font-size: 24.73rpx;
+		line-height: 49.45rpx;
+		padding: 0;
+		margin-top: 13.74rpx;
+	}
+}
+.foot-btn {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 96.15rpx;
+	background: #fff;
+	font-size: 30.22rpx;
+	color: #00bcd2;
+	line-height: 96.15rpx;
+	border: none;
+	border-radius: 0;
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 1rpx;
+		background: #e0e0e0;
+	}
+	&::after {
+		display: none;
+	}
+}
+</style>