提交

src/view/SilkRoadSpringFestivalGala/pages/eight.vue

@@ -0,0 +1,282 @@
+<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
+            @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 { reactive, ref,defineEmits } from "vue";
+  import { Dialog } from "vant";
+  // 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 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 isName = !localStorage.getItem("silkRoadName");
+    const isPhone = !localStorage.getItem("silkRoadPhone");
+    const isAddress = !localStorage.getItem("silkRoadAddress");
+    const gift = {
+        url: "",
+        name: ""
+    }
+    if(Math.random() > 0.5 ){
+        gift.url = "https://cxzx.smcic.net/topic/tool/img/gift1.png";
+        gift.name = "果娃果妹玩偶"
+    }else {
+        gift.url = "https://cxzx.smcic.net/topic/tool/img/gift.jpg";
+        gift.name = "长武苹果"
+    }
+
+
+    let ele = (
+      <div>
+        <img
+          class="dialogImg"
+          src={gift.url}
+        />
+        <br />
+        <p>
+          恭喜您获得
+          <span style="color: red">{gift.name}</span>！
+        </p>
+        <br />
+        {isName ? li[0]: ""}
+        {isPhone ? li[1] : ""}
+        {isAddress ? li[2] : ""}
+      </div>
+    );
+    return ele;
+  }
+  
+  function drawIsFalse() {
+    let ele = <div>很遗憾哟，新年礼物擦肩而过啦！点击下方刷个小视频吧，给手气充能，获取额外抽奖机会！</div>;
+    return ele;
+  }
+  
+  function playVideo(url) {
+    emits("showVideo", url);
+  }
+  </script>
+  <style lang="scss" scoped>
+  .eight {
+    width: 100%;
+    height: 100%;
+    padding: 0.5em 0;
+    background-color: #fff;
+    position: relative;
+    .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);
+      }
+    }
+  }
+  
+  .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;
+    }
+  
+    .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/seven.vue

@@ -4,52 +4,9 @@
       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 { reactive, ref,defineEmits } from "vue";
-import { Dialog } from "vant";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -57,213 +14,14 @@ import { Dialog } from "vant";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-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 playVideo(url) {
-  emits("showVideo", url);
-}
 </script>
 <style lang="scss" scoped>
 .seven {
-  width: 100%;
-  padding: 0.5em 0;
-  background-color: #fff;
-  position: relative;
-  .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);
-    }
-  }
-}
-
-.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);
-  }
+    position: relative;
 }
 </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

@@ -5,6 +5,7 @@
       :touchable="false"
       :show-indicators="false"
       vertical
+      @change="swiperPageFunc"
       indicator-color="white"
     >
       <van-swipe-item>
@@ -85,7 +86,25 @@
         </div>
       </van-swipe-item>
       <van-swipe-item style="overflow: auto">
-        <seven v-if="showSheet" @showVideo="showVideo" />
+        <div
+          v-if="showSheet == 1"
+          style="
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            position: relative;
+          "
+        >
+          <img
+            @click="nextPage"
+            src="../../../assets/img/next.png"
+            class="next"
+          />
+          <seven />
+        </div>
+      </van-swipe-item>
+      <van-swipe-item style="overflow: auto">
+        <eight v-if="(showSheet == 2)" @showVideo="showVideo" />
       </van-swipe-item>
     </van-swipe>
 
@@ -126,6 +145,7 @@ import { ref, reactive, nextTick } from "vue";
 import data from "../data/data.json";
 
 import seven from "./seven.vue";
+import eight from "./eight.vue";
 
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
@@ -174,11 +194,16 @@ let t = setTimeout(() => {
   }, 2000);
 }, 200);
 
-const showSheet = ref(false);
+const showSheet = ref(0);
 function nextPage() {
   if (step.value !== 5) return;
-  showSheet.value = true;
+
   swipe.value.next();
+  console.log(swipe.value);
+}
+
+function swiperPageFunc(index) {
+  showSheet.value = index;
 }
 
 function changeNextStep() {
@@ -329,7 +354,7 @@ function closeSeven() {
 }
 
 .next {
-  bottom: 10px;
+  bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
   top: inherit;