待更改兑奖页面

src/components/Draw.vue

@@ -1,38 +1,41 @@
 <script setup>
-import gsap from 'gsap'
+import gsap from "gsap";
-import { addPoint, debounceTap } from '@/plugins'
+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 money = ref("8.88");
-const code = ref('sss')
+const code = ref("sss");
 
-const showResult = ref(false)
+const showResult = ref(false);
-const hasPrize = ref(true)
+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
+      duration: 0,
-        })
+    });
-        gsap.fromTo(e, { rotation: '-30' }, { rotation: '+30', repeat: -1, yoyo: true, ease: 'none', duration: 0.3 })
+    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()
+      Toast.clear();
-            showResult.value = true
+      showResult.value = true;
-            gsap.from('.result-container', { duration: 0.5, scale: 0.7, autoAlpha: 0 })
+      gsap.from(".result-container", {
-            gsap.killTweensOf('.draw-light,.draw')
+        duration: 0.5,
-        }, 1000)
+        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>  
 

src/components/Result.vue

@@ -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(
+            src: posterBg[bgId.value - 1],
-              "../assets/images/result/poster-bg-" + bgId.value + ".jpg",
-              import.meta.url
-            ).href,
             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;

src/data/imgList.js

@@ -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', 
+    'result/theme-4.png',
-    'music-on.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',
     
 ]
 

src/page/Home/App.vue

@@ -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("code:", code);
-  console.log("url:", url);
+  // 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);