shop_app/components/newVip/index.vue

<template>
	<!-- 新人专享优惠 -->
	<up-overlay :show="showVan" :zIndex="9999" class="new_overlay">
		<view class="serviceBox" @click="close()">
			<view class="block"  @click.stop="preventD">
				<view class="title">恭喜获得</view>
				<view class="close" @click="close()"><up-icon name="close" /></view>
				<view class="box">
					<view v-for="it in couponInfo" :key="it.id" class="openbox">
						<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/11/08/l5SAwF75s4IQ5tglcLQo5bUlfixoFtnODw5CH4hT.png" mode="widthFix" class="image" />
						<view class="coupon">
							<view class="coupon-left">
								<text class="sign">¥<text class="money">{{it.amount * 1}}</text></text>
								<view class="desc" v-if="it.full_amount * 1 == 0">无门槛</view>
								<view class="desc" v-else>满{{it.full_amount * 1}}减{{it.amount * 1}}</view>
							</view>
							<view class="coupon-right">
								<view class="tit">新人专享优惠</view>
								<view class="text">所有团可用</view>
								<text class="time">有效期{{it.valid_days}}天</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="btn" @click="getHandle()">领取</view> -->
				<view class="btn" @click="close()">好的</view>
			</view>
		</view>
	</up-overlay>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { showToast } from '../common.js'
	export default {
		props: {
			showVan: {
				type: Boolean,
				default: false
			},
			couponInfo: {
				type: Array,
				default: []
			}
		},
		setup(props, context) {
			const data = reactive({
				
			})
	
			function getHandle() {
				post('/api/v1/userCoupon/newUser/receive').then((res) => {
					showToast('领取成功')
					close()
				}).catch(() => {
					close()
				})
			}
			const preventD = () => {
				return
			}
			
			function close() {
				context.emit('close')
			}
	
			return {
				...toRefs(data),
				getHandle,
				preventD,
				close
			}
		}
	}
</script>

<style lang="scss" scoped>
	.serviceBox{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding-bottom: 80rpx;
		box-sizing: border-box;
		.block{
			width: 80%;
			background: #fff;
			padding-bottom: 80rpx;
			position: relative;
			border-radius: 20rpx;
			.close{
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
			.title{
				padding: 40rpx 0;
				color: #333;
				font-size: 34rpx;
				font-weight: bold;
				text-align: center;
			}
			.box{
				max-height: 450px;
				overflow: auto;
			}
			.openbox{
				margin: 0 auto;
				width: 86%;
				position: relative;
				.image{
					width: 100%;
				}
				.coupon{
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;
					.coupon-left {
						width: 36%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						color: #F14939;
						.sign {
							font-size: 34rpx;
							font-weight: bold;
						}
						.money {
							font-size: 60rpx;
						}
						.desc{
							font-size: 24rpx;
						}
					}
					.coupon-right {
						width: 64%;
						padding-left: 36rpx;
						display: flex;
						justify-content: center;
						flex-direction: column;
						.tit {
							font-size: 32rpx;
							color: #F14939;
							margin-bottom: 14rpx;
						}
						.text{
							font-size: 24rpx;
							color: #333333;
						}
						.time {
							font-size: 20rpx;
							color: #9C9C9C;
						}
					}
				}
			}
			.btn{
				color: #fff;
				font-size: 32rpx;
				margin: 40rpx auto 0;
				width: 86%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F14939;
				border-radius: 12rpx;
			}
		}
	}
</style>