1

components/discount/index.vue

@@ -1,20 +1,22 @@
 <template>
 	<view class="discount">
 		<view class="pre_one">优惠劵({{couponList.length}}张)</view>
-		<view class="pre_two" v-for="(item,index) in couponList" :key="index">
-			<view class="left" v-if="item.discount_type=='min'">
-				<view class="money">￥{{item.discount_config.min||'0'}}</view>
-				<view v-if="item.discount_config.limit=='nolimit'" class="man">不限</view>
-				<view v-else class="man">满{{item.discount_config.limit||'0'}}可用</view>
-			</view>
-			<view class="left" v-else-if="item.discount_type=='discount'">
-				<view class="money">{{item.discount_config.min||'0'}}折</view>
-				<view v-if="item.discount_config.limit=='nolimit'" class="man">不限</view>
-				<view v-else class="man">满{{item.discount_config.limit||'0'}}可用，最多减{{item.discount_config.max||'0'}}元
+		<view class="pre_two">
+			<view class="list" v-for="(item,index) in couponList" :key="index">
+				<view class="l">
+					<view class="l_1" v-if="item.discount_type=='min'">
+						<view class="money">￥{{item.discount_config.min||'0'}}</view>
+						<view v-if="item.discount_config.limit=='nolimit'" class="man">不限</view>
+						<view v-else class="man">满{{item.discount_config.limit||'0'}}可用</view>
+					</view>
+					<view class="l_2" v-else-if="item.discount_type=='discount'">
+						<view class="money">{{item.discount_config.min||'0'}}折</view>
+						<view v-if="item.discount_config.limit=='nolimit'" class="man">不限</view>
+						<view v-else class="man">满{{item.discount_config.limit||'0'}}可用,最多减{{item.discount_config.max||'0'}}元
+						</view>
+					</view>
 				</view>
-			</view>
-			<view class="right">
-				<view class="other">
+				<view class="c">
 					<view class="type"><text>{{item.discount_type_label||'暂无'}}</text>
 						{{item.name||'暂无'}}
 					</view>
@@ -27,13 +29,10 @@
 						{{item.use_limit_label||'暂无'}}-{{item.expire_type_label}}-{{item.get_limit_label||'暂无'}}
 					</view>
 				</view>
-				<view class="btn">
-					<button v-if="Style&&Style.btn||false" type="default" size="mini"
-						@click="toDiscount(item)">确认</button>
-					<button v-if="Style&&Style.status||false" type="default"
-						size="mini">{{item.status=='0'?'未使用':item.status=='1'?'已使用':'已过期'}}</button>
-					<button v-if="Style&&Style.receive||false" type="default" size="mini"
-						@click="toReceive(item)">领取</button>
+				<view class="r">
+					<button v-if="Style&&Style.btn||false" type="default" size="mini" @click="toDiscount(item)">确认</button>
+					<button v-if="Style&&Style.status||false" type="default" size="mini">{{item.status=='0'?'未使用':item.status=='1'?'已使用':'已过期'}}</button>
+					<button v-if="Style&&Style.receive==true&&item.conGet==true" type="default" size="mini" @click="toReceive(item)">领取</button>
 				</view>
 			</view>
 		</view>
@@ -74,88 +73,69 @@
 	.discount {
 		.pre_one {
 			text-align: center;
-			padding: 2vw 0;
+			margin: 2vw 0;
 		}
 
 		.pre_two {
 			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			width: 96vw;
-			margin: 0 2vw 2vw 2vw;
-			border-radius: 3vw;
+			flex-direction: column;
+			padding: 0 2vw;
 
-			.left {
-				text-align: center;
-				border-radius: 3vw;
-				padding: 6vw 3vw;
-				background-color: #FFFACD;
-				color: #8B4513;
-				border-right: 0.5vw dashed var(--fcColor);
-
-				.money {
-					font-size: var(--font18Szie);
-					font-weight: bold;
-				}
+			.list {
+				background-color: var(--fffColor);
+				margin: 0 0 2vw 0;
+				display: flex;
+				justify-content: space-between;
+				border-radius: 5px;
+				padding: 2vw;
 
-				.man {
+				.l {
+					width: 20vw;
+					background-color: #FFFACD;
+					text-align: center;
 					font-size: var(--font14Size);
+					padding: 1vw;
+					border-radius: 5px;
 				}
-			}
-
-			.right {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				border-radius: 3vw;
-				padding: 1.5vw 3vw;
-				background-color: var(--mainColor);
 
-				.other {
-					display: flex;
-					flex-direction: column;
-					width: 46vw;
+				.c {
+					width: 52vw;
 
 					.type {
-						overflow: hidden;
-						text-overflow: ellipsis;
-						display: -webkit-box;
-						line-height: 6vw;
-						-webkit-line-clamp: 1;
-						-webkit-box-orient: vertical;
 						font-size: var(--font14Size);
-						margin: 0 1vw 1vw 0;
+						margin: 0 0 1vw 0;
 
 						text {
+							background-color: var(--ff0Color);
+							color: var(--fffColor);
+							padding: 1vw;
+							border-radius: 5px;
+							display: inline-block;
 							margin: 0 1vw 0 0;
-							border: 0.5vw solid red;
-							color: red;
-							padding: 0 1vw;
-							border-radius: 1vw;
-							font-size: var(--font12Size);
 						}
 					}
 
 					.date {
-						overflow: hidden;
-						text-overflow: ellipsis;
-						display: -webkit-box;
-						-webkit-line-clamp: 2;
-						-webkit-box-orient: vertical;
 						font-size: var(--font12Size);
-						color: var(--f99Color);
+						margin: 0 0 1vw 0;
+						color: var(--f85Color);
 					}
 				}
 
-				.btn {
-					width: 20vw;
+				.r {
+					width: 16vw;
+					text-align: right;
 
 					button {
 						background-color: #FFD700;
 						font-weight: bold;
+						padding: 2vw;
+						font-size: var(--font14Size);
+						line-height: 1;
 					}
 				}
 			}
+
 		}
 	}
 </style>