zxjt-h5/pages/index/index.vue

164 lines
3.9 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<scroll-view class="content" scroll-y>
<image src="../../static/image/bg_new.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_new.png');height:560rpx">
<view class="tips">恭喜您提现成功</view>
<view class="number">{{ num }}<text></text></view>
<view class="btn" @click="closePopup">
<image src="../../static/image/know_btn.png"></image>
</view>
</view>
</uni-popup>
<uni-popup ref="popupNullRef" type="center" :is-mask-click="false" :mask-click="false">
<view class="popup-null" style="background-image:url('../../static/image/null.png');height:260rpx">
<view class="tips_null">暂无可领取的红包</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()
//改界面看效果调试专用
// num.value = 94 / 100
// popupRef.value.open()
}else{
sendEvent()
}
})
//检查是否存在可领取红包
const checkEvent = () => {
const params = {tradeNo:getQueryString('tradeNo')}
checkTradeNo({params}).then(res => {
if(res.status === true){
recieveEvent()
}else{
popupNullRef.value.open()
}
}).catch(() => {
popupNullRef.value.open()
})
}
//发送红包的事件
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;
background-color: #d6adff;
}
.popup-null{
width:610rpx;
background-repeat:no-repeat;
background-size:cover;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
position: relative;
.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%);
}
}
.popup-content{
width:518rpx;
//width:610rpx;
background-repeat:no-repeat;
background-size:cover;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
position: relative;
.number{
color:#A000FF;
font-size:82rpx;
margin-bottom:10rpx;
font-weight:600;
> text{
font-size:36rpx;
margin-left:2rpx;
display: inline-block;
font-weight:400;
}
}
.tips{
color:#602BAA;
font-size:32rpx;
margin-bottom:10rpx;
margin-top:120rpx;
font-weight:500;
}
.btn{
position: absolute;
bottom:32rpx;
}
.btn > image{
width:320rpx;
height:88rpx;
}
}
</style>