From 28dc4ec60db739fd4649a1c191d07efc25449acc Mon Sep 17 00:00:00 2001 From: Andy Leong Date: Sat, 20 Jan 2024 02:35:49 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 3 +- .env.fat | 3 +- package.json | 1 + src/assets/images/result/share-tips.svg | 1 + src/components/Question.vue | 59 +- src/components/Result.vue | 734 +++++++++++++----------- src/page/Home/App.vue | 166 +++--- src/page/Home/main.js | 1 - src/plugins/index.js | 34 +- src/plugins/wxshare.js | 6 +- yarn.lock | 180 +++++- 11 files changed, 709 insertions(+), 479 deletions(-) create mode 100644 src/assets/images/result/share-tips.svg diff --git a/.env.development b/.env.development index b3e7665..f2443db 100644 --- a/.env.development +++ b/.env.development @@ -2,4 +2,5 @@ VITE_MODE = dev VITE_HOST = https://wmm-stg.pingan.com.cn VITE_CDN = https://cdn.xglpa.com VITE_FOLDER = /vite-4 -VITE_API = /intfgw/data/mmoactivity \ No newline at end of file +VITE_API = /intfgw/data/mmoactivity +VITE_URL = https://w-stg.pingan.com.cn/lckj/pawm-mmo-activity-xgl-frontend/index.html \ No newline at end of file diff --git a/.env.fat b/.env.fat index df939ac..a959004 100644 --- a/.env.fat +++ b/.env.fat @@ -2,4 +2,5 @@ VITE_MODE = fat VITE_HOST = https://test.szxgl.cn VITE_CDN = https://test.szxgl.cn VITE_FOLDER = /vite -VITE_API = /vite-api \ No newline at end of file +VITE_API = /vite-api +VITE_URL = https://w-stg.pingan.com.cn/lckj/pawm-mmo-activity-xgl-frontend/index.html diff --git a/package.json b/package.json index 76a9b5b..d5efa5d 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "lodash": "^4.17.21", "lodash.debounce": "^4.0.8", "pinia": "^2.1.7", + "qrcode": "^1.5.3", "qs": "^6.11.2", "v-clipboard": "^3.0.0-next.1", "vant": "^3.6.12", diff --git a/src/assets/images/result/share-tips.svg b/src/assets/images/result/share-tips.svg new file mode 100644 index 0000000..868937b --- /dev/null +++ b/src/assets/images/result/share-tips.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Question.vue b/src/components/Question.vue index 209486e..f9ef149 100644 --- a/src/components/Question.vue +++ b/src/components/Question.vue @@ -4,7 +4,7 @@ import { Toast } from "vant"; import { data } from "@/data"; import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins"; import { useMainStore } from "@/store"; -import { subAnswer } from '@/api' +import { subAnswer } from "@/api"; // 页面配置初始化 const emit = defineEmits(["QuestionPage"]); @@ -99,16 +99,14 @@ const showResult = (event) => { console.log("MBTI:", mbti); userStore.updateMBTI(mbti); - // 提交完成记录 - subAnswer({}, userStore.token).then( - res => { - console.log('key:', res); + if (import.meta.env.VITE_MODE != "dev") { + // 提交完成记录 + subAnswer({}, userStore.token).then((res) => { + console.log("key:", res); if (res.code == 0) { - } - } - ) - + }); + } // Toast("你的MBTI测试结果:" + mbti); resultBtnAni.reverse(); @@ -148,11 +146,9 @@ const questionEntry = gsap.timeline({ paused: true, onStart: () => { gsap.set(".answer-box", { pointerEvents: "none" }); - }, onComplete: () => { gsap.set(".answer-box", { pointerEvents: "none" }); - }, }); const questionOut = gsap.timeline({ @@ -160,20 +156,17 @@ const questionOut = gsap.timeline({ onStart: () => { gsap.set(".answer-box", { pointerEvents: "none" }); }, - onComplete: () => { - }, + onComplete: () => {}, }); // 查看结果事件及动画 const resultBtnAni = gsap.timeline({ paused: true }); onMounted(() => { - // 适配 if (!judgeBigScreen()) { - gsap.set('.answer-box', { scale: 0.9, marginTop: '-20px' }) + gsap.set(".answer-box", { scale: 0.9, marginTop: "-20px" }); } - resultBtnAni.from(".showResult-btn", { y: 200, autoAlpha: 0 }); questionEntry .from(".question", { y: 100, autoAlpha: 0 }) @@ -193,22 +186,23 @@ onMounted(() => { duration: 2, ease: "slow(0.7,0.7,false)", onStart: () => { - gsap.to('.question-bg', { - backgroundPosition: '0px 0px', + gsap.to(".question-bg", { + backgroundPosition: "0px 0px", duration: 1, ease: "slow(0.7,0.7,false)", - }) + }); }, onComplete: () => { gsap.set(".answer-box", { pointerEvents: "initial" }); if (currentId.value != 0) { gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 }); } - } + }, }, 0.5 - ).to('.answer-0', { duration: 1, y: '-=10px', repeat: -1, yoyo: true }) - .to('.answer-1', { duration: 1, y: '+=10px', repeat: -1, yoyo: true }) + ) + .to(".answer-0", { duration: 1, y: "-=10px", repeat: -1, yoyo: true }) + .to(".answer-1", { duration: 1, y: "+=10px", repeat: -1, yoyo: true }); questionEntry.play(); questionOut @@ -222,11 +216,11 @@ onMounted(() => { duration: 1.5, ease: "slow(0.7,0.7,false)", onStart: () => { - gsap.to('.question-bg', { - backgroundPosition: '0px 835px', + gsap.to(".question-bg", { + backgroundPosition: "0px 835px", duration: 0.75, ease: "slow(0.7,0.7,false)", - }) + }); }, }) .to( @@ -239,7 +233,7 @@ onMounted(() => { ease: "slow(0.7,0.7,false)", }, 1.5 - ) + ); }); @@ -255,9 +249,16 @@ onMounted(() => {
-
-
+
+
diff --git a/src/components/Result.vue b/src/components/Result.vue index ee7fa39..b26e3bb 100644 --- a/src/components/Result.vue +++ b/src/components/Result.vue @@ -3,404 +3,468 @@ import { gsap } from "gsap"; import { debounceTap } from "@/plugins"; import { useMainStore } from "@/store"; import { mbtiList } from "@/data"; -import { posterCreate } from '@/plugins' +import { posterCreate } from "@/plugins"; import { Toast } from "vant"; -import { onBeforeMount } from "vue"; -import { computed } from "vue"; +import QRCode from "qrcode"; // 页面配置初始化 const emit = defineEmits(["ResultPage"]); const userStore = useMainStore(); -let bgId = ref(1); //海报背景id：1～4 +let bgId = ref(1); //海报背景id：1～4 const bgPic = computed(() => { - return new URL( - `../assets/images/result/bg-${bgId.value}.jpg`, - import.meta.url - ).href; + return new URL( + `../assets/images/result/bg-${bgId.value}.jpg`, + import.meta.url + ).href; }); // 主题配色 -const theme = reactive(['#d3473a', '#fb7700', '#4172d8', '#eb5c37']) - +const theme = reactive(["#d3473a", "#fb7700", "#4172d8", "#eb5c37"]); const mbti = ref(userStore.MBTI); -const mbtiObj = ref(mbtiList.find(item => item.type == mbti.value)) - -console.log("mbti", mbti.value); - -onBeforeMount(() => { - // mbtiObj.value = mbtiList.find(item => item.type == mbti.value) - console.log('mbtiObj.value', mbtiObj.value); -}) - +const mbtiObj = ref(mbtiList.find((item) => item.type == mbti.value)); const changBg = (event, number) => { - let e = event.target; - if (number == bgId.value) return; - bgId.value = number; - debounceTap( - e, - () => { - // console.log("bgId", bgId.value); - }, - 0.3 - ); + let e = event.target; + if (number == bgId.value) return; + bgId.value = number; + debounceTap( + e, + () => { + // console.log("bgId", bgId.value); + }, + 0.3 + ); }; +// With async/await +const eqcodePic = ref(); +onMounted(() => { + let eqCodeUrl = import.meta.env.VITE_URL; + console.log("url:", eqCodeUrl); + QRCode.toDataURL(eqCodeUrl) + .then((url) => { + eqcodePic.value = url; + console.log("eq", eqcodePic.value); + }) + .catch((err) => { + console.error(err); + }); +}); + const createPoster = (event) => { - let e = event.target - debounceTap(e, () => { - // 海报生成 - posterCreate( - { width: 750, height: 1500 }, //海报尺寸 - // 海报素材，按顺序依次渲染 - [ - // 背景 - { - src: new URL('../assets/images/result/poster-bg-' + bgId.value + '.jpg', import.meta.url).href, - pos: { w: 750, h: 1500, x: 0, y: 0 } - }, - // 产品 - { - src: mbtiObj.value.productPic, - pos: { w: 469, h: 102, x: 137, y: 911 } - }, - ], - // 字体素材 - [ - // mbti title及职业 - { - content: mbtiObj.value.type + mbtiObj.value.job, - style: { - font: 'normal 80px HYYakuHei', - pos: { x: 70, y: 330 } - } - }, - // mbti 描述 - { - content: mbtiObj.value.des[0], - style: { - font: 'normal 30px fzzy', - color: '#af6f49', - pos: { x: 70, y: 470 } - } - }, - { - content: mbtiObj.value.des[1], - style: { - font: 'normal 30px fzzy', - color: '#af6f49', - pos: { x: 70, y: 520 } - } - }, - // 新年寄语 - { - content: mbtiObj.value.blessings[0], - style: { - font: 'normal 50px fzcy', - pos: { x: 70, y: 650 } - } - }, - { - content: mbtiObj.value.blessings[1], - style: { - font: 'normal 50px fzcy', - pos: { x: 70, y: 725 } - } - }, - // 产品 - { - content: mbtiObj.value.product, - style: { - font: 'normal 50px fzcy', - pos: { x: 70, y: 876 } - } - } - ], - // 主题配色 - theme[bgId.value - 1] - ) - }, 0.4) -} + let e = event.target; + debounceTap( + e, + () => { + // 海报生成 + posterCreate( + { width: 750, height: 1500 }, //海报尺寸 + // 海报素材，按顺序依次渲染 + [ + // 背景 + { + name: "bg", + src: new URL( + "../assets/images/result/poster-bg-" + bgId.value + ".jpg", + import.meta.url + ).href, + pos: { w: 750, h: 1500, x: 0, y: 0 }, + }, + // 产品 + { + name: "product", + src: mbtiObj.value.productPic, + pos: { w: 469, h: 102, x: 137, y: 911 }, + }, + // 二维码 + { + name: "eqcode", + src: eqcodePic.value, + pos: { w: 140, h: 140, x: 66, y: 1070 }, + }, + ], + // 字体素材 + [ + // mbti title及职业 + { + content: mbtiObj.value.type + mbtiObj.value.job, + style: { + font: "normal 80px HYYakuHei", + pos: { x: 70, y: 330 }, + }, + }, + // mbti 描述 + { + content: mbtiObj.value.des[0], + style: { + font: "normal 30px fzzy", + color: "#af6f49", + pos: { x: 70, y: 470 }, + }, + }, + { + content: mbtiObj.value.des[1], + style: { + font: "normal 30px fzzy", + color: "#af6f49", + pos: { x: 70, y: 520 }, + }, + }, + // 新年寄语 + { + content: mbtiObj.value.blessings[0], + style: { + font: "normal 50px fzcy", + pos: { x: 70, y: 650 }, + }, + }, + { + content: mbtiObj.value.blessings[1], + style: { + font: "normal 50px fzcy", + pos: { x: 70, y: 725 }, + }, + }, + // 产品 + { + content: mbtiObj.value.product, + style: { + font: "normal 50px fzcy", + pos: { x: 70, y: 876 }, + }, + }, + ], + // 主题配色 + theme[bgId.value - 1] + ); + }, + 0.4 + ); +}; const goDraw = (event) => { - let e = event.target - debounceTap(e, () => { - if (userStore.hasDraw) { - emit('ResultPage', { action: 'showDraw' }) - } else { - Toast('暂无抽奖机会') - } - }) -} + let e = event.target; + debounceTap(e, () => { + if (userStore.hasDraw) { + emit("ResultPage", { action: "showDraw" }); + } else { + Toast("暂无抽奖机会"); + } + }); +}; + +const hidePop = (event) => { + let e = event.target; + debounceTap(e, () => { + gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 }); + }); +}; const goShare = (event) => { - let e = event.target - debounceTap(e, () => { - - }) -} -const hidePop = (event) => { - let e = event.target - debounceTap(e, () => { - gsap.to('.posterPop', { duration: 0.5, autoAlpha: 0 }) - }) -} - - + let e = event.target; + debounceTap(e, () => { + gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 }); + }); +}; +const hideShare = () => { + gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 }); +}; \ No newline at end of file diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue index 9f2a4f5..66450a7 100644 --- a/src/page/Home/App.vue +++ b/src/page/Home/App.vue @@ -20,11 +20,11 @@ import Draw from "@/components/Draw"; import Result from "@/components/Result"; import Rule from "@/components/Rule"; import { createBGM, getQueryString } from "@/plugins"; -import { authorize, getUserInfo } from '@/api' +import { authorize, getUserInfo } from "@/api"; import { Toast } from "vant"; -import { useMainStore } from "@/store" +import { useMainStore } from "@/store"; -const userStore = useMainStore() +const userStore = useMainStore(); const showLoad = ref(false); const loadFn = (item) => { @@ -77,7 +77,7 @@ const drawFn = (item) => { } }; -const showResult = ref(false); +const showResult = ref(true); const resultFn = (item) => { if (item.action == "hide") { showResult.value = false; @@ -87,114 +87,99 @@ const resultFn = (item) => { } }; - const showRule = ref(false); const ruleFn = (item) => { if (item.action == "hide") { showRule.value = false; } - }; onMounted(() => { + let code = getQueryString("code"); + console.log("code:", code); - let code = getQueryString('code') - console.log('code:', code); - - let dev = import.meta.env.VITE_MODE - if (dev != 'dev') { + 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); - userStore.updateToken(res.data.authorization) - createBGM(); - // 开始加载组件 - showLoad.value = true - return - } else { - authorize({ scopeType: 1 }).then( - res => { + getUserInfo({ code: code }).then((res) => { + if (res.code == 0) { + console.log("我的信息：", res.data); + userStore.updateToken(res.data.authorization); + createBGM(); + // 开始加载组件 + showLoad.value = true; + return; + } else { + authorize({ scopeType: 1 }).then((res) => { + if (res.code == 0) { + console.log("重定向地址：", res.data); + location.replace(res.data); + } - if (res.code == 0) { - console.log('重定向地址：', res.data); - location.replace(res.data) - } + // 活动已结束：6001 + if (res.code == "6001") { + Toast.fail({ + message: res.msg, + duration: 0, + forbidClick: true, + }); + return; + } - // 活动已结束：6001 - if (res.code == '6001') { - Toast.fail({ - message: res.msg, - duration: 0, - forbidClick: true - }) - return - } + // 活动未开启：6002 + if (res.code == "6002") { + Toast({ + message: res.msg, + duration: 0, + icon: "flag-o", + forbidClick: true, + }); + return; + } - // 活动未开启：6002 - if (res.code == '6002') { - Toast({ - message: res.msg, - duration: 0, - icon: 'flag-o', - forbidClick: true - }) - return - } - - // 其余情况 - Toast({ - 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) - } - - // 活动已结束：6001 - if (res.code == '6001') { - Toast.fail({ - message: '活动已结束', - duration: 0, - forbidClick: true - }) - } - - // 活动未开启：6002 - if (res.code == '6002') { + // 其余情况 Toast({ - message: '活动未开始', + message: res.msg, duration: 0, - icon: 'flag-o', - forbidClick: true - }) - } + forbidClick: true, + }); + }); } - ) + }); + } else { + authorize({ scopeType: 1 }).then((res) => { + if (res.code == 0) { + console.log("重定向地址：", res.data); + location.replace(res.data); + } + + // 活动已结束：6001 + if (res.code == "6001") { + Toast.fail({ + message: "活动已结束", + duration: 0, + forbidClick: true, + }); + } + + // 活动未开启：6002 + if (res.code == "6002") { + Toast({ + message: "活动未开始", + duration: 0, + icon: "flag-o", + forbidClick: true, + }); + } + }); } } else { - showLoad.value = true + showLoad.value = true; } - fontAdpat() - + fontAdpat(); }); - // 字体适配 const fontAdpat = () => { if ( @@ -218,7 +203,6 @@ const fontAdpat = () => { }); } }; -