|
@@ -0,0 +1,463 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <van-swipe ref="swipe" :touchable="false" :show-indicators="false" vertical @change="swiperPageFunc"
|
|
|
+ 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="six" :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" :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>
|
|
|
+ </div>
|
|
|
+ </van-swipe-item>
|
|
|
+ <!-- <van-swipe-item style="overflow: auto">
|
|
|
+ <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 == 1" @showTitleFunc="showTitleFunc" @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>
|
|
|
+ <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>
|
|
|
+ <transition name="fade">
|
|
|
+ <div v-if="showOverlay" class="model">
|
|
|
+ <van-icon color="#fff" size="26" name="close" class="close" @click="closeSeven" />
|
|
|
+ <video class="sevenvideo" src=""></video>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <van-dialog v-model:show="showTitle" title="登录" show-cancel-button @confirm="confirm" :before-close="closeTitle">
|
|
|
+ <van-field required v-model="from.name" label="昵称" type="text" placeholder="请输入昵称" />
|
|
|
+ <van-field required v-model="from.phone" label="联系方式" type="tel" placeholder="请输入手机号">
|
|
|
+ <template #button>
|
|
|
+ <van-button v-if="isCode === 0" @click="getCode" size="small" type="primary">获取验证码</van-button>
|
|
|
+ <van-count-down v-if="isCode !== 0" @finish="isCode = 0" :time="isCode" format="ss 秒" />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field required v-model="from.code" label="验证码" type="tel" placeholder="请输入验证码" />
|
|
|
+ </van-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ nextTick
|
|
|
+ } from "vue";
|
|
|
+ import data from "../data/data.json";
|
|
|
+ import {
|
|
|
+ showToast
|
|
|
+ } from "vant";
|
|
|
+ // import seven from "./seven.vue";
|
|
|
+ import eight from "./eight.vue";
|
|
|
+
|
|
|
+ const from = reactive({
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ code: ""
|
|
|
+ })
|
|
|
+
|
|
|
+ // import { onMounted, reactive } from "vue";
|
|
|
+ // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
|
|
|
+ /**
|
|
|
+ * window.$originData.orginParames.title 页面标题
|
|
|
+ * window.$originData.orginParames.parameters 固定参数值
|
|
|
+ * window.$originData.urlParames url参数
|
|
|
+ */
|
|
|
+ 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: []
|
|
|
+ };
|
|
|
+ let max = 0;
|
|
|
+ const showTitle = ref(false);
|
|
|
+ for (let i = 0; i < ori.texts.length; i++) {
|
|
|
+ max < ori.texts[i].length && (max = ori.texts[i].length);
|
|
|
+ }
|
|
|
+ width = 14 * max;
|
|
|
+ const text = reactive({
|
|
|
+ ...data[type - 1],
|
|
|
+ width,
|
|
|
+ });
|
|
|
+ const url = {
|
|
|
+ bg: require("@/assets/img/12/" + type + "-1.png"),
|
|
|
+ bg2: require("@/assets/img/12/" + type + "-2.png"),
|
|
|
+ kuang: require("@/assets/img/12/" + type + ".kuang.png"),
|
|
|
+ text2: require("@/assets/img/12/" + type + ".text2.png"),
|
|
|
+ };
|
|
|
+
|
|
|
+ const bgimg = ref(url.bg);
|
|
|
+ const kuangimg = ref(url.kuang);
|
|
|
+ const text2img = ref(url.text2);
|
|
|
+ const step = ref(5); // 动画步骤
|
|
|
+ const stepBody = ref(text.texts.length); // 首页文字显示动画
|
|
|
+ const nextStep = ref(2);
|
|
|
+ // let t = setTimeout(() => {
|
|
|
+ // clearTimeout(t);
|
|
|
+ // step.value += 1;
|
|
|
+ // t = setInterval(() => {
|
|
|
+ // stepBody.value += 1;
|
|
|
+ // if (stepBody.value === text.texts.length) {
|
|
|
+ // nextStep.value = 1;
|
|
|
+ // clearInterval(t);
|
|
|
+ // autoStep();
|
|
|
+ // }
|
|
|
+ // }, 2000);
|
|
|
+ // }, 200);
|
|
|
+
|
|
|
+ const showSheet = ref(0);
|
|
|
+
|
|
|
+ function nextPage() {
|
|
|
+ if (step.value !== 5) return;
|
|
|
+ swipe.value.next();
|
|
|
+ }
|
|
|
+
|
|
|
+ function swiperPageFunc(index) {
|
|
|
+ showSheet.value = index;
|
|
|
+ }
|
|
|
+
|
|
|
+ function changeNextStep() {
|
|
|
+ nextStep.value += 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ function showTitleFunc() {
|
|
|
+ showTitle.value = true;
|
|
|
+ from.name = "";
|
|
|
+ from.phone = "";
|
|
|
+ from.code = "";
|
|
|
+ }
|
|
|
+
|
|
|
+ // function autoStep() {
|
|
|
+ // t = setInterval(() => {
|
|
|
+ // nextStep.value === 2 && (step.value += 1);
|
|
|
+ // if (step.value === 5) clearInterval(t);
|
|
|
+ // }, 3000);
|
|
|
+ // }
|
|
|
+
|
|
|
+ const isCode = ref(0);
|
|
|
+
|
|
|
+ function getCode() {
|
|
|
+ // 获取验证码
|
|
|
+ if (!/1[0-9]{10}/.test(from.phone)) {
|
|
|
+ showToast("请输入正确的手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log("获取验证码-", from.phone);
|
|
|
+ isCode.value = 60000;
|
|
|
+ }
|
|
|
+
|
|
|
+ function confirm() {
|
|
|
+ console.log('保存登录信息:', from);
|
|
|
+ localStorage.setItem("silkRoadPhone", from.phone);
|
|
|
+ localStorage.setItem("silkRoadCode", from.code);
|
|
|
+ localStorage.setItem("silkRoadAddress", from.address);
|
|
|
+ localStorage.setItem("silkRoadName", from.name);
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeTitle(type){
|
|
|
+ if (type === 'confirm' && !from.code) return false;
|
|
|
+ isCode.value = 0;
|
|
|
+ return true
|
|
|
+ }
|
|
|
+
|
|
|
+ function showDown(type) {
|
|
|
+ switch (type) {
|
|
|
+ case 1:
|
|
|
+ showImg.value = url.bg;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ showImg.value = url.bg2;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function close() {
|
|
|
+ showImg.value = undefined;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 视频播放
|
|
|
+ const showOverlay = ref(false);
|
|
|
+ let time = -1;
|
|
|
+ let autoTime = 0;
|
|
|
+ let current = 0;
|
|
|
+
|
|
|
+ function showVideo(url) {
|
|
|
+ showOverlay.value = true;
|
|
|
+ nextTick(() => {
|
|
|
+ let ele = document.querySelector(".sevenvideo");
|
|
|
+ ele.src = url;
|
|
|
+ ele.currentTime = 0;
|
|
|
+ current = 0;
|
|
|
+ time = -1;
|
|
|
+ // 已经开始
|
|
|
+ ele.addEventListener("playing", function() {
|
|
|
+ time = Date.now();
|
|
|
+ current = ele.duration * 1000;
|
|
|
+ });
|
|
|
+ // 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
|
|
|
+ ele.addEventListener("canplay", endVideo, false);
|
|
|
+ //播放结束
|
|
|
+ ele.addEventListener(
|
|
|
+ "ended",
|
|
|
+ function() {
|
|
|
+ console.log("ended");
|
|
|
+ endVideo();
|
|
|
+ closeSeven();
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+ //暂停
|
|
|
+ ele.addEventListener("pause", endVideo, false);
|
|
|
+ ele.play();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeSeven() {
|
|
|
+ let ele = document.querySelector(".sevenvideo");
|
|
|
+ ele.pause();
|
|
|
+ showOverlay.value = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ function endVideo() {
|
|
|
+ if (time == -1) return;
|
|
|
+ autoTime = Date.now() - time;
|
|
|
+ console.log(autoTime);
|
|
|
+ if (autoTime / current <= 0.95 || !localStorage.getItem("silkRoadPhone"))
|
|
|
+ return;
|
|
|
+ showToast("已增加一次抽奖机会!");
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .six {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .body {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10vh;
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ img,
|
|
|
+ .img {
|
|
|
+ width: 50%;
|
|
|
+ transition-property: all;
|
|
|
+ transition-duration: 2s;
|
|
|
+ opacity: 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .firstImg {
|
|
|
+ transition-delay: 1s;
|
|
|
+ -moz-transition-delay: 1s;
|
|
|
+ /* Firefox 4 */
|
|
|
+ -webkit-transition-delay: 1s;
|
|
|
+ /* Safari 和 Chrome */
|
|
|
+ -o-transition-delay: 1s;
|
|
|
+ /* Opera */
|
|
|
+ }
|
|
|
+
|
|
|
+ .sImg {
|
|
|
+ width: 70%;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: OPPOSans;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 3em;
|
|
|
+ opacity: 1;
|
|
|
+
|
|
|
+ p {
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
+ transition-property: all;
|
|
|
+ transition-duration: 2s;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tImg {
|
|
|
+ width: 80%;
|
|
|
+ transition-delay: 1s;
|
|
|
+ -moz-transition-delay: 1s;
|
|
|
+ /* Firefox 4 */
|
|
|
+ -webkit-transition-delay: 1s;
|
|
|
+ /* Safari 和 Chrome */
|
|
|
+ -o-transition-delay: 1s;
|
|
|
+ /* Opera */
|
|
|
+ }
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 10vh;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 2em;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px 15px;
|
|
|
+ margin-left: 2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-enter-from,
|
|
|
+ .fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-enter-active,
|
|
|
+ .fade-leave-active {
|
|
|
+ transition: opacity 1s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-enter-to,
|
|
|
+ .fade-leave-from {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .next {
|
|
|
+ bottom: 40px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: inherit;
|
|
|
+ width: 2em;
|
|
|
+ z-index: 1;
|
|
|
+ position: absolute;
|
|
|
+ animation-name: an;
|
|
|
+ animation-duration: 1s;
|
|
|
+ animation-timing-function: linear;
|
|
|
+ animation-iteration-count: infinite;
|
|
|
+ animation-direction: alternate;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes an {
|
|
|
+ from {
|
|
|
+ bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .model {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 10;
|
|
|
+ background-color: #00000080;
|
|
|
+
|
|
|
+ .gs {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ filter: blur(10px);
|
|
|
+ -webkit-filter: blur(10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .modelImg {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 80%;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ top: 1em;
|
|
|
+ right: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sevenvideo {
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|