完成兑奖页面逻辑

2024-01-17 17:13:45 +08:00
parent 27b1eab2ce
commit 3291088bca
48 changed files with 372 additions and 178 deletions
--- a/src/components/Loading.vue
+++ b/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>
--- a/src/components/Question.vue
+++ b/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);
  }
--- a/src/components/Result.vue
+++ b/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>