mz/pages/userinfo/patient.vue

<template>
	<view class="content">
		<view class="content_box">
			<view class="row b-b">
				<text class="tit">姓名</text>
				<input class="input" type="text" v-model="name" placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="row b-b" @tap="handleTap1('picker2')">
				<text class="tit">性别</text>
				<input class="input" type="text" disabled="disabled" v-model="gender" placeholder="请选择性别" placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker2" mode="selector" :list="genderList" @change="handleChange1" @confirm="handleConfirm1" @cancel="handleCancel"></lb-picker>
			<view class="row b-b">
				<text class="tit">联系方式</text>
				<input class="input" type="text" v-model="mobile" placeholder="请输入联系方式" placeholder-class="placeholder" />
			</view>
			<view class="row b-b" @tap="showPicker('region')">
				<text class="tit">省市区</text>
				<input class="input" disabled="disabled" v-model="addr" />
			</view>
			<view class="row b-b" @tap="Toshow">
				<text class="tit">医院名称</text>
				<input class="input" type="text" disabled="disabled" v-model="hospital" placeholder="请选择医院名称" placeholder-class="placeholder" />
			</view>
			<zhilin-picker
				v-model="show"
				:title="title"
				:data="list"
				:initSelected="initSelected"
				:showSearch="true"
				@change="onChange"
				@searchInput="onSearchInput"
				@confirm="onConfirm1"
			/>
		</view>
		<view class="add-btn" @click="confirm">修改资料</view>
		<w-picker mode="region" :value="defaultRegion" default-type="value" @confirm="onConfirm($event, 'region')" @cancel="handleCancel" ref="region"></w-picker>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import wPicker from '@/components/w-picker/w-picker.vue';
import LbPicker from '@/components/lb-picker/index.vue';
import { upload, getHospitalList, setPatient } from '@/api/index.js';
import zhilinPicker from '@/components/zhilin-picker/zhilin-picker.vue';
import { getUserInfo } from '@/api/login.js';
export default {
	components: {
		uniList,
		uniListItem,
		wPicker,
		LbPicker,
		zhilinPicker
	},
	data() {
		return {
			result: {
				result: ''
			},
			defaultRegion: [],
			defaultRegion1: [],
			options: [],
			ext_info: [], //病人信息
			region: '',
			checked: '',
			name: '', //姓名
			gender: '', //性别
			gender_id: '', //性别id
			genderList: [
				{
					id: 1,
					name: '男'
				},
				{
					id: 2,
					name: '女'
				},
				{
					id: 0,
					name: '其他'
				}
			],
			mobile: '', //联系方式
			addr: '', //省市区
			code: '', //省市区行政编码
			province: '',
			province_id: '',
			city: '',
			city_id: '',
			district: '',
			district_id: '',
			list: [], //医院列表
			show: false,
			initSelected: [],
			title: '选择医院',
			hospital: '', //医院
			hospital_id: '', //医院id
			searchVal: ''
		};
	},
	onShow() {
		let obj = this;
		obj.ext_info = obj.userInfo.ext_info;
		console.log(obj.ext_info);
		obj.province = obj.ext_info.province;
		obj.city = obj.ext_info.city;
		obj.district = obj.ext_info.district;
		obj.province_id = obj.ext_info.province_id;
		obj.city_id = obj.ext_info.city_id;
		obj.district_id = obj.ext_info.district_id;
		obj.addr = obj.province + obj.city + obj.district;
		obj.name = obj.ext_info.name;
		obj.gender_id = obj.ext_info.gender;
		if (obj.ext_info.gender == 1) {
			obj.gender = '男';
		}
		if (obj.ext_info.gender == 2) {
			obj.gender = '女';
		}
		if (obj.ext_info.gender == 0) {
			obj.gender = '其他';
		}
		obj.mobile = obj.ext_info.mobile;
		obj.hospital = obj.ext_info.hospital_name;
		obj.hospital_id = obj.ext_info.hospital;
		obj.ListDate();
	},
	computed: {
		...mapState(['userInfo'])
	},
	watch: {
		searchVal() {
			console.log(222);
			this.ListDate();
		}
	},
	methods: {
		...mapMutations(['setUserInfo']),
		//选择身份后更新用户信息
		//提交
		confirm() {
			let obj = this;
			setPatient({
				name: obj.name,
				mobile: obj.mobile,
				province: obj.province,
				province_id: obj.province_id,
				city: obj.city,
				city_id: obj.city_id,
				district: obj.district,
				district_id: obj.district_id,
				hospital: obj.hospital_id,
				gender: obj.gender_id
			})
				.then(function(e) {
					//注册病人完成后更新用户信息
					obj.$api.msg(e.msg);
					obj.GetUser();
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/user/user'
						});
					}, 500);
				})
				.catch(e => {
					console.log(e);
				});
		},
		GetUser() {
			let obj = this;
			getUserInfo({})
				.then(function(e) {
					obj.setUserInfo(e.data);
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		showPicker(type) {
			this.$refs[type].show();
		},
		onConfirm(res, type) {
			let obj = this;
			obj.result = res;
			console.log(res, 'res');
			obj.addr = res.result;
			if (res.name) {
				obj.province = res.name[0];
				obj.city = res.name[1];
				obj.district = res.name[2];
			} else {
				obj.province = '北京市';
				obj.city = '北京市';
				obj.district = '东城区';
			}
			obj.province_id = res.value[0];
			obj.city_id = res.value[1];
			obj.district_id = res.value[2];
			obj.hospital = ''; //重置医院
			obj.ListDate();
		},
		//医院
		Toshow() {
			this.show = true;
		},
		onChange(val) {
			let obj = this;
			console.log(val, 'onChange');
			let arr = val.split(',');
			obj.hospital = arr[1];
			obj.hospital_id = arr[0];
			obj.city = arr[2];
			obj.city_id = arr[3];
			obj.district = arr[4];
			obj.district_id = arr[5];
			obj.province = arr[6];
			obj.province_id = arr[7];
			obj.addr = obj.province + obj.city + obj.district;
			console.log(obj.hospital, obj.hospital_id);
			console.log(obj.city, obj.city_id);
			console.log(obj.district, obj.district_id);
			console.log(obj.province, obj.province_id);
		},
		onConfirm1(val) {},
		onSearchInput(val) {
			console.log('val223', val);
			this.searchVal = val;
		},
		//选中机构
		ListDate() {
			let obj = this;
			let data = '';
			console.log(33, obj.searchVal);
			if (!obj.searchVal) {
				data = {
					keyword: '',
					province_id: obj.province_id,
					city_id: obj.city_id,
					district_id: obj.district_id,
					sort: 'id desc',
					page: 1,
					limit: 1500
				};
			} else {
				data = {
					keyword: obj.searchVal,
					sort: 'id desc',
					page: 1,
					limit: 1500
				};
			}
			getHospitalList(data)
				.then(e => {
					obj.list = e.data.list;
				})
				.catch(e => {
					console.log(e);
				});
		},
		handleCancel() {},
		//性别选择
		handleTap1(name) {
			this.$refs[name].show();
		},
		//性别选择
		handleChange1(item) {},
		//性别选择
		handleConfirm1(item) {
			let obj = this;
			obj.gender = item.item.name;
			obj.gender_id = item.item.id;
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	height: 100%;
	.content {
		height: 100%;
		padding-top: 25rpx;
	}
}
.content_box {
	background-color: #ffffff;
	width: 92%;
	border-radius: 15rpx;
	margin: 0rpx auto;
	.examine_list {
		width: 100%;
		border-bottom: 2rpx solid #f0f0f0;
		.textarea-box {
			width: 95%;
			margin: 25rpx auto;
			.textarea {
				width: 100%;
				font-size: 28rpx;
				min-height: 150rpx;
			}
		}
	}
}
.row {
	display: flex;
	align-items: center;
	// position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;
	border-bottom: 1rpx solid #f8f6f6;

	.tit {
		flex-shrink: 0;
		width: 180rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.examine_name {
	color: #171717;
	font-size: 28rpx;
	padding: 25rpx 25rpx;
}
.examine_img {
	width: 100%;
	text-align: center;
	padding-bottom: 25rpx;
}
.examine_img image {
	width: 200rpx;
	height: 200rpx;
}
.default-row {
	margin-top: 16rpx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16rpx) scale(0.9);
	}
}
.add-btn {
	position: fixed;
	bottom: 0rpx;
	width: 100%;
	height: 100rpx;
	font-size: $font-lg;
	color: #fff;
	background-color: #6786fb;
	line-height: 100rpx;
	text-align: center;
}
.img_box {
	padding: 35rpx 35rpx;
	width: 250rpx;
	height: 250rpx;
}
.img_box image {
	width: 100%;
	height: 100%;
}
.alert-box {
	background-color: #ffffff;
}
.b-b:after {
	position: relative !important;
}
.check_box {
	padding: 25rpx 25rpx;
	font-size: 20rpx;
	padding-bottom: 150rpx;
	text {
		color: #6786fb;
	}
}
</style>