deming/pageB/coupon/index.vue

<template>
	<u-popup v-model="showCoupon" mode="center" class="u-coupon-popup">
		<view class="coupon">
			<view class="price">{{ newMemberCoupon.price }}</view>
			<image src="/static/image/common/30.png" class="coupon-image" @click="viewCoupon"></image>
			<image src="/static/image/common/24.png" class="close-image" @click="showCoupon=false"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				showCoupon: true,
				newMemberCoupon: {},
			}
		},
		watch: {
			showCoupon(value) {
				if(!value) {
					uni.navigateBack();
				}
			}
		},
		onShow() {
			this.isNewmembervoucher();
		},
		methods: {
			viewCoupon() {
				this.$u.route('/pageB/coupon/details', {
					price: this.newMemberCoupon.price
				});
			},
			// 是否显示新人优惠券
			isNewmembervoucher() {
				this.$u.api.isNewmembervoucher().then(res => {
					if(res.errCode == 0) {
						this.newMemberCoupon = res.data;
					} else {
						this.showCoupon = false;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: rgba(0,0,0,0);
	}
	.u-coupon-popup {
		/deep/ .u-mode-center-box {
			background-color: transparent;
		}
		.coupon {
			width: 750rpx;
			height: 583rpx;
			position: relative;
			.price {
				z-index: 3;
				color: #EBB36E;
				position: absolute;
				font-size: 92rpx;
				font-weight: bold;
				top: 200rpx;
				left: 50%;
				font-family: PingFang SC;
				transform: translate(-68%, 0);
			}
			.coupon-image {
				width: 568rpx;
				height: 583rpx;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-60%, 0);
			}
			.close-image {
				position: absolute;
				top: 0; 
				right: 155rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>