check-work/src/components/User/MechanismSignUp.vue

<template>
  <div>
    <!-- 机构注册 -->
    <a-row class="d-flex flex-nowrap mt-4 pb-10" type="flex">
      <a-col :span="8" class="explain" flex="auto">
        <a-form :form="form" @submit="handleSignUp">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            help="支持中文、字母、数字、“_”的组合且不能为纯数字，4-20位字符"
            label="登录用户名"
            required
          >
            <a-input v-decorator="['account']" />
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="单位性质"
            required
          >
            <a-select placeholder="请选择单位性质" v-decorator="['nature']">
              <a-select-option value="1">高校</a-select-option>
              <a-select-option value="2">初中</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            help="不能超过100个字符"
            label="机构全称"
            required
          >
            <a-input v-decorator="['fullName']" />
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            help="统一社会信用代码、组织机构代码由字母和数字组成，分别为18/9位字符"
            label="统一社会信用代码或组织机构代码"
            required
          >
            <a-input v-decorator="['code1']" />
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="登录密码"
            required
          >
            <a-input-password
              placeholder="密码由字母和数字混合组成，6-16位字符"
              v-decorator="['password', { rules: passwordRules }]"
            />
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="确认密码"
          >
            <a-input-password
              placeholder="请再次输入您设置的密码"
              v-decorator="['againCredential', { rules: againPassword }]"
            />
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="手机"
          >
            <a-input
              @change="changePhone"
              placeholder="该手机号用于账号激活、登录及找回密码"
              type="number"
              v-decorator="['phone', { rules: phoneRules }]"
            />
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="图片验证码"
            required
          >
            <div class="d-flex flex-nowrap">
              <a-input placeholder="请输入图片验证码" type="number" v-model="codeNum" />
              <img
                :src="picCode.imageBase64"
                @click="changePicCode"
                class="code_img ml-2"
                v-if="picCode && picCode.imageBase64"
              />
              <a-button
                @click="changePicCode"
                class="code_img ml-2"
                size="small"
                type="primary"
                v-else
              >重新获取</a-button>
            </div>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="短信验证码"
            required
          >
            <div class="d-flex flex-nowrap">
              <a-input
                placeholder="请输入验证码"
                type="number"
                v-decorator="['smsCode', { rules: codeRules }]"
              />
              <a-button class="ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button>
              <a-button
                :disabled="phone && phone.length !== 11"
                @click="getCode"
                class="ml-2"
                type="primary"
                v-else
              >获取验证码</a-button>
            </div>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="来源"
          >
            <a-select placeholder="请选择来源" v-decorator="['source', {initialValue: source }]">
              <a-select-option value="1">绿谷</a-select-option>
            </a-select>
          </a-form-item>
          <div class="d-flex flex-row-reverse">
            <a-button block class="my-5" html-type="submit" style="width: 75%" type="primary">立即注册</a-button>
          </div>
        </a-form>
        <div class="d-flex flex-row-reverse mt-1">
          <div class="d-flex flex-wrap" style="width: 75%">
            <div class="flex-1"></div>
            <router-link tag="span" to="/login">
              <span class="baseColor">已有账号，去登录</span>
            </router-link>
          </div>
        </div>
      </a-col>
      <a-col :span="4" flex="150px">
        <div class="d-flex flex-column">
          <div>说明</div>
          <div>1. 注册后即可登录，部分功能需平台人员审核后才能使用。</div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import mixin from 'views/User/mixin';
import { saveUserMes } from '@/config/api';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
const formTailLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18, offset: 6 },
};

export default {
  name: 'MechanismSignUp',
  mixins: [mixin],
  data() {
    return {
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'mechanismSignUp' }),
      phone: '',
      codeNum: '',
      source: '1',
      info: null,
    };
  },

  computed: mapState('user', ['picCode']),

  created() {
    this.sendPicCode();
  },

  methods: {
    ...mapActions('user', ['signUp', 'sendCode', 'sendPicCode']),

    changePhone(e) {
      this.phone = e.target.value;
    },

    // 刷新验证码
    changePicCode() {
      this.sendPicCode();
    },

    // 获取验证码
    async getCode() {
      try {
        const params = {
          phone: this.form.getFieldValue('phone'),
          verificationCodeId: this.picCode.verificationCodeId,
          verificationCodeValue: this.codeNum,
        };
        await this.sendCode(params);
        this.getCodeInterval();
      } catch (error) {
        throw new Error(`mechanismSignUp.vue method getCode: ${error}`);
      }
    },

    // 注册
    async handleSignUp(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          try {
            const { account, nature, fullName, code1, password, phone, smsCode, source } = values;
            this.info = values;
            const params = { account, password, phone, smsCode, source };
            await this.signUp(params);
            this.saveUserMes();
          } catch (error) {
            console.log(`mechanismSignUp.vue methods handleSignUp: ${error}`);
          }
        }
      });
      return;
    },

    // 登陆人信息保存
    async saveUserMes() {
      try {
        const { account, nature, fullName, code1, password, phone, smsCode, source } = this.info;
        console.log('this.info: ', this.info);
        const params = { code: code1, companyName: fullName, mold: nature, name: account, nickname: '', phone, type: 2 };
        console.log('params: ', params);
        const res = await saveUserMes(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          // // 没有特殊情况就跳转到首页
          const { query } = this.$route;
          this.$router.replace({ path: '/', query });
        } else {
          message.error(msg || '注册失败');
          throw msg;
        }
      } catch (error) {
        console.log(`mechanismSignUp.vue methods saveUserMes: ${error}`);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.explain {
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid #EEEEEE;
}

.code_img {
  width: 102px !important;
  height: 32px !important;
}
</style>