caimei-authentic-www/pages/_template/app/form/link-register.vue

<template>
  <div class="page">
    <div class="page-content link-register flex justify-center items-center">
      <div class="link-register-section flex justify-center items-center">
        <div class="content">
          <div class="logo"><img :src="supplierInfo.logo" alt="" /></div>
          <div class="message">
            完成账号注册与设备认证信息后，将获得<span>{{supplierInfo.shopName}}</span>授权牌匾制作及寄送
          </div>
          <div class="control">
            <div class="button" @click="toRegister">点击进入</div>
          </div>
        </div>
      </div>
    </div>

    <SimpleDialog
      v-model="active"
      @confirm="onConfirm"
      :cancel="false"
      description="抱歉，该手机号已注册，您可以登录后再来进行正品授权申请！"
      :center="true"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  layout: 'app',
  data() {
    return {
      authId: '',
      clubUser: null,
      active: false,
    }
  },
  computed: {
    ...mapGetters([
      'supplierInfo',
      'authUserId',
      'routePrefix',
      'accessToken',
      'userInfo',
    ]),
  },

  created() {
    this.authId = this.$route.query.authId
    if(this.accessToken) this.checkouMobileBindClub()
  },

  methods: {
    onConfirm() {
      this.$router.push(`${this.routePrefix}`)
    },

    // 判断用户手机号是否绑定机构
    async checkouMobileBindClub() {
      try {
        const res = await this.$http.api.fetchClubAuthInfo({
          authUserId: this.authUserId,
          mobile: this.userInfo.mobile,
        })
        this.clubUser = res.data.clubUser
      } catch (error) {
        console.log(error)
      }
    },

    toRegister() {
      //  已登录
      // 	  用户未绑定机构
      // 		  填写设备信息提交认证即可
      // 	  用户已绑定机构（提示：该用户已绑定机构）
      //  未登录
      // 	  填写用户信息
      // 		  手机号已绑定机构（提示：该手机号已绑定机构）
      // 		  手机号未绑定机构
      // 			  下一步：填写设备信息提交认证即可
      const link = `${this.routePrefix}/form/club-register?type=link&authId=${this.authId}`
      if (this.accessToken) {
        if (this.clubUser) {
          this.active = true
        } else {
          this.$router.push(link)
        }
      } else {
        this.$router.push(link)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .page-content {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    background: url(https://static.caimei365.com/www/authentic/pc/link-register-bg.png)
      no-repeat center;

    .link-register-section {
      width: 1200px;
      height: 530px;
      background: url(https://static.caimei365.com/www/authentic/pc/link-register-section-bg.png)
        no-repeat center;
      .content {
        width: 1030px;
        height: 400px;
        background: #fff;
        background-image: url(https://static.caimei365.com/www/authentic/pc/link-register-icon.png);
        background-repeat: no-repeat;
        background-position: 580px center;
        box-sizing: border-box;
        padding-left: 70px;

        .logo {
          height: 40px;
          width: auto;
          margin-top: 48px;

          img {
            display: block;
            height: 40px;
          }
        }

        .message {
          width: 360px;
          font-size: 20px;
          line-height: 36px;
          color: #282828;
          margin: 40px 0 76px;

          span {
            font-weight: bold;
          }
        }

        .control {
          .button {
            width: 295px;
            height: 50px;
            background: #409eff;
            border-radius: 4px;
            text-align: center;
            font-size: 18px;
            line-height: 50px;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .page-content {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    background: url(https://static.caimei365.com/www/authentic/h5/link-register-bg.png)
      no-repeat center;

    .link-register-section {
      width: 100vw;
      height: 119.5vw;
      background: url(https://static.caimei365.com/www/authentic/h5/link-register-section-bg.png)
        no-repeat center;
      .content {
        width: 88.6vw;
        height: 106.6vw;
        background: #fff;
        background-image: url(https://static.caimei365.com/www/authentic/h5/link-register-icon.png);
        background-repeat: no-repeat;
        background-position: center 32vw;
        background-size: 62vw auto;
        box-sizing: border-box;
        padding-left: 8vw;
        position: relative;

        .logo {
          height: 8vw;
          width: auto;
          margin-top: 6.4vw;

          img {
            display: block;
            height: 8vw;
          }
        }

        .message {
          width: 72vw;
          font-size: 4vw;
          line-height: 7.2vw;
          color: #282828;
          margin-top: 4vw;

          span {
            font-weight: bold;
          }
        }

        .control {
          position: absolute;
          bottom: 7.2vw;
          left: 50%;
          transform: translateX(-50%);
          .button {
            width: 62vw;
            height: 8.8vw;
            background: #409eff;
            border-radius: 0.4vw;
            text-align: center;
            font-size: 3.6vw;
            line-height: 8.8vw;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>