update

src/components/Draw.vue

@@ -9,6 +9,7 @@ import { drawApi } from "@/api";
 // 页面配置初始化
 const emit = defineEmits(["DrawPage"]);
 const userStore = useMainStore();
+const { toClipboard } = useClipboard()
 
 
 

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 = () => {
           </div>
         </div>
         <div class="mbti-product">
-          <div class="product">{{ mbtiObj.product }}</div>
+          <div class="product" 
-          <div class="produc-img">
+          :class="mbtiObj.type == 'ISTJ' || mbtiObj.type == 'INTJ' ? 'adptFont' : ''"
+          >{{ mbtiObj.product }}</div>
+          <div class="produc-img" :style="{width:mbtiObj.picPos.w+'px',height:mbtiObj.picPos.h+'px'}">
             <img :src="mbtiObj.productPic" alt="" srcset="" />
           </div>
         </div>
@@ -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%);
         }
       }
     }

src/data/index.js

@@ -211,8 +211,10 @@ export const mbtiList = [
         job: '物流师',
         des: ['实际且注重事实的个人，', '可靠性不容怀疑'],
         blessings: ['脚下有风眼里有光', '心里有爱袋里有财'],
-        product: '灵活成长存款存单91天',
+        product: '灵活成长存款存单91天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        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天',
+        product: '灵活成长90天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        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号',
+        product: '灵活成长30天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        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',
+        product: '启元策略360天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        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天',
+        product: '启元添利90天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        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',
+        product: '灵活成长添利180天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        productPic: new URL('../assets/images/result/product/ENFP.png', import.meta.url).href,
+        picPos:{w:452,h:93}
     },
     {
         type: 'ENFJ',
         job: '主人公',
         des: ['富有魅力鼓舞人心的领导者', '有使听众着迷的能力'],
         blessings: ['是金子总会发光', '何况你是龙的传人'],
-        product: '新安鑫',
+        product: '安鑫系列',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        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',
+        product: '启元策略周享270天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        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持有',
+        product: '卓越稳健180天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        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天',
+        product: '灵活策略90天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        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',
+        product: '星辰添利270天持有',
-        productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
+        productPic: new URL('../assets/images/result/product/ENTJ.png', import.meta.url).href,
+        picPos:{w:409,h:112}
     },
 
 ]

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();
+  }
 }
 
 

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
     );
-}
+}
+
+
+// 字体适配
+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 });
+      });
+    }
+  };

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', //金额