172 lines
4.0 KiB
Vue
172 lines
4.0 KiB
Vue
<script setup>
|
|
import { Toast, Icon } from 'vant'
|
|
import gsap from "gsap";
|
|
import { authorize, getUserInfo, exchangePrize } from '@/api'
|
|
import { getQueryString, debounceTap } from "@/plugins";
|
|
|
|
const Authorization = ref('')
|
|
const hasPrize = ref(false)
|
|
const received = ref(true)
|
|
const money = ref('9.99')
|
|
|
|
|
|
onMounted(() => {
|
|
let code = getQueryString('code')
|
|
let dev = import.meta.env.VITE_MODE
|
|
if (dev != 'dev') {
|
|
if (code) {
|
|
getUserInfo({ code: code }).then(
|
|
res => {
|
|
if (res.code == 0) {
|
|
console.log('我的信息：', res.data);
|
|
Authorization.value = res.data.authorization
|
|
exchangePrize({}, Authorization.value).then(
|
|
res => {
|
|
console.log('兑换结果：', res);
|
|
}
|
|
)
|
|
} else {
|
|
authorize({ scopeType: 1 }).then(
|
|
res => {
|
|
if (res.code == 0) {
|
|
console.log('重定向地址：', res.data);
|
|
location.replace(res.data)
|
|
}
|
|
|
|
// 其余情况
|
|
Toast.fail({
|
|
message: res.msg,
|
|
duration: 0,
|
|
forbidClick: true
|
|
})
|
|
}
|
|
)
|
|
}
|
|
|
|
|
|
}
|
|
)
|
|
} else {
|
|
authorize({ scopeType: 1 }).then(
|
|
res => {
|
|
|
|
if (res.code == 0) {
|
|
console.log('重定向地址：', res.data);
|
|
location.replace(res.data)
|
|
}
|
|
// 其余情况
|
|
Toast.fail({
|
|
message: res.msg,
|
|
duration: 0,
|
|
forbidClick: true
|
|
})
|
|
}
|
|
)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
gsap.from('.CashPage', { duration: 0.5, autoAlpha: 0 })
|
|
})
|
|
|
|
const go = (event) => {
|
|
let e = event.target
|
|
debounceTap(e, () => {
|
|
console.log(1);
|
|
let url = import.meta.env.VITE_HOST + import.meta.env.VITE_FOLDER + '/index.html'
|
|
window.location.replace(url)
|
|
}, 0.5)
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="CashPage" @touchmove.prevent>
|
|
<div class="cash-container" v-if="hasPrize">
|
|
<!-- 正常领奖 -->
|
|
<div class="cashed-success" v-if="!received">
|
|
<div class="money">¥{{ money }}元</div>
|
|
</div>
|
|
<!-- 已经领过奖 -->
|
|
<div class="cashed-worng" v-else></div>
|
|
</div>
|
|
<!-- 暂无中奖记录 -->
|
|
<div v-else class="no-prize">
|
|
<div class="icon">
|
|
<Icon size="40" name="info-o" color="#fda085" />
|
|
</div>
|
|
<div class="text">暂无中奖记录</div>
|
|
<div class="btn" @click="go($event)">前往参与活动</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.CashPage {
|
|
@include pos(100%, 100%, 0px, 0px);
|
|
background: linear-gradient(135deg, #f6d365, #fda085);
|
|
overflow: hidden;
|
|
@include flexCen();
|
|
|
|
.cashed-success {
|
|
@include pos(750px, 1624px, 0px, 50%);
|
|
transform: translateY(-50%);
|
|
@include bg_pos("cash/lucky_bg.jpg");
|
|
|
|
.money {
|
|
@include pos(750px, 200px, 0px, 650px);
|
|
// background-color: rgba($color: #000000, $alpha: .7);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 100px;
|
|
font-weight: 700;
|
|
color: #fda085;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
|
|
.cashed-worng {
|
|
@include pos(750px, 1624px, 0px, 50%);
|
|
transform: translateY(-50%);
|
|
@include bg_pos("cash/received.jpg");
|
|
}
|
|
|
|
.no-prize {
|
|
@include box(600px, 400px);
|
|
border-radius: 20px;
|
|
background-color: aliceblue;
|
|
@include flexCen();
|
|
box-shadow: 5px 5px 10px #bebebe,
|
|
-5px -5px 10px #ffffff;
|
|
|
|
.icon {
|
|
height: 100px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 28px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.btn {
|
|
@include box(280px, 80px);
|
|
background: linear-gradient(135deg, #f6d365, #fda085);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50px;
|
|
font-size: 30px;
|
|
color: #fff;
|
|
margin-top: 50px;
|
|
box-shadow: 20px 20px 60px #bebebe,
|
|
-20px -20px 60px #ffffff;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|