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