zxjt-h5/pages/index/index.vue

<template>
	<scroll-view class="content" scroll-y>
		<image src="../../static/image/bg.png" mode="widthFix" style="width: 100%;display: block;"></image>
		<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
			<view class="popup-content" style="background-image:url('../../static/image/popup_bg.png');height:360rpx">
				<view class="number">红包已领取<text style="color:#F71E00">{{num}}</text>元</view>
				<view class="tips">请留意微信支付入账信息</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>
		<uni-popup ref="popupNullRef" type="center" :is-mask-click="false" :mask-click="false">
			<view class="popup-content" style="background-image:url('../../static/image/null.png');height:260rpx">
				<view class="tips_null">暂无可领取的红包！</view>
				<!-- <view class="close">
					<image src="../../static/image/ic_close.png" @click="closePopup"></image>
				</view> -->
			</view>
		</uni-popup>
	</scroll-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 popupNullRef = 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{
				popupNullRef.value.open()
				// uni.showModal({
				// 	title: '提示',
				// 	content: '暂无可领取的红包！',
				// 	showCancel:false,
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定');
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
			}
		}).catch(() => {
			popupNullRef.value.open()
			// 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;
		overflow-y: auto;
		.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:610rpx;
		/* height:360rpx; */
		/* background: url("../../static/image/popup_bg.png") no-repeat; */
		background-repeat:no-repeat;
		background-size:cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		position: relative;
		.number{
			color:#834525;
			font-size:40rpx;
			margin-top:70rpx;
			margin-bottom:15rpx;
			> text{
				font-size:40rpx;
				margin:0 12rpx;
				display: inline-block;
			}
		}
		.tips{
			color:#d9c3b5;
			font-size:30rpx;
			margin-bottom:25rpx;
			margin-top:50rpx;
			opacity: 0.6;
			font-size:28rpx;
			font-weight:400;
		}
		.tips_null{
			color:#666;
			font-size:30rpx;
			opacity: 0.6;
			font-size:28rpx;
			font-weight:400;
			position: absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
		.btn > image{
			width:350rpx;
			height:76rpx;
		}
		.close {
			position: absolute;
			bottom:-100rpx;
			> image {
				width:60rpx;
				height:60rpx;
			}
		}
	}
</style>