生成海报逻辑待完善

src/components/Result.vue

@@ -3,16 +3,17 @@ import { gsap } from "gsap";
 import { debounceTap } from "@/plugins";
 import { useMainStore } from "@/store";
 import { mbtiList } from "@/data";
+import { posterCreate } from '@/plugins'
 
 // 页面配置初始化
 const emit = defineEmits(["ResultPage"]);
 const userStore = useMainStore();
 let bgId = ref(1);
 const bgPic = computed(() => {
-  return new URL(
-    `../assets/images/result/bg-${bgId.value}.jpg`,
-    import.meta.url
-  ).href;
+    return new URL(
+        `../assets/images/result/bg-${bgId.value}.jpg`,
+        import.meta.url
+    ).href;
 });
 
 const mbti = ref(userStore.MBTI);
@@ -20,76 +21,90 @@ const mbti = ref(userStore.MBTI);
 console.log("mbti", mbti.value);
 
 const changBg = (event, number) => {
-  let e = event.target;
-  if (number == bgId.value) return;
-  bgId.value = number;
-  debounceTap(
-    e,
-    () => {
-      console.log("bgId", bgId.value);
-    },
-    0.3
-  );
+    let e = event.target;
+    if (number == bgId.value) return;
+    bgId.value = number;
+    debounceTap(
+        e,
+        () => {
+            console.log("bgId", bgId.value);
+        },
+        0.3
+    );
 };
+
+const createPoster = (event) => {
+    let e = event.target
+    debounceTap(e, () => {
+        let saveImg = 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
+            ]
+        )
+        console.log('saveImg', saveImg);
+    }, 0.4)
+}
 </script>
 
 <template>
-  <div class="ResultPage">
-    <div class="result-bg">
-      <img :src="bgPic" alt="" srcset="" />
-    </div>
-    <div class="result-container">
-      结果页:{{ mbti || "没结果" }}
-      <div class="bg-tab">
-        <div
-          :class="{ active: bgId == item }"
-          v-for="item in 4"
-          class="li"
-          @click="changBg($event, item)"
-        >
-          {{ item }}
+    <div class="ResultPage">
+        <div class="result-bg">
+            <img :src="bgPic" alt="" srcset="" />
+        </div>
+        <div class="result-container">
+            结果页:{{ mbti || "没结果" }}
+            <div class="bg-tab">
+                <div :class="{ active: bgId == item }" v-for="item in 4" class="li" @click="changBg($event, item)">
+                    {{ item }}
+                </div>
+            </div>
+            <div @click="createPoster($event)">生成海报</div>
+            <div style="width: 500px;height: 700px;">
+                <img class="pic" src="" alt="" srcset="">
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>  
 
 
 <style lang="scss" scoped>
 .ResultPage {
-  @include fixed();
-  background-color: azure;
+    @include fixed();
+    background-color: azure;
 
-  .result-bg {
-    @include pos(750px, 100%, 0px, 50%);
-    transform: translateY(-50%);
-    pointer-events: none;
+    .result-bg {
+        @include pos(750px, 100%, 0px, 50%);
+        transform: translateY(-50%);
+        pointer-events: none;
 
-    img {
-      @include box(100%, 100%);
+        img {
+            @include box(100%, 100%);
+        }
     }
-  }
 
-  .result-container {
-    @include pos(750px, 100%, 0px, 50%);
-    transform: translateY(-50%);
+    .result-container {
+        @include pos(750px, 100%, 0px, 50%);
+        transform: translateY(-50%);
 
-    .bg-tab {
-      width: 90%;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-around;
+        .bg-tab {
+            width: 90%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
 
-      .li {
-        @include box(80px, 80px);
-        background-color: aquamarine;
-        @include flexCen();
-      }
+            .li {
+                @include box(80px, 80px);
+                background-color: aquamarine;
+                @include flexCen();
+            }
 
-      .active {
-        background: #bc0000;
-      }
+            .active {
+                background: #bc0000;
+            }
+        }
     }
-  }
 }
 </style>