GuangYuYuan-app/pages/my/coupon.vue

<template>
	<view class="coupon_page">
		<view class="coupon_box">
			<view class="none" v-if="couponList.length == 0">
				暂无优惠券
			</view>
			<view class="coupon" v-else>
				<view class="item" v-for="(item,index) in couponList" :key="item.id">
					<view class="left">
						<!-- <text v-if="item.discountType==2">折扣</text> 
						<text v-else> 满减</text> --> 
						<!-- ￥{{item.discountValue}} <br /> -->
						<text v-if="item.discountType == 3">￥{{item.discountValue}}<br/></text>
						<text v-else>{{item.rebValue}}折</text>
						
					</view>
					<view class="right" v-if="item.discountType == 3">
							满{{item.thresholdAmount}}减{{item.discountValue}} <br/>
							有效期至{{item.expirationTimeString}}
					</view>
					<view class="right" v-else>
							满{{item.thresholdAmount}}可用 <br/>
							有效期至{{item.expirationTimeString}}
					</view>
					<view class="one_btn" @click.stop="goIdentify(item)">
						<!-- <image src="../../static/index/one.png" mode=""></image> -->
						立即使用
					</view>
				</view>
			</view>

			<!-- 			<view class="coupon" v-for="(item,index) in couponList" :key="index" v-else>
				<view class="top">
					<view class="left">
						￥<text>{{item.discountValue}}</text>
					</view>

					<view class="center" v-if="item.discountType === 1">
						无门槛
					</view>
					<view class="center" v-if="item.discountType ===2">
						折扣
					</view>
					<view class="center" v-if="item.discountType === 3">
						满减
					</view>
					<view class="right">
						<view class="btn" @click="goIdentify(item)">
							使用
						</view>
						有效期至{{item.expirationTimeString}}
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getCoupon
	} from '../../api/index'
	export default {
		data() {
			return {
				couponList: [],
				expirationTime: 0,
				title: ''
			}
		},
		methods: {
			getCouponList() {
				var that = this
				var openid = {
					openid: uni.getStorageSync('wx_copenid')
				}
				getCoupon(openid).then(res => {
					if (res.data.code == 200) {
						this.couponList = res.data.data
					}
				})
			},
			goIdentify(item) {
				if (this.title == 'select') {
					uni.setStorage({
						key: 'couponData',
						data: item,
						success: function() {
							uni.navigateBack()
						}
					});
					// uni.navigateTo({
					// 	url: `/pages/identify/pay_order?couponId=${item.id}&couponMoney=${item.discountValue}`
					// })
					// uni.$emit('returnData', item)
					// uni.navigateBack({
					// 	delta: 1
					// })

				} else {
					uni.switchTab({
						url: '/pages/identify/identify'
					})
				}

			}
		},
		onLoad(options) {
			if (options) {
				this.title = options.title
			}
		},
		onShow() {
			this.getCouponList()

		}
	}
</script>

<style lang="scss" scoped>
	/* pages/my/coupon/coupon.wxss */
	.coupon_page {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #d7f3f9, #f3f3f3);

		.coupon_box {
			width: 100%;
			height: 100%;
			// overflow-y: auto;
			padding: 20rpx;
			box-sizing: border-box;
			.none {
				// width: 100%;
				// height: 100%;
				text-align: center;
				padding-top: 300rpx;
			}

			.coupon {
				width: 100%;
				height: 100%;
				// position: absolute;
				padding: 10rpx;
				// top: 50%;
				// left: 50%;
				// transform: translate(-50%, -50%);
				overflow-y: auto;
				box-sizing: border-box;

				.item {
					width: 92%;
					height: 120px;
					background-image: url(../../static/index/item.png);
					// background-repeat: no-repeat;
					background-size: cover;
					/* 背景图宽度自适应 */
					background-position: center;
					/* 背景图居中 */
					padding: 10rpx 25rpx;
					display: flex;
					// justify-content: space-around;
					align-items: center;
					position: relative;
					margin-bottom: 10rpx;

					.left {
						color: #ff0000;
						margin-left: 20px;
						font-size: 35rpx;
					}

					.right {
						height: 100%;
						margin-left: 100rpx;
						padding-top: 120rpx;
						font-size: 28rpx;
						box-sizing: border-box;
					}

					.one_btn {
						position: absolute;
						top: 10%;
						right: 2%;
						width: 100rpx;
						height: 210rpx;
						border-radius: 20rpx;
						background-color: #fff9cb;
						font-size: 46rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						 writing-mode: vertical-rl; /* 文字从上到下竖排，从右到左 */
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			// .coupon {
			// 	width: 95%;
			// 	height: 200rpx;
			// 	box-sizing: border-box;
			// 	background-color: #2cb8d4;
			// 	border-radius: 10rpx;
			// 	padding: 20rpx;

			// 	.top {
			// 		display: flex;
			// 		width: 100%;
			// 		height: 100%;
			// 		align-items: center;

			// 		.left {
			// 			width: 20%;
			// 			height: 100rpx;
			// 			font-size: 40rpx;
			// 			color: #ffffff;
			// 			margin-right: 30rpx;
			// 			display: flex;
			// 			align-items: center;

			// 			text {
			// 				font-size: 80rpx;
			// 			}
			// 		}

			// 		.center {
			// 			width: 30%;
			// 			height: 100rpx;
			// 			font-size: 50rpx;
			// 			color: #ffffff;
			// 			display: flex;
			// 			align-items: center;
			// 		}

			// 		.right {
			// 			height: 100%;
			// 			color: #666;
			// 			padding-top: 120rpx;

			// 			.btn {
			// 				width: 100px;
			// 				height: 30px;
			// 				text-align: center;
			// 				align-items: center;
			// 				border-radius: 10px;
			// 				background: linear-gradient(to bottom, #ead3ba, #ddbe96);
			// 				line-height: 30px;
			// 				margin: 0px auto 10px;
			// 			}
			// 		}
			// 	}
			// }
		}
	}
</style>