|
@@ -1,239 +1,238 @@
|
|
|
<template>
|
|
|
- <div class="eight">
|
|
|
- <van-row class="luckDraw">
|
|
|
- <van-col
|
|
|
- span="8"
|
|
|
- v-for="i in 12"
|
|
|
- :key="i + 'll'"
|
|
|
- :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="'https://cxzx.smcic.net/topic/tool/img/silugift/' + i + '.png'"
|
|
|
- >
|
|
|
- <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="
|
|
|
+ <div class="eight">
|
|
|
+ <van-row class="luckDraw">
|
|
|
+ <van-col span="8" v-for="i in 12" :key="i + 'll'" :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="'https://cxzx.smcic.net/topic/tool/img/silugift/' + i + '.png'">
|
|
|
+ <template v-slot:loading>
|
|
|
+ <van-loading type="spinner" size="20" />
|
|
|
+ </template>
|
|
|
+ </van-image>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-notice-bar color="#000000" background="#ffffff" wrapable :scrollable="false"
|
|
|
+ text="点击下方小视频,给手气充能,增加一次抽奖机会!" />
|
|
|
+ <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>
|
|
|
+ " 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 { showDialog } 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 address = ref(localStorage.getItem("silkRoadAddress") || "");
|
|
|
-// const gift = require("@/assets/img/")
|
|
|
-const next = false;
|
|
|
-const emits = defineEmits(["showVideo","showTitleFunc"]);
|
|
|
-
|
|
|
-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,
|
|
|
-});
|
|
|
-
|
|
|
-function draw() {
|
|
|
- if (!localStorage.getItem("silkRoadPhone")) return toLogin();
|
|
|
- drawDialog();
|
|
|
-}
|
|
|
-
|
|
|
-function drawDialog() {
|
|
|
- let isdraw = Math.random() >= 0.95; // 非中将概率,后期接入接口后直接由接口提供是否中将
|
|
|
- showDialog({
|
|
|
- title: "抽奖提示",
|
|
|
- message: () => {
|
|
|
- if (isdraw) return drawIsTrue();
|
|
|
- if (!isdraw) return drawIsFalse();
|
|
|
- },
|
|
|
- }).then(() => {
|
|
|
- // on close
|
|
|
- address.value && localStorage.setItem("silkRoadAddress", address.value);
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-function drawIsTrue() {
|
|
|
- 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 = "长武苹果";
|
|
|
- }
|
|
|
- // {address.value ? addressField : ''}
|
|
|
- // const addressField = (<van-field required v-model={address} label="地址" type="text" placeholder="请输入地址" ></van-field>);
|
|
|
- let ele = (
|
|
|
- <div>
|
|
|
- <img class="dialogImg" src={gift.url} />
|
|
|
- <br />
|
|
|
- <p>
|
|
|
- 恭喜您获得
|
|
|
- <span style="color: red">{gift.name}</span>!
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- );
|
|
|
- return ele;
|
|
|
-}
|
|
|
-
|
|
|
-function toLogin() {
|
|
|
- emits("showTitleFunc");
|
|
|
-}
|
|
|
-
|
|
|
-function drawIsFalse() {
|
|
|
- let ele = (
|
|
|
- <div>
|
|
|
- 很遗憾哟,新年礼物擦肩而过啦!点击下方刷个小视频吧,给手气充能,获取额外抽奖机会!
|
|
|
- </div>
|
|
|
- );
|
|
|
- return ele;
|
|
|
-}
|
|
|
-
|
|
|
-function playVideo(url) {
|
|
|
- emits("showVideo", url);
|
|
|
-}
|
|
|
+ import {
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ defineEmits,
|
|
|
+ defineExpose
|
|
|
+ } from "vue";
|
|
|
+ import {
|
|
|
+ showDialog
|
|
|
+ } from "vant";
|
|
|
+ import {
|
|
|
+ getDrawOri,
|
|
|
+ } from "@/api/SilkRoadSpringGala.js";
|
|
|
+ // 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 address = ref(localStorage.getItem("silkRoadAddress") || "");
|
|
|
+ // const gift = require("@/assets/img/")
|
|
|
+ const next = false;
|
|
|
+ const emits = defineEmits(["showVideo", "showTitleFunc"]);
|
|
|
+
|
|
|
+ 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,
|
|
|
+ });
|
|
|
+
|
|
|
+ function draw() {
|
|
|
+ const phone = localStorage.getItem("silkRoadPhone");
|
|
|
+ if (!phone) return emits("showTitleFunc");
|
|
|
+ getDrawOri({
|
|
|
+ phone
|
|
|
+ }).then(r => {
|
|
|
+ console.log("---->", r);
|
|
|
+ let isdraw = r.prizeId !== 1; // 非中将概率,后期接入接口后直接由接口提供是否中将
|
|
|
+ showDialog({
|
|
|
+ title: r.name,
|
|
|
+ message: () => {
|
|
|
+ if (isdraw) return drawIsTrue(r);
|
|
|
+ if (!isdraw) return drawIsFalse();
|
|
|
+ },
|
|
|
+ }).then(() => {
|
|
|
+ // on close
|
|
|
+ address.value && localStorage.setItem("silkRoadAddress", address.value);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function drawIsTrue(data) {
|
|
|
+ const gift = {
|
|
|
+ url: data.url,
|
|
|
+ name: data.name,
|
|
|
+ };
|
|
|
+ let ele = ( < div >
|
|
|
+ <
|
|
|
+ img class = "dialogImg"
|
|
|
+ src = {
|
|
|
+ gift.url
|
|
|
+ }
|
|
|
+ /> <br / >
|
|
|
+ <
|
|
|
+ p > 恭喜您获得 < span style = "color: red" > {
|
|
|
+ gift.name
|
|
|
+ } < /span>!</p >
|
|
|
+ <
|
|
|
+ /div>);
|
|
|
+ return ele;
|
|
|
+ }
|
|
|
+
|
|
|
+ function drawIsFalse() {
|
|
|
+ let ele = ( <
|
|
|
+ div >
|
|
|
+ 很遗憾哟, 新年礼物擦肩而过啦! 点击下方刷个小视频吧, 给手气充能, 获取额外抽奖机会! <
|
|
|
+ /div>
|
|
|
+ );
|
|
|
+ return ele;
|
|
|
+ }
|
|
|
+
|
|
|
+ function playVideo(url) {
|
|
|
+ emits("showVideo", url);
|
|
|
+ }
|
|
|
+
|
|
|
+ defineExpose({
|
|
|
+ draw
|
|
|
+ })
|
|
|
</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);
|
|
|
- }
|
|
|
-}
|
|
|
+ .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;
|
|
|
-}
|
|
|
+ .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>
|