优惠券详情修改

packagePrize/coupon/detail.vue

@@ -2,8 +2,9 @@
 	<view>
 		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="优惠券详情"></u-navbar>
 		<view class="detail">
+			<!-- 优惠券信息 -->
 			<view class="flex detail-item">
-				<image src="../../static/icon/coupon.png" mode=""></image>
+				<!-- <image src="../../static/icon/coupon.png" mode=""></image>
 				<view class="flex info">
 					<view class="flex desc">
 						<view class="title">{{ info.title }}</view>
@@ -13,11 +14,36 @@
 					<view class="flex btn">
 						<view class="amt"><text>￥</text>{{ info.discount / 100 }}</view>
 					</view>
+				</view> -->
+				<view class="content flex">
+					<view class="content-left flex">
+						<image src="../static/prize_coupon.png" mode=""></image>
+						<view class="price flex">
+							<text>{{ info.discount / 100 }}</text>
+							<text>元</text>
+						</view>
+					</view>
+					<view class="content-right flex">
+						<view class="title ells-one">{{ info.title }}</view>
+						<view class="desc">适用范围：{{ info.useAreaDesc || '-' }}</view>
+						<view class="desc">使用期限：{{ $parseTime(info.validStart, '{y}.{m}.{d}') }} ~ {{ $parseTime(info.validEnd, '{y}.{m}.{d}') }}</view>
+					</view>
 				</view>
 			</view>
+			
+			<!-- 间隔 -->
+			<view class="detail-interval flex">
+				<view class="detail-interval__left"></view>
+				<view class="detail-interval__line"></view>
+				<view class="detail-interval__right"></view>
+			</view>
+				
+			<!-- 二维码 -->
 			<view class="flex detail-code" v-if = "info && info.useArea && JSON.parse(info.useArea).value  != 4">
 				<canvas style="width: 220px;height: 220px;" canvas-id="couponQrcode"></canvas>
 			</view>
+			
+			<!-- 说明 -->
 			<view class="detail-explain">
 				<view class="txt">使用说明：</view>
 				<view class="txt">{{ info.description }}</view>
@@ -78,67 +104,116 @@
 <style lang="scss" scoped>
 	.detail {
 		margin: 20rpx;
-		padding: 26rpx 24rpx;
 		background-color: #FFFFFF;
 		border-radius: 10rpx;
-
+		overflow: hidden;
+		
+		// 优惠券信息
 		&-item {
-			justify-content: space-between;
-			padding-bottom: 26rpx;
-			border-bottom: 1px dashed rgba(236, 236, 236, 100);
-
-			image {
-				width: 120rpx;
-				height: 106rpx;
-			}
-
-			.info {
-				position: relative;
-				justify-content: space-between;
-				flex: 1;
-			}
-
-			.desc {
-				height: 106rpx;
-				flex-direction: column;
-				justify-content: space-between;
-				align-items: flex-start;
-				padding-left: 20rpx;
-			}
+			padding: 30rpx 0 30rpx;
+			background-color: #fff;
 			
-			.title{
-				font-weight: bold;
-			}
-
-			.txt {
-				font-size: 24rpx;
+			.content {
+				width: 100%;
+				height: 184rpx;
+				justify-content: flex-start;
+				
+				&-left {
+					width: 210rpx;
+					height: 100%;
+					margin-right: 20rpx;
+					
+					image {
+						width: 100%;
+						height: 100%;
+					}
+					
+					.price {
+						position: absolute;
+						color: #fff;
+						
+						text:first-child {
+							font-size: 70rpx;
+							padding-right: 20rpx;
+						}
+						
+						text:last-child {
+							font-size: 40rpx;
+						}
+					}
+				}
+				
+				&-right {
+					flex: 1;
+					align-items: flex-start;
+					flex-direction: column;
+					justify-content: space-between;
+					height: 100%;
+					padding: 24rpx 0;
+					
+					.title {
+						font-size: 32rpx;
+						line-height: 32rpx;
+						height: 32rpx;
+						overflow: hidden;
+						font-weight: bold;
+					}
+					
+					.desc {
+						font-size: 24rpx;
+						line-height: 24rpx;
+						color: #999999;
+					}
+				}
 			}
+		}
 
-			.btn {
-				flex-direction: column;
+		// 间隔
+		&-interval {
+			position: relative;
+			width: 100%;
+			height: 30rpx;
+			margin-bottom: 10rpx;
+			
+			&__left {
+				position: absolute;
+				left: -15rpx;
+				width: 30rpx;
+				height: 30rpx;
+				background: #F9F7F5;
+				border-radius: 50%;
 			}
-
-			.amt {
-				font-size: 48rpx;
-				font-weight: bold;
-				line-height: 72rpx;
+			
+			&__line {
+				height: 1px;
+				background-color: #F9F7F5;
+				width: 90%;
 			}
-
-			text {
-				font-size: 24rpx;
+			
+			&__right {
+				position: absolute;
+				right: -15rpx;
+				width: 30rpx;
+				height: 30rpx;
+				background: #F9F7F5;
+				border-radius: 50%;
 			}
 		}
-
+		
+		// 二维码
 		&-code {
 			width: 100%;
-			height: 550rpx;
+			height: 460rpx;
+			margin-bottom: 20rpx;
 		}
-
+		
+		// 说明
 		&-explain {
-			font-size: 24rpx;
+			font-size: 26rpx;
+			padding: 0 34rpx 34rpx;
 
 			.txt {
-				line-height: 50rpx;
+				line-height: 40rpx;
 			}
 		}
 	}

packagePrize/coupon/use.vue

@@ -18,25 +18,6 @@
 		</view>
 		<!-- 已使用 -->
 		<view class="prize-coupon">
-			<!-- <view class="prize-coupon-list">
-				<view class="prize-coupon-list-item" v-for="(item, index) in list" :key="index">
-					<image src="../../static/icon/coupon_bg2.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>
-				</view>
-			</view> -->
 			<view class="prize-coupon-list">
 				<view class="prize-coupon-list-item" v-for="(item, index) in list" :key="index">
 					<view class="content flex">