待更改兑奖页面

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