1

components/discount/index.vue

@@ -0,0 +1,111 @@
+<template>
+	<view class="main">
+		<view class="pre_one">优惠劵({{couponList.length}})</view>
+		<view class="pre_two" v-for="(item,index) in couponList" :key="index">
+			<view class="left">
+				<view class="money">￥{{item.money||'0'}}</view>
+				<view class="man">满{{item.discount_money||'0'}}可以</view>
+			</view>
+			<view class="center">
+				<view class="type"><text>{{item.type||'暂无'}}</text> {{item.name||'暂无'}}</view>
+				<view class="date">有效期{{item.start_time||'暂无'}}-{{item.end_time||'暂无'}}</view>
+			</view>
+			<view class="right">
+				<button type="default" size="mini" @click="toDiscount(item)">确认</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			couponList: {
+				type: Array,
+			},
+		},
+		data() {
+			return {
+
+			};
+		},
+		methods: {}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		.pre_one {
+			text-align: center;
+			padding: 2vw 0;
+		}
+
+		.pre_two {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 94vw;
+			margin: 0 2vw 1vw 2vw;
+			border-radius: 3vw;
+
+			.left {
+				text-align: center;
+				border-radius: 3vw;
+				padding: 5vw 3vw;
+				background-color: #FFFACD;
+				color: #8B4513;
+
+				.money {
+					font-size: var(--font18Szie);
+					font-weight: bold;
+				}
+
+				.man {
+					font-size: var(--font14Size);
+				}
+			}
+
+			.center {
+				flex-grow: 1;
+				border-radius: 3vw;
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+				padding: 5vw 2vw;
+				background-color: var(--mainColor);
+
+				.type {
+					margin: 0 0 1vw 0;
+
+					text {
+						border: 0.5vw solid red;
+						color: red;
+						padding: 0 1vw;
+						border-radius: 1vw;
+						font-size: var(--font12Size);
+						margin: 0 1vw 0 0;
+					}
+
+					font-size: var(--font16Size);
+				}
+
+				.date {
+					font-size: var(--font12Size);
+					color: var(--f99Color);
+				}
+			}
+
+			.right {
+				padding: 7vw 3vw;
+				border-radius: 3vw;
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				background-color: var(--mainColor);
+
+				button {
+					background-color: #FFD700;
+					font-weight: bold;
+				}
+			}
+		}
+	}
+</style>

pagesHome/order/order.vue

@@ -114,17 +114,19 @@
 					</view>
 				</view>
 			</view>
-			<view class="content" v-else v-for="(item,index) in couponList" :key="index">
-				<view class="one">
-					{{item.name}}
-				</view>
+			<view class="content" v-else>
+				<discount :couponList="couponList"></discount>
 			</view>
 		</uni-popup>
 	</mobile-frame>
 </template>
 
 <script>
+	import discount from '@/components/discount/index.vue';
 	export default {
+		components: {
+			discount
+		},
 		data() {
 			return {
 				user: {},
@@ -138,15 +140,8 @@
 				// 收货地址
 				addressList: [],
 				// 优惠劵
-				couponList: [{
-					name: '家庭囤货特惠劵',
-					issue: '平台方',
-					shop: '店铺',
-					expire_type: '失效方式',
-					discount_type: '满25减4',
-					status: '0'
-				}],
-				type: ''
+				couponList: [],
+				type: '',
 			};
 		},
 		onLoad: async function(e) {
@@ -155,6 +150,10 @@
 			that.watchLogin()
 		},
 		methods: {
+			// 使用优惠劵
+			toDiscount(e) {
+				console.log(e);
+			},
 			// 选择收货地址
 			toChoose() {
 				const that = this;
@@ -319,7 +318,7 @@
 					that.$set(that, `total_detail`, arr.data.orderTotal);
 					var total = arr.data.orderTotal.freight_total + arr.data.orderTotal.goods_total
 					that.$set(that, `goods_total`, total);
-					// that.$set(that, `couponList`, arr.data.couponList);
+					that.$set(that, `couponList`, arr.data.couponList);
 				}
 			},
 		}
@@ -501,8 +500,9 @@
 	.content {
 		display: flex;
 		flex-direction: column;
+		max-height: 100vw;
 		min-height: 100vw;
-		background-color: var(--f1Color);
+		background-color: var(--f5Color);
 
 		.one {
 			display: flex;