213 lines
5.1 KiB
Vue
213 lines
5.1 KiB
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>
|