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

<template>
  <div>
    <van-swipe
      ref="swipe"
      :touchable="false"
      :show-indicators="false"
      vertical
      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="sex" :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>
          <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>
        </div>
      </van-swipe-item>
      <van-swipe-item style="overflow: auto">
        <seven v-if="showSheet" @showVideo="showVideo" />
      </van-swipe-item>
    </van-swipe>
    <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>
  </div>
</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
import data from "../data/data.json";

import seven from "./seven.vue";

// 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;
let nextStep = ref(0);
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(1); // 动画步骤
const stepBody = ref(0);
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(false);
function nextPage() {
  if (step.value !== 5) return;
  showSheet.value = true;
  swipe.value.next();
}

function changeNextStep() {
  nextStep.value += 1;
}

function autoStep() {
  t = setInterval(() => {
    nextStep.value === 2 && (step.value += 1);
    if (step.value === 5) clearInterval(t);
  }, 3000);
}

function showDown(type) {
  switch (type) {
    case 1:
      showImg.value = url.bg;
      break;
    case 2:
      showImg.value = url.bg2;
      break;
  }
  //   const image = new Image();
  //   image.setAttribute("crossOrigin", "anonymous"); //设置允许跨域
  //   image.src = url.bg;
  //   image.onload = function () {
  //     //等待图片加载完成创建canvas
  //     let canvas = document.createElement("canvas");
  //     //将图片绘制到canvas画布上
  //     canvas.width = image.width;
  //     canvas.height = image.height;
  //     let ctx = canvas.getContext("2d");
  //     ctx.drawImage(image, 0, 0, image.width, image.height);
  //     //获取图片文件格式  jpg/jpeg/png
  //     let ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
  //     //导出画布快照  此时已越过跨域限制成功取到图片数据
  //     let dataURL = canvas.toDataURL("image/" + ext);
  //     //创建a标签
  //     const a = document.createElement("a");
  //     // 赋值a标签download属性值，标明该a标签提供下载功能，同时该属性指定了下载时的文件名称
  //     a.download = "test";
  //     //赋值a标签下载地址，即canvas导出的画布快照 base64格式的图片地址
  //     a.href = dataURL;
  //     //添加a标签到dom中
  //     document.body.appendChild(a);
  //     //触发a标签点击事件 触发下载
  //     a.click();
  //     //下载完成 删除多余的a标签  保持页面原有元素不动
  //     document.removeChild(a);
  //   };
}
function close() {
  showImg.value = undefined;
}

const showOverlay = ref(false);
function showVideo(url) {
  showOverlay.value = true;
  nextTick(() => {
    let ele = document.querySelector(".sevenvideo");
    ele.src = url;
    ele.play();
  });
}
function closeSeven(){
  showOverlay.value = false;
}
</script>
<style lang="scss" scoped>
.sex {
  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: 10px;
  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: #00000060;
  .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>