163 lines
3.8 KiB
Vue
163 lines
3.8 KiB
Vue
<script setup>
|
|
import { Toast, Icon, Field, CellGroup } 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");
|
|
const cashCode = ref("");
|
|
|
|
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,
|
|
() => {
|
|
let url = import.meta.env.VITE_URL;
|
|
window.location.replace(url);
|
|
},
|
|
0.5
|
|
);
|
|
};
|
|
|
|
const cashFn = (event) => {
|
|
debounceTap(event.target, () => {
|
|
console.log("兑换码", cashCode.value);
|
|
if (cashCode.value != "") {
|
|
// 兑奖接口
|
|
} else {
|
|
Toast.fail("请输入兑奖码");
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="CashPage" @touchmove.prevent>
|
|
<div class="no-prize">
|
|
<div class="icon">
|
|
<Icon size="60" name="gift-o" color="#fda085" />
|
|
</div>
|
|
<div class="code-input-box">
|
|
<CellGroup inset>
|
|
<Field
|
|
v-model="cashCode"
|
|
maxlength="10"
|
|
label="兑奖码"
|
|
placeholder="请输入兑奖码"
|
|
/>
|
|
</CellGroup>
|
|
</div>
|
|
<div class="btn-box">
|
|
<div class="btn" @click="go($event)">参与活动</div>
|
|
<div class="btn" @click="cashFn($event)">兑奖</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" >
|
|
.van-cell__title {
|
|
width: 100px !important;
|
|
}
|
|
.CashPage {
|
|
@include pos(100%, 100%, 0px, 0px);
|
|
background: linear-gradient(135deg, #f6d365, #fda085);
|
|
overflow: hidden;
|
|
@include flexCen();
|
|
|
|
// .title {
|
|
// pointer-events: none;
|
|
// @include box(552px, 131px);
|
|
// @include bg_pos("index/title.png");
|
|
// }
|
|
|
|
.no-prize {
|
|
margin-top: 100px;
|
|
@include box(600px, 500px);
|
|
border-radius: 20px;
|
|
background-color: rgb(255, 255, 255);
|
|
@include flexCen();
|
|
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
|
|
|
|
.icon {
|
|
height: 150px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 28px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.btn-box {
|
|
@include box(600px, 100px);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
|
|
.btn {
|
|
@include box(230px, 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>
|