完成兑奖页面逻辑

src/api/index.js

@@ -32,4 +32,13 @@ export function draw(data, authorization) {
         true,
         authorization
     );
+}
+
+// 兑奖
+export function exchangePrize(data, authorization) {
+    return http.post("/h5/activity/exchangePrize",
+        data,
+        true,
+        authorization
+    );
 }

src/components/Loading.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { Toast } from "vant";
 import gsap from "gsap";
-import { debounceTap } from "@/plugins";
 import Preloader from "@/plugins/Preloader";
 import { loadImg, pageImg } from "@/data/imgList";
-import {getMyPrize} from '@/api'
-import {useMainStore} from '@/store'
+import { getMyPrize } from '@/api'
+import { useMainStore } from '@/store'
 
 // 页面配置初始化
 const emit = defineEmits(["LoadPage"]);
@@ -46,10 +45,10 @@ onMounted(() => {
       duration: 0.2,
       autoAlpha: 1,
       onComplete: () => {
-        getMyPrize({},userStore.token).then(
-          res=>{
-            if(res.code == 0){
-              console.log('我的奖品',res);
+        getMyPrize({}, userStore.token).then(
+          res => {
+            if (res.code == 0) {
+              console.log('我的奖品', res);
             }
           }
         )
@@ -120,18 +119,22 @@ onMounted(() => {
     .clock-box {
       @include pos(125px, 125px, 313px, 299px);
       @include bg_pos("load/clock-bg.png");
+
       .clock-circle {
         @include pos(13px, 13px, 57px, 55px);
         @include bg_pos("load/clock-circle.png");
       }
+
       .clock-s {
         @include pos(125px, 125px, 0px, 0px);
         @include bg_pos("load/clock-second.png");
       }
+
       .clock-m {
         @include pos(125px, 125px, 0px, 0px);
         @include bg_pos("load/clock-minute.png");
       }
+
       .clock-h {
         @include pos(125px, 125px, 0px, 0px);
         @include bg_pos("load/clock-hour.png");
@@ -145,6 +148,7 @@ onMounted(() => {
       border-color: #e17c4d;
       border-radius: 20px;
       overflow: hidden;
+
       .bar {
         @include box(10%, 38px);
         border-radius: 20px;
@@ -174,5 +178,4 @@ onMounted(() => {
       background-color: aliceblue;
     }
   }
-}
-</style>
+}</style>

src/components/Question.vue

@@ -118,7 +118,10 @@ const showResult = (event) => {
 const prevePage = (event) => {
   let e = event.target;
   debounceTap(e, () => {
-    gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
+    // gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
+    if (currentId.value == 1) {
+      gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
+    }
     if (currentId.value >= 11) {
       resultBtnAni.reverse();
       gsap.set(".answer", { pointerEvents: "initial" });
@@ -134,23 +137,25 @@ const prevePage = (event) => {
 // 题目过渡动画
 const questionEntry = gsap.timeline({
   paused: true,
-  onStart: () => {
-    gsap.set(".answer-box", { pointerEvents: "none" });
-  },
+  // onStart: () => {
+  //   gsap.to('.question-bg', { backgroundPosition: '0px 0px' })
+  // },
   onComplete: () => {
-    if (currentId.value != 0) {
-      gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
-    }
-
+    // if (currentId.value != 0) {
+    //   gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
+    // }
     gsap.set(".answer-box", { pointerEvents: "initial" });
   },
 });
 const questionOut = gsap.timeline({
   paused: true,
   onStart: () => {
+    // gsap.to('.question-bg', { backgroundPosition: '0px 840px' })
+
     gsap.set(".answer-box", { pointerEvents: "none" });
   },
   onComplete: () => {
+
     gsap.set(".answer-box", { pointerEvents: "initial" });
   },
 });
@@ -177,9 +182,22 @@ onMounted(() => {
         autoAlpha: 0,
         duration: 2,
         ease: "slow(0.7,0.7,false)",
+        onStart: () => {
+          gsap.to('.question-bg', {
+            backgroundPosition: '0px 0px',
+            duration: 1,
+            ease: "slow(0.7,0.7,false)",
+          })
+        },
+        onComplete: () => {
+          gsap.set(".answer-box", { pointerEvents: "initial" });
+          if (currentId.value != 0) {
+            gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
+          }
+        }
       },
       0.5
-    );
+    ).to('.answer-0', { duration: 1, y: '-=10px', repeat: -1, yoyo: true }).to('.answer-1', { duration: 1, y: '+=10px', repeat: -1, yoyo: true })
 
   questionEntry.play();
   questionOut
@@ -192,6 +210,13 @@ onMounted(() => {
       autoAlpha: 0,
       duration: 1.5,
       ease: "slow(0.7,0.7,false)",
+      onStart: () => {
+        gsap.to('.question-bg', {
+          backgroundPosition: '0px 835px',
+          duration: 0.75,
+          ease: "slow(0.7,0.7,false)",
+        })
+      },
     })
     .to(
       ".answer-1",
@@ -204,15 +229,15 @@ onMounted(() => {
       },
       1.5
     )
-    .to(
-      ".question-bg",
-      {
-        duration: 3,
-        ease: "slow(0.7,0.7,false)",
-        background: `linear-gradient(95deg, #f6d365, #fda085)`,
-      },
-      1.5
-    );
+  // .to(
+  //   ".question-bg",
+  //   {
+  //     duration: 3,
+  //     ease: "slow(0.7,0.7,false)",
+  //     background: `linear-gradient(95deg, #f6d365, #fda085)`,
+  //   },
+  //   1.5
+  // );
 });
 </script>
 
@@ -228,16 +253,9 @@ onMounted(() => {
           </div>
         </div>
         <div class="answer-box">
-          <div
-            class="answer"
-            v-for="(item, index) in questionList[currentId].answer"
-            :class="'answer-' + index"
-            :key="index"
-          >
-            <div
-              class="answer-bg"
-              :class="activeId == item.aid ? 'active' : ''"
-            ></div>
+          <div class="answer" v-for="(item, index) in questionList[currentId].answer" :class="'answer-' + index"
+            :key="index">
+            <div class="answer-bg" :class="activeId == item.aid ? 'active' : ''"></div>
             <div class="answer-text">
               <div class="content-before"></div>
               <div class="content-after"></div>
@@ -263,7 +281,7 @@ onMounted(() => {
   overflow: hidden;
 
   .question-bg {
-    @include pos(750px, 100%, 0px, 50%);
+    @include pos(750px, 4500px, 0px, 50%);
     transform: translateY(-50%);
     background: linear-gradient(135deg, #f6d365, #fda085);
   }

src/components/Result.vue

@@ -18,6 +18,7 @@ const bgPic = computed(() => {
 
 const mbti = ref(userStore.MBTI);
 
+
 console.log("mbti", mbti.value);
 
 const changBg = (event, number) => {
@@ -27,7 +28,7 @@ const changBg = (event, number) => {
     debounceTap(
         e,
         () => {
-            console.log("bgId", bgId.value);
+            // console.log("bgId", bgId.value);
         },
         0.3
     );
@@ -36,15 +37,25 @@ const changBg = (event, number) => {
 const createPoster = (event) => {
     let e = event.target
     debounceTap(e, () => {
-        let saveImg = posterCreate(
-            { width: 750, height: 1450 },
+        // 海报生成
+        posterCreate(
+            { width: 750, height: 1450 },  //海报尺寸
+            // 海报素材，按顺序依次渲染
             [
-                new URL(`@/assets/images/result/bg-2.jpg`, import.meta.url).href,
-                new URL(`@/assets/images/qa/question.png`, import.meta.url).href,
-                new URL(`@/assets/images/qa/showResult-btn.png`, import.meta.url).href
+                {
+                    src: new URL(`@/assets/images/result/bg-2.jpg`, import.meta.url).href,
+                    pos: { w: 750, h: 1624, x: 0, y: 0 }
+                },
+                {
+                    src: new URL(`@/assets/images/qa/question.png`, import.meta.url).href,
+                    pos: { w: 250, h: 1624, x: 0, y: 0 }
+                },
+                {
+                    src: new URL(`@/assets/images/qa/showResult-btn.png`, import.meta.url).href,
+                    pos: { w: 250, h: 124, x: 0, y: 0 }
+                },
             ]
         )
-        console.log('saveImg', saveImg);
     }, 0.4)
 }
 </script>
@@ -65,6 +76,7 @@ const createPoster = (event) => {
             <div style="width: 500px;height: 700px;">
                 <img class="pic" src="" alt="" srcset="">
             </div>
+            <img id="poster" alt="" srcset="">
         </div>
     </div>
 </template>  

src/page/Cash/App.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { Toast, Icon } from 'vant'
+import gsap from "gsap";
+import { authorize, getUserInfo, exchangePrize } from '@/api'
+import { getQueryString, debounceTap } from "@/plugins";
+
+const Authorization = ref('')
+const hasPrize = ref(false)
+const received = ref(true)
+const money = ref('9.99')
+
+
+onMounted(() => {
+  let code = getQueryString('code')
+  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);
+            Authorization.value = res.data.authorization
+            exchangePrize({}, Authorization.value).then(
+              res => {
+                console.log('兑换结果：', res);
+              }
+            )
+          } else {
+            authorize({ scopeType: 1 }).then(
+              res => {
+                if (res.code == 0) {
+                  console.log('重定向地址：', res.data);
+                  location.replace(res.data)
+                }
+
+                // 其余情况
+                Toast.fail({
+                  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)
+          }
+          // 其余情况
+          Toast.fail({
+            message: res.msg,
+            duration: 0,
+            forbidClick: true
+          })
+        }
+      )
+    }
+  }
+
+
+
+
+
+  gsap.from('.CashPage', { duration: 0.5, autoAlpha: 0 })
+})
+
+const go = (event) => {
+  let e = event.target
+  debounceTap(e, () => {
+    console.log(1);
+    let url = import.meta.env.VITE_HOST + import.meta.env.VITE_FOLDER + '/index.html'
+    window.location.replace(url)
+  }, 0.5)
+}
+
+</script>
+
+<template>
+  <div class="CashPage" @touchmove.prevent>
+    <div class="cash-container" v-if="hasPrize">
+      <!-- 正常领奖 -->
+      <div class="cashed-success" v-if="!received">
+        <div class="money">¥{{ money }}元</div>
+      </div>
+      <!-- 已经领过奖 -->
+      <div class="cashed-worng" v-else></div>
+    </div>
+    <!-- 暂无中奖记录 -->
+    <div v-else class="no-prize">
+      <div class="icon">
+        <Icon size="40" name="info-o" color="#fda085" />
+      </div>
+      <div class="text">暂无中奖记录</div>
+      <div class="btn" @click="go($event)">前往参与活动</div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.CashPage {
+  @include pos(100%, 100%, 0px, 0px);
+  background: linear-gradient(135deg, #f6d365, #fda085);
+  overflow: hidden;
+  @include flexCen();
+
+  .cashed-success {
+    @include pos(750px, 1624px, 0px, 50%);
+    transform: translateY(-50%);
+    @include bg_pos("cash/lucky_bg.jpg");
+
+    .money {
+      @include pos(750px, 200px, 0px, 650px);
+      // background-color: rgba($color: #000000, $alpha: .7);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 100px;
+      font-weight: 700;
+      color: #fda085;
+      letter-spacing: 2px;
+    }
+  }
+
+  .cashed-worng {
+    @include pos(750px, 1624px, 0px, 50%);
+    transform: translateY(-50%);
+    @include bg_pos("cash/received.jpg");
+  }
+
+  .no-prize {
+    @include box(600px, 400px);
+    border-radius: 20px;
+    background-color: aliceblue;
+    @include flexCen();
+    box-shadow: 5px 5px 10px #bebebe,
+      -5px -5px 10px #ffffff;
+
+    .icon {
+      height: 100px;
+    }
+
+    .text {
+      font-size: 28px;
+      letter-spacing: 1px;
+    }
+
+    .btn {
+      @include box(280px, 80px);
+      background: linear-gradient(135deg, #f6d365, #fda085);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50px;
+      font-size: 30px;
+      color: #fff;
+      margin-top: 50px;
+      box-shadow: 20px 20px 60px #bebebe,
+        -20px -20px 60px #ffffff;
+    }
+  }
+
+}
+</style>

src/page/Cash/main.js

@@ -1,14 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import { createPinia } from "pinia"
-// import h5plugin from '@/plugins';
-import { wxShare } from '@/plugins/wxshare';
+import { wxShare } from '@/plugins/wxshare'
+import 'vant/lib/index.css';
+
 const app = createApp(App)
 
-// 定义引入图片地址的全局方法
-app.config.globalProperties.imgUrl = (url) => {
-    return new URL(`./assets/images/${url}`, import.meta.url).href
-}
+
+
 // 初始化我的方法
 // app.config.globalProperties.myPlugin = h5plugin
 
@@ -19,6 +17,6 @@ wxShare({
     link: '/index.html',
 })
 
-app.use(createPinia())
+
 app.mount('#app')
 console.log('Mode:', import.meta.env.VITE_MODE);

src/page/Home/App.vue

@@ -82,91 +82,99 @@ onMounted(() => {
 
   let code = getQueryString('code')
   console.log('code:', code);
-  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 {
-          console.log('hhhh');
-          authorize({ scopeType: 1 }).then(
-            res => {
 
-              if (res.code == 0) {
-                console.log('重定向地址：', res.data);
-                location.replace(res.data)
-              }
+  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 {
+            console.log('hhhh');
+            authorize({ scopeType: 1 }).then(
+              res => {
 
-              // 活动已结束：6001
-              if (res.code == '6001') {
+                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
+                }
+
+                // 活动未开启：6002
+                if (res.code == '6002') {
+                  Toast({
+                    message: res.msg,
+                    duration: 0,
+                    icon: 'flag-o',
+                    forbidClick: true
+                  })
+                  return
+                }
+
+                // 其余情况
                 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
-              }
 
-              // 其余情况
-              Toast.fail({
-                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: '活动未开始',
+              duration: 0,
+              icon: 'flag-o',
+              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
-          })
-        }
-      }
-    )
+    showLoad.value = true
   }
 
+
+
 });
 
 </script>

src/page/Share/App.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="SharePage">share</div>
-</template>
-
-<script setup>
-</script>
-
-<style lang="scss" scoped>
-.SharePage {
-  @include fixed();
-  @include flexCen();
-}
-</style>

src/plugins/index.js

@@ -1,6 +1,7 @@
 // 常用的方法
 import gsap from 'gsap'
 import { Howl, Howler } from 'howler';
+import { Toast } from 'vant';
 import { createVNode, render } from 'vue'
 
 
@@ -433,10 +434,16 @@ export function mostValue(arr) {
 
 // 海报生成
 export function posterCreate(option, imageArr) {
+    let posterUrl = ''
     const { width, height } = option
+    Toast.loading({
+        message: '海报生成中',
+        duration: 0,
+        forbidClick: true
+    })
 
-    let mycanvas = document.createElement('canvas'), // 创建一个canvas画布元素 
-        ctx = mycanvas.getContext('2d');
+    let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素 
+    let ctx = mycanvas.getContext('2d')
     mycanvas.width = width; //设置canvas的宽
     mycanvas.height = height; //设置canvas的高
 
@@ -449,46 +456,28 @@ export function posterCreate(option, imageArr) {
             img.onload = () => {
                 resolve(img)
             };
-            img.src = item;
+            img.src = item.src;
         });
         loader_p.push(_p);
     })
-    // imageArr.forEach((ev, index) => {
-    //     const _p = new Promise(resolve => {
-    //         const img = new Image();
-    //         img.crossOrigin = 'Anonymous'
-    //         img.onload = () => {
-    //             resolve(img)
-    //         };
-    //         img.src = ev;
-    //     });
-    //     loader_p.push(_p);
-    // });
-
     //Promise的.all方法，当所有预加载的图像加载好的回调函数 
     Promise.all(loader_p)
-        .then(img_Arr => {
-            const poster = img_Arr[0]; //声明一个对象替代刚刚加载的资源
-            console.log('======开始绘制海报======)');
-            console.log('daihui:', img_Arr);
-            // 画海报
-            ctx.drawImage(poster, 0, 0, mycanvas.width, mycanvas.height); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
-            // 画签文
-            // ctx.fillStyle = '#524426'; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
-            // ctx.font = 'bold  28px arial'; // normal bold
-            // ctx.textAlign = 'start'; //type2
-            // ctx.rotate(-8 * Math.PI / 180);
-            // ctx.fillText('@' + this.userName, 40, this.tHeight); //绘制文字
+        .then(imgList => {
+            console.log('海报数组：', imgList);
+            imgList.map((item, index) => {
+                console.log('item', imageArr[index].pos);
+                ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
+            })
 
             //海报绘制完 ，转成图片对象
             return mycanvas.toDataURL('image/jpeg', 1);
-
         })
         .then(baseURL => {
             //返回的图片地址，就是最后海报的地址，可以放在DOM显示
-            console.log('海报生成完毕 that.posterIsInit', baseURL);
-            // let img = document.querySelector('#pic')
-            // img.src = baseURL
-            // return baseURL
+            let posterImg = document.querySelector('#poster')
+            posterImg.src = baseURL
+            setTimeout(() => Toast.success({ message: '已成功' }), 500)
         })
+
+    return posterUrl
 }