 <template>
 <div class="download-con">
    <div class="title">
      <div class="line" />
       <span>一 • 幕 • 影 • 链 • 商 • 城</span>
      <div class="line" />
    </div>
    <div class="fix-container">
      <section id="input">
        <h1>{{ title }}</h1>
        <div class="linear-gradient-line"></div>

        
          <div class="input-group" v-if="step == 1">
            <input v-model="phone" placeholder="请输入您的手机号码" />
            <!-- <vueTencentCaptcha appid="2024094938" @callback="captchaCallback" /> -->
            <button @click="goShowCaptcha">确定</button>
          </div>
          <p class="invite-code" v-if="inviteCode">推荐人邀请码：{{ inviteCode }}</p>
          <button class="plain-button" @click="goDownload">下载APP</button>
          <button class="plain-button" @click="goOpen">打开APP</button>
          <div class="qrcode">
            <div ref="qrcode" id="qrcode"></div>
          </div>
        <p class="invite-url" v-if="inviteCode">
          <span>{{ inviteUrl }}</span>
          <i
            class="copy"
            @click="handleCopy(inviteUrl)"
          ></i>
        </p>
      </section>
    </div>
    <div class="footer"></div>

    <div v-if="modalShow === 'codeSent'" class="dialog">
      <!--<div class="dialog">-->
      <p class="d-title">
        验证码已发送到
        <span>{{ phone | phoneFilter }}</span>
      </p>
      <verification-code
        @codeInputted="goRegister"
        class="v-code"
        :code-count="4"
        :type="3"
      ></verification-code>
      <p class="d-tip" v-if="sending">
        请注意查收验证码
        <span>{{ time }}</span>
      </p>
      <p class="d-tip" @click="goShowCaptcha" v-if="!sending">发送验证码</p>
    </div>
    <div v-if="modalShow === 'registered'" class="dialog">
      <p class="d-p">该手机号已注册</p>
      <!-- <p class="d-p">请直接下载APP进行登录</p> -->
    </div>
    <div @click="closeModal" v-if="modalShow !== ''" class="mask"></div>
    <img class="tips-here" v-if="checkBrowser().weixin" src="https://slg-file.oss-cn-hangzhou.aliyuncs.com/manage/img/20211109/20211109102845741_708565.png" alt="">
    <div class="mask" v-if="checkBrowser().weixin"  style="z-index:100">
    </div>
  </div>
</template>

<script>
import VerificationCode from "@/components/VerificationCode";
import QRCode from "qrcodejs2";
export default {
  components: { VerificationCode },
  data() {
    return {
      phone: "",
      inviteCode: "",
      channel: "",
      download:
        "http://66666askdhsakhdjashdjashdjashdjlk6666666askdhsakhdjashdjashdjashdjlk6666666askdhsakhdjashdjashdjashdjlk6666666askdhsakhdjashdjashdjashdjlk66",
      modalShow: "",
      time: 0,
      countTime: 60,
      sending: false,
      timeId: "",
      longHeight: false,
      inviteUrl: window.location.href,
      url: {
        ios: "",
        android: "",
      },
      // 1 注册  2 下载
      step: 1
    };
  },
  computed: {
    title() {
      if (this.step == 1) {
        return "输入手机号码注册";
      } else {
        return "已注册账号";
      }
    },
  },
  watch: {},
  created() {
    let { invite_code, channel, download } = this.$route.query;
    this.inviteCode = invite_code;
    this.channel = channel;
    this.download = download;
    let {origin, pathname} = window.location
    this.inviteUrl = `${origin}${pathname}#/download?invite_code=${invite_code}`
  },
  mounted() {
    this.longHeight = window.innerHeight > 800;
    this.getDownloadUrl();
    this.$nextTick(() => {
      this.creatQrcode()
    })
  },
  methods: {
    creatQrcode() {
      new QRCode(this.$refs.qrcode, {
        width: 168,
        height: 168, // 高度
        text: this.inviteUrl,
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    getDownloadUrl() {
      this.$api({
        apiName: 'getSysVersion',
        success: (res) => {
          this.url = res
          console.log(res)
        }
      })
    },
    closeModal() {
      if (
        (this.modalShow === "codeSent" && !this.sending) ||
        this.modalShow === "registered"
      ) {
        this.modalShow = "";
      }
    },
    checkBrowser() {
      let u = navigator.userAgent,
        app = navigator.appVersion;
      return {
        trident: u.indexOf("Trident") > -1, //IE内核
        presto: u.indexOf("Presto") > -1, //opera内核
        webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
        gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf("Android") > -1 || u.indexOf("Adr") > -1, //android终端
        iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf("iPad") > -1, //是否iPad
        webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部
        weixin: u.indexOf("MicroMessenger") > -1, //是否微信 （2015-01-22新增）
        qq: u.match(/\sQQ/i) == " qq", //是否QQ
      };
      // invite?invite_code=YigN&iosDownload=itms-services:///?action=download-manifest&url=https://twitter-chain-data-release.oss-cn-shanghai.aliyuncs.com/app_install/ios/twitterchain.plist&andDownload=https://twitter-chain-data-release.oss-cn-shanghai.aliyuncs.com/app_install/android/twitterchain.apk
    },
    goShowCaptcha() {
      if (/^1[0-9]{10}$/.test(this.phone)) {
        this.goSendCode();
      } else {
        this.$toast("请输入正确的手机号");
      }
    },
    goDownload() {
      let bro = this.checkBrowser();
      if (bro.ios) {
        //  this.$toast("正在开发中~")
        window.location.href = this.url.ios.address;
      }
      if (bro.android) {
        window.location.href = this.url.android.address;
      }
    },
    goOpen() {
      let bro = this.checkBrowser();
     
      if (bro.ios) {
        //  this.$toast("正在开发中~")
        window.location.href = "com.benlian.ym.scheme://";
      }
      if (bro.android) {
        window.location.href = "launchym://ym";
        // setTimeout(() => {
        //   window.location.href = this.url.android.address;
        // },1000)
      }
     
    },
    countDown() {
      this.time = this.countTime;
      this.sending = true;
      this.timeId = setInterval(() => {
        if (this.time > 0) {
          this.time--;
        } else {
          this.time = 0;
          this.sending = false;
          clearInterval(this.timeId);
        }
      }, 1000);
    },
     goSendCode() {
       this.$api({
         apiName: 'checkAccount',
         postData:this.phone,
         success: (res)=> {
           console.log(res)
            if(res) {
              this.modalShow = "registered";
              this.step = 2;
              
              return;
            }
            this.sendSmsCode()
         }
       })
    },
    sendSmsCode() {
      this.$api({
        apiName: 'sendSmsCode',
        postData: {
          account: this.phone,
          area: "+86",
          type: 1,
        },
        success:()=> {
          this.countDown()
          this.modalShow = "codeSent";
          this.$toast("已发送");
        }
      })
    },
    goRegister(code) {
      this.$api({
        apiName: "login",
        postData: {
          account: this.phone,
          area: "+86",
          registerCode: this.inviteCode,
          verificationCode: code,
        },
        success: (res) => {
          console.log(res)
          if (res) {
            this.modalShow = "";
            this.$toast("注册成功");
            this.step = 2;
            this.$nextTick(() => {
              this.creatQrcode()
            })
          }
        },
      });
    },
  },
  filters: {
    phoneFilter(val) {
      var pat = /(\d{3})\d*(\d{4})/;
      return val.replace(pat, "$1****$2");
    },
  },
};
</script>

<style lang="less">
.fix-container {
  position: relative;
  // bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.download-con {
  text-align: center;
  background: no-repeat
    url(https://slg-file.oss-cn-hangzhou.aliyuncs.com/manage/img/20211109/20211109144144053_511658.png)
    0 0;
  background-size: 100%;
  position: relative;
  background-color: #db2935;
  width: 100%;
  height: 100%;
  height: 100vh;
  min-height: 692px;
  font-family: "PingFangSC-Regular,PingFang SC" !important;
  > .title {
    font-family: "PingFangSC-Regular,PingFang SC" !important;
    padding-top: 29px;
    padding-bottom: 136px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    > span {
      font-size: 16px;
      color: #f6f6f6;
      margin: auto 17px;
    }
    .line {
      width: 45px;
      height: 1px;
      background: #FCECEE;
      opacity: 0.29;
    }
  }
  > .footer {
    width: 100%;
    height: 93px;
    // background: no-repeat url(../../static/img/footer.png) 0 0;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
  }
  section {
    width: 335px;
    background: #fcecee;
    border-radius: 10px;
    margin: 0 auto;
    border-radius: 10px;
    h1 {
      font-family: "PingFangSC-Regular,PingFang SC" !important;
      font-size: 18px;
      font-weight: 600;
      color: #f4e4e9;
      background: linear-gradient(180deg, #f19133 0%, #f22934 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      z-index: 10;
      position: relative;
    }

    &#input {
      padding: 0 20px;
      padding-top: 30px;
      padding-bottom: 20px;
      .linear-gradient-line {
        width: 156px;
        height: 10px;
        background: #ffddca;
        transform: translateY(-8px);
        // background: linear-gradient(180deg, #F19133 0%, #F22934 100%);
        margin: 0 auto;
        margin-bottom: 15px;
      }
      .input-group {
        width: 100%;
        height: 35px;
        display: flex;
        margin-bottom: 15px;
        border-radius: 18px;
        overflow: hidden;
        background: #ffffff;
        input {
          width: 100%;
          border-radius: 25px;
          border: none;
          padding: 8px 17px;
          font-size: 12px;
          font-family: "PingFangSC-Regular,PingFang SC" !important;
        }
        button {
          font-family: "PingFangSC-Regular,PingFang SC" !important;
          width: 67px;
          background: linear-gradient(90deg, #f29534 0%, #ea2c37 100%);
          border: none;
          border-radius: 25px;
          height: 35px;
          font-size: 15px;
          color: #f4e4e9;
          margin-left: -30px;
        }
      }
      .invite-code {
        font-family: "PingFangSC-Regular,PingFang SC" !important;
        margin-left: 17px;
        text-align: center;
        color: #ea3037;
        font-size: 14px;
        margin-bottom: 30px;
      }
      .plain-button {
        border: none;
        border-radius: 6px;
        // padding: 5px 25px;
        background: #ffffff;
        color: #D7252C;
        font-size: 14px;
        height: 35px;
        width: 110px;
        font-family: "PingFangSC-Regular,PingFang SC" !important;
      }
      .qrcode {
        width: 180px !important;
        height: 180px !important;
        border: 7px solid #fed6db;
        margin: 20px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .invite-url {
        font-family: "PingFangSC-Regular,PingFang SC" !important;
        font-size: 12px;
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        i.copy {
          flex-shrink: 0;
          margin-left: 2px;
          display: inline-block;
          background: url(https://xls-data-test.oss-cn-shanghai.aliyuncs.com/manage/img/20210914/20210914172331304_170133.png)
            center;
          background-size: cover;
          width: 16px;
          height: 16px;
        }
      }
    }
    // &#input {
    // }
  }
  .plain-button + .plain-button {
    margin-left: 18px;
  }
  .dialog {
    z-index: 103;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    width: 300px;
    /*height: 100px;*/
    border-radius: 10px;
    padding: 30px 20px;
    .d-title {
      text-align: left;
      color: #474747;
      font-size: 14px;
      span {
        color: #6368de;
      }
    }
    .v-code {
      margin-top: 20px;
    }
    .d-tip {
      margin-top: 20px;
      color: #474747;
      span {
        color: #f44e36;
      }
    }
    .d-p {
      color: #474747;
    }
  }
  .mask {
    position: fixed;
    background-color: black;
    opacity: 0.6;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 102;
  }
  .tips-here {
    width: 248px;
    height: 221px;
    position: absolute;
    right: 0;
    top:0;
    z-index: 111;
  }
}
</style>
