proginn-frontend/components/job/download.vue

<template>
  <div :class="{connectUs: !mobile, connectUsMobile: mobile}">
    <div class="toastBox" v-if="isShowToast" @click="close">
      <div class="toastArea">
        <div class="title">打开APP扫描</div>
        <div class="qrcode">
          <img :src="qrCodeBase64" alt="" class="code">
          <img class="logo" src="~@/assets/img/job/logo_icon_reverse2.jpg" alt="">
        </div>
        <div class="tips">使用 <span>程序员客栈APP</span> 扫一扫 </div>
        <div class="tips">立即与企业方沟通</div>
        <div class="notHave">没有安装APP？</div>
        <div class="submitBtn" @click.stop="judgeToDownloadApp">
          <p>立即下载</p>
        </div>
        <div class="closeIcon" @click.stop="close"/>
      </div>
    </div>
  </div>
</template>

<script>
  let qrcode = null
  if (process.browser) {
    qrcode = require("qrcode");
  }
  export default {
    props: [ "source", "isShowToast", "sourceId" ],
    components: {},
    data() {
      return {
        qrCodeBase64: "",
        mobile: this.$deviceType.isMobile()
      };
    },
    computed: {},
    mounted() {
      if (!this.mobile) {
        let baseUrl = this.$store.state.domainConfig.jobUrl;
        let jumpUrl = `${baseUrl}${location.pathname}`;
        this.createCode(jumpUrl);
      }
    },
    methods: {
      close() {
        this.$emit('close')
      },

      judgeToDownloadApp() {
        // 应用宝：https://sj.qq.com/myapp/detail.htm?apkName=com.proginn
        // iOS：https://apps.apple.com/cn/app/id979914687
        if (!this.$deviceType.app) {
          // let url = this.$deviceType.ios ?
          //   "https://apps.apple.com/cn/app/id979914687" :
          //   "https://sj.qq.com/myapp/detail.htm?apkName=com.proginn"

          location.href = "https://www.proginn.com/index/app"
          return true
        }
        return false
      },

      //创建二维码
      createCode(url) {
        console.log('warn', url)
        qrcode.toDataURL(url, {
          width: 250,
          margin: 0,
          errorCorrectionLevel: "H"
        }).then(res => {
          this.qrCodeBase64 = res
        }).catch(err => {
          this.$toast.clear()
          this.$toast('生成二维码出错')
          console.warn(JSON.stringfy(err))
        })
      },
    }
  };
</script>

<style lang="scss">
  @import "~@/assets/css/scssCommon.scss";

  .connectUs {
    .toastBox {
      position: fixed;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 888;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .toastArea {
        position: relative;
        width: 446px;
        height: 436px !important;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px;
        padding: 25px 47px;

        .title {
          font-size: 19px;
          font-weight: 500;
          color: rgba(34, 34, 34, 1);
          line-height: 26px;
          text-align: center;
        }

        .qrcode {
          margin: 15px auto 0 auto;
          width: 185px;
          height: 185px;
          position: relative;
          padding: 10px;
          .code {
            width: 165px;
            height: 165px;
          }
          .logo {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 40px;
            height: 40px;
            transform-origin: center;
            transform: translate(-50%, -50%);
          }
        }

        .tips {
          width:190px;
          height:21px;
          font-size:15px;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:21px;
          text-align: center;
          margin: 0 auto !important;
          white-space: nowrap;
          word-break: keep-all;

          span {
            font-size:15px;
            font-weight: 500;
            color:rgba(51,51,51,1);
            line-height:21px;
          }
        }

        .notHave {
          margin: 35px auto 0 auto;
          height:27px;
          font-size:15px;
          font-weight:600;
          color:rgba(51,51,51,1);
          line-height:27px;
          padding-right: 15px;
          width: fit-content;
          position: relative;
        }

        .submitBtn {
          margin: 9px auto 0 auto;
          width:212px;
          height:44px;
          background: rgba(48, 142, 255, 1);
          box-shadow: 0 2px 6px 0 rgba(48, 142, 255, 0.3);
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          p {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
          }
        }

        .closeIcon {
          position: absolute;
          right: 20px;
          top: 30px;
          width: 16px;
          height: 16px;
          background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
          background-size: cover;
          cursor: pointer;
        }
      }

    }

  }

  .connectUsMobile {
    .toastBox {
      position: fixed;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 888;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .toastArea {
        position: relative;
        width: pxtovw(355);
        height: pxtovw(403);
        background: rgba(255, 255, 255, 1);
        border-radius: pxtovw(3);
        padding: pxtovw(30) pxtovw(30);

        .title {
          font-size: pxtovw(19);
          font-weight: 500;
          color: rgba(34, 34, 34, 1);
          line-height: pxtovw(26);
          text-align: center;
        }

        .tips {
          margin-top: pxtovw(8);
          margin-bottom: pxtovw(14);
          font-size: pxtovw(12);
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: pxtovw(17);
          text-align: center;
        }

        .nameCell, .phoneCell {
          margin-top: pxtovw(25);

          .label {
            font-size: pxtovw(14);
            font-weight: 500;
            color: rgba(25, 34, 46, 1);
            line-height: pxtovw(20);
          }
          input {
            margin-top: pxtovw(5);
            padding: pxtovw(10);
            width: pxtovw(295);
            height: pxtovw(48);
            background: rgba(255, 255, 255, 1);
            border-radius: pxtovw(3);
            border: pxtovw(1) solid rgba(221, 225, 230, 1);
          }
        }
        .nameCell {
          margin-top: pxtovw(39);
        }

        .submitBtn {
          margin-top: pxtovw(18);
          width: pxtovw(295);
          height: pxtovw(48);
          background: rgba(48, 142, 255, 1);
          box-shadow: 0 pxtovw(2) pxtovw(6) 0 rgba(48, 142, 255, 0.3);
          border-radius: pxtovw(2);
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          p {
            font-size: pxtovw(14);
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: pxtovw(20);
          }
        }

        .closeIcon {
          position: absolute;
          right: pxtovw(20);
          top: pxtovw(34);
          width: pxtovw(16);
          height: pxtovw(16);
          background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
          background-size: cover;
          cursor: pointer;
        }
      }

    }
  }
</style>