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;">
								<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">
										<input type="file" @change="uploadImg()" class="c-vam c-inline-block type-hide pl105" accept="image/jpg,image/jpeg,image/png"><span class="changeImg">修改头像</span></div>
								</div>
								<div class="w3-row mt50">
									<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">
									</div>
								</div>
								<div class="w3-row">
									<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">
									<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">
									</div>
								</div>
								<div class="w3-row mt25">
									<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">
									</div>
								</div>
								<div class="w3-row mt25">
									<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">
									</div>
								</div>
								<div class="w3-row mt25">
									<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">
									</div>
								</div>
								<div class="w3-row mt25">
									<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"><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">
										<div class="dropdown">
											<a id="addressLabel" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
												<input id="addrcode" placeholder="请选择家庭住址" type="text" class="form-control" name="addrcode" :value="address"><span class="caret selcaret"></span>
											</a>
											<selsect-address :userinfo="userinfo"></selsect-address>
										</div>
										<textarea class="form-control mt10"  v-model="userinfo.street"></textarea>
									</div>
								</div>
								<div class="c-t-center ">
									<button type="submit" class="btn btn-theme c-f16 mtb30" style="width:144px;" >保 存</button>
								</div>
							</form>
							<select-industry :industryid="industryid" :directionid="directionid" ref="getIndustry"></select-industry>
						</div>
					</div>
				</div>
			</div>`,
		props: [],
		data: function() {
			return {
				userinfo: {
					areaId: 330902,
					areaName: "定海区",
					cityId: 330900,
					cityName: "舟山市",
					demographicId: "362321199703137824",
					gender: "1",
					id: "0dae00035ab8be56319e6d2e0f183443",
					idCardNo: "362321199703137824",
					imgLocalPath: "",
					imgRemotePath: "http://172.19.103.52:80/group1/M00/1F/68/rBFuWFrPC4WAEdQxAAANa_JH8v8564.jpg",
					micard: "D95398393",
					profession: "网站/APP",
					provinceId: 330000,
					provinceName: "浙江省",
					realName: "柯诗莹",
					ssid: "D111111113",
					street: "33311513街道打  软件园二期望海路55号之一健康之路",
					telephone: "18950186666",
					userType: "GovEmployee",
				},
				code: "info",
				industryid: -1,
				directionid: -1,
				industryname: "",
				directionname: "",
				address: '',
				defaultImg:"../../../images/moren_touxiang_img.png",
			}
		},
		mounted: function() {
			var vm = this
			vm.address=vm.userinfo.provinceName+"/"+vm.userinfo.cityName+"/"+vm.userinfo.areaName
			$('.dropdown-toggle').dropdown()
			$('#selindustry').on('hidden.bs.modal', function(e) {
				vm.getNewIndustry()
			})
		},
		methods: {
			getNewIndustry: function() {
				var vm = this
				var aaa = vm.$refs.getIndustry.industryname
				var bbb = vm.$refs.getIndustry.directionname
				if(aaa != "") {
					vm.industryname = aaa
					vm.industryid = vm.$refs.getIndustry.industryid
				}
				if(bbb != "") {
					vm.directionname = bbb
					vm.directionid = vm.$refs.getIndustry.directionid
				}
				if(vm.industryname == "请选择行业") {
					$("#industry").val("")
				} else {
					$("#industry").val(vm.industryname + ">" + vm.directionname)
				}
			},

			update: function() {
				if(!this.value) {
					mui.toast(this.keyName + "不能为空！");
					return
				} else if(this.userinfo.key == 'idCardNo' && !this.isCardNo(this.value)) {
					mui.toast("请输入有效的身份证！");
					return
				} else if(this.userinfo.key == 'micard' && !this.validSSC(this.value)) {
					mui.toast("请填写有效的医保卡卡号");
					return
				} else if(this.userinfo.key == 'ssid' && !this.validNumWord(this.value)) {
					mui.toast("请填写有效的社保卡号");
					return
				}
				this.userinfo.userinfo[this.userinfo.key] = this.value;
				mineAPI.userinforUpdate(this.userinfo.userinfo).then(function(res) {
					mui.toast("修改成功");
					app.reloadView('user-infor', "./user-infor.html");
				}).catch(function() {
					mui.toast("修改失败！");
				})
			},
			isCardNo: function(card) {
				// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
				var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				return reg.test(card)
			}, // 校验医保卡号格式
			validSSC: function(ssc) {
				var sscReg = /^([a-zA-Z]{1}[a-zA-Z0-9]{8}|[0-9]{12})$/;
				return sscReg.test(ssc);
			},
			validNumWord: function(ssc) {
				var sscReg = /^[0-9a-zA-Z]+$/;
				return sscReg.test(ssc);
			}
		},
	})

})()