From ec457dc86ca9ccd91340f29c589f1fa77e6f76df Mon Sep 17 00:00:00 2001 From: "XGL-THINKPAD-X1\\rucky" Date: Tue, 23 Jan 2024 19:10:52 +0800 Subject: [PATCH] update --- .../result/product/{ENFP .png => ENFP.png} | Bin src/components/Draw.vue | 1 + src/components/Result.vue | 25 ++++-- src/data/index.js | 80 ++++++++++++------ src/page/Home/App.vue | 56 ++++++------ src/plugins/index.js | 46 +++++----- src/store/index.js | 2 +- 7 files changed, 126 insertions(+), 84 deletions(-) rename src/assets/images/result/product/{ENFP .png => ENFP.png} (100%) diff --git a/src/assets/images/result/product/ENFP .png b/src/assets/images/result/product/ENFP.png similarity index 100% rename from src/assets/images/result/product/ENFP .png rename to src/assets/images/result/product/ENFP.png diff --git a/src/components/Draw.vue b/src/components/Draw.vue index 79ec967..8580e0e 100644 --- a/src/components/Draw.vue +++ b/src/components/Draw.vue @@ -9,6 +9,7 @@ import { drawApi } from "@/api"; // 页面配置初始化 const emit = defineEmits(["DrawPage"]); const userStore = useMainStore(); +const { toClipboard } = useClipboard() diff --git a/src/components/Result.vue b/src/components/Result.vue index abb9840..fd886a0 100644 --- a/src/components/Result.vue +++ b/src/components/Result.vue @@ -123,7 +123,7 @@ const createPoster = (event) => { { name: "product", src: mbtiObj.value.productPic, - pos: { w: 469, h: 102, x: 137, y: 911 }, + pos: { w: mbtiObj.value.picPos.w, h: mbtiObj.value.picPos.h, x: 137, y: 911 }, }, // 二维码 { @@ -178,7 +178,7 @@ const createPoster = (event) => { { content: mbtiObj.value.product, style: { - font: "normal 50px fzcy", + font: mbtiObj.value.type == 'ISTJ' || mbtiObj.value.type == 'INTJ' ? "normal 40px fzcy" : "normal 50px fzcy", pos: { x: 70, y: 876 }, }, }, @@ -237,8 +237,10 @@ const hideShare = () => {
-
{{ mbtiObj.product }}
-
+
{{ mbtiObj.product }}
+
@@ -367,7 +369,7 @@ const hideShare = () => { } .mbti-product { - @include pos(475px, 140px, 134px, 948px); + @include pos(630px, 140px, 134px, 948px); font-family: "fzcy"; .product { @@ -376,12 +378,21 @@ const hideShare = () => { text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004); } + .adptFont{ + font-style: 35px; + } + .produc-img { - @include box(469px, 102px); + // @include box(469px, 102px); margin-left: 10px; + margin-top: 15px; + transform: rotate(0deg); + img { - width: 100%; + // width: 100%; + height: 100%; + @include box(50%,50%); } } } diff --git a/src/data/index.js b/src/data/index.js index 97fee04..6cfc778 100644 --- a/src/data/index.js +++ b/src/data/index.js @@ -211,8 +211,10 @@ export const mbtiList = [ job: '物流师', des: ['实际且注重事实的个人，', '可靠性不容怀疑'], blessings: ['脚下有风眼里有光', '心里有爱袋里有财'], - product: '灵活成长存款存单91天', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '灵活成长存款存单91天持有', + productPic: new URL('../assets/images/result/product/ISTJ.png', import.meta.url).href, + picPos:{w:432,h:98} + }, { type: 'ISTP', @@ -220,7 +222,8 @@ export const mbtiList = [ des: ['大胆而实际的实验家，', '擅长使用任何形式的工具'], blessings: ['多吃不胖积极向上', '有钱有颜喜乐连年'], product: '启航增强持有', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + productPic: new URL('../assets/images/result/product/ISTP.png', import.meta.url).href, + picPos:{w:322,h:107} }, { type: 'ESTP', @@ -228,39 +231,49 @@ export const mbtiList = [ des: ['聪明，精力充沛善于感知的人们，','每天都在冲向新的冒险'], blessings: ['人间四月芳菲尽', '吃喝玩乐要尽兴'], product: '7天成长', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + productPic: new URL('../assets/images/result/product/ESTP.png', import.meta.url).href, + picPos:{w:420,h:101} + }, { type: 'ESTJ', job: '总经理', des: ['出色的管理者，', '在管理事情或人的方面无与伦比'], blessings: ['朝辞白帝彩云间', '日进斗金赛神仙'], - product: '灵活成长90天', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '灵活成长90天持有', + productPic: new URL('../assets/images/result/product/ESTJ.png', import.meta.url).href, + picPos:{w:441,h:93} + }, { type: 'ISFJ', job: '守卫者', des: ['非常专注而温暖的守护者，', '时刻准备保护爱着的人'], blessings: ['万般熙攘化清风明月', '四方梦想皆如愿以偿'], - product: '启航一年定开1号', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '灵活成长30天持有', + productPic: new URL('../assets/images/result/product/ISFJ.png', import.meta.url).href, + picPos:{w:441,h:93} + }, { type: 'ISFP', job: '探险家', des: ['灵活有魅力的艺术家，', '时刻准备着探索和体验新鲜事物'], blessings: ['与时光共新生', '万象更新美好再叙'], - product: '启元策略360', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '启元策略360天持有', + productPic: new URL('../assets/images/result/product/ISFP.png', import.meta.url).href, + picPos:{w:395,h:115} + }, { type: 'ESFP', job: '表演者', des: ['外向随和，', '对生活充满热情，享受物质生活'], blessings: ['岁岁常欢愉', '年年皆胜意'], - product: '启元添利90天', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '启元添利90天持有', + productPic: new URL('../assets/images/result/product/ESFP.png', import.meta.url).href, + picPos:{w:438,h:93} + }, { type: 'ESFJ', @@ -268,7 +281,9 @@ export const mbtiList = [ des: ['极有同情心，爱交往受欢迎的人们，', '总是热心提供帮助'], blessings: ['心有繁花仪锦，', '归来不负韶华'], product: '灵活成长日开3号', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + productPic: new URL('../assets/images/result/product/ESFJ.png', import.meta.url).href, + picPos:{w:469,h:68} + }, { type: 'INFJ', @@ -276,7 +291,9 @@ export const mbtiList = [ des: ['安静而神秘，同时鼓舞人心，', '且不知疲倦的理想主义者'], blessings: ['前路浩浩荡荡', '万事尽可期待'], product: '启明日申季赎', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + productPic: new URL('../assets/images/result/product/INFJ.png', import.meta.url).href, + picPos:{w:321,h:105} + }, { type: 'INFP', @@ -284,55 +301,64 @@ export const mbtiList = [ des: ['诗意，善良的利他主义者，', '总是热情地为正当理由提供帮助'], blessings: ['山外青山楼外楼', '容光焕发没忧愁'], product: '启元稳利30天', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + productPic: new URL('../assets/images/result/product/INFP.png', import.meta.url).href, + picPos:{w:321,h:105} }, { type: 'ENFP', job: '竞选者', des: ['热情，有创造力', '爱社交的自由自在的人'], blessings: ['生活自在内心澎湃', '万物可爱满怀期待'], - product: '灵活成长添利180', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '灵活成长添利180天持有', + productPic: new URL('../assets/images/result/product/ENFP.png', import.meta.url).href, + picPos:{w:452,h:93} }, { type: 'ENFJ', job: '主人公', des: ['富有魅力鼓舞人心的领导者', '有使听众着迷的能力'], blessings: ['是金子总会发光', '何况你是龙的传人'], - product: '新安鑫', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '安鑫系列', + productPic: new URL('../assets/images/result/product/ENFJ.png', import.meta.url).href, + picPos:{w:447,h:65} }, { type: 'INTJ', job: '建筑师', des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'], blessings: ['岁岁年年，共欢同乐，', '嘉庆与时新'], - product: '启元策略周享270', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '启元策略周享270天持有', + productPic: new URL('../assets/images/result/product/INTJ.png', import.meta.url).href, + picPos:{w:356,h:108} }, { type: 'INTP', job: '逻辑学家', des: ['具有创造力的发明家，', '对知识有着止不住的渴望'], blessings: ['烟火向星辰', '所愿皆成真'], - product: '卓越稳健180持有', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '卓越稳健180天持有', + productPic: new URL('../assets/images/result/product/INTP.png', import.meta.url).href, + picPos:{w:372,h:95} + }, { type: 'ENTP', job: '辩论家', des: ['聪明好奇的思想者，', '不会放弃任何智力上的挑战'], blessings: ['忽如一夜春风来', '今年势必发大财'], - product: '灵活策略90天', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '灵活策略90天持有', + productPic: new URL('../assets/images/result/product/ENTP.png', import.meta.url).href, + picPos:{w:433,h:93} + }, { type: 'ENTJ', job: '指挥官', des: ['大胆，富有想象力且意志强大的领导者，', '总能找到或创造解决方法'], blessings: ['天生我材必有用', '福禄寿喜财全来'], - product: '星辰添利270', - productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href, + product: '星辰添利270天持有', + productPic: new URL('../assets/images/result/product/ENTJ.png', import.meta.url).href, + picPos:{w:409,h:112} }, ] \ No newline at end of file diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue index 80b07ac..f203952 100644 --- a/src/page/Home/App.vue +++ b/src/page/Home/App.vue @@ -19,7 +19,7 @@ import MyPrize from "@/components/MyPrize"; import Draw from "@/components/Draw"; import Result from "@/components/Result"; import Rule from "@/components/Rule"; -import { createBGM, getQueryString, screenOrientation, isAndriod } from "@/plugins"; +import { createBGM, getQueryString, screenOrientation, isAndriod,fontAdpat } from "@/plugins"; import { authorize, getUserInfo } from "@/api"; import { Toast } from "vant"; import { useMainStore } from "@/store"; @@ -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; @@ -113,6 +113,24 @@ onMounted(() => { createBGM(); // 开始加载组件 showLoad.value = true; + + // ios自动播放音乐 + document.addEventListener("DOMContentLoaded", function () { + function audioAutoPlay() { + var audio = document.getElementById("musicBtn"); + audio.play(); + document.addEventListener( + "WeixinJSBridgeReady", + function () { + WeixinJSBridge.invoke("getNetworkType", {}, function (e) { + audio.play(); + }); + }, + false + ); + } + audioAutoPlay(); + }); return; } else { authorize({ scopeType: 1, redirectUri: url }).then((res) => { @@ -184,39 +202,19 @@ onMounted(() => { } } else { showLoad.value = true; + createBGM(); + } }); -// 字体适配 -const fontAdpat = () => { - if ( - typeof WeixinJSBridge == "object" && - typeof WeixinJSBridge.invoke == "function" - ) { - handleFontSize(); - } else { - if (document.addEventListener) { - document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); - } else if (document.attachEvent) { - document.attachEvent("onWeixinJSBridgeReady", handleFontSize); - } - } - function handleFontSize() { - // 设置网页字体为默认大小 - WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 }); - // 重写设置网页字体大小的事件 - WeixinJSBridge.on("menu:setfont", function () { - WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 }); - }); - } -}; + const playMusic = () => { - if (isAndriod) { - var audio = document.getElementById("audio"); - audio.play(); - } + if(isAndriod){ + var audioEle = document.getElementById("audio"); + audioEle.play(); + } } diff --git a/src/plugins/index.js b/src/plugins/index.js index cd09ae0..9e56f10 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -58,25 +58,6 @@ export function createBGM() { setTimeout(() => { audioAni.play() }, 1000) - - - // ios自动播放音乐 - document.addEventListener("DOMContentLoaded", function () { - function audioAutoPlay() { - var audio = document.getElementById("bg-music"); - audio.play(); - document.addEventListener( - "WeixinJSBridgeReady", - function () { - WeixinJSBridge.invoke("getNetworkType", {}, function (e) { - audio.play(); - }); - }, - false - ); - } - audioAutoPlay(); - }); } @@ -595,4 +576,29 @@ export function screenOrientation() { }, false ); -} \ No newline at end of file +} + + +// 字体适配 +export function fontAdpat () { + if ( + typeof WeixinJSBridge == "object" && + typeof WeixinJSBridge.invoke == "function" + ) { + handleFontSize(); + } else { + if (document.addEventListener) { + document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); + } else if (document.attachEvent) { + document.attachEvent("onWeixinJSBridgeReady", handleFontSize); + } + } + function handleFontSize() { + // 设置网页字体为默认大小 + WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 }); + // 重写设置网页字体大小的事件 + WeixinJSBridge.on("menu:setfont", function () { + WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 }); + }); + } + }; \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 6b0b51d..cc94f44 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -6,7 +6,7 @@ export const useMainStore = defineStore("counter", { return { hasDraw: true, //是否有抽奖机会 token: 'INFJ', - MBTI: 'INTP', //测试结果 + MBTI: 'INFJ', //测试结果 hasPrize: false, //是否有奖品 prizeCode: 'oggSVMbeLgSK', //兑换码 prizeMoney: '8.88', //金额