待更改兑奖页面
This commit is contained in:
Andy Leong
parent
480e5016e3
commit
770ca4b5c8
@ -1,38 +1,41 @@
|
||||
<script setup>
|
||||
import gsap from 'gsap'
|
||||
import { addPoint, debounceTap } from '@/plugins'
|
||||
import gsap from "gsap";
|
||||
import { addPoint, debounceTap } from "@/plugins";
|
||||
import { Toast } from "vant";
|
||||
import { Clipboard } from "v-clipboard";
|
||||
import { useMainStore } from "@/store";
|
||||
import { drawApi } from '@/api'
|
||||
|
||||
import { drawApi } from "@/api";
|
||||
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["DrawPage"]);
|
||||
const userStore = useMainStore()
|
||||
const userStore = useMainStore();
|
||||
|
||||
const money = ref('8.88')
|
||||
const code = ref('sss')
|
||||
const money = ref("8.88");
|
||||
const code = ref("sss");
|
||||
|
||||
const showResult = ref(false)
|
||||
const hasPrize = ref(true)
|
||||
const showResult = ref(false);
|
||||
const hasPrize = ref(true);
|
||||
|
||||
const drawFn = (event) => {
|
||||
let e = event.target.parentElement
|
||||
let e = event.target.parentElement;
|
||||
debounceTap(e, async () => {
|
||||
console.log('抽奖');
|
||||
console.log("抽奖");
|
||||
Toast.loading({
|
||||
message: '抽奖中',
|
||||
message: "抽奖中",
|
||||
forbidClick: true,
|
||||
duration: 0
|
||||
})
|
||||
gsap.fromTo(e, { rotation: '-30' }, { rotation: '+30', repeat: -1, yoyo: true, ease: 'none', duration: 0.3 })
|
||||
duration: 0,
|
||||
});
|
||||
gsap.fromTo(
|
||||
e,
|
||||
{ rotation: "-30" },
|
||||
{ rotation: "+30", repeat: -1, yoyo: true, ease: "none", duration: 0.3 }
|
||||
);
|
||||
|
||||
try {
|
||||
const res = await drawApi({}, userStore.token)
|
||||
const res = await drawApi({}, userStore.token);
|
||||
if (res.code == 0) {
|
||||
// isDrawn后端判断有没有中奖
|
||||
hasPrize.value = res.data.isDrawn == 1 ? true : false // true 中奖 || false 未中奖
|
||||
hasPrize.value = res.data.isDrawn == 1 ? true : false; // true 中奖 || false 未中奖
|
||||
|
||||
// if (res.data.isDrawn == 1) {
|
||||
// hasPrize.value = true
|
||||
@ -40,22 +43,23 @@ const drawFn = (event) => {
|
||||
// hasPrize.value = false
|
||||
// }
|
||||
} else {
|
||||
hasPrize.value = false // true 中奖 || false 未中奖
|
||||
hasPrize.value = false; // true 中奖 || false 未中奖
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.log('有才有无');
|
||||
hasPrize.value = false
|
||||
hasPrize.value = false;
|
||||
}
|
||||
|
||||
userStore.updateDraw()
|
||||
userStore.updateDraw();
|
||||
setTimeout(() => {
|
||||
Toast.clear()
|
||||
showResult.value = true
|
||||
gsap.from('.result-container', { duration: 0.5, scale: 0.7, autoAlpha: 0 })
|
||||
gsap.killTweensOf('.draw-light,.draw')
|
||||
}, 1000)
|
||||
|
||||
Toast.clear();
|
||||
showResult.value = true;
|
||||
gsap.from(".result-container", {
|
||||
duration: 0.5,
|
||||
scale: 0.7,
|
||||
autoAlpha: 0,
|
||||
});
|
||||
gsap.killTweensOf(".draw-light,.draw");
|
||||
}, 1000);
|
||||
|
||||
// setTimeout(() => {
|
||||
// hasPrize.value = false // true 中奖 || false 未中奖
|
||||
@ -65,33 +69,43 @@ const drawFn = (event) => {
|
||||
// gsap.from('.result-container', { duration: 0.5, scale: 0.7, autoAlpha: 0 })
|
||||
// gsap.killTweensOf('.draw-light,.draw')
|
||||
// }, 3000)
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const hide = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
gsap.to('.DrawPage', { duration: 0.3, autoAlpha: 0, onComplete: () => { emit('DrawPage', 'hide') } })
|
||||
gsap.to(".DrawPage", {
|
||||
duration: 0.3,
|
||||
autoAlpha: 0,
|
||||
onComplete: () => {
|
||||
emit("DrawPage", "hide");
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const copyFn = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
Clipboard.copy(code.value);
|
||||
Toast(`复制成功：${code.value}`);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const entryAni = () => {
|
||||
gsap.from(".DrawPage", { duration: 0.2, autoAlpha: 0 });
|
||||
gsap.from(".draw-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
|
||||
gsap.from(".draw-light", { duration: 3, rotation: '+=360', ease: 'none', repeat: -1 });
|
||||
gsap.from(".draw-light", {
|
||||
duration: 3,
|
||||
rotation: "+=360",
|
||||
ease: "none",
|
||||
repeat: -1,
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
entryAni();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -122,7 +136,6 @@ onMounted(() => {
|
||||
<div class="cls-btn" @click="hide($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ import { mbtiList } from "@/data";
|
||||
import { posterCreate } from "@/plugins";
|
||||
import { Toast } from "vant";
|
||||
import QRCode from "qrcode";
|
||||
import { reactive } from "vue";
|
||||
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["ResultPage"]);
|
||||
@ -22,6 +23,12 @@ const bgPic = computed(() => {
|
||||
const theme = reactive(["#d3473a", "#fb7700", "#4172d8", "#eb5c37"]);
|
||||
const mbti = ref(userStore.MBTI);
|
||||
const mbtiObj = ref(mbtiList.find((item) => item.type == mbti.value));
|
||||
const posterBg = reactive([
|
||||
new URL("@/assets/images/result/poster-bg-1.jpg", import.meta.url).href,
|
||||
new URL("@/assets/images/result/poster-bg-2.jpg", import.meta.url).href,
|
||||
new URL("@/assets/images/result/poster-bg-3.jpg", import.meta.url).href,
|
||||
new URL("@/assets/images/result/poster-bg-4.jpg", import.meta.url).href,
|
||||
]);
|
||||
|
||||
const changBg = (event, number) => {
|
||||
let e = event.target;
|
||||
@ -64,10 +71,7 @@ const createPoster = (event) => {
|
||||
// 背景
|
||||
{
|
||||
name: "bg",
|
||||
src: new URL(
|
||||
"../assets/images/result/poster-bg-" + bgId.value + ".jpg",
|
||||
import.meta.url
|
||||
).href,
|
||||
src: posterBg[bgId.value - 1],
|
||||
pos: { w: 750, h: 1500, x: 0, y: 0 },
|
||||
},
|
||||
// 产品
|
||||
@ -87,7 +91,7 @@ const createPoster = (event) => {
|
||||
[
|
||||
// mbti title及职业
|
||||
{
|
||||
content: mbtiObj.value.type + mbtiObj.value.job,
|
||||
content: mbtiObj.value.type + " " + mbtiObj.value.job,
|
||||
style: {
|
||||
font: "normal 80px HYYakuHei",
|
||||
pos: { x: 70, y: 330 },
|
||||
@ -221,6 +225,7 @@ const hideShare = () => {
|
||||
<div class="poster-box">
|
||||
<img id="poster" />
|
||||
</div>
|
||||
<div class="save-tips">*长按保存海报</div>
|
||||
<div class="btn-box">
|
||||
<div class="go-draw" @click="goDraw($event)"></div>
|
||||
<div class="go-share" @click="goShare($event)"></div>
|
||||
@ -419,6 +424,15 @@ const hideShare = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.save-tips {
|
||||
font-size: 20px;
|
||||
font-family: "fzcy";
|
||||
line-height: 20px;
|
||||
margin-top: 20px;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.poster-box {
|
||||
@include box(495px, 990px);
|
||||
margin-top: 20px;
|
||||
|
||||
@ -9,22 +9,52 @@ const load = [
|
||||
]
|
||||
|
||||
const page = [
|
||||
|
||||
'prize/tips.png',
|
||||
'prize/star.png',
|
||||
'prize/cls-btn.png',
|
||||
'prize/copy-btn.png',
|
||||
'prize/draw-box.png',
|
||||
'prize/draw-text.png',
|
||||
'prize/light.png',
|
||||
'prize/myPrize-box.png',
|
||||
'prize/no-prize.png',
|
||||
'music-on.png',
|
||||
'music-off.png',
|
||||
'index/title.png',
|
||||
'index/start-btn.png',
|
||||
'index/rule-btn.png',
|
||||
'index/prize-btn.png',
|
||||
'index/bg.jpg',
|
||||
'prize/myPrize-box.png',
|
||||
'prize/copy-btn.png',
|
||||
'prize/cls-btn.png',
|
||||
'qa/showResult-btn.png',
|
||||
'qa/question.png',
|
||||
'qa/prev-btn.png',
|
||||
'qa/answer-box-2.png',
|
||||
'qa/answer-box-1.png',
|
||||
'music-off.png',
|
||||
'music-on.png',
|
||||
|
||||
'result/theme-4.png',
|
||||
'result/theme-3.png',
|
||||
'result/theme-2.png',
|
||||
'result/theme-1.png',
|
||||
'result/share-tips.svg',
|
||||
'result/select-tips.png',
|
||||
'result/product-1.png',
|
||||
'result/select-arrow.png',
|
||||
'result/poster-bg-4.jpg',
|
||||
'result/poster-bg-3.jpg',
|
||||
'result/poster-bg-2.jpg',
|
||||
'result/poster-bg-1.jpg',
|
||||
'result/go-share-btn.png',
|
||||
'result/go-draw-btn.png',
|
||||
'result/create-btn.png',
|
||||
'result/bg-4.jpg',
|
||||
'result/cls-btn.png',
|
||||
'result/bg-2.jpg',
|
||||
'result/bg-3.jpg',
|
||||
'result/bg-1.jpg',
|
||||
'rule/rule-box.png',
|
||||
'rule/cls-btn.png',
|
||||
'rule/caidai.png',
|
||||
'rule/arrow.png',
|
||||
|
||||
]
|
||||
|
||||
|
||||
@ -97,8 +97,8 @@ const ruleFn = (item) => {
|
||||
onMounted(() => {
|
||||
let code = getQueryString("code");
|
||||
let url = import.meta.env.VITE_URL;
|
||||
console.log("code:", code);
|
||||
console.log("url:", url);
|
||||
// console.log("code:", code);
|
||||
// console.log("url:", url);
|
||||
|
||||
let dev = import.meta.env.VITE_MODE;
|
||||
if (dev != "dev") {
|
||||
@ -112,7 +112,7 @@ onMounted(() => {
|
||||
showLoad.value = true;
|
||||
return;
|
||||
} else {
|
||||
authorize({ scopeType: 1,redirectUri:url }).then((res) => {
|
||||
authorize({ scopeType: 1, redirectUri: url }).then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log("重定向地址：", res.data);
|
||||
location.replace(res.data);
|
||||
@ -149,7 +149,7 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
} else {
|
||||
authorize({ scopeType: 1,redirectUri:url }).then((res) => {
|
||||
authorize({ scopeType: 1, redirectUri: url }).then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log("重定向地址：", res.data);
|
||||
location.replace(res.data);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user