-
+
+
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 });
+};
-
-
- ![]()
-
-
-
+
-
- {{ mbtiObj.type }} {{ mbtiObj.job }}
-
-
- {{ item }}
-
-
- {{ item }}
-
-
- {{ mbtiObj.product }}
-
- ![]()
-
-
-
-
-
-
-
-
-
-
-
-
+
+ ![]()
-
-
-
-
- ![]()
+
+
+
+
+
+
+ {{ mbtiObj.type }} {{ mbtiObj.job }}
-
-
-
+
+
+
+ {{ item }}
+
+
+ {{ item }}
+
+
+
+ {{ mbtiObj.product }}
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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 = () => {
});
}
};
-
+
+
+
+ ![]()
+
+
+
+
+
+