zxjt-h5/pages/index/index.vue

<template>
	<view class="content">
		<!-- <view class='tips-text'>暂无可以领取的红包</view> -->
		<view class="tips-area">
			<image src="../../static/image/tips_bg.png" class="tips-img" mode="widthFix"></image>
		</view>
		<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
			<view class="popup-content">
				<view class="title">恭喜你提现成功!</view>
				<view class="number">{{num}}<text>元</text></view>
				<view class="tips">*24小时内在微信"服务通知"中领取</view>
				<view class="btn" @click="closePopup">
					<image src="../../static/image/popup_btn.png"></image>
				</view>
				<view class="close">
					<image src="../../static/image/ic_close.png" @click="closePopup"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref,onMounted } from 'vue';
	import {getQueryString} from '../../utils/utils'
	import { checkTradeNo,getAccessPage,sendPacket } from '../../api'
	const popupRef = ref(null)
	//红包金额
	const num = ref(0);
	//有code就代表是授权回调回来的
	const isRedirect = () => {
		return !!getQueryString('code')
	}
	onMounted(() => {
		const isRedir = isRedirect()
		if(!isRedir){
			const orderInfo = {
				tid:getQueryString('tid'),
				timeStamp:getQueryString('timeStamp'),
				sign:getQueryString('sign'),
				tradeNo:getQueryString('tradeNo'),
			};
			uni.setStorageSync('orderInfo',JSON.stringify(orderInfo));
			checkEvent()
		}else{
			sendEvent()
		}
	})
	//检查是否存在可领取红包
	const checkEvent = () => {
		const params = {tradeNo:getQueryString('tradeNo')}
		checkTradeNo({params}).then(res => {
			if(res.status === true){
				recieveEvent()
			}else{
				uni.showModal({
					title: '提示',
					content: '暂无可领取的红包！！！',
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}).catch(() => {
			uni.showModal({
				title: '提示',
				content: '暂无可领取的红包！！！',
				showCancel:false,
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		})
	}
	//发送红包的事件
	const sendEvent = () => {
		const orderInfo = JSON.parse(uni.getStorageSync('orderInfo'))
		const {tid,timeStamp,sign,tradeNo} = orderInfo
		const params = {
			tid:Number(tid),
			code:getQueryString('code'),
			timeStamp,
			sign,
			tradeNo,
		}
		sendPacket({params}).then(res => {
			//金额以分为单位，需要转换
			num.value = res.amount / 100
			popupRef.value.open()
		}).catch((err) => {
			console.log(err)
		})
	}
	//领取红包事件
	const recieveEvent = () => {
		const orderInfo = JSON.parse(uni.getStorageSync('orderInfo'))
		const {tid,timeStamp,sign,tradeNo} = orderInfo
		const url = `https://lsxdwx.access.86698.cn/?tid=${tid}&tradeNo=${tradeNo}`
		console.log(url);
		window.location.href = url;
	}
	
	const closePopup = () => {
		popupRef.value.close()
	}
</script>

<style lang='scss'>
	.content {
		width: 100vw;
		height:100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		background: url('../../static/image/bg.png') no-repeat;
		background-size: 100% 100%;
		box-sizing:border-box;
		padding-bottom:20rpx;
		.tips-text{
			color:#310000;
			font-size:40rpx;
			position: absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
		.btn-area{
			position: absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
			image{
				width:300rpx;
				height:100rpx;
				border-radius:100rpx;
			}
		}
		.tips-area{
			width:700rpx;
			margin-top:40rpx;
			.tips-img{
				display: block;
				width:100%;
			}
		}
	}
	.popup-content{
		width:750rpx;
		height:850rpx;
		background: url("../../static/image/popup_bg.png") no-repeat;
		background-size:100% 800rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding-top:230rpx;
		.title{
			font-weight:bolder;
			margin-bottom:20rpx;
			color:#0A0200;
			font-size:34rpx;
		}
		.number{
			color:#F71E00;
			font-size:90rpx;
			font-weight:bolder;
			margin-bottom:15rpx;
			> text{
				font-size:40rpx;
			}
		}
		.tips{
			color:#43403F;
			font-size:30rpx;
			margin-bottom:85rpx;
			opacity: 0.6;
			font-size:28rpx;
			font-weight:400;
		}
		.btn > image{
			width:300rpx;
			height:90rpx;
		}
		.close {
			margin-top:60rpx;
			> image {
				width:60rpx;
				height:60rpx;
			}
		}
	}
</style>