待更改兑奖页面

src/components/Draw.vue

@@ -1,226 +1,239 @@
 <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 () => {
+  debounceTap(e, async () => {
-        console.log('抽奖');
+    console.log("抽奖");
-        Toast.loading({
+    Toast.loading({
-            message: '抽奖中',
+      message: "抽奖中",
-            forbidClick: true,
+      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 {
+    try {
-            const res = await drawApi({}, userStore.token)
+      const res = await drawApi({}, userStore.token);
-            if (res.code == 0) {
+      if (res.code == 0) {
-                // isDrawn后端判断有没有中奖
+        // 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) {
+        // if (res.data.isDrawn == 1) {
-                //     hasPrize.value = true
+        //     hasPrize.value = true
-                // } else {
+        // } else {
-                //     hasPrize.value = false
+        //     hasPrize.value = false
-                // }
+        // }
-            } else {
+      } else {
-                hasPrize.value = false  // true 中奖 || false 未中奖
+        hasPrize.value = false; // true 中奖 || false 未中奖
-            }
+      }
+    } catch (e) {
+      hasPrize.value = false;
+    }
 
-        } catch (e) {
+    userStore.updateDraw();
-            console.log('有才有无');
+    setTimeout(() => {
-            hasPrize.value = false
+      Toast.clear();
-        }
+      showResult.value = true;
+      gsap.from(".result-container", {
+        duration: 0.5,
+        scale: 0.7,
+        autoAlpha: 0,
+      });
+      gsap.killTweensOf(".draw-light,.draw");
+    }, 1000);
 
-        userStore.updateDraw()
+    // setTimeout(() => {
-        setTimeout(() => {
+    //     hasPrize.value = false  // true 中奖 || false 未中奖
-            Toast.clear()
+    //     showResult.value = true
-            showResult.value = true
+    //     console.log("showResult:", showResult.value);
-            gsap.from('.result-container', { duration: 0.5, scale: 0.7, autoAlpha: 0 })
+    //     Toast.clear()
-            gsap.killTweensOf('.draw-light,.draw')
+    //     gsap.from('.result-container', { duration: 0.5, scale: 0.7, autoAlpha: 0 })
-        }, 1000)
+    //     gsap.killTweensOf('.draw-light,.draw')
-
+    // }, 3000)
-
+  });
-        // setTimeout(() => {
+};
-        //     hasPrize.value = false  // true 中奖 || false 未中奖
-        //     showResult.value = true
-        //     console.log("showResult:", showResult.value);
-        //     Toast.clear()
-        //     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;
+  let e = event.target;
-    debounceTap(e, () => {
+  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;
+  let e = event.target;
-    debounceTap(e, () => {
+  debounceTap(e, () => {
-        Clipboard.copy(code.value);
+    Clipboard.copy(code.value);
-        Toast(`复制成功：${code.value}`);
+    Toast(`复制成功：${code.value}`);
-    });
+  });
-}
+};
 
 const entryAni = () => {
-    gsap.from(".DrawPage", { duration: 0.2, autoAlpha: 0 });
+  gsap.from(".DrawPage", { duration: 0.2, autoAlpha: 0 });
-    gsap.from(".draw-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
+  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();
+  entryAni();
 });
-
 </script>
 
 
 <template>
-    <div class="DrawPage" @touchmove.prevent>
+  <div class="DrawPage" @touchmove.prevent>
-        <!-- 抽奖容器 -->
+    <!-- 抽奖容器 -->
-        <div v-show="!showResult" class="draw-container">
+    <div v-show="!showResult" class="draw-container">
-            <div class="draw-light"></div>
+      <div class="draw-light"></div>
-            <div class="draw-box">
+      <div class="draw-box">
-                <div class="draw" @click="drawFn($event)"></div>
+        <div class="draw" @click="drawFn($event)"></div>
-            </div>
+      </div>
-            <div class="draw-star"></div>
+      <div class="draw-star"></div>
-            <div class="draw-tips"></div>
+      <div class="draw-tips"></div>
-        </div>
-        <div v-show="showResult" class="result-container">
-            <!-- 有奖品 -->
-            <div class="draw-has" v-show="hasPrize">
-                <div class="money">¥{{ money }}元</div>
-                <div class="code-box">
-                    <div class="code">{{ code }}</div>
-                    <div class="copy-btn" @click="copyFn($event)"></div>
-                </div>
-                <div class="cls-btn" @click="hide($event)"></div>
-            </div>
-            <!-- 没有奖品 -->
-            <div class="draw-none" v-show="!hasPrize">
-                <div class="none-prize"></div>
-                <div class="cls-btn" @click="hide($event)"></div>
-            </div>
-        </div>
-
     </div>
+    <div v-show="showResult" class="result-container">
+      <!-- 有奖品 -->
+      <div class="draw-has" v-show="hasPrize">
+        <div class="money">¥{{ money }}元</div>
+        <div class="code-box">
+          <div class="code">{{ code }}</div>
+          <div class="copy-btn" @click="copyFn($event)"></div>
+        </div>
+        <div class="cls-btn" @click="hide($event)"></div>
+      </div>
+      <!-- 没有奖品 -->
+      <div class="draw-none" v-show="!hasPrize">
+        <div class="none-prize"></div>
+        <div class="cls-btn" @click="hide($event)"></div>
+      </div>
+    </div>
+  </div>
 </template>  
 
 <style lang="scss" scoped>
 .DrawPage {
-    @include fixed();
+  @include fixed();
+  @include flexCen();
+  background-color: rgba($color: #000000, $alpha: 0.8);
+
+  // 抽奖弹窗样式
+  .draw-container {
+    @include box(685px, 694px);
+    position: relative;
+
+    .draw-light {
+      pointer-events: none;
+      @include pos(685px, 694px, 0px, 0px);
+      @include bg_pos("prize/light.png");
+    }
+
+    .draw-star {
+      pointer-events: none;
+      @include pos(515px, 551px, 89px, 56px);
+      @include bg_pos("prize/star.png");
+    }
+
+    .draw-box {
+      @include pos(690px, 680px, 0px, 0px);
+      @include bg_pos("prize/draw-box.png");
+
+      .draw {
+        @include pos(350px, 347px, 164px, 172px);
+      }
+    }
+
+    .draw-tips {
+      pointer-events: none;
+      @include pos(187px, 34px, 250px, 605px);
+      @include bg_pos("prize/tips.png");
+    }
+  }
+
+  // 中奖弹窗样式
+  .draw-has {
+    position: relative;
+    @include box(665px, 731px);
+    @include bg_pos("prize/myPrize-box.png");
+
+    .money {
+      @include pos(370px, 81px, 139px, 239px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #e95b46;
+      font-weight: 700;
+      font-size: 58px;
+      letter-spacing: 4px;
+    }
+
+    .code-box {
+      @include pos(312px, 52px, 197px, 508px);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .code {
+        font-size: 25px;
+        font-weight: 700;
+        margin-right: 10px;
+        color: #fff6cc;
+      }
+
+      .copy-btn {
+        @include box(77px, 39px);
+        @include bg_pos("prize/copy-btn.png");
+      }
+    }
+
+    .cls-btn {
+      @include pos(82px, 82px, 517px, 114px);
+      @include bg_pos("prize/cls-btn.png");
+    }
+  }
+
+  // 未中奖弹窗样式
+  .draw-none {
     @include flexCen();
-    background-color: rgba($color: #000000, $alpha: 0.8);
 
-    // 抽奖弹窗样式
+    .none-prize {
-    .draw-container {
+      @include box(521px, 447px);
-        @include box(685px, 694px);
+      @include bg_pos("prize/no-prize.png");
-        position: relative;
-
-        .draw-light {
-            pointer-events: none;
-            @include pos(685px, 694px, 0px, 0px);
-            @include bg_pos("prize/light.png");
-        }
-
-        .draw-star {
-            pointer-events: none;
-            @include pos(515px, 551px, 89px, 56px);
-            @include bg_pos("prize/star.png");
-        }
-
-        .draw-box {
-            @include pos(690px, 680px, 0px, 0px);
-            @include bg_pos("prize/draw-box.png");
-
-            .draw {
-                @include pos(350px, 347px, 164px, 172px);
-            }
-        }
-
-        .draw-tips {
-            pointer-events: none;
-            @include pos(187px, 34px, 250px, 605px);
-            @include bg_pos("prize/tips.png");
-        }
     }
 
-    // 中奖弹窗样式
+    .cls-btn {
-    .draw-has {
+      @include box(82px, 82px);
-        position: relative;
+      @include bg_pos("prize/cls-btn.png");
-        @include box(665px, 731px);
+      margin-top: 40px;
-        @include bg_pos("prize/myPrize-box.png");
-
-        .money {
-            @include pos(370px, 81px, 139px, 239px);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: #e95b46;
-            font-weight: 700;
-            font-size: 58px;
-            letter-spacing: 4px;
-        }
-
-        .code-box {
-            @include pos(312px, 52px, 197px, 508px);
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .code {
-                font-size: 25px;
-                font-weight: 700;
-                margin-right: 10px;
-                color: #fff6cc;
-            }
-
-            .copy-btn {
-                @include box(77px, 39px);
-                @include bg_pos("prize/copy-btn.png");
-            }
-        }
-
-        .cls-btn {
-            @include pos(82px, 82px, 517px, 114px);
-            @include bg_pos("prize/cls-btn.png");
-        }
-    }
-
-    // 未中奖弹窗样式
-    .draw-none {
-        @include flexCen();
-
-        .none-prize {
-            @include box(521px, 447px);
-            @include bg_pos("prize/no-prize.png");
-        }
-
-        .cls-btn {
-            @include box(82px, 82px);
-            @include bg_pos("prize/cls-btn.png");
-            margin-top: 40px;
-        }
     }
+  }
 }
 </style>

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);