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

<template>
  <div class="page">
    <div class="page-top flex flex-col justify-center items-center">
      <img class="logo" :src="supplierInfo.logo" />
      <div
        class="name mt-2"
        v-text="supplierInfo.shopName + '正品授权申请'"
      ></div>
    </div>
    <div class="page-content">
      <template>
        <!-- 进步条 -->
        <SimpleStep :list="stepList" :active="step" v-if="showStepBar" />
        <div class="step-list py-4">
          <!-- 账号注册表单 -->
          <keep-alive>
            <FormClubRegister
              v-if="step === 1"
              ref="userForm"
              @step="onUserFormStep"
            />
          </keep-alive>
          <!-- 机构认证表单 -->
          <keep-alive>
            <FormClubInfo
              v-if="step === 2 && registerType.indexOf(2) !== -1"
              ref="clubInfoForm"
              @step="onClubInfoFormStep"
            />
          </keep-alive>
          <!-- 设备认证表单 -->
          <keep-alive>
            <FormClubDevice
              v-if="step === 3"
              ref="clubDeviceForm"
              @step="onclubDeviceFormStep"
            />
          </keep-alive>
        </div>
      </template>
      <!-- 机构已认证 || 机构认证中 || 机构认证失败 -->
      <template v-if="step === 2 && registerType.indexOf(2) === -1">
        <div class="message">
          <div class="status-icon" :class="autidStatusClass"></div>
          <div class="status">
            <span v-if="autidStatus === 0">机构认证失败</span>
            <span v-if="autidStatus === 1">机构认证成功</span>
            <span v-if="autidStatus === 2">机构认证中</span>
          </div>
          <div class="tip">提示：可点击认证记录看查看详情</div>
        </div>
      </template>

      <!-- 操作 -->
      <div class="control flex flex-col items-center">
        <div
          class="button next flex justify-center items-center mb-2"
          @click="onNextStep"
        >
          {{ step === 3 ? '提交' : '下一步' }}
        </div>
        <div
          class="button prev flex justify-center items-center"
          @click="onPrevStep"
          v-if="showPreButton"
        >
          上一步
        </div>
        <div class="record mt-2" @click="toRecord">认证记录</div>
      </div>
    </div>
  </div>
</template>

<script>
import SimpleStep from '@/components/SimpleStep'
import FormClubRegister from './components/form-club-register.vue'
import FormClubInfo from './components/form-club-info.vue'
import FormClubDevice from './components/form-club-device.vue'
import { mapGetters } from 'vuex'
export default {
  layout: 'app',
  components: {
    SimpleStep,
    FormClubRegister,
    FormClubInfo,
    FormClubDevice,
  },

  data() {
    return {
      registerType: [3],
      step: 1,
      stepList: [
        {
          label: '账号注册',
          id: 1,
          recordRoute: '/record/club/detail',
        },
        {
          label: '机构认证',
          id: 2,
          recordRoute: '/record/club/detail',
          auditStatus: '',
        },
        {
          label: '设备认证',
          id: 3,
          recordRoute: '/record/device',
          auditStatus: '',
        },
      ],

      // 机构用户信息
      clubUserInfo: {},
      // 机构授权信息
      authInfo: {},
      // 机构认证设备列表信息
      productInfo: [],

      // 机构授权id
      authId: '',
      // 机构用户id
      clubUserId: '',

      autidStatus: 0,
    }
  },

  computed: {
    ...mapGetters([
      'supplierInfo',
      'authUserId',
      'routePrefix',
      'accessToken',
      'userInfo',
    ]),

    autidStatusClass() {
      if (this.autidStatus === 0) return 'danger'
      if (this.autidStatus === 1) return 'success'
      if (this.autidStatus === 2) return 'warning'
    },

    showStepBar() {
      if (this.step === 2) {
        if (this.registerType.indexOf(2) > -1) {
          return true
        } else {
          return false
        }
      }
      return true
    },

    showPreButton() {
      if (this.step === 2) {
        if (this.registerType.indexOf(1) > -1) {
          return true
        } else {
          return false
        }
      }
      return true
    },
  },
  created() {
    this.initForm()
  },
  methods: {
    async onNextStep() {
      const validateAction = {
        1: this.$refs.userForm?.validate(),
        2: this.$refs.clubInfoForm?.validate(),
        3: this.$refs.clubDeviceForm?.validate(),
      }
      try {
        // 表单校验
        await validateAction[this.step]
        // 提交
        if (this.step === 3) {
          this.onSubmit()
        }
        // 下一步
        if (this.step < 3) {
          this.step++
        }
      } catch (error) {
        console.log(error)
      }
    },
    onPrevStep() {
      this.step > 1 && this.step--
    },

    async onSubmit() {
      const params = {
        registerType: this.registerType.join(','),
        authUserId: this.authUserId,
        authId: this.authId,
        clubUserId: this.clubUserId,
        clubUserInfo: this.clubUserInfo,
        authInfo: this.authInfo,
        productInfo: this.productInfo,
      }

      console.log(params)

      try {
        const res = await this.$http.api.clubUserRegisterAll(params)
        console.log(res)
        this.$router.push(`${this.routePrefix}/record/message`)
      } catch (error) {
        console.log(error)
        this.$toast(error.msg)
      }
    },

    onUserFormStep(data) {
      console.log(data)
      this.clubUserInfo = data
    },

    onClubInfoFormStep(data) {
      console.log(data)
      this.authInfo = data
    },

    onclubDeviceFormStep(data) {
      console.log(data)
      this.productInfo = data
    },

    toRecord() {
      if (!this.accessToken) {
        this.$toast('请登录后查看')
        this.$router.push(`${this.routePrefix}`)
        return
      }
      this.$router.push(`${this.routePrefix}/record/club/detail`)
    },

    // 初始化表单
    async initForm() {
      // 判断用户是否登录
      if (!this.accessToken) {
        this.registerType.push(1, 2)
      } else {
        this.step = 2
        this.stepList = this.stepList.filter((item) => item.id !== 1)
        await this.initClubInfo()
      }
    },

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

        // 机构是否绑定用户
        if (!res.data.clubUser) {
          this.registerType.push(1)
        }

        // 机构是否认证
        if (!res.data.auth) {
          this.registerType.push(2)
        } else {
          this.autidStatus = res.data.auth.auditStatus
          this.authId = res.data.auth.authId
        }
        return Promise.resolve(res)
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
// pc 端
@media screen and (min-width: 768px) {
  .page {
    background: #fff;
  }

  .page-top {
    height: 360px;
    @include themify($themes) {
      background: themed('banner-club-register');
      background-size: auto 360px;
    }
    .logo {
      display: block;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #fff;
    }
    .name {
      font-size: 30px;
      color: #fff;
    }
  }
  .page-content {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    min-height: calc(100vh - 80px - 80px - 360px);
    box-sizing: border-box;
    padding-bottom: 40px;

    .message {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-top: 60px;
      .status-icon {
        width: 88px;
        height: 88px;
        background-repeat: no-repeat;
        background-size: 75px auto;
        background-position: center;

        &.success {
          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-primary.png);
        }
        &.warning {
          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-warning.png);
        }
        &.danger {
          background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-danger.png);
        }
      }

      .status {
        font-size: 18px;
        color: #282828;
        margin: 12px 0;
      }

      .tip {
        color: #999999;
        font-size: 14px;
      }
    }

    .control {
      margin-top: 62px;
      .button {
        width: 295px;
        height: 50px;

        cursor: pointer;

        &.prev {
          @include themify($themes) {
            border: 1px solid themed('color');
            color: themed('color');
          }
        }
        &.next {
          @include themify($themes) {
            background-color: themed('color');
            color: #fff;
          }
        }
      }
      .record {
        font-size: 14px;
        cursor: pointer;
        @include themify($themes) {
          color: themed('color');
        }
      }
    }

    .step-list {
      width: 700px;
      margin: 0 auto;
    }
  }
}

// 移动端
@media screen and (max-width: 768px) {
  .page {
    background: #fff;
  }

  .page-top {
    height: 46vw;
    @include themify($themes) {
      background: themed('banner-home-h5');
      background-size: auto 46vw;
    }
    .logo {
      display: block;
      width: 14.8vw;
      height: 14.8vw;
      border-radius: 50%;
      background: #fff;
    }
    .name {
      font-size: 4vw;
      color: #fff;
    }
  }

  .page-content {
    padding: 0 7vw 7vw;

    .message {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 22.8vw 0;
      .status-icon {
        width: 23.6vw;
        height: 23.6vw;
        background-repeat: no-repeat;
        background-size: 20vw auto;
        background-position: center;

        &.success {
          background-image: url(https://static.caimei365.com/www/authentic/h5/icon-auth-primary.png);
        }
        &.warning {
          background-image: url(https://static.caimei365.com/www/authentic/h5/icon-auth-warning.png);
        }
        &.danger {
          background-image: url(https://static.caimei365.com/www/authentic/h5/icon-auth-danger.png);
        }
      }

      .status {
        font-size: 4.2vw;
        color: #282828;
        margin: 3.2vw 0 2.4vw;
      }

      .tip {
        color: #999999;
        font-size: 3.2vw;
      }
    }

    .control {
      .button {
        width: 85.6vw;
        height: 12vw;

        cursor: pointer;

        &.prev {
          @include themify($themes) {
            border: 1px solid themed('color');
            color: themed('color');
          }
        }
        &.next {
          @include themify($themes) {
            background-color: themed('color');
            color: #fff;
          }
        }
      }
      .record {
        margin-top: 4.8vw;
        font-size: 3.4vw;
        cursor: pointer;
        @include themify($themes) {
          color: themed('color');
        }
      }
    }
  }
}
</style>