提交

src/view/SilkRoadSpringFestivalGala/index.js

@@ -1,7 +1,6 @@
 import App from "./index.vue";
 import "@/assets/js/common";
 import { createApp } from "vue";
-import { getUser } from "@/utils/tool.js";
 import { getPageParameters, environment } from "@/config/pageConfig.js";
 // 判断环境
 environment();
@@ -45,14 +44,8 @@ window.SL.Content.CommodityDetail({
   tag: [],
 });
 
-!window.$shanshipin || !window.$shanshipin.Phone
-  ? getUser(() => createApp(App).mount("#app"))
-  : createApp(App).mount("#app");
+createApp(App).mount("#app");
 
-window.setUserSession = () => {
-  console.log("登录");
-  getUser(() => createApp(App).mount("#app"));
-};
 
 // 给元素添加playing属性
 Object.defineProperty(HTMLMediaElement.prototype, "playing", {

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -34,7 +34,7 @@
         x5-video-player-fullscreen="true"
         src="../../assets/video/W.mp4"
         class="video"
-        v-show=" page === 'five' || page === 'sex'"
+        v-show="page === 'five'"
       ></video>
       <video
         muted
@@ -64,13 +64,7 @@
         <five v-if="page === 'five'" @changePage="changePage" />
       </transition>
       <transition name="fade">
-        <sex v-if="page === 'sex'" @changePage="changePage" />
-      </transition>
-      <transition name="fade">
-        <seven v-if="page === 'seven'" @changePage="changePage" />
-      </transition>
-      <transition name="fade">
-        <eight v-if="page === 'eight'" />
+        <sex v-if="page === 'sex' || page === 'seven'" />
       </transition>
     </div>
   </div>
@@ -81,8 +75,6 @@ import second from "./pages/second.vue";
 import fourth from "./pages/fourth.vue";
 import five from "./pages/five.vue";
 import sex from "./pages/sex.vue";
-import seven from "./pages/seven.vue";
-import eight from "./pages/eight.vue";
 
 // import { onMounted, reactive } from "vue";
 import { ref } from "vue";
@@ -95,7 +87,7 @@ document.title = "多彩丝路中国年 | 2023新年开运色";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const page = ref("eight");
+const page = ref("sex");
 // let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
 // for (let i = 0; i < first_text.length; i++) {
 //   first_text[i] = first_text[i].split("");
@@ -109,7 +101,6 @@ const audio = new Audio();
 audio.src = audioFile;
 audio.loop = true;
 
-
 function tosecond() {
   changePage("second");
   const video = document.querySelectorAll("video");

src/view/SilkRoadSpringFestivalGala/pages/eight.vue

@@ -1,136 +0,0 @@
-<template>
-    <div class="eight">
-      <van-row class="luckDraw">
-        <van-col
-          span="8"
-          v-for="i in 12"
-          :key="i"
-          :class="{ shakeSlow: show[i - 1] }"
-        >
-          <div v-if="show[i - 1]" class="click">点我</div>
-          <van-image
-            :width="img.width"
-            :height="img.height"
-            :class="{ img: true }"
-            fit="contain"
-            src="err"
-          >
-            <template v-slot:loading>
-              <van-loading type="spinner" size="20" />
-            </template>
-          </van-image>
-        </van-col>
-      </van-row>
-    </div>
-  </template>
-  <script setup>
-  import { reactive, ref } from "vue";
-  // import { onMounted, reactive } from "vue";
-  // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-  /**
-   * window.$originData.orginParames.title 页面标题
-   * window.$originData.orginParames.parameters 固定参数值
-   * window.$originData.urlParames url参数
-   */
-  let w = window.$originData.orginParames.availWidth || 0;
-  const show = ref(Array(12).fill(false));
-
-  const next = false;
-  
-  let t = setInterval(() => {
-    let index = Math.ceil(Math.random() * 12) - 1;
-    if (index < 0) index = 0;
-    for (let i = 0; i < show.value.length; i++) {
-      show.value[i] = i == index;
-    }
-    if(next) clearInterval(t);
-  }, 5000);
-  
-  w = (w / 3) * 0.8;
-  const img = reactive({
-    width: w,
-    height: w,
-  });
-  </script>
-  <style lang="scss" scoped>
-  .eight {
-    width: 100%;
-    height: 100%;
-    padding-top: 1rem;
-    background-color: #fff;
-    .luckDraw {
-      $background: #00000040;
-      background-color: #eeeeee80;
-      border-radius: 5px;
-      padding: 0.5em;
-      margin: 0 auto;
-      width: 96%;
-      .img {
-        border-radius: 5px;
-        display: block;
-        margin: auto;
-        border: 3px solid #ffffff;
-      }
-      .click {
-        background-color: $background;
-        position: absolute;
-        border-radius: 3px;
-        text-align: center;
-        padding: 2px 3px;
-        color: #fff;
-        font-size: 14px;
-        right: -0.5em;
-        top: -0.5em;
-        width: 4em;
-        z-index: 10;
-      }
-      .click:before {
-        position: absolute;
-        display: block;
-        content: " ";
-        height: 0px;
-        width: 0px;
-        border: 3px solid $background;
-        border-top-color: rgba($color: #000000, $alpha: 0);
-        border-left-color: rgba($color: #000000, $alpha: 0);
-        bottom: -3px;
-        left: 9px;
-        transform: rotate(45deg);
-      }
-    }
-  }
-  
-  .shakeSlow {
-    animation: shake-slow 1s ease-in-out;
-  }
-  
-  @keyframes shake-slow {
-    0% {
-      transform: rotate(0) scale(1);
-    }
-    20% {
-      transform: rotate(2.5deg);
-    }
-    40% {
-      transform: rotate(-2.5deg);
-    }
-    60% {
-      transform: rotate(2.5deg) scale(1.1);
-    }
-    80% {
-      transform: rotate(-2.5deg);
-    }
-    100% {
-      transform: rotate(0);
-    }
-  }
-  </style>
-  <style lang="scss">
-  .eight {
-    .van-col {
-      padding: 0.2em 0;
-      position: relative;
-    }
-  }
-  </style>
-  

src/view/SilkRoadSpringFestivalGala/pages/seven.vue

@@ -1,10 +1,55 @@
 <template>
   <div class="seven">
-    <img @click="nextPage" src="../../../assets/img/next.png" class="next" />
+    <img
+      src="https://cxzx.smcic.net/topic/tool/img/topimg.jpg"
+      style="width: 100%"
+    />
+    <van-row class="luckDraw">
+      <van-col
+        span="8"
+        v-for="i in 12"
+        :key="i"
+        :class="{ shakeSlow: show[i - 1] }"
+      >
+        <div v-if="show[i - 1]" class="click">点我</div>
+        <van-image
+          @click="draw"
+          :width="img.width"
+          :height="img.height"
+          :class="{ img: true }"
+          fit="contain"
+          src="err"
+        >
+          <template v-slot:loading>
+            <van-loading type="spinner" size="20" />
+          </template>
+        </van-image>
+      </van-col>
+    </van-row>
+
+    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+      <van-swipe-item>
+        <div class="vieoPlay">
+          <van-icon
+            name="play-circle-o"
+            @click="()=>playVideo('https://cxzx.smcic.net/topic/tool/media/ad.mp4')"
+            color="#ffffff"
+            class="play"
+            size="40"
+          />
+          <img
+            style="width: 100%"
+            src="https://cxzx.smcic.net/topic/tool/media/ad.mp4?x-oss-process=video/snapshot,t_100,f_jpg,m_fast"
+          />
+        </div>
+      </van-swipe-item>
+    </van-swipe>
+
   </div>
 </template>
 <script setup>
-import { defineEmits } from "vue";
+import { reactive, ref,defineEmits } from "vue";
+import { Dialog } from "vant";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -12,42 +57,215 @@ import { defineEmits } from "vue";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const emits = defineEmits(["changePage"]);
+let w = window.$originData.orginParames.availWidth || 0;
+const show = ref(Array(12).fill(false));
+const from = reactive({
+  name: localStorage.getItem("silkRoadName") || "",
+  phone: localStorage.getItem("silkRoadPhone") || "",
+  address: localStorage.getItem("silkRoadAddress") || "",
+});
+// const gift = require("@/assets/img/")
+const next = false;
+const emits = defineEmits(["showVideo"]);
+
+let t = setInterval(() => {
+  let index = Math.ceil(Math.random() * 12) - 1;
+  if (index < 0) index = 0;
+  for (let i = 0; i < show.value.length; i++) {
+    show.value[i] = i == index;
+  }
+  if (next) clearInterval(t);
+}, 5000);
+
+w = (w / 3) * 0.8;
+const img = reactive({
+  width: w,
+  height: w,
+});
+if (!from.phone) {
+  Dialog({
+    message: () => {
+      const li = diglogUser();
+      return (
+        <div>
+          {li[0]} {li[1]}
+        </div>
+      );
+    },
+  }).then(() => {
+    // on close
+    from.name && localStorage.setItem("silkRoadName", from.name);
+    from.phone && localStorage.setItem("silkRoadPhone", from.phone);
+  });
+}
+
+function draw() {
+  let isdraw = Math.random() >= 0.95 || true;
+  Dialog({
+    title: "抽奖提示",
+    message: () => {
+      if (isdraw) return drawIsTrue();
+      if (!isdraw) return drawIsFalse();
+    },
+  }).then(() => {
+    // on close
+    from.address && localStorage.setItem("silkRoadAddress", from.address);
+  });
+}
+
+function diglogUser() {
+  return [
+    <van-field
+      required
+      v-model={from.name}
+      label="昵称"
+      type="text"
+      placeholder="请输入昵称"
+    />,
+    <van-field
+      required
+      v-model={from.phone}
+      label="联系方式"
+      type="tel"
+      placeholder="请输入手机号"
+    />,
+    <van-field
+      required
+      v-model={from.address}
+      label="地址"
+      type="text"
+      placeholder="请输入收货地址"
+    />,
+  ];
+}
+
+function drawIsTrue() {
+  const li = diglogUser();
+  const isPhone = !localStorage.getItem("silkRoadPhone");
+  const isAddress = !localStorage.getItem("silkRoadAddress");
+  let ele = (
+    <div>
+      <img
+        class="dialogImg"
+        src="https://cxzx.smcic.net/topic/tool/img/gift.jpg"
+      />
+      <br />
+      <p>
+        恭喜您获得
+        <span style="color: red">长武苹果一盒</span>！
+      </p>
+      <br />
+      {isPhone ? li[1] : ""}
+      {isAddress ? li[2] : ""}
+    </div>
+  );
+  return ele;
+}
+
+function drawIsFalse() {
+  let ele = <div>谢谢惠顾</div>;
+  return ele;
+}
 
-function nextPage() {
-  emits("changePage", "eight");
+function playVideo(url) {
+  emits("showVideo", url);
 }
 </script>
 <style lang="scss" scoped>
 .seven {
   width: 100%;
   height: 100%;
-  padding-top: 1rem;
-  background-image: url(../../../assets/img/bg3.jpg);
-  background-size: 100% 100%;
+  padding: 0.5em 0;
+  background-color: #fff;
+  overflow: auto;
   position: relative;
-  .next {
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    top: inherit;
-    width: 2em;
-    z-index: 1;
-    position: fixed;
-    animation-name: an;
-    animation-duration: 1s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+  .luckDraw {
+    $background: #00000040;
+    background-color: #eeeeee80;
+    border-radius: 5px;
+    padding: 0.5em;
+    margin: 0.5em auto;
+    width: 96%;
+    .img {
+      border-radius: 5px;
+      display: block;
+      margin: auto;
+      border: 3px solid #ffffff;
+    }
+    .click {
+      background-color: $background;
+      position: absolute;
+      border-radius: 3px;
+      text-align: center;
+      padding: 2px 3px;
+      color: #fff;
+      font-size: 14px;
+      right: -0.5em;
+      top: -0.5em;
+      width: 4em;
+      z-index: 1;
+    }
+    .click:before {
+      position: absolute;
+      display: block;
+      content: " ";
+      height: 0px;
+      width: 0px;
+      border: 3px solid $background;
+      border-top-color: rgba($color: #000000, $alpha: 0);
+      border-left-color: rgba($color: #000000, $alpha: 0);
+      bottom: -3px;
+      left: 9px;
+      transform: rotate(45deg);
+    }
   }
 }
 
-@keyframes an {
-  from {
-    bottom: 10px;
+.shakeSlow {
+  animation: shake-slow 1s ease-in-out;
+}
+
+@keyframes shake-slow {
+  0% {
+    transform: rotate(0) scale(1);
+  }
+  20% {
+    transform: rotate(2.5deg);
+  }
+  40% {
+    transform: rotate(-2.5deg);
   }
-  to {
-    bottom: 15px;
+  60% {
+    transform: rotate(2.5deg) scale(1.1);
   }
+  80% {
+    transform: rotate(-2.5deg);
+  }
+  100% {
+    transform: rotate(0);
+  }
+}
+</style>
+<style lang="scss">
+.seven {
+  .van-col {
+    padding: 0.2em 0;
+    position: relative;
+  }
+
+  .vieoPlay {
+    position: relative;
+    .play {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+.dialogImg {
+  width: 5em;
+  display: block;
+  margin: auto;
 }
 </style>

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -1,101 +1,131 @@
 <template>
-  <div style="width: 100%; overflow: hidden">
-    <transition name="fade">
-      <img
-        v-if="step === 5"
-        @click="nextPage"
-        src="../../../assets/img/next.png"
-        class="next"
-      />
-    </transition>
-    <div class="sex" :style="'background-image: url(' + bgimg + ')'">
-      <img
-        :src="kuangimg"
-        :style="
-          step === 2
-            ? 'opacity: 1'
-            : step >= 3
-            ? 'width: 25%;transform: translate(0, 0);opacity: 1; top: 1em; left: 1em'
-            : 'opacity: 0'
-        "
-        class="firstImg"
-      />
-      <transition name="fade">
-        <div
-          class="sImg img"
-          v-if="step === 1"
-          :style="'width:' + width + 'px;'"
-        >
-          <template v-for="(item, i) in text.texts" :key="i">
-            <p
-              v-text="item"
+  <div>
+    <van-swipe
+      ref="swipe"
+      :touchable="false"
+      :show-indicators="false"
+      vertical
+      indicator-color="white"
+    >
+      <van-swipe-item>
+        <div style="width: 100%; overflow: hidden; position: relative">
+          <transition name="fade">
+            <img
+              v-if="step === 5"
+              @click="nextPage"
+              src="../../../assets/img/next.png"
+              class="next"
+            />
+          </transition>
+          <div class="sex" :style="'background-image: url(' + bgimg + ')'">
+            <img
+              :src="kuangimg"
               :style="
-                stepBody >= i
-                  ? 'opacity: 1;color: ' + text.color
-                  : 'color: ' + text.color
+                step === 2
+                  ? 'opacity: 1'
+                  : step >= 3
+                  ? 'width: 25%;transform: translate(0, 0);opacity: 1; top: 1em; left: 1em'
+                  : 'opacity: 0'
               "
-            ></p>
-            <br />
-          </template>
-        </div>
-      </transition>
-      <transition name="fade">
-        <div class="body" @click="changeNextStep" v-if="nextStep === 1">
-          <div class="loading">
-            <div class="loading1">
-              <div class="loading2"></div>
-            </div>
-          </div>
-        </div>
-      </transition>
-      <img
-        :src="text2img"
-        :style="step >= 4 ? 'opacity: 1' : ''"
-        class="tImg"
-      />
-      <transition name="fade">
-        <div class="btns" v-if="step === 5">
-          <div
-            class="btn"
-            @click="() => showDown(1)"
-            style="margin-left: 0"
-            :stype="'border-color:' + text.color + ';color:' + text.color"
-          >
-            下载壁纸
-          </div>
-          <div
-            class="btn"
-            @click="() => showDown(2)"
-            :stype="'border-color:' + text.color + ';color:' + text.color"
-          >
-            生成海报
+              class="firstImg"
+            />
+            <transition name="fade">
+              <div
+                class="sImg img"
+                v-if="step === 1"
+                :style="'width:' + width + 'px;'"
+              >
+                <template v-for="(item, i) in text.texts" :key="i">
+                  <p
+                    v-text="item"
+                    :style="
+                      stepBody >= i
+                        ? 'opacity: 1;color: ' + text.color
+                        : 'color: ' + text.color
+                    "
+                  ></p>
+                  <br />
+                </template>
+              </div>
+            </transition>
+            <transition name="fade">
+              <div class="body" @click="changeNextStep" v-if="nextStep === 1">
+                <div class="loading">
+                  <div class="loading1">
+                    <div class="loading2"></div>
+                  </div>
+                </div>
+              </div>
+            </transition>
+            <img
+              :src="text2img"
+              :style="step >= 4 ? 'opacity: 1' : ''"
+              class="tImg"
+            />
+            <transition name="fade">
+              <div class="btns" v-if="step === 5">
+                <div
+                  class="btn"
+                  @click="() => showDown(1)"
+                  style="margin-left: 0"
+                  :stype="'border-color:' + text.color + ';color:' + text.color"
+                >
+                  下载壁纸
+                </div>
+                <div
+                  class="btn"
+                  @click="() => showDown(2)"
+                  :stype="'border-color:' + text.color + ';color:' + text.color"
+                >
+                  生成海报
+                </div>
+              </div>
+            </transition>
           </div>
+          <transition name="fade">
+            <div class="model" v-if="showImg !== undefined">
+              <div class="gs">
+                <img :src="bgimg" style="width: 100%; height: 100%" alt="" />
+              </div>
+              <van-icon
+                color="#fff"
+                size="26"
+                name="close"
+                class="close"
+                @click="close"
+              />
+              <div class="modelImg">
+                <p>请长按保存图片</p>
+                <img :src="showImg" style="width: 100%; height: 100%" />
+              </div>
+            </div>
+          </transition>
         </div>
-      </transition>
-    </div>
+      </van-swipe-item>
+      <van-swipe-item style="overflow: auto">
+        <seven v-if="showSheet" @showVideo="showVideo" />
+      </van-swipe-item>
+    </van-swipe>
     <transition name="fade">
-      <div class="model" v-if="showImg !== undefined">
-        <div class="gs">
-          <img :src="bgimg" style="width: 100%; height: 100%" alt="" />
-        </div>
+      <div v-if="showOverlay" class="model">
         <van-icon
           color="#fff"
           size="26"
           name="close"
           class="close"
-          @click="close"
+          @click="closeSeven"
         />
-        <div class="modelImg">
-          <p>请长按保存图片</p>
-          <img :src="showImg" style="width: 100%; height: 100%" />
-        </div>
+        <video class="sevenvideo" src=""></video>
       </div>
     </transition>
   </div>
 </template>
 <script setup>
-import { ref, reactive, defineEmits } from "vue";
+import { ref, reactive, nextTick } from "vue";
 import data from "../data/data.json";
+
+import seven from "./seven.vue";
+
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -103,8 +133,8 @@ import data from "../data/data.json";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const emits = defineEmits(["changePage"]);
 const showImg = ref(undefined);
+const swipe = ref(null);
 let width = window.$originData.orginParames.availWidth * 0.7;
 const type = Math.floor(Math.random() * 12 + 1);
 let ori = data[type - 1] || { texts: [] };
@@ -128,7 +158,7 @@ const url = {
 const bgimg = ref(url.bg);
 const kuangimg = ref(url.kuang);
 const text2img = ref(url.text2);
-const step = ref(0);
+const step = ref(4); // 动画步骤
 const stepBody = ref(0);
 let t = setTimeout(() => {
   clearTimeout(t);
@@ -143,10 +173,11 @@ let t = setTimeout(() => {
   }, 2000);
 }, 200);
 
+const showSheet = ref(false);
 function nextPage() {
-    console.log(step.value, step.value !== 5)
-    if (step.value !== 5) return
-    emits("changePage", "seven");
+  if (step.value !== 5) return;
+  showSheet.value = true;
+  swipe.value.next();
 }
 
 function changeNextStep() {
@@ -201,11 +232,24 @@ function showDown(type) {
 function close() {
   showImg.value = undefined;
 }
+
+const showOverlay = ref(false);
+function showVideo(url) {
+  showOverlay.value = true;
+  nextTick(() => {
+    let ele = document.querySelector(".sevenvideo");
+    ele.src = url;
+    ele.play();
+  });
+}
+function closeSeven(){
+  showOverlay.value = false;
+}
 </script>
 <style lang="scss" scoped>
 .sex {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   background-size: 100% 100%;
   position: relative;
   .body {
@@ -290,7 +334,7 @@ function close() {
   top: inherit;
   width: 2em;
   z-index: 1;
-  position: fixed;
+  position: absolute;
   animation-name: an;
   animation-duration: 1s;
   animation-timing-function: linear;
@@ -335,5 +379,12 @@ function close() {
     top: 1em;
     right: 1em;
   }
+
+  .sevenvideo {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    position: absolute;
+  }
 }
 </style>