选择优惠券列表样式更改

packageGoods/coupon/index.vue

@@ -4,21 +4,28 @@
 		<view class="coupon-title">可用优惠券：{{listNum}}</view>
 		<view class="coupon-list">
 			<u-radio-group v-model="radiovalue1" placement="column" @change="changeChechk()">
-				<view class="flex coupon-list-item" v-for="(item,index) in list" :key="index">
+				<view class="flex coupon-list-item" v-for="(item,index) in list" :key="index" :style="{backgroundImage:`url(${ index == isActive ? backOn : backOff })`}">
 					<view class="flex coupon-list-item-info">
 						<view class="money">
-							<view class="">￥<text>{{ item.discount / 100 }}</text></view>
+							<!-- <view class="">￥<text>{{ item.discount / 100 }}</text></view> -->
+							<view class="price flex">
+								<text>{{ item.discount / 100 }}</text>
+								<text>元</text>
+							</view>
 						</view>
 						<view class="flex content">
-							<view class="txt title">{{ item.title }}</view>
+							<view class=" title ells-one">{{ item.title }}</view>
+							<view class="txt ells-one top">适用范围：{{ item.useAreaDesc || '-' }}</view>
 							<view class="txt">
 								使用期限：{{ $parseTime(item.validStart, '{y}.{m}.{d}')}}-{{$parseTime(item.validEnd, '{y}.{m}.{d}')}}
 							</view>
-							<view class="txt">使用范围：{{ item.useAreaDesc || '-' }}</view>
 						</view>
 					</view>
-					<u-radio :customStyle="{ marginBottom: '8px' }" :name="item.id" activeColor="#E96737" size="24">
+					<view style="position: absolute;right: 40rpx;">
+						<u-radio :customStyle="{ marginBottom: '8px' }" :name="item.id" activeColor="#E96737" size="24" @change="exclusive(index)">
 					</u-radio>
+					</view>
+					
 				</view>
 			</u-radio-group>
 		</view>
@@ -51,11 +58,16 @@
 				couponId: '', //选中项的id
 				boxId: '',
 				ticketId: '',
+				
+				isActive: undefined,
+				backOn: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/coupon_bkg2.png",
+				backOff: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/coupon_bkg1.png",
 
 			};
 		},
 		onShow() {
 			this.pageList()
+			this.exclusive()
 		},
 		onLoad(opthios) {
 			this.boxId = opthios.boxId
@@ -88,18 +100,27 @@
 								item.useAreaDesc = useAreaDesc.desc
 							})
 							this.list = res.data
-							console.log(this.list)
+							for (var i = 0; i < this.list.length; i++) {
+								if(this.list[i].id == this.couponId){
+									this.isActive = i
+								}
+							}
 						}
 
 					}).catch(() => {
 					uni.hideLoading();
 				})
 			},
+			
+			exclusive(index) {
+				this.isActive = index
+			},
 
 			// 点击切换事件
 			changeChechk(e) {
 				if (this.couponId == e) {
 					this.radiovalue1 = -1
+					this.isActive = -1
 					this.couponId = []
 					return
 				} else {
@@ -158,13 +179,14 @@
 			&-item {
 				justify-content: space-between;
 				padding: 20rpx;
-				background-color: #FFFFFF;
+				// background-color: #FFFFFF;
 				margin-bottom: 20rpx;
+				background-size: 100%;
 
 				&-info {
 					flex: 1;
 					justify-content: flex-start;
-					height: 170rpx;
+					height: 175rpx;
 
 					image {
 						width: 84rpx;
@@ -173,23 +195,42 @@
 					}
 
 					.content {
-						height: 132rpx;
+						width: 445rpx;
+						height: 150rpx;
 						flex-direction: column;
 						align-items: flex-start;
 						justify-content: space-between;
+						.txt {
+							font-size: 24rpx;
+							line-height: 24rpx;
+							color: #999999;
+						}
 					}
 
 					.content .title {
-						font-size: 32rpx;
-						line-height: 50rpx;
+						font-size: 36rpx;
+						color: #333;
+						line-height: 40rpx;
+						font-weight: bold;
 					}
 
 					.money {
-						padding-right: 30rpx;
-						font-weight: bold;
-
-						text {
-							font-size: 50rpx;
+						width: 220rpx;
+						height: 100%;
+						margin:0 10rpx 0;
+						.price {
+							position: absolute;
+							color: #fff;
+							
+							text:first-child {
+								line-height: 150rpx;
+								font-size: 70rpx;
+								padding-right: 20rpx;
+							}
+							
+							text:last-child {
+								font-size: 40rpx;
+							}
 						}
 					}
 				}