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"
              v-if="!isRequest && bindStatus === 0"
            >
              点击进入
            </div>
          </div>
        </div>
      </div>
    </div>

    <SimpleDialog
      v-model="dialogActive"
      @confirm="onConfirm"
      :cancel="false"
      :description="dialogText"
      :center="true"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  layout: 'app',
  data() {
    return {
      authId: '',
      dialogActive: false,
      isRequest: false,
      bindStatus: 0,
    }
  },
  computed: {
    ...mapGetters([
      'supplierInfo',
      'authUserId',
      'routePrefix',
      'accessToken',
      'userInfo',
    ]),
    dialogText() {
      return this.bindStatus === 1
        ? '该链接认证信息已被账号注册！'
        : '抱歉，当前登录手机号已绑定机构，您可以登录后再来进行正品授权申请！'
    },

    redirectLink() {
      return `${this.routePrefix}/form/club-register?type=link&authId=${this.authId}`
    },
  },

  created() {
    this.authId = this.$route.query.authId
    this.checkoutClubIsBind()
  },

  methods: {
    // 跳转首页
    onConfirm() {
      this.$router.push(`${this.routePrefix}`)
    },

    // 判断机构是否已经被绑定
    async checkoutClubIsBind() {
      this.isRequest = true
      try {
        const res = await this.$http.api.fetchClubAuthInfo({
          authUserId: this.authUserId,
          authId: this.authId,
        })
        const auth = res.data.auth
        if (auth) {
          this.bindStatus = auth.bindStatus
          this.dialogActive = auth.bindStatus === 1
        }
        this.isRequest = false
      } catch (error) {
        console.log(error)
      }
    },

    // 跳转注册页面
    async toRegister() {
      if (this.accessToken) {
        try {
          const res = await this.$http.api.fetchClubAuthInfo({
            authUserId: this.authUserId,
            mobile: this.userInfo.mobile,
          })
          if (res.data.auth) {
            this.dialogActive = true
          } else {
            this.$router.push(this.redirectLink)
          }
        } catch (error) {
          console.log(error)
        }
      } else {
        // 未登录状态缓存
        const bindFlag = this.$getStorage(this.routePrefix, 'bind-flag')
        if (bindFlag) this.$removeStorage(this.routePrefix, 'bind-flag')
        if (!bindFlag) {
          this.$setStorage(
            this.routePrefix,
            'club-register-link',
            this.$route.fullPath
          )
        }
        this.$router.push(this.redirectLink)
      }
    },
  },
}
</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>