|
|
@@ -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>
|
|
|
+
|
liyongli