<template>
  <div class="report">
    <div v-if="indexPage" class="index">
      <div class="box">
        <div class="logo">
          <img src="./imgs/logo.png" alt="" />
        </div>
        <div class="welcom">
          <img src="./imgs/title.png" alt="" />
        </div>
        <div class="words">
          <img src="./imgs/words.png" alt="" />
        </div>
      </div>
      <div class="loginBtn">
        <div class="btn" @click="open">点击开启</div>
        <!-- <div class="btn" @click="clear">清除</div> -->
      </div>
      <div class="concel">
        <van-checkbox v-model="checked" checked-color="#ff5e38">
          我已阅读并同意<span style="color: #fff" @click="showConceal = true"
            >《隐私声明》</span
          >
        </van-checkbox>
      </div>
    </div>

    <van-swipe
      v-else
      class="my-swipe"
      vertical
      :show-indicators="false"
      :loop="false"
      :autoplay="0"
      lazy-render
      :duration="1000"
      @change="change"
    >
      <van-swipe-item
        v-if="datas.userType === 3 || datas.userType === 4 || isLt === '0'"
      >
        <div class="welocm">
          <div class="yunBox">
            <div class="text" v-if="datas.userType === 3">
              <div class="top">
                <p>你好,畅视的新朋友!</p>
                <p>很开心在新年与你相遇,</p>
                <p>我们不仅拥有各大视频APP</p>
                <p><span>会员权益</span></p>
                <p>也可以为你的<span>流量</span>保驾护航,</p>
                <p>让你尽兴看视频,省钱又省心!</p>
              </div>
              <div class="foot" style="margin-top: 50px">
                <p style="color: #ff5e38; font-size: 16px; opacity: 0.7">
                  未来的日子,让我们相伴同行吧!
                </p>
              </div>
            </div>
            <div class="text" v-if="datas.userType === 4">
              <div class="top">
                <p>素未谋面的朋友,你好啊!</p>
                <p>
                  我是<span style="font-size: 20px; opacity: 0.7"
                    >联通畅视菌</span
                  >,
                </p>
                <p>新年里我想成为你生活中的一份子</p>
                <p>
                  不论你喜欢<span style="font-size: 20px; opacity: 0.7"
                    >腾讯视频</span
                  >、<span style="font-size: 20px; opacity: 0.7">爱奇艺</span>、
                </p>
                <p>
                  <span style="font-size: 20px; opacity: 0.7">优酷</span
                  >，还是<span style="font-size: 20px; opacity: 0.7"
                    >芒果TV</span
                  >、<span style="font-size: 20px; opacity: 0.7">B站</span
                  >、<span style="font-size: 20px; opacity: 0.7">快手</span>
                </p>
                <p>我都双手为你奉上</p>
                <p><span style="font-size: 35px">视频VIP+专属流量</span></p>
              </div>
              <div class="foot" style="margin-top: 50px">
                <p style="color: #ff5e38; font-size: 16px; opacity: 0.7">
                  有了我，你可以畅享视频盛宴~
                </p>
              </div>
            </div>
            <div class="text" v-if="isLt === '0'">
              <div class="top">
                <p>
                  朋友，我是仰慕你已久的<span
                    style="font-size: 20px; opacity: 0.7"
                    >畅视菌</span
                  >,
                </p>
                <p>都说优秀的人是相互吸引的,</p>
                <p>听说你还没被我吸引？</p>
                <p>我为你准备了</p>
                <p><span style="font-size: 35px">“视频VIP随心选”</span>,</p>
                <p>
                  <span style="font-size: 20px; opacity: 0.7">9</span
                  >大视频<span style="font-size: 20px; opacity: 0.7">VIP</span
                  >随心<span style="font-size: 20px; opacity: 0.7">切换</span>
                </p>
                <p>
                  还有<span style="font-size: 20px; opacity: 0.7">月会员</span
                  >、<span style="font-size: 20px; opacity: 0.7">周会员</span
                  >供你选择>
                </p>
              </div>
              <div class="foot" style="margin-top: 50px">
                <p style="color: #ff5e38; font-size: 16px; opacity: 0.7">
                  翻页有惊喜哦~
                </p>
              </div>
            </div>
          </div>
          <div class="next">
            <div class="nextImg">
              <img src="./imgs/down.png" alt="" />
            </div>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item
        v-if="
          (datas.userType === 1 || datas.userType === 2) &&
          datas.orderMonth !== null
        "
      >
        <div class="item1">
          <div class="yunBox">
            <div class="text" v-if="datas.orderMonth <= 1">
              <p>畅视的朋友,你好!</p>
              <p>转眼间</p>
              <p>我们已经相识快<span>1</span>年啦!</p>
            </div>
            <div
              class="text"
              v-else-if="datas.orderMonth > 1 && datas.orderMonth <= 2"
            >
              <p>畅视的老朋友,你好!</p>
              <p>转眼间</p>
              <p>我们已经相伴近<span>2</span>年啦!</p>
            </div>
            <div class="text" v-else-if="2 < datas.orderMonth">
              <p>畅视的老朋友,你好!</p>
              <p>不知不觉</p>
              <p>已经与你相伴超过<span>2</span>年啦!</p>
            </div>
            <div class="blessing" v-if="datas.orderMonth < 2">
              感恩与你相伴的每一天
            </div>
            <div class="blessing" v-else>感谢你的一路相伴</div>
          </div>
          <div class="next">
            <div class="nextImg">
              <img src="./imgs/down.png" alt="" />
            </div>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item v-if="datas.userType === 1 && datas.orderTypes !== null">
        <div class="item2">
          <div class="yunBox">
            <div class="text" v-if="datas.orderTypes === 1">
              <p>专一的你,</p>
              <p>
                一直对<span>{{ datas.cpName1 }}</span
                >情有独钟,
              </p>
              <p>想必这里记录了你最多的</p>
              <p>欢声笑语...</p>
            </div>
            <div class="text" v-else-if="datas.orderTypes === 2">
              <p>在我们丰富的产品体系中,</p>
              <p>
                <span>{{ datas.cpName1 }}</span
                >和<span>{{ datas.cpName2 }}</span>
              </p>
              <p>被眼光独到的你选中</p>
              <p style="color: #ff5e38; font-size: 15px; opacity: 0.7">
                生活中想必也是个精打细算的小能手吧?
              </p>
            </div>
            <div class="text" v-else-if="datas.orderTypes > 2">
              <p>您体验过我们<span>3</span>款以上的产品,</p>
              <p>封你为我们的产品体验官~</p>
              <p>爱好多元的你,</p>
              <p style="color: #ff5e38; font-size: 15px; opacity: 0.7">
                一定也拥有一个有趣的灵魂!
              </p>
            </div>
          </div>
          <div class="shipinBox"></div>
          <div class="next">
            <div class="nextImg">
              <img src="./imgs/down.png" alt="" />
            </div>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item
        v-if="
          (datas.userType === 1 ||
            datas.userType === 2 ||
            datas.userType === 5) &&
          datas.videoTotalFlow !== null
        "
      >
        <div class="item3">
          <div class="yunBox">
            <div class="text" v-if="datas.videoTotalFlow < 10">
              <div class="top">
                <p>你一定是个<span style="font-size: 33px">工作狂人</span></p>
                <p>今年看视频的流量并不多,</p>
              </div>
              <div class="foot" style="margin-top: 60px; font-size: 20px">
                <p style="margin: 0">记得给自己放个假</p>
                <p style="margin-top: 10px">
                  新的一年要注意<span style="font-size: 20px">劳逸结合</span>哦~
                </p>
              </div>
            </div>
            <div
              class="text"
              v-else-if="
                datas.videoTotalFlow >= 10 && datas.videoTotalFlow < 60
              "
            >
              <div class="top">
                <p>你是个<span style="font-size: 33px">视频小达人</span></p>
                <p>对视频内容精挑细选的你,</p>
                <p>流量消耗适度合理,</p>
              </div>
              <div class="foot" style="margin-top: 40px; font-size: 20px">
                <p style="magin: 0">莫非能保持工作娱乐平衡的</p>
                <p style="margin-top: 10px">
                  <span style="font-size: 18px">大生活家</span>就是你?
                </p>
              </div>
            </div>
            <div class="text" v-else-if="datas.videoTotalFlow > 60">
              <div class="top">
                <p>
                  你是个名副其实的<span style="opacity: 0.7">视频发烧友</span
                  >了,
                </p>
                <p>一年用在观看视频的流量</p>
                <p>居然超过了<span>60G</span></p>
              </div>
              <div class="foot" style="margin-top: 40px; font-size: 20px">
                <p style="margin-top: 10px">
                  让畅视继续为你的流量<span style="font-size: 18px"
                    >保驾护航</span
                  >吧
                </p>
              </div>
            </div>
          </div>
          <div class="shipinBox"></div>
          <div class="next">
            <div class="nextImg">
              <img src="./imgs/down.png" alt="" />
            </div>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item
        v-if="
          (datas.userType === 1 ||
            datas.userType === 2 ||
            datas.userType === 5) &&
          datas.videoAppTop1 !== null
        "
      >
        <div class="item4">
          <div class="yunBox">
            <div class="text">
              <div class="top">
                <p>众多App中,</p>
                <p>
                  你最爱<span style="margin: 0 5px">{{
                    datas.videoAppTop1
                  }}</span>
                </p>
              </div>
              <div class="foot">
                <p>想必TA陪你度过了很多时光,</p>
                <p
                  style="
                    font-size: 15px;
                    color: #ff5e38;
                    margin-top: 30px;
                    opacity: 0.7;
                  "
                >
                  还能想起最令你难忘的内容吗?
                </p>
              </div>
            </div>
          </div>
          <div class="shipinBox"></div>
          <div class="next">
            <div class="nextImg">
              <img src="./imgs/down.png" alt="" />
            </div>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item
        v-if="datas.userType === 1 && datas.freeFlowMonth !== null"
      >
        <div class="item5">
          <div class="yunBox">
            <div class="text">
              <div class="top">
                <p>
                  2021年<span>{{ datas.freeFlowMonth }}</span
                  >月
                </p>
                <p>
                  畅视菌在<span>{{ datas.freeFlowName }}</span
                  >产品中,
                </p>
                <p>
                  帮你免了<span>{{ datas.freeFlowFlow }}G</span>以上的流量,
                </p>
                <p>节约了不少钱哦!</p>
              </div>
              <div class="foot" style="margin-top: 50px">
                <p style="font-size: 15px; color: #ff5e38; opacity: 0.7">
                  请小主放心看视频?
                </p>
                <p
                  style="
                    margin-top: 10px;
                    font-size: 15px;
                    color: #ff5e38;
                    opacity: 0.7;
                  "
                >
                  省钱省流量的事就交给我们吧!
                </p>
              </div>
            </div>
          </div>
          <div class="next">
            <div class="nextImg">
              <img src="./imgs/down.png" alt="" />
            </div>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item
        v-if="
          datas.userType === 1 || datas.userType === 2 || datas.userType === 5
        "
      >
        <div class="item6" :class="num === 1 ? 'day' : 'night'">
          <div class="sun" v-if="num === 1"></div>
          <div class="moon" v-else></div>

          <div class="yunBox">
            <div class="text" v-if="num === 1">
              <div class="top">
                <p>有时候</p>
                <p>你喜欢在<span>白天</span>看视频,</p>
                <p>很会劳逸结合嘛!</p>
              </div>
              <div class="foot" style="margin-top: 50px">
                <p style="font-size: 15px; color: #ff5e38; opacity: 0.7">
                  畅视菌希望你在新的一年
                </p>
                <p
                  style="
                    margin-top: 10px;
                    font-size: 15px;
                    color: #ff5e38;
                    opacity: 0.7;
                  "
                >
                  拥有更多的欢乐观影时光!
                </p>
              </div>
            </div>
            <div class="text" v-else>
              <div class="top">
                <p>有时候</p>
                <p>你喜欢在<span>晚间</span>看视频,</p>
              </div>
              <div class="foot" style="margin-top: 50px">
                <p style="font-size: 15px; color: #ff5e38; opacity: 0.7">
                  欢乐的观影时光
                </p>
                <p
                  style="
                    margin-top: 10px;
                    font-size: 15px;
                    color: #ff5e38;
                    opacity: 0.7;
                  "
                >
                  是不是给你的心灵放了个假?
                </p>
              </div>
            </div>
          </div>
          <div class="next">
            <div class="nextImg">
              <img src="./imgs/down.png" alt="" />
            </div>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item   v-if="Object.keys(datas).length > 0 || isLt === '0'">
<!--          :class="ant?'fade-in':''"-->
        <div class="end" >
          <div
            class="endBox"
            ref="imageWrapper"
            style="max-width: 270px; max-height: 550px"
          >
            <div class="top">
              <img :src="imgs[random].img" alt="" />
            </div>
            <div class="head" style="display: flex;justify-content: space-between" v-if="isLt !== '0'">
                <div><img src="./imgs/xia.png" alt="" />点击get视频VIP/流量</div>
                <div>扫一扫<img src="./imgs/xia.png" alt="" /></div>
<!--                获取我的账单-->
            </div>
            <div class="head" v-else></div>
            <div class="footer">
              <div class="left">
                <div class="body">
                  <div class="row" v-if="isLt !== '0'">
                    <img @click="recommend('tx')" src="./imgs/tx.png" alt="" />
                    <img @click="recommend('yk')" src="./imgs/yk.png" alt="" />
                    <img @click="recommend('iqy')" src="./imgs/iqy.png" alt="" />
                  </div>
                  <div class="row" v-if="isLt !== '0'">
                    <img
                      @click="recommend('bili')"
                      src="./imgs/bili.png"
                      alt=""
                    />
                    <img @click="recommend('mg')" src="./imgs/mg.png" alt="" />
                    <img @click="recommend('ks')" src="./imgs/ks.png" alt="" />
                  </div>
                  <div class="sxx" v-if="isLt === '0'">
                    <img
                      @click="recommend('sxx')"
                      src="./imgs/sxx.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="rightText" >
<!--                  <div class="xin">-->
<!--                    <img src="./imgs/xin.png" alt="" />-->
<!--                  </div>-->
<!--                  <div class="saoMa">-->
<!--                    扫一扫<img src="./imgs/you.png" alt="" />-->
<!--                  </div>-->
                  <div style="width: 12px">获取年度账单</div>
                </div>
                <div class="rightimg">
                  <img src="./imgs/orCode.png" alt="" />
                </div>
              </div>
            </div>
          </div>

          <div class="keep">
            <div class="keepClick" @click="toImage">
              <img src="./imgs/save.png" alt="" />
            </div>
            <div class="keepText">点击生成分享海报</div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
    <!-- 登录 -->
    <van-overlay :show="loginShow" :duration="0.1" @click="loginShow = false">
      <div class="modal" @click.stop>
        <div class="loginBody">
          <div class="inputBox">
            <div class="phone">
              <input
                v-model="loginForm.phone"
                style="width: 100%"
                type="text"
                placeholder="请输入联通手机号"
                maxlength="11"
                @blur="fixScroll"
              />
            </div>
            <div class="code">
              <input
                type="text"
                v-model="loginForm.vcode"
                placeholder="验证码"
                maxlength="6"
                @blur="fixScroll"
              />
              <span class="getcode" @click="getCode">{{
                codeState.state ? codeState.time + "s" : "获取验证码"
              }}</span>
            </div>
          </div>
          <div v-if="isBtn === 0" class="loginSumbit opa">确认授权</div>
          <div v-else class="loginSumbit" @click="login">确认授权</div>
          <div class="close" @click="loginShow = false">
            <img src="./imgs/close.png" alt="" />
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 截图弹窗 -->
    <van-overlay
      :show="dialogTableVisible"
      :duration="0.1"
      @click="loginShow = false"
    >
      <div class="modal" @click.stop>
        <div class="imgBody">
<!--          <div class="tips">长按图片保存</div>-->
          <img :src="imgUrl" alt="" />
          <div class="closeImg" @click="dialogTableVisible = false">
            <img src="./imgs/close.png" alt="" />
          </div>
        </div>
      </div>
    </van-overlay>
    <vue-puzzle :show="showVcode" @success="onSuccessCode"></vue-puzzle>
    <!-- 隐私声明 -->
    <van-overlay
      :show="showConceal"
      :duration="0.1"
      @click="showConceal = false"
    >
      <div class="modal" @click.stop>
        <div class="cancelBox">
          <div class="title">隐私声明</div>
          <div class="main">
            <p>
              尊敬的用户，“联通在线信息科技有限公司”
              (以下简称“在线公司”)将按照本声明及《隐私权保护政策》的规定收集、保存、使用、储存、分享、披露及保护您的个人信息。因此请您务必认真完整阅读并理解本声明，如果您不同意本声明，请勿进行下一步操作。
            </p>
            <p>一、 在线公司收集和使用您的个人信息类型和目的</p>
            <p>
              1、为给您提供完善的服务，需要您向在线公司提供您的手机号码，在线公司收集您的手机号码是为了给您开通业务、提供业务包含的服务，优化并丰富您的用户体验。
            </p>
            <p>
              2、手机号码是您自愿提供，如果您拒绝同意提供，将无法开通业务并使用本服务。
            </p>
            <p>
              3、地理位置信息是您自愿授权提供的，如果您拒绝同意提供，将无法使用本服务。
            </p>
            <p>二、 在线公司如何使用您的个人信息</p>
            <p>
              1、您同意在线公司在合法正当的范围内使用您的个人信息（包含对于个人信息的存储和处理）：
            </p>
            <p>
              2、在线公司已在页面明示征得了您的同意。在线公司将对您的个人信息进行严格保密，按照本说明、《隐私权保护政策》以及其他任何相关的保密和安全措施来处理个人信息。
            </p>
            <p>
              3、在个人信息匿名化或去标识化的前提下，在线公司有权对您提供的个人信息进行数据分析，并对用户数据库加以商业化使用。
            </p>
            <p>三、 更正或投诉</p>
            <p>
              如果您需要查询、修改或更正、撤销授权您的个人信息，或对个人信息保护问题有任何疑问或投诉，您可以通过以下方式联系在线公司：微信公众号“联通畅视菌”→“享·服务”→“人工客服”
            </p>
            <p>四、 通知和修订</p>
            <p>
              在线公司可能适时修改本声明，对于重大变更，在线公司会提供更显著的通知，您可以选择停止使用在线公司提供的产品/服务；在该种情况下，如您仍然继续使用，即表示同意接受经修订的本声明及《隐私权保护政策》的约束。
            </p>
          </div>
          <div class="close" @click="showConceal = false">
            <img src="./imgs/close.png" alt="" />
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>

import vuePuzzle from "vue-puzzle-vcode";

import html2canvas from "html2canvas";
import report from "./js/index";
import Vue from "vue";
import { Dialog } from "vant";
Vue.use(Dialog);
export default {
  components: {  vuePuzzle },
  data() {
    return {
      indexPage: true,
      reportUser: "",
      loginShow: false,
      showVcode: false,
      dialogTableVisible: false,
      showConceal: false,
      checked: false,
      imgUrl: "",
      loginForm: {
        vcode: "",
        phone: "",
      },
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
      isBtn: 0,
      num: 0,
      datas: {},
      imgs: [
        { img: require("./imgs/huolidaiyan.png") },
        { img: require("./imgs/lingluren.png") },
        { img: require("./imgs/shenghuoduomian.png") },
        { img: require("./imgs/youdengsheng.png") },
      ],
      random: "",
      isLt: "",
        ant:false
    };
  },
  created() {
    localStorage.removeItem('isLt')
    document.title = "畅视年度账单";
    if (localStorage.getItem("reportUser")) {
      this.reportUser = localStorage.getItem("reportUser");
    }
    if (localStorage.getItem("isLt")) {
      this.isLt = localStorage.getItem("isLt");
    }
    this.num = Math.floor(Math.random() * 2 + 1);
    this.random = Math.floor(Math.random() * 4 + 1) - 1;

    this.$sensors.registerPage({
      attr1: "999990999999",
    });
    report.showSP();
  },
  mounted() {
    document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
      WeixinJSBridge.call("hideOptionMenu");
    });
  },

  methods: {
      change(e) {
          console.log(e)
          this.ant = true
      },
    // 开启年度账单
    open() {
      if (this.checked === true) {
        if (this.reportUser === "") {
          this.loginShow = true;
          report.loginClick();
        } else {
          this.$toast.loading({
            message: "开启您的年度账单",
            forbidClick: true,
            duration: 2000,
          });

          setTimeout(() => {
            this.getInfo();
            this.indexPage = false;
          }, 2000);
        }
      } else {
        Dialog.confirm({
          message: "已阅读并同意畅视年度账单《隐私声明》",
        })
          .then(() => {
            this.checked = true;
            this.open();
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    // 获取验证码
    getCode() {
      let { phone } = this.loginForm;
      if (!phone) {
        return this.$toast("请输手机号");
      }
      if (!/^1[3456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      this.showVcode = true;
    },
    // 登录
    login() {
      let { phone, vcode } = this.loginForm;
      if (!vcode) {
        return this.$toast("请输入验证码");
      }
      if (!phone) {
        return this.$toast("请输手机号");
      }
      report
        .login({
          phone,
          vcode,
        })
        .then((res) => {
          if (res.code === 10000) {
            report.loginSuccess();
            this.reportUser = res.data.userid;
            localStorage.setItem("reportUser", res.data.userid);
            this.loginShow = false;
            this.$toast.loading({
              message: "开启您的年度账单",
              forbidClick: true,
              duration: 2000,
            });
            setTimeout(() => {
              this.getInfo();
              this.indexPage = false;
            }, 2000);
          }
        });
    },
    // 图形验证
    onSuccessCode() {
      this.showVcode = false;
      let { phone } = this.loginForm;
      report
        .getCode({ userId: phone })
        .then((res) => {
          if (res.code === 10000) {
            if (res.data.op === 0) {
              this.isBtn = 1;
              this.$toast("验证码已发送!");
              this.codeState.state = true;
              this.codeState.task = setInterval(() => {
                if (this.codeState.time <= 0) {
                  clearInterval(this.codeState.task);
                  this.codeState.task = null;
                  this.codeState.state = false;
                  this.codeState.time = 60;
                } else {
                  this.codeState.time--;
                }
              }, 1000);
            } else if (res.data.op === 1) {
              this.loginShow = false;
              this.isLt = "0";
              localStorage.setItem("isLt", 0);
              this.$toast.loading({
                message: "开启您的年度账单",
                forbidClick: true,
                duration: 2000,
              });
              setTimeout(() => {
                this.indexPage = false;
              }, 2000);
            }
          }
        })
        .catch((err) => {
          if (err.code === 500) {
            this.$toast(err.message);
          }
        });
    },
    // 获取用户年度账单信息
    getInfo() {
      report.getUserInfo({ userId: this.reportUser }).then((res) => {
        if (res.code === 10000) {
          this.datas = res.data;
        }
      });
    },
    //跳转推荐产品
    recommend(type) {
      if (type === "tx") {
        window.location.href = "https://operation.mige.tv/a/#/40e9ce77f7b8";
      } else if (type === "iqy") {
        window.location.href = "https://operation.mige.tv/a/#/217b594cf85e";
      } else if (type === "yk") {
        window.location.href = "https://operation.mige.tv/a/#/5e7dc790a059";
      } else if (type === "bili") {
        window.location.href = "https://operation.mige.tv/a/#/40fbfd523ab0";
      } else if (type === "mg") {
        window.location.href = "https://operation.mige.tv/a/#/58a62cfec7be";
      } else if (type === "ks") {
        window.location.href = "https://operation.mige.tv/a/#/6ea94ec5a33f";
      } else if (type === "sxx") {
        window.location.href =
          "https://cplus.mige.tv/sxx/h5/?tenant_id=1&app_id=wx40b98f83115faf1e";
      }
    },
    //截图
    toImage() {
      report.reportShare();
      html2canvas(this.$refs.imageWrapper).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        this.imgUrl = dataURL;
        if (this.imgUrl !== "") {
          this.dialogTableVisible = true;
          this.$toast('长按保存图片')
        }
      });
    },
    // 去白边
    fixScroll() {
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        window.scrollTo(0, 0);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.report {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .my-swipe {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    .welocm {
      width: 100%;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 10%;
      .yunBox {
        width: 100%;
        height: 90%;
        position: relative;
        background-image: url("./imgs/yun3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .text {
          position: absolute;
          left: 110px;
          top: 17%;
          p {
            margin: 0;
            font-size: 38px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            text-align: left;
            color: #171717;
            margin-top: 30px;

            span {
              font-size: 55px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: bold;
              color: #ff5e38;
              margin: 0 5px;
            }
          }
        }
      }
      .next {
        width: 100%;
        position: absolute;
        bottom: 100px;
        .nextImg {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .item1 {
      width: 100%;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 10%;
      .yunBox {
        width: 100%;
        height: 75%;
        position: relative;
        background-image: url("./imgs/yun1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .text {
          position: absolute;
          left: 110px;
          top: 260px;
          p {
            margin: 0;
            font-size: 33px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            text-align: left;
            color: #171717;
            margin-top: 35px;

            span {
              font-size: 45px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: bold;
              color: #ff5e38;
              margin: 0 5px;
            }
          }
        }
        .blessing {
          width: 100%;
          position: absolute;
          top: 600px;
          font-size: 34px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: bold;
          text-align: center;
          color: #ff8469;
        }
      }
      .next {
        width: 100%;
        position: absolute;
        bottom: 100px;
        .nextImg {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .item2 {
      width: 100%;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 10%;
      .yunBox {
        width: 100%;
        // height: 800px;
        height: 50%;
        position: relative;
        background-image: url("./imgs/yun2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .text {
          position: absolute;
          left: 110px;
          top: 200px;
          p {
            margin: 0;
            font-size: 33px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            text-align: left;
            color: #171717;
            margin-top: 60px;

            span {
              font-size: 45px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: bold;
              color: #ff5e38;
              margin: 0 5px;
            }
          }
        }
      }
      .shipinBox {
        margin: 0 auto;
        width: 85%;
        height: 430px;
        background-image: url("./imgs/shipin.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 30px;
      }
      .next {
        width: 100%;
        position: absolute;
        bottom: 100px;
        .nextImg {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .item3 {
      width: 100%;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 10%;
      .yunBox {
        width: 100%;
        height: 800px;
        position: relative;
        background-image: url("./imgs/yun2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .text {
          position: absolute;
          left: 110px;
          top: 100px;
          p {
            margin: 0;
            font-size: 33px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            text-align: left;
            color: #171717;
            margin-top: 60px;

            span {
              font-size: 45px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: bold;
              color: #ff5e38;
              margin: 0 5px;
            }
          }
        }
      }
      .shipinBox {
        margin: 0 auto;
        width: 85%;
        height: 430px;
        background-image: url("./imgs/liul.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 30px;
      }
      .next {
        width: 100%;
        position: absolute;
        bottom: 100px;
        .nextImg {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .item4 {
      width: 100%;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 10%;
      .yunBox {
        width: 100%;
        height: 800px;
        position: relative;
        background-image: url("./imgs/yun2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .text {
          position: absolute;
          left: 110px;
          top: 200px;
          p {
            margin: 0;
            font-size: 38px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            text-align: left;
            color: #171717;
            margin-top: 35px;

            span {
              font-size: 55px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: bold;
              color: #ff5e38;
              margin: 0 5px;
            }
          }
        }
      }
      .shipinBox {
        margin: 0 auto;
        width: 85%;
        height: 430px;
        background-image: url("./imgs/shipin.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 30px;
      }
      .next {
        width: 100%;
        position: absolute;
        bottom: 100px;
        .nextImg {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .item5 {
      width: 100%;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 10%;
      .yunBox {
        width: 100%;
        height: 75%;
        position: relative;
        background-image: url("./imgs/yun3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .text {
          position: absolute;
          left: 110px;
          top: 200px;
          p {
            margin: 0;
            font-size: 38px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            text-align: left;
            color: #171717;
            margin-top: 35px;

            span {
              font-size: 55px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: bold;
              color: #ff5e38;
              margin: 0 5px;
            }
          }
        }
      }
      .next {
        width: 100%;
        position: absolute;
        bottom: 100px;
        .nextImg {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .item6 {
      width: 100%;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 5%;
      .sun {
        width: 150px;
        height: 150px;
        background-image: url("./imgs/sun.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: 50px;
      }
      .moon {
        width: 150px;
        height: 150px;
        background-image: url("./imgs/moon.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: 50px;
      }
      .yunBox {
        width: 100%;
        height: 75%;
        position: relative;
        background-image: url("./imgs/yun3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // margin-top: 250px;
        .text {
          position: absolute;
          left: 110px;
          top: 300px;
          p {
            margin: 0;
            font-size: 38px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            text-align: left;
            color: #171717;
            margin-top: 35px;

            span {
              font-size: 55px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: bold;
              color: #ff5e38;
              margin: 0 5px;
            }
          }
        }
      }
      .next {
        width: 100%;
        position: absolute;
        bottom: 100px;
        .nextImg {
          width: 50px;
          height: 50px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .end {
      width: 100%;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 3%;
      .endBox {
        width: 75%;
        height: 85%;
        margin: 0 auto;
        /*background-color: #fff;*/
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        // margin-top: 100px;

        .head {
          width: 100%;
          font-size: 22px;
          font-weight: bold;
          background: #fff;
          padding: 10px 3% 5px 3%;
          box-sizing: border-box;
          img {
            width: 15px;
            height: 22px;
            margin: 0 10px;
          }
        }

        .top {
          width: 100%;
          height: 80%;
          img {
            width: 100%;
            height: 100%;
            background: #ffffff;
          }
        }
        .footer {
          // flex: 1;
          width: 100%;
          margin: 0 auto;
          background: #fff;
          box-sizing: border-box;
          padding: 1% 3% 2% 3%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .left {
            width: 45%;
            display: flex;
            flex-direction: column;
            .body {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              /*margin-top: 20px;*/
              .row {
                width: 100%;
                // padding-right: 45px;
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                img {
                  width: 50px;
                  height: 50px;
                }
              }
              .sxx {
                height: 95%;
                /*margin: 20px auto;*/
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .right {
            /*flex: 1;*/
            width: 40%;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            /*padding-top: 50px;*/
            box-sizing: border-box;
            .rightText {
              width: 24px;
              margin-right: 10px;
              text-align: right;
              display: flex;
              flex-direction: column;
              justify-content: center;
                font-size: 22px;
              .xin {
                width: 100%;
                height: 18px;
                margin-top: 5px;
                img {
                  width: 110px;
                  height: 100%;
                }
              }
              .saoMa {
                width: 100%;
                margin: 5% 0;
                font-size: 24px;
                img {
                  width: 40px;
                  height: 18px;
                  margin-left: 5px;
                }
              }
              .txt {
                width: 100%;
                font-size: 12px;
              }
            }
            .rightimg {
              width: 145px;
                margin-right: 3%;
              // height: 150px;
              // border: 1px solid red;
              // background-color: #000000;
              img {
                width: 100%;
                // height: 100%;
              }
            }
          }
        }
      }

      .keep {
        width: 100%;
        .keepClick {
          width: 80px;
          height: 80px;
          margin: 0 auto;
          margin-top: 3%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .keepText {
          width: 100%;
          margin-top: 20px;
          text-align: center;
          color: #fff;
            font-size: 28px;
        }
      }
    }
    .night {
      background: linear-gradient(0deg, #ffffff 0%, #ff5129 100%) !important;
    }
    .day {
      background: linear-gradient(0deg, #ff5129 0%, #ffffff 100%);
    }
  }
  .index {
    width: 100%;
    height: 100vh;
    background: linear-gradient(0deg, #ff5129 0%, #ffffff 100%);
    position: relative;
    .box {
      width: 90%;
      height: 80%;
      // position: absolute;
      // left: 10%;
      // top: 3vh;
      margin-left: 10%;
      background-image: url("./imgs/door.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
      .logo {
        width: 300px;
        height: 60px;
        position: absolute;
        left: 20px;
        top: 73px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .welcom {
        width: 35%;
        height: 60%;
        position: absolute;
        top: 120px;
        right: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .words {
        width: 75vw;
        height: 28vw;
        position: absolute;
        bottom: 5%;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .loginBtn {
      width: 100%;
      .btn {
        width: 260px;
        height: 80px;
        border: 4px solid #ffffff;
        border-radius: 85px;
        color: #ffffff;
        font-size: 34px;
        font-weight: 500;
        text-align: center;
        line-height: 80px;
        margin: 0 auto;
      }
    }
    .concel {
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }
  }
  .modal {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .loginBody {
      width: 8.4rem;
      height: 7.47rem;
      background: #ffffff;
      border: 0.01rem solid #000000;
      border-radius: 0.4rem;
      position: relative;
      .inputBox {
        width: 6.13rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        margin-top: 1.4rem;
        .phone,
        .code {
          width: 100%;
          height: 1.2rem;
          line-height: 1.2rem;
          border-bottom: 1px solid #c9c9c9;
          display: flex;
          flex-direction: row;
          input {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            width: 60%;
            height: 100%;
            line-height: 0.48rem;
            font-size: 0.43rem;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 800;
            text-align: left;
          }

          .getcode {
            flex: 1;
            font-size: 0.3rem;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #ff5e38;
          }
        }
      }
      .loginSumbit {
        color: #ffffff;
        width: 6.13rem;
        height: 1.07rem;
        font-size: 32px;
        text-align: center;
        line-height: 1.07rem;
        background: #ff5e38;
        border-radius: 0.55rem;
        margin: 1rem auto;
      }
      .opa {
        opacity: 0.7;
      }
    }
    .imgBody {
      position: absolute;
      top: -4%;
      width: 7.5rem;
      // height: 15rem;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .closeImg {
        width: 1.1rem;
        height: 1.1rem;
        position: absolute;
        left: 45%;
        bottom: -10%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .tips {
        width: 100%;
        position: absolute;
        top: 20px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
      }
    }
    .cancelBox {
      width: 8rem;
      height: 11rem;
      background: #ffffff;
      padding: 30px 60px;
      box-sizing: border-box;
      border-radius: 15px;
      position: relative;
      .title {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 38px;
        font-weight: bold;
        text-align: center;
        color: #ff5e38;
      }
      .main {
        width: 100%;
        height: 85%;
        margin-top: 20px;
        overflow-y: scroll;
        font-size: 25px;
        line-height: 36px;
        color: #222222;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
    .close {
      width: 1.1rem;
      height: 1.1rem;
      position: absolute;
      left: 45%;
      bottom: -2rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .my-swipe .van-swipe-item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(0deg, #ff5129 0%, #ffffff 100%);
  }
  /*  @keyframes fade-in {*/
  /*      0% {opacity: 0;}!*初始状态 透明度为0*!*/
  /*      40% {opacity: 0;}!*过渡状态 透明度为0*!*/
  /*      100% {opacity: 1;}!*结束状态 透明度为1*!*/
  /*  }*/
  /*  @-webkit-keyframes fade-in {!*针对webkit内核*!*/
  /*      0% {opacity: 0;}*/
  /*      40% {opacity: 0;}*/
  /*      100% {opacity: 1;}*/
  /*  }*/

  /*.fade-in {*/
  /*  animation: fade-in;!*动画名称*!*/
  /*  animation-duration: 2s;!*动画持续时间*!*/
  /*  -webkit-animation:fade-in 2s;!*针对webkit内核*!*/
  /*}*/
}
</style>
