提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -44,7 +44,7 @@ import { ref } from "vue";
  * window.$originData.urlParames url参数
  */
 console.log(window.$originData);
-const page = ref("second");
+const page = ref("sex");
 // let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
 // for (let i = 0; i < first_text.length; i++) {
 //   first_text[i] = first_text[i].split("");

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -14,18 +14,16 @@
     <img :src="textimg" :style="step === 1 ? 'opacity: 1' : ''" class="sImg" />
     <img :src="text2img" :style="step === 3 ? 'opacity: 1' : ''" class="tImg" />
 
-    <div class="btns" v-if="step === 3">
+    <div class="btns">
+      <!-- <div class="btns" v-if="step === 3"> -->
       <div class="btn" @click="showDown" style="margin-left: 0">下载壁纸</div>
       <div class="btn" @click="showDown">生成海报</div>
     </div>
-
-    <div class="model" v-if="model">
-        <van-image class="modelImg" :src="modelimg" />
-    </div>
   </div>
 </template>
 <script setup>
 import { ref } from "vue";
+import { ImagePreview } from "vant";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -33,9 +31,19 @@ import { ref } from "vue";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
+
+const type = Math.floor(Math.random() * 13 + 1);
+const url = {
+  bg: require("@/assets/img/12/" + type + "-1.png"),
+  kuang: require("@/assets/img/12/" + type + ".kuang.png"),
+  text: require("@/assets/img/12/" + type + ".text.png"),
+  text2: require("@/assets/img/12/" + type + ".text2.png"),
+};
+const bgimg = ref(url.bg);
+const kuangimg = ref(url.kuang);
+const textimg = ref(url.text);
+const text2img = ref(url.text2);
 const step = ref(0);
-const model = ref(false);
-const modelimg = ref(undefined);
 let t = setTimeout(() => {
   clearTimeout(t);
   step.value += 1;
@@ -51,22 +59,9 @@ function autoStep() {
 }
 
 function showDown() {
-  console.log(url.bg);
-  modelimg.value = url.bg;
-  model.value = true;
+  console.log(url.bg, ImagePreview);
+  ImagePreview({ images: [url.bg], closeable: true });
 }
-
-const type = Math.floor(Math.random() * 13 + 1);
-const url = {
-  bg: require("@/assets/img/12/" + type + "-1.png"),
-  kuang: require("@/assets/img/12/" + type + ".kuang.png"),
-  text: require("@/assets/img/12/" + type + ".text.png"),
-  text2: require("@/assets/img/12/" + type + ".text2.png"),
-};
-const bgimg = ref(url.bg);
-const kuangimg = ref(url.kuang);
-const textimg = ref(url.text);
-const text2img = ref(url.text2);
 </script>
 <style lang="scss" scoped>
 .sex {
@@ -117,7 +112,7 @@ const text2img = ref(url.text2);
     }
   }
 
-  .model{
+  .model {
     position: fixed;
     top: 0;
     left: 0;
@@ -125,11 +120,11 @@ const text2img = ref(url.text2);
     right: 0;
     background-color: #00000040;
 
-    .modelImg{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+    .modelImg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
   }
 }