wiki_enterprise_js/pages/basic-info/basic-info.vue

<template>
  <view>
    <form class="padding-lr cu-form-group flex-direction">
      <view class="cu-form-group flex flex-direction padding-tb">
        <view class="title padding-bottom-sm">
          <span class="text-red padding-right-xs" v-show="!(userInfo && userInfo.id)">*</span>姓名
        </view>
        <input
          :disabled="(userInfo && userInfo.id) ? true : false"
          name="input"
          placeholder="请输入真实姓名"
          type="text"
          v-model="name"
        />
      </view>
      <view class="cu-form-group flex flex-direction padding-tb">
        <view class="title padding-bottom-sm">
          <span class="text-red padding-right-xs" v-show="!(userInfo && userInfo.id)">*</span>身份证
        </view>
        <input
          :disabled="(userInfo && userInfo.id) ? true : false"
          name="input"
          placeholder="请输入身份证号"
          type="text"
          v-model="idCard"
        />
      </view>
      <view class="cu-form-group flex flex-direction padding-tb">
        <view class="title padding-bottom-sm">
          <span class="text-red padding-right-xs" v-show="!(userInfo && userInfo.id)">*</span>联系方式
        </view>
        <input
          :disabled="(userInfo && userInfo.id) ? true : false"
          name="input"
          placeholder="请输入手机号码"
          type="number"
          v-model="phone"
        />
      </view>
      <view class="cu-form-group flex flex-direction padding-tb">
        <view class="title padding-bottom-sm">
          <span class="text-red padding-right-xs" v-show="!(userInfo && userInfo.id)">*</span>身份
        </view>
        <radio-group @change="RadioChange" class="block" v-if="!(userInfo && userInfo.id)">
          <view class="flex">
            <view :key="index" class="flex-sub margin-tb-sm" v-for="(identity,index) in identitys">
              <label class="flex justify-between align-center">
                <radio
                  :checked="index === current"
                  :value="identity.value"
                  class="round margin-right-xs"
                ></radio>
                <text class="flex-sub" style="font-size: 34rpx;">{{ identity.name }}</text>
              </label>
            </view>
          </view>
        </radio-group>
        <input
          :value="current === 0 ? '学生' : current === 1 ? '教师' : '工作人员'"
          disabled
          name="input"
          type="text"
          v-else
        />
      </view>
      <view class="cu-form-group flex flex-direction padding-tb" v-show="current === 0">
        <view class="title padding-bottom-sm">
		  学号
        </view>
        <input
          :disabled="(userInfo && userInfo.id) ? true : false"
          name="input"
          placeholder="请输入学号"
          type="text"
          v-model="studentID"
        />
      </view>
    </form>
    <user-agreement v-if="!(userInfo && userInfo.id)" @changeIntentions="changeIntentions"></user-agreement>
    <button
      @tap="handleSubmitUserInfo"
      class="bg-cyan margin primary-btn"
      hover-class="cc-active"
      v-show="!(userInfo && userInfo.id)"
    >确认提交</button>
  </view>
</template>

<script>
import { showToast } from 'common/script/util';
import { SUBMIT_USER_INFO } from 'api/api';
import { mapState, mapMutations } from 'vuex';

export default {
  data() {
    return {
      name: '',
      idCard: '',
      phone: '',
      identitys: [
        {
          value: '0',
          name: '学生',
        },
        {
          value: '1',
          name: '教师',
        },
        {
          value: '2',
          name: '工作人员',
        },
      ],
      studentID: '',
      current: 0,
      agree: false,
    };
  },

  created() {
    if (this.userInfo) {
      this.name = this.userInfo.name;
      this.idCard = this.userInfo.idCard;
      this.phone = this.userInfo.phone;
      this.studentID = this.userInfo.no;
      this.current = this.userInfo.post;
    }
  },

  computed: mapState('user', ['userInfo', 'pagePath']),

  methods: {
    ...mapMutations('user', ['setUserInfo']),
    RadioChange: function(evt) {
      for (let i = 0; i < this.identitys.length; i++) {
        if (this.identitys[i].value === evt.target.value) {
          this.current = i;
          break;
        }
      }
    },

    changeIntentions(data) {
      this.agree = data;
    },
	
    /**
     * 提交基本信息
     */
    async handleSubmitUserInfo() {
      try {
        if (!this.checkRules()) return;

        const { name, idCard, phone, studentID, current, pagePath } = this;
        const params = {
          param: {
            idCard,
            name,
            no: studentID,
            phone,
            post: current,
          },
        };

        const res = await this.$http.post(SUBMIT_USER_INFO, params);
        const { success, code, msg, data } = res.data;
        if (success && code === 200) {
		  uni.showToast({
		      title: '基本信息提交成功',
		      duration: 2000
		  });
          this.success = true;
          this.setUserInfo(data);
		  if(pagePath === '/pages/basic-info/basic-info'){
			  uni.reLaunch({
			  	url: `/pages/index/index`,
			  });
		  }else{
			this.openPage(pagePath);
		  }
        } else {
          uni.showToast({
            title: msg || '基本信息提交失败',
            icon: 'none',
          });
        }
      } catch (error) {
        console.log('error: ', error);
        if (error.msg) {
          uni.showToast({
            title: error.msg || '基本信息提交失败',
            icon: 'none',
          });
        }
      }
    },

    // 验证信息
    checkRules() {
      const { name, idCard, phone, identitys, agree } = this;
      if (!name) {
        showToast('请输入姓名');
        return;
      }
      if (!this.verifyIdCard(idCard)) {
        showToast('请输入正确的身份证号');
        return;
      }
      if (!this.verifyPhone(phone)) {
        showToast('请输入正确的手机号');
        return false;
      }
      if (!identitys) {
        showToast('请选择身份');
        return;
      }
      if (!agree) {
        showToast('请选择是否同意《用户服务协议》和《隐私政策》');
        return;
      }
      return true;
    },

    /**
     * 验证手机号格式
     * @param {string} phone 手机号
     */
    verifyPhone(phone) {
      const phoneExg = /^1\d{10}$/;
      return phoneExg.test(phone);
    },

    /**
     * 验证身份证号格式
     * @param {string} idCard 身份证号
     */
    verifyIdCard(idCard) {
      const idCardExg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      return idCardExg.test(idCard);
    },
  },
};
</script>

<style lang="scss" scoped>
.primary-btn {
  border-radius: 15rpx;
}
</style>