activity/src/view/SilkRoadSpringFestivalGala/pages/seven.vue

<template>
  <div class="seven">
    <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 { 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 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%;
  height: 100%;
  padding: 0.5em 0;
  background-color: #fff;
  overflow: auto;
  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">
.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>