初始化

pages/coupon/coupon.vue

@@ -0,0 +1,178 @@
+<template>
+	<view class="cuopon">
+		<u-navbar title="优惠券" autoBack bg-color="#fff0e7" placeholder></u-navbar>
+		<view class="cuopon-list">
+			<scroll-view :scroll-y="true" style="height: 100%;">
+				<view class="cuopon-item" v-for="item in couponList" :key="item.id">
+					<view class="amount-wrap">
+						<view class="amount-sign">
+							¥
+						</view>
+						<view class="amount">
+							{{ item.balance }}
+						</view>
+					</view>
+					<view class="v-info">
+						<view class="title">
+							{{ item.title }}
+						</view>
+						<view class="time">
+							有效期 {{ item.end_time }}
+						</view>
+						<view class="v-desc-wrap">
+							<view class="v-desc">
+								满{{ item.start }}可用
+							</view>
+							<view class="v-desc">
+								自动抵扣
+							</view>
+						</view>
+					</view>
+					<view class="v-ft">
+						<u-button class="v-btn" :disabled="!!amount&&item.start >= amount" @click="seleteDiscounts(item)">使用</u-button>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { getCouponList } from '@/request/yyf.js';
+	export default {
+		data() {
+			return {
+				checkboxValue: [],
+				couponList: [],
+				amount: 0
+			}
+		},
+		onLoad() {
+			this.getData();
+			
+			let amount = this.$Route.query.amount;
+			if( amount ) {
+				this.amount = Number(amount);
+			}
+		},
+		methods: {
+			leftClick() {
+				this.$router.replace('/pages/mine/mine');
+			}, 
+			seleteDiscounts(data){
+				const eventChannel = this.getOpenerEventChannel();
+				eventChannel.emit('select', {
+					data
+				});
+				
+				uni.$emit('selectCoupon', data);
+				uni.navigateBack();
+			},
+			async getData() {
+				const { data } = await getCouponList({
+					status: 1
+				});
+				if(data.code === 1) {
+					this.couponList = data.data.data;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.cuopon {
+		box-sizing: border-box;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		padding: 30rpx 30rpx 40rpx;
+
+		.cuopon-list {
+			flex: 1;
+			overflow: hidden;
+
+			// background: rgba(255, 255, 255, .4);
+			.cuopon-item {
+				display: flex;
+				margin-bottom: 30rpx;
+				padding: 25rpx 45rpx;
+				background-color: #fff;
+				background: #FFFFFF;
+				border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+				.amount-wrap {
+					display: flex;
+
+					.amount-sign {
+						font-size: 25rpx;
+						font-family: OPPOSans-Medium, OPPOSans;
+						font-weight: 500;
+						color: #FF3838;
+						line-height: 40rpx;
+					}
+
+					.amount {
+						width: 120rpx;
+						margin-left: 5rpx;
+						font-size: 80rpx;
+						font-weight: 800;
+						line-height: 1;
+						color: #FF3838;
+					}
+				}
+
+				.v-info {
+					flex: 1;
+					padding: 0 35rpx;
+
+					.title {
+						font-size: 32rpx;
+						font-family: OPPOSans-bold, OPPOSans;
+						font-weight: bold;
+						color: #111111;
+					}
+
+					.time {
+						padding: 14rpx 0;
+						font-size: 24rpx;
+						font-family: OPPOSans-Medium, OPPOSans;
+						font-weight: 500;
+						color: #8C8C8C;
+					}
+
+					.v-desc-wrap {
+						display: flex;
+						flex-wrap: wrap;
+
+						.v-desc {
+							margin-right: 12rpx;
+							padding: 7rpx 10rpx;
+							background: #FFE4D9;
+							font-size: 23rpx;
+							font-family: OPPOSans Regular-Regular, OPPOSans Regular;
+							font-weight: 400;
+							color: #FF3838;
+							border-radius: 3rpx;
+						}
+					}
+				}
+
+				.v-ft {
+					display: flex;
+					align-items: flex-end;
+
+					.v-btn {
+						height: 50rpx;
+						background: #E39B46;
+						border-radius: 40rpx 40rpx 40rpx 40rpx;
+						font-size: 23rpx;
+						font-family: OPPOSans-Medium, OPPOSans;
+						font-weight: 500;
+						color: #FFFFFF;
+					}
+				}
+			}
+		}
+	}
+</style>