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">
      <!-- 进步条 -->
      <SimpleStep :list="stepList" :active="step" />

      <div class="step-list py-4">
        <keep-alive>
          <!-- 账号注册表单 -->
          <template
            ><FormClubRegister
              v-if="step === 1"
              ref="userForm"
              @step="onUserFormStep"
          /></template>
          <!-- 机构认证表单 -->
          <template
            ><FormClubInfo
              v-if="step === 2"
              ref="clubInfoForm"
              @step="onClubInfoFormStep"
          /></template>
          <!-- 设备认证表单 -->
          <template
            ><FormClubDevice
              v-if="step === 3"
              ref="clubDeviceForm"
              @step="onclubDeviceFormStep"
          /></template>
        </keep-alive>
      </div>
      <!-- 机构已认证 || 机构认证中 -->
      <!-- <template>
        <div class="message">
          <div class="status-icon success"></div>
          <div class="status">机构已认证</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="step > 1"
        >
          上一步
        </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,
  },
  computed: {
    ...mapGetters([
      'supplierInfo',
      'authUserId',
      'routePrefix',
      'accessToken',
      'userInfo',
    ]),
  },
  data() {
    return {
      registerType: [3],
      step: 1,
      stepList: [
        {
          label: '账号注册',
          id: 1,
          recordRoute: '/record/club/detail',
        },
        {
          label: '机构认证',
          id: 2,
          recordRoute: '/record/club/detail',
        },
        {
          label: '设备认证',
          id: 3,
          recordRoute: '/record/device',
        },
      ],
      clubUserInfo: {},
      authInfo: {},
      productInfo: {},

      authId: '',
      clubUserId: '',

      tipObj: {},
    }
  },
  created() {
    this.initForm()
  },
  methods: {
    async onNextStep() {
      const validateAction = {
        1: this.$refs.userForm?.validate(),
        2: this.$refs.clubInfoForm?.validate(),
        3: this.$refs.clubDeviceForm?.validate(),
      }

      if (this.registerType.indexOf(this.step) > -1) {
        try {
          await validateAction[this.step]
        } catch (error) {
          console.log(error)
          return error
        }
      }
      if (this.step === 3) {
        this.onSubmit()
      }
      if (this.step < 3) {
        this.step++
      }
    },
    onPrevStep() {
      if (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)
      } catch (error) {
        console.log(error)
      }
    },

    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() {
      const step = this.stepList.find((item) => item.id === this.step)
      this.$router.push(`${this.routePrefix + step.recordRoute}`)
    },

    // 初始化表单
    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.checkouClubInfo()
      }
    },

    // 判断用户手机号是否绑定机构
    async checkouClubInfo() {
      try {
        const res = await this.$http.api.checkouMobileBindClub({
          authUserId: this.authUserId,
          mobile: this.userInfo.mobile,
        })
        if (!res.data.clubUser) {
          this.registerType.push(1)
        }
        if (!res.data.auth) {
          this.registerType.push(2)
        }
        return Promise.resolve(res)
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    },

    hasClubInfo() {
      return false
    },

    // 机构注册提示
    generateRegisterTip() {},
  },
}
</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>