sr-publicServicePlatform/component/mine/personal-info.js

(function() {
	Vue.component('personal-info', {
		template: `<div class="container ptb20 ">
				<div class="row w3-row">
					<left-menu :code="code"></left-menu>
					<div class="pl251">
						<div class="bgc-fff c-border ptb30">
							<form class="mainbox" id="form" role="form" onsubmit="return false;" enctype="multipart/form-data" id="newInterfaceForm">
								<div class="c-t-center mb10">
									<img :src="userinfo.imgRemotePath || defaultImg" class="img-circle" width="100" height="100" id="personalImg" />
									<div class="c-f14 c-909090 pt15">
										<span>修改头像</span>
										<input type="file" @change="uploadImg($event)" class="c-vam c-inline-block type-hide pl105" accept="image/jpg,image/jpeg,image/png" style="height:150px;margin-top:-150px;"></div>
								</div>
								<div class="w3-row mt50 form-group" style="height: 40px;">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">姓&emsp;&emsp;名</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control" v-model="userinfo.realName" name="realName">
									</div>
								</div>
								<div class="w3-row form-group">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">性&emsp;&emsp;别</div>
									<div class="w3-rest pl15 c-f14">
										<input type="radio" name="gender"  value="0" v-model="userinfo.gender">&emsp;男&emsp;
										<input type="radio" name="gender"  value="1" v-model="userinfo.gender">&emsp;女
									</div>
								</div>
								<div class="w3-row  mt25 form-group">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">手机号码</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control" v-model="userinfo.telephone" name="telephone">
									</div>
								</div>
								<div class="w3-row mt25 form-group">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">身份证号</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control" v-model="userinfo.idCardNo" name="idCardNo">
									</div>
								</div>
								<div class="w3-row mt25 form-group">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">社保卡号</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control" v-model="userinfo.ssid" name="ssid">
									</div>
								</div>
								<div class="w3-row mt25 form-group">
									<div class="w3-col c-f16 m5 c-t-right" style="width:80px;">医疗保险号</div>
									<div class="w3-rest pl15">
										<input type="text" class="form-control" v-model="userinfo.micard" name="micard">
									</div>
								</div>
								<div class="w3-row mt25 form-group">
									<div class="w3-col c-323232 c-f16 m5 c-t-right" style="width:80px;">行&emsp;&emsp;业</div>
									<div class="pl105" data-toggle="modal" data-target="#selindustry">
										<input id="industry" placeholder="请选择行业" type="text" class="form-control" name="industry"  v-model="userinfo.profession" name="profession"><span class="caret selcaret"></span>
									</div>
								</div>
								<div class="w3-row mt25">
									<div class="w3-col c-323232 c-f16 m5 c-t-right" style="width:80px;">家庭住址</div>
									<div class="pl105">										
											<selsect-address ref="getAddress"></selsect-address>
										<textarea class="form-control mt10 form-group"  v-model="userinfo.street" name="street"></textarea>
									</div>
								</div>
								<div class="c-t-center ">
									<button type="submit" class="btn btn-theme c-f16 mtb30" style="width:144px;" @click="update()">保 存</button>
								</div>
							</form>
							<select-industry ref="getIndustry"></select-industry>
						</div>
					</div>
				</div>
			</div>`,
		props: [],
		data: function() {
			return {
				userinfo: {},
				code: "info",
				address: '',
				defaultImg: "../../../images/moren_touxiang_img.png",
			}
		},
		mounted: function() {
			var vm = this
			vm.initinfo()
			$('#selindustry').on('hidden.bs.modal', function(e) {
				vm.getNewIndustry()
			})
		},
		methods: {
			initinfo: function() {
				var vm = this;
				var loginInfo = JSON.parse(sessionStorage.getItem("oauthInfo"));
				var data1 = {
					userName: loginInfo.user,
					token: loginInfo.accessToken
				}
				loginAPI.getUserInfo(data1).then(function(res) {
					vm.userinfo = res
				})
			},
			getNewAddress: function() {
				var vm = this
				vm.userinfo.provinceId = vm.$refs.getAddress.provinceid
				vm.userinfo.cityId = vm.$refs.getAddress.cityid
				vm.userinfo.areaId = vm.$refs.getAddress.countyid				
				vm.userinfo.provinceName = vm.$refs.getAddress.provincename
				vm.userinfo.cityName = vm.$refs.getAddress.cityname
				vm.userinfo.areaName = vm.$refs.getAddress.countyname
			},
			getNewIndustry: function() {
				var vm = this
				var aaa = vm.$refs.getIndustry.industryname
				var bbb = vm.$refs.getIndustry.directionname
				if(bbb != "请选择方向") {
					vm.userinfo.profession = bbb
				} else if(aaa != "请选择行业") {
					vm.userinfo.profession = aaa
				}
			},
			uploadImg: function(e) {
				var file = {},
					vm = this
				file = e.target.files[0]
				if(file.size > 5 * 1024 * 1024) {
					alert("图片大小格式超出5M范围不可用")
					return false
				}
				var formData = new FormData()
				formData.append('file', file)
				var param = {
					files: formData,
					creator: vm.userinfo.id,
					objectId: 'EHR',
				}
				fileAPI.uploadImg(param).then(function(reslove) {
					vm.userinfo.imgRemotePath = reslove.obj.httpUrl //上传到图片服务器成功则修改个人资料					
				}, function(err) {
					alert("选择图片失败");
				})
			},
			update: function() {
				var vm = this
				var flag = $("#newInterfaceForm").valid();
				if(!flag) {
					//没有通过验证
					return;
				}
				vm.getNewAddress()
				mineAPI.userInforUpdate(vm.userinfo).then(function (res) {
                    alert("修改成功!")
                }).catch(function(){
                    alert("修改失败!")
                })
			},
			
		},
	})

})()