优惠券使用记录修改

packagePrize/coupon/use.vue

@@ -3,19 +3,22 @@
 		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="优惠券使用记录"></u-navbar>
 		<!-- 优惠券筛选 -->
 		<view class="prize-state">
-			<u-tabs @change="changeTab" :scrollable="false" :list="stateArr" lineWidth="60" lineHeight="1"
-				lineColor="#D70909" :activeStyle="{
-									color: '#D70909',
-									transform: 'scale(1)'
-								}" :inactiveStyle="{
+			<u-tabs @change="changeTab" :scrollable="false" :list="stateArr" lineWidth="20" lineHeight="4"
+				lineColor="#E96737" :activeStyle="{
 									color: '#333',
-									transform: 'scale(1)'
-								}" itemStyle="padding-left: 25px; padding-right: 25px; height: 44px;">
+									transform: 'scale(1.1)',
+									width: '50px',
+									
+								}" :inactiveStyle="{
+									color: '#666666',
+									transform: 'scale(1)',
+									width: '50px'
+								}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;text-align: center;">
 			</u-tabs>
 		</view>
 		<!-- 已使用 -->
 		<view class="prize-coupon">
-			<view class="prize-coupon-list">
+			<!-- <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">
@@ -33,6 +36,26 @@
 						<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">
+						<view class="content-left flex">
+							<image src="../static/prize_coupon_use.png" mode=""></image>
+							<view class="price flex">
+								<text>{{ item.discount / 100 }}</text>
+								<text>元</text>
+							</view>
+						</view>
+						<view class="content-right flex">
+							<view class="title ells-one">{{ item.title }}</view>
+							<view class="desc">适用范围：{{ item.useAreaDesc || '-' }}</view>
+							<view class="desc">使用期限：{{ $parseTime(item.validStart, '{y}.{m}.{d}') }} ~ {{ $parseTime(item.validEnd, '{y}.{m}.{d}') }}</view>
+						</view>
+					</view>
+					<image class="image-use" src="../static/coupon_use1.png" mode="" v-if="item.status.value == 1"></image>
+					<image class="image-use" src="../static/coupon_use2.png" mode="" v-else></image>
+				</view>
 			</view>
 		</view>
 		<view class="flex empty" v-if="!list.length">
@@ -125,6 +148,7 @@
 
 <style lang="scss" scoped>
 	.prize-state {
+		display: flex;
 		position: fixed;
 		background-color: #FFFFFF;
 		width: 100%;
@@ -134,57 +158,78 @@
 
 	.prize-coupon {
 		margin-top: 104rpx;
-		padding: 40rpx 30rpx 100rpx;
+		padding: 30rpx 34rpx 100rpx;
 
 		&-list {
-
 			&-item {
 				position: relative;
-				background-color: #FFFFFF;
-				margin-bottom: 20rpx;
-				border-radius: 10rpx;
-
-				image {
+				padding-top: 30rpx;
+				margin-bottom: 30rpx;
+				background-color: #fff;
+				
+				.content {
 					width: 100%;
-					height: 156rpx;
-					margin-bottom: 24rpx;
-				}
-
-				.info {
-					padding-left: 40rpx;
-					padding-bottom: 8rpx;
-
-					.info-item {
-						line-height: 40rpx;
-						color: #333333;
-						margin-bottom: 12rpx;
-					}
-				}
-
-				.price-title {
+					height: 184rpx;
 					justify-content: flex-start;
-					position: absolute;
-					top: 0;
-					width: 100%;
-					padding: 36rpx 0 0 40rpx;
-
-					.price {
-						color: #FFFFFF;
-						font-size: 60rpx;
+					
+					&-left {
+						width: 210rpx;
+						height: 100%;
 						margin-right: 20rpx;
-
-						text {
-							font-size: 40rpx;
+						
+						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;
+							}
 						}
 					}
-
-					.title {
-						color: #FFFFFF;
-						font-size: 48rpx;
+					
+					&-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;
+						}
 					}
 				}
+				
+				.image-use {
+					position: absolute;
+					right: 34rpx;
+					bottom: 10rpx;
+					width: 170rpx;
+					height: 170rpx;
+				}
 			}
-
+		
 			&-item:last-child {
 				margin-bottom: 0;
 			}