medicine-xcx/pagesB/nameAuthentication/drugUserAuthentication.vue

<template>
	<view class="drug-user-authentication position-relative">
		<view class="drug-user-authentication-item m-b-40">
			<view class="drug-user-authentication-title font-32 text-black m-b-20 font-weight-bold">用药人信息</view>
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="20%" label="姓名" prop="name"><u-input v-model="form.name" input-align="right" placeholder="请输入姓名" /></u-form-item>
				<u-form-item label-width="20%" label="出生日期" prop="time">
					<view @click="assignModalShow('timeShow')">
						<u-input v-model="form.time" disabled placeholder="请选择出生日期" input-align="right" @click="assignModalShow('timeShow')"/>
					</view>
				</u-form-item>
				<u-form-item label-width="20%" label="性别" prop="sex">
					<view  @click="assignModalShow('sexShow')" >
						<u-input v-model="form.sex" disabled placeholder="请选择性别" input-align="right" @click="assignModalShow('sexShow')"/>
					</view>
				</u-form-item>
				<u-form-item label-width="20%" label="身份证" prop="idCard"><u-input v-model="form.idCard" input-align="right" placeholder="请输入身份证号码" /></u-form-item>
				<u-form-item label-width="20%" label="身高" prop="height">
					<view class="flex align-center">
						<u-input class="flex-1" type="number" v-model="form.height" input-align="right" placeholder="请输入身高" />
						<text class="font-30 text-black m-l-20">CM</text>
					</view>
				</u-form-item>
				<u-form-item label-width="20%" label="体重" prop="weight">
					<view class="flex align-center">
						<u-input class="flex-1" type="number" v-model="form.weight" input-align="right" placeholder="请输入体重" />
						<text class="font-30 text-black m-l-20">KG</text>
					</view>
				</u-form-item>
				<u-form-item label-width="20%" label="手机号码" type="number" prop="phone"><u-input v-model="form.phone" input-align="right" placeholder="请输入手机号码" /></u-form-item>
			</u-form>
		</view>
		
		<view class="drug-user-authentication-item flex align-center">
			<view class="font-32 text-black m-r-15 font-weight-bold">关系标签</view>
			<view class="flex align-center">
				<u-tag 
					v-for="(item, index) in tagList" 
					:key="index" 
					:text="item" 
					mode="dark" 
					class="m-r-20"
					:mode="index === tagCurrent ? 'dark' : 'plain'"
					:type="index === tagCurrent ? 'primary' : 'info'"
					@click="tagClick(item, index)"
				></u-tag>
			</view>
		</view>
		<view class="drug-user-authentication-footer position-fixed flex align-center justify-center">
			<u-button type="primary" shape="circle" @click="preserve">保存并使用</u-button>
		</view>

		<u-picker mode="time" v-model="timeShow" @confirm="timeConfirm" confirm-color="#01AEEA" zIndex="999999999"></u-picker>
		<u-select v-model="sexShow" :list="sexList" @confirm="sexConfirm" confirm-color="#01AEEA"></u-select>
	</view>
</template>

<script>
const sexList = [
	{
		value: '1',
		label: '男'
	},
	{
		value: '2',
		label: '女'
	}
];

const tagList = ['本人', '家庭成员', '亲戚', '朋友']
export default {
	data() {
		return {
			sexList,
			tagList,
			tagCurrent: null,
			form: {
				Id:'',
				name: '',
				sex: '',
				phone: '',
				height: '',
				weight: '',
				idCard: '',
				time: '',
				relationship: '',
				goodsIdDetails: '',
				goodsTypeText:''
			},
			timeShow: false,
			sexShow: false,
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名'
					},
					{
						validator: (rule, value, callback) => {
							let username = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,99}$/;
							return username.test(value);
						},
						message: '请输入正确格式的姓名',
						trigger: ['blur']
					}
				],
				idCard: [
					{
						required: true,
						message: '请输入身份证号码'
					},
					{
						message: '请输入正确格式的身份证号码',
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						}
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: ['change', 'blur']
					},
					{
						message: '请输入正确格式的手机号码',
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						}
					}
				],
				sex: [
					{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur']
					}
				],
				time: [
					{
						required: true,
						message: '请选择出生日期',
						trigger: ['change', 'blur']
					}
				],
				weight: [
					{
						required: true,
						message: '请输入体重',
						trigger: ['change', 'blur']
					}
				],
				height: [
					{
						required: true,
						message: '请输入身高',
						trigger: ['change', 'blur']
					}
				]
			},
			
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(options) {
		// 将传过来的商品信息存入form 中
		this.form.goodsId = options.goodsId;
		this.form.typeName = options.typeName;
		this.form.isSituation = options.isSituation;
		this.form.num = options.num;
		this.form.price = options.price;
		this.form.goodSkuParam = options.goodSkuParam;
		this.form.prescriptionId = options.prescriptionId;
		this.form.num = options.num;
		this.form.num = options.num;
		
		// this.form.goodsIdDetails = options.goodsId;
		this.form.goodsTypeText = options.type;
		if(options.Id) {
			this.getDrugUserById(options.Id);
		}
	},
	methods: {
		assignModalShow (key) {
			this[key] = true
		},
		timeConfirm(time) {
			let { year, month, day } = time;
			this.form.time = `${year}/${month}/${day}`;
		},
		// 修改信息查询
		getDrugUserById(id) {
			uni.showLoading();
			this.$api('getDrugUserById',{id}).then(res => {
				let { code, result, message} = res;
				 if(code == 200) {
					 const form = {
						 ...result,
						Id: id,
					 	name: result.name,
					 	sex: result.sex==1? '男': '女',
					 	phone: result.phone,
					 	height: result.height + '',
					 	weight: result.weight + '',
					 	idCard: result.cardId,
					 	time: result.birthday,
					 	relationship: result.labelValue,
					 	goodsIdDetails: '',
					 	goodsTypeText:'',
					 }
					 this.tagList.forEach((item,index) => {
						 if(item == result.labelValue) {
							  this.tagCurrent = index
						 }
					 });
					 uni.hideLoading();
					 this.form = { ...this.form,...form}
					 console.log(result)
				 }else {
					 uni.hideLoading();
					 this.$Toast(message)
				 }
			}).catch(err => {
				uni.hideLoading();
				this.$Toast(err.message)
			})
		},
		sexConfirm(arr) {
			this.form.sex = arr[0].label
		},
		preserve() {
			console.log(this.form)
			this.$refs.uForm.validate(valid => {
				console.log(valid)
				if (valid) {
					console.log(valid)
					if (!this.form.relationship) return this.$Toast('请选择关系')
					const form = JSON.stringify(this.form);
					this.$tools.navigateTo({
						url: '/pagesB/nameAuthentication/uploadPapers?form='+form
					})
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		},
		tagClick(item, index) {
			this.form.relationship = item
			this.tagCurrent = index
		}
	}
};
</script>

<style lang="scss" scoped>
	/deep/ .u-tag {
		display: block !important; 
		width: initial !important;
		font-size: 30rpx !important;
		padding: 12rpx !important;
	}
	/deep/ .u-input__input{
		font-size: 32rpx !important;
	}
	/deep/.u-form-item--left__content__label {
		width: 140rpx !important;
		font-size: 32rpx;
	}
	/deep/ input{
		font-size: 32rpx;
	}

.drug-user-authentication {
	padding: 20rpx 20rpx 140rpx;
	&-footer {
		z-index: 1;
		height: 120rpx;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		/deep/.u-btn {
			width: 660rpx;
			height: 80rpx;
		}
	}
	
	&-item {
		background: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0px 3rpx 6rpx 0px rgba(0,0,0,0.16);
		 padding: 20rpx 40rpx;
	}
}
</style>