jewelry-front/components/couponPopup/couponPopup.vue

<!-- 优惠券弹窗 -->
<template>
	<view class="couponPopup">
		<uv-popup ref="couponPopup" 
		customStyle="background-color: transparent;"
		:z-index="999999">
			<view class="couponPopup-wrapper">
				<view class="main-container">
					<view class="body">
						<image :src="configList.wx_image" mode="widthFix" class="coupon-bg"></image>
						<image @click="close" src="@/static/image/coupon/close-btn.png" mode="widthFix"
							class="close-btn">
						</image>
						<view class="coupon-money">
							<text class="unit">￥</text>
							<view class="money">
								{{ riceInfo.getCouponMoney }}
							</view>
						</view>
						<image :src="configList.qd_image" mode="widthFix" class="register-success"></image>
						<view class="shopping">（购物即可抵扣！）</view>
					</view>
					<image @click="close" 
					:src="configList.down_image" mode="widthFix" 
					class="examine"></image>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "CouponPopup",
		data() {
			return {}
		},
		mounted() {
			this.$refs.couponPopup.open()
		},
		computed: {
			...mapState(['riceInfo'])
		},
		methods: {
			//跳转优惠券页面
			toCoupon() {
				this.$refs.couponPopup.close()
				uni.navigateTo({
					url: "/pages_order/mine/coupon"
				})
			},
			close(){
				this.$refs.couponPopup.close()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.couponPopup {
		.couponPopup-wrapper {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;

			.main-container {
				.body {
					position: relative;

					.coupon-bg {
					}

					.close-btn {
						position: absolute;
						right: 0;
						top: 0;
						width: 50rpx;
						height: 50rpx;
					}

					.coupon-money {
						display: flex;
						justify-content: center;
						align-items: flex-end;
						position: absolute;
						left: 50%;
						top: 34%;
						width: 40%;
						color: #FF6733;
						transform: translateX(-30%);
						font-weight: bold;

						.unit {
							font-size: 40rpx;
						}

						.money {
							font-size: 120rpx;
							line-height: 120rpx;
						}
					}

					.register-success {
						position: absolute;
						top: 7%;
						left: 50%;
						transform: translateX(-50%);
						width: 80%;
					}

					.shopping {
						position: absolute;
						bottom: 5%;
						left: 50%;
						transform: translateX(-50%);
						color: #FEF3DD;
						text-align: center;
						font-size: 40rpx;
						width: 80%;
					}
				}

				.examine {
					display: block;
					width: 70%;
					margin: 20rpx auto;
				}
			}
		}
	}
</style>