卡券列表样式修改

pages/prize/detail.vue

@@ -3,7 +3,7 @@
 		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="卡券详情"></u-navbar>
 		<view class="detail">
 			<view class="flex detail-item">
-				<image :src="info.picUrl" mode="aspectFill"></image>
+				<image src="../../static/icon/coupon.png" mode=""></image>
 				<view class="flex info">
 					<view class="flex desc">
 						<view class="title">{{ info.title }}</view>
@@ -73,8 +73,8 @@
 			border-bottom: 1px dashed rgba(236, 236, 236, 100);
 
 			image {
-				width: 128rpx;
-				height: 128rpx;
+				width: 120rpx;
+				height: 106rpx;
 			}
 
 			.info {
@@ -84,7 +84,7 @@
 			}
 
 			.desc {
-				height: 132rpx;
+				height: 106rpx;
 				flex-direction: column;
 				justify-content: space-between;
 				align-items: flex-start;

pages/prize/index.vue

@@ -19,8 +19,8 @@
 				<view class="flex prize-goods-list-item" v-for="(item, index) in list" :key="index">
 					<view class="flex checkbox">
 						<u-checkbox-group>
-							<u-checkbox size="24" :value="item.checked" shape="circle" :checked="item.checked" activeColor="#E96737"
-								@change="changeChecked($event, item)"></u-checkbox>
+							<u-checkbox size="24" :value="item.checked" shape="circle" :checked="item.checked"
+								activeColor="#E96737" @change="changeChecked($event, item)"></u-checkbox>
 						</u-checkbox-group>
 					</view>
 					<view class="flex info">
@@ -40,7 +40,7 @@
 		<!-- 卡券 -->
 		<view class="prize-coupon" v-else>
 			<view class="prize-coupon-list">
-				<navigator :url="`/pages/prize/detail?info=${ JSON.stringify(item) }`" class="flex prize-coupon-list-item" hover-class="navigator-hover" v-for="(item, index) in list" :key="index">
+				<!-- <navigator :url="`/pages/prize/detail?info=${ JSON.stringify(item) }`" class="flex prize-coupon-list-item" hover-class="navigator-hover" v-for="(item, index) in list" :key="index">
 					<image :src="item.picUrl" mode="aspectFill"></image>
 					<view class="flex info">
 						<view class="flex desc">
@@ -53,6 +53,24 @@
 							<view class="action">立即使用</view>
 						</view>
 					</view>
+				</navigator> -->
+				<navigator :url="`/pages/prize/detail?info=${ JSON.stringify(item) }`" class="prize-coupon-list-item"
+					hover-class="navigator-hover" v-for="(item, index) in list" :key="index">
+					<image src="../../static/icon/coupon_bg.png" mode=""></image>
+					<view class="info">
+						<view class="info-item">
+							<text>使用期限：</text>
+							<text>{{ $parseTime(item.validStart, '{y}.{m}.{d}') }}-{{ $parseTime(item.validEnd, '{y}.{m}.{d}') }}</text>
+						</view>
+						<view class="info-item">
+							<text>使用范围：</text>
+							<text>{{ item.useAreaDesc || '-' }}</text>
+						</view>
+					</view>
+					<view class="flex price-title">
+						<view class="price"><text>￥</text>{{ item.discount / 100 }}</view>
+						<view class="title">{{ item.title }}</view>
+					</view>
 				</navigator>
 			</view>
 			<view class="flex empty" v-if="!list.length && !loading">
@@ -66,8 +84,8 @@
 				<view class="flex checkbox">
 					<view class="all">全选</view>
 					<u-checkbox-group>
-						<u-checkbox v-model="checkedAll" shape="circle" size="24" :checked="checkedAll" activeColor="#E96737"
-							@change="changeCheckedAll($event)"></u-checkbox>
+						<u-checkbox v-model="checkedAll" shape="circle" size="24" :checked="checkedAll"
+							activeColor="#E96737" @change="changeCheckedAll($event)"></u-checkbox>
 					</u-checkbox-group>
 				</view>
 				<view class="btn" @click="toSettlement">立即提货</view>
@@ -159,7 +177,7 @@
 				this.checkedAll = flag
 				this.$forceUpdate()
 			},
-			
+
 			changeCheckedAll(e) {
 				this.checkedAll = e
 				this.list.forEach(item => {
@@ -167,7 +185,7 @@
 				})
 				this.$forceUpdate()
 			},
-			
+
 
 			// 查看卡券使用记录
 			toCoupon() {
@@ -198,7 +216,7 @@
 				})
 			},
 		},
-		
+
 		onReachBottom() {
 			// 判断是否有数据
 			if (this.total > this.pageNum * 20) {
@@ -266,7 +284,8 @@
 					line-height: 40rpx;
 					font-weight: bold;
 				}
-				.sku{
+
+				.sku {
 					color: #848484;
 				}
 
@@ -285,66 +304,54 @@
 
 	.prize-coupon {
 		margin-top: 90rpx;
-		padding: 40rpx 20rpx 100rpx;
+		padding: 40rpx 20rpx 150rpx;
 
 		&-list {
 
 			&-item {
-				justify-content: space-between;
+				position: relative;
 				background-color: #FFFFFF;
-				padding: 40rpx 20rpx;
+				margin-bottom: 20rpx;
 				border-radius: 10rpx;
-				margin-bottom: 30rpx;
 
 				image {
-					width: 128rpx;
-					height: 128rpx;
+					width: 100%;
+					height: 156rpx;
+					margin-bottom: 24rpx;
 				}
 
 				.info {
-					justify-content: space-between;
-					flex: 1;
-				}
-
-				.desc {
-					height: 132rpx;
-					flex-direction: column;
-					justify-content: space-between;
-					align-items: flex-start;
-					padding-left: 20rpx;
-				}
-				
-				.title{
-					font-weight: bold;
-				}
+					padding-left: 40rpx;
+					padding-bottom: 8rpx;
 
-				.txt {
-					font-size: 24rpx;
+					.info-item {
+						line-height: 40rpx;
+						color: #333333;
+						margin-bottom: 12rpx;
+					}
 				}
 
-				.btn {
-					flex-direction: column;
-				}
+				.price-title {
+					justify-content: flex-start;
+					position: absolute;
+					top: 0;
+					width: 100%;
+					padding: 36rpx 0 0 40rpx;
 
-				.amt {
-					font-size: 48rpx;
-					font-weight: bold;
-					line-height: 72rpx;
-				}
+					.price {
+						color: #FFFFFF;
+						font-size: 60rpx;
+						margin-right: 20rpx;
 
-				text {
-					font-size: 24rpx;
-				}
+						text {
+							font-size: 40rpx;
+						}
+					}
 
-				.action {
-					width: 124rpx;
-					height: 40rpx;
-					line-height: 40rpx;
-					border-radius: 20rpx;
-					background-color: rgba(215, 9, 9, 100);
-					color: rgba(255, 255, 255, 100);
-					font-size: 24rpx;
-					text-align: center
+					.title {
+						color: #FFFFFF;
+						font-size: 48rpx;
+					}
 				}
 			}
 
@@ -371,8 +378,8 @@
 		&-goods {
 			justify-content: space-between;
 			padding: 20rpx 40rpx;
-			
-			.all{
+
+			.all {
 				margin-right: 10rpx;
 			}