cczg-lottery-activity/pages/packet/index/index.vue

<template>
	<view class="content">
<!-- 		<view class="remaining">
			<text>剩余领取次数：{{userinfo.receive_num}}</text>
		</view> -->
		<view></view>
		<view class="record-button" @click="navigateToRecord">
			<text>领取记录</text>
		</view>
		
		<view v-if="btn_show" class="button" @click="getPacket"></view>
		
		
		<u-overlay :show="show" class="overlay">
			<view class="slot-content">
				<text class="title">领取成功</text>
				<text>恭喜您购买成功请到<b>领取记录</b>兑换立减金</text>
				<u-button class="packet-btn" @click="navigateToRecord">去兑换</u-button>
			</view>
			<view>
				<u-icon name="close" color="#ffffff" size="28" @click="hideDialog"></u-icon>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import {Debounce} from "@/util/common.js"
	export default {
		data() {
			return {
				userinfo: {
					receive_num:0
				},
				show: false,
				btn_show:true,
			}
		},
		methods: {
			getPacket:Debounce(function(){
				api.lottery({
					id:11
				}).then((res)=>{
					if(res.data.code == 200){
						this.show = true
						this.getAccountInfo()
						this.btn_show = false
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},1000),
			getAccountInfo(){
				api.getAccountInfo().then((res)=>{
					if(res.data.code == 200){
						this.userinfo = res.data.data
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},
			addUser(){
				api.getAccountInfo().then((res)=>{
					if(res.data.code == 200){
						this.userinfo = res.data.data
						if(this.userinfo.flag == false){
							api.create().then((res)=>{
								if(res.data.code == 200){
									this.getAccountInfo()
								}else{
									// uni.showToast({
									// 	title: res.data.message,
									// 	icon: "none"
									// })
								}
							})
						}
						
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
				
			},
			navigateToRecord(){
				uni.navigateTo({
					url:"/pages/packet/record/record"
				})
			},
			hideDialog(){
				this.show = false
			},
			onShow(){
				this.addUser()
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		background-image: url('@/static/images/packetbackground.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		background-color: #00A8EA;
		width: 100%;
		overflow-x: hidden;
		height: 100%;
	}
	.remaining{
		width: 516rpx;
		height: 52rpx;
		background: linear-gradient( 180deg, #FE9977 0%, #FA6873 100%);
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		margin-top: 200rpx;

		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		letter-spacing: 5px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.button{
		width: 476rpx;
		height: 156rpx;
		margin-bottom: 80rpx;
		background-image: url('@/static/images/packet-button.png');
		background-size: cover;
	}
	.overlay {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.slot-content {
		margin: 0;
		width: 420rpx;
		height: 512rpx;
		background-image: url('@/static/images/packet-dialog.png');
		background-repeat: no-repeat;
		background-size: contain;
		padding: 68rpx;
		padding-top: 192rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 37rpx;
		
		font-weight: 400;
		font-size: 32rpx;
		color: #DE6868;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.packet-btn{
		width: 426rpx;
		height: 64rpx;
		background: linear-gradient( 90deg, #FF416F 0%, #FF8A6C 100%);
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		color: #FFFFFF;
	}
	.title{
		color: #333333;
		font-size: 60rpx;
		font-weight: bold;
	}
	.record-button{
		width: 168rpx;
		height: 48rpx;
		background: linear-gradient( 90deg, #FF7B91 0%, #FFBE9F 100%);
		border-radius: 25rpx 0rpx 0rpx 25rpx;
		position: absolute;
		top:300rpx;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
</style>