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

        <div class="step-list py-4">
          <keep-alive>
            <!-- 账号注册表单 -->
            <template><FormClubRegister v-if="step === 0" /></template>
            <!-- 机构认证表单 -->
            <template><FormClubInfo v-if="step === 1" /></template>
            <!-- 设备认证表单 -->
            <template><FormClubDevice v-if="step === 2" /></template>
          </keep-alive>
        </div>
      </template>
      <!-- 机构已认证 || 机构认证中 -->
      <template v-else>
        <div class="message">
          <div class="status-icon danger"></div>
          <div class="status">机构已认证</div>
          <div class="tip">提示：可点击认证记录看查看详情</div>
        </div>
      </template>

      <!-- 操作 -->
      <div class="control flex flex-col items-center">
        <div
          class="button prev flex justify-center items-center mb-2"
          @click="onPrevStep"
          v-if="step > 0"
        >
          上一步
        </div>
        <div
          class="button next flex justify-center items-center"
          @click="onNextStep"
        >
          下一步
        </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']),
  },
  data() {
    return {
      step: 0,
      stepList: [
        {
          label: '账号注册',
          id: 0,
          recordRoute: '/record/club/detail',
        },
        {
          label: '机构认证',
          id: 1,
          recordRoute: '/record/club/detail',
        },
        {
          label: '设备认证',
          id: 2,
          recordRoute: '/record/device',
        },
      ],
    }
  },
  methods: {
    onNextStep() {
      if (this.step < this.stepList.length - 1) {
        this.step++
      }
    },
    onPrevStep() {
      if (this.step > 0) {
        this.step--
      }
    },
    toRecord() {
      const step = this.stepList.find((item) => item.id === this.step)
      this.$router.push(`${this.routePrefix + step.recordRoute}`)
    },
  },
}
</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>