登录、注册、我的（个人信息、安全设置、预约记录）页面搭建

component/login-register/login.js

@@ -0,0 +1,215 @@
(function() {
	Vue.component('login-form', {
		template: `<div><div id="head">
			<div class="hlogo ptb15">
				<img src="../../images/LOGO.png" />
				<span class="fr" style="margin-top:-5px;">
					<img src="../../images/qr_code.png" width="65" height="65" class="box-border" />
					<p class="c-f12 text-center"><b>下载APP</b></p>
				</span>
			</div>
		</div>
		<div class="mainbox">
			<div id="main">
				<img src="../../images/chahua.png" />
				<div id="loginForm" class="fr">
					<div class="tabs-container no-borders mtb30 plr30">
						<ul class="nav nav-tabs c-border-b">
							<li :class="{'active': type==1}" @click="changeType(1)">
								<a style="padding:10px 0px;margin-left:35px;margin-right: 35px;font-size: 20px;">密码登录</a>
							</li>
							<li :class="{'active': type==2}" @click="changeType(2)">
								<a style="padding:10px 0px;margin-left:25px;margin-right: 25px;font-size: 20px;">验证码登录</a>
							</li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane" :class="{'active': type==1}">
								<div class="panel-body  no-borders" style="padding: 0px;">
									<form id="form1" class="m-t" role="form" onsubmit="return false;">
										<div class="form-group">
											<input class="form-control" type="text"  v-model="account" placeholder="请输入身份证号或者手机号码">
										</div>
										<div class="form-group">
											<input class="form-control" v-model="password" placeholder="请输入密码">
										</div>
										<div class="text-right c-323232" style="margin-top:-10px;">忘记密码</div>
										<button type="submit" class="btn btn-theme block full-width m-b" @click="login">登 录</button>
										<a type="button" class="btn btn-default block full-width m-b" href="../register/register.html">注 册</a>
									</form>
								</div>
							</div>
							<div class="tab-pane" :class="{'active': type==2}">
								<div class="panel-body no-borders" style="padding: 0px;">
									<form id="form2" class="m-t" role="form" onsubmit="return false;">
										<div class="form-group">
											<input class="form-control" type="text" maxlength="11" v-model="mobile" placeholder="请输入手机号码">
										</div>
										<div class="form-group">
											<input class="form-control" type="text" v-model="imgcaptcha" placeholder="请输入图形验证码">
											<a class="getCaptcha" :class="{'disabled': countdown}" @click="getCaptcha">{{infoText}}</a>
										</div>
										<div class="form-group">
											<input class="form-control" type="text" v-model="captcha" placeholder="请输入短信验证码">
											<a class="getCaptcha" :class="{'disabled': countdown}" @click="getCaptcha">{{infoText}}</a>
										</div>
										<button type="submit" class="btn btn-theme block full-width m-b" @click="login">登 录</button>
										<a type="button" class="btn btn-default block full-width m-b" href="../register/register.html">注 册</a>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="foot">
			<p>主办方：上饶市卫生与计划生育委员会&nbsp;&nbsp;&nbsp;技术支持：健康之路（中国）信息技术有限公司&nbsp;&nbsp;&nbsp;备案号登记号：赣ICP98273877号-1</p>
			<p>上饶市卫生信息中心 Copyright&nbsp;<span class="glyphicon glyphicon-copyright-mark"></span>&nbsp;2009-2017 All Rights Reserved</p>
		</div>
		</div>`,
		props: [],
		data: function() {
			return {
				type: 1, //记录选择的登录方式，1-手机号登录，2-验证码登录
				account: '',
				mobile: '',
				password: '',
				imgcaptcha: '',
				captcha: '',
				infoText: '获取验证码',
				countdown: false //是否在倒计时
			}
		},
		methods: {
			changeType: function(val) {
				this.type = val;
			},
			getCaptcha: function() {
				//先校验手机号码是否正确
				var isMobile = isMobilePhone(this.mobile);
				if(!isMobile) {
					alert('请输入正确的手机号码！');
					return false;
				}
				setTimer(this);
				//发送请求
				//			sendToGetCaptcha(this);
			},
			login: function() {
				var vm = this
				if(this.type == 1) {
					if(!vm.account) {
						alert("账号不能为空！");
						return false;
					}
					if(!vm.password) {
						alert("登录密码不能为空！");
						return false;
					}
					// getPublicKey(this);
				} else {
					if(!vm.mobile) {
						alert("手机号不能为空！");
						return false;
					}
					if(!vm.imgcaptcha) {
						alert("图形验证码不能为空！");
						return false;
					}
					if(!vm.captcha) {
						alert("手机验证码不能为空！");
						return false;
					}
					//					login({
					//						mobile: this.mobile,
					//						captcha: this.captcha,
					//						platform: 4
					//					})
				}
			},
		}
	})
	//验证码定时
	function setTimer(vm) {
		var seconds = 59;
		vm.countdown = true;
		timer = setInterval(function() {
			if(seconds == 0) {
				clearInterval(timer);
				timer = null;
				seconds = 59;
				vm.infoText = "获取验证码";
				vm.countdown = false;
				return;
			}
			seconds--;
			vm.infoText = seconds + "s后重新获取";
		}, 1000)
	}
	function sendToGetCaptcha(vm) {
		var url = "common/captcha",
			params = {
				mobile: vm.mobile,
				type: 5,
				captchaToken: 5
			};
		httpRequest.post(url, {
			data: params
		}).then(function(res) {
			if(res.status == 200) {
				tip('发送成功', 'add');
			} else {
				tip('获取验证码失败');
			}
		});
	}
	function getPublicKey(vm) {
		var url = "login/public_key";
		httpRequest.post(url).then(function(res) {
			if(res.status) {
				var mod = res.data.modulus;
				var exp = res.data.exponent;
				key = RSAUtils.getKeyPair(exp, "", mod);
				if(key) {
					encryedPwd = RSAUtils.encryStr(key, vm.password);
					login({
						mobile: vm.mobile,
						password: encryedPwd,
						platform: 4
					})
				} else {
					tip("获取数据失败")
					$submit.removeAttr('disabled')
				}
			} else {
				tip(res.msg);
			}
		})
	}
	function login(data) {
		httpRequest.post('login/doctor', {
			data: data
		}).then(function(res) {
			if(res.status == 200) {
				var docInfo = res.data;
				localoginlStorage.setItem(httpRequest.agentName, JSON.stringify({
					id: docInfo.id,
					uid: docInfo.uid,
					token: docInfo.token,
					imei: localStorage.getItem('WLYY_IMEI'),
					platform: 4
				}));
				//将用户的角色信息单独存储在localstorage中
				localStorage.setItem("userRole", JSON.stringify(docInfo.userRole));
				window.location.href = "../home/html/index.html";
			} else {
				tip(res.msg);
			}
		});
	}
})()

component/login-register/register.js

@@ -0,0 +1,138 @@
(function() {
	Vue.component('register-form', {
		template: `<div><div id="head">
			<div class="hlogo ptb15">
				<img src="../../images/LOGO.png" />
				<span class="fr" style="margin-top:-5px;">
					<img src="../../images/qr_code.png" width="65" height="65" class="box-border" />
					<p class="c-f12 text-center"><b>下载APP</b></p>
				</span>
			</div>
		</div>
		<div class="mainbox">
			<div id="main">
				<img src="../../images/chahua.png" />
				<div id="registerForm" class="fr">
					<div class="ptb10 pl30 c-border-b c-f26">注册</div>
					<form id="form" class="m-t plr30" role="form" onsubmit="return false;">
						<div class="form-group">
							<select class="form-control" v-model="selected">
								<option value="IDCard" selected>身份证</option>
								<option value="phone">手机</option>
							</select>
						</div>
						<div class="form-group">
							<input class="form-control" type="text" maxlength="18" placeholder="请输入身份证号" v-model="IDCard" id="IDCard">
						</div>
						<div class="form-group">
							<input class="form-control" placeholder="请输入登录密码" v-model="Password" type="password" minlength="6" maxlength="16">
						</div>
						<div class="form-group">
							<input class="form-control" placeholder="请确认登录密码" v-model="confirmPassword" type="password" minlength="6" maxlength="16">
						</div>
						<p class="c-909090" style="margin-top:-10px;">密码格式为6-16位，不允许有空格</p>
						<div class="checkbox">
							<label><input type="checkbox"
  v-model="toggle"> 阅读并接受<a href="#" target="_blank">《健康之路用户协议》</a>及<a href="#" target="_blank">《健康之路隐私保护声明》</a></label>
						</div>
						<button type="submit" class="btn btn-theme block full-width m-b" @click="register">完成注册并登录</button>
					</form>
				</div>
			</div>
		</div>
		<div id="foot" class="row">
			<p>主办方：上饶市卫生与计划生育委员会&nbsp;&nbsp;&nbsp;技术支持：健康之路（中国）信息技术有限公司&nbsp;&nbsp;&nbsp;备案号登记号：赣ICP98273877号-1</p>
			<p>上饶市卫生信息中心 Copyright&nbsp;<span class="glyphicon glyphicon-copyright-mark"></span>&nbsp;2009-2017 All Rights Reserved</p>
		</div>
		</div>`,
		props: [],
		data: function() {
			return {
				IDCard: "",
				Password: "",
				confirmPassword: "",
				toggle: false,
				selected: "IDCard",
			}
		},
		methods: {
			register: function() {
				var vm = this
				if(!isCardNo(vm.IDCard, vm.selected)) {
					return
				}
				if(!vm.Password) {
					alert("登录密码不能为空！");
					return false;
				}
				if(!vm.confirmPassword) {
					alert("确认密码不能为空！");
					return false;
				}
				if(vm.Password.length < 6 && vm.Password.length > 16) {
					alert("登录密码需6-16位");
					return false;
				}
				if(vm.confirmPassword.length < 6 && vm.confirmPassword.length > 16) {
					alert("确认密码需6-16位");
					return false;
				}
				if(vm.Password != vm.confirmPassword) {
					alert("新密码和确认密码必须一致");
					return false;
				}
				if(!vm.toggle) {
					alert("未确认是否阅读并接受条款");
					return false;
				}
				location.href = "../login/login.html"
				//连接注册后台接口
			}
		},
		watch: {
			Password: function(newVal, oldVal) {
				var val = newVal.toString();
				var reg = /\s+/g; //去除空格
				if(reg.test(val)) {
					this.Password = oldVal;
				}
			},
			confirmPassword: function(newVal, oldVal) {
				var val = newVal.toString();
				var reg = /\s+/g; //去除空格
				if(reg.test(val)) {
					this.confirmPassword = oldVal;
				}
			},
			selected: function(newVal) {
				var val = newVal.toString();
				if(val == "IDCard") {
					$("#IDCard").attr("placeholder", "请输入身份证号")
				} else if(val == "phone") {
					$("#IDCard").attr("placeholder", "请输入手机号码")
				}
			}
		}
	});
	function isCardNo(card, selected) {
		var isidcard = false
		if(selected == "IDCard") { // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			if(reg.test(card) === false) {
				alert("身份证号输入不合法");
			} else {
				isidcard = true
			}
		} else if(selected == "phone") {
			var reg = /0?(13|14|15|18|17)[0-9]{9}/;
			if(reg.test(card) === false) {
				alert("手机号码输入不合法");
			} else {
				isidcard = true
			}
		}
		return isidcard
	}
})()

component/mine/change-password.js

@@ -0,0 +1,52 @@
(function() {
	Vue.component('change-password', {
		template: `<div id="password" class="pl30 hidden">
						<div class="pb10 c-border-b c-f20">
							修改密码
						</div>
						<form id="passwordForm" class="" onsubmit="return false">
							<div class="w3-row mt25 form-group">
								<div class="w3-col c-f16 m5 c-t-right c-909090" style="width:80px;">旧密码</div>
								<div class="w3-rest pl15">
									<input type="password" class="form-control" style="width:310px;" name="oldpassword" autocomplete="off">
								</div>
							</div>
							<div class="w3-row mt25 form-group">
								<div class="w3-col c-f16 m5 c-t-right c-909090" style="width:80px;">新密码</div>
								<div class="w3-rest pl15">
									<input type="password" class="form-control" style="width:310px;" name="newpassword" autocomplete="off">
								</div>
							</div>
							<div class="w3-row mt25 form-group">
								<div class="w3-col c-f16 m5 c-t-right c-909090" style="width:80px;">确认密码</div>
								<div class="w3-rest pl15">
									<input type="password" class="form-control" style="width:310px;" name="confirm_password" autocomplete="off">
								</div>
							</div>
							<div class="c-t-center mt50">
								<button type="submit" class="btn btn-theme c-f16" style="width:144px;height: 50px;" @click="changePassword()">确 定</button>
								<button type="button" class="btn btn-default c-f16 ml20" style="width:144px;height: 50px;" @click="gotosetting()">取 消</button>
							</div>
						</form>
					</div>`,
		props: [],
		data: function() {
			return {
				
			}
		},
		mounted: function() {
		},
		methods: {
			gotosetting: function() {
				$("#password").addClass("hidden")
				$("#security").removeClass("hidden")
			},
			changePassword:function(){
				
			}
		},
	})
})()

component/mine/change-phone.js

@@ -0,0 +1,40 @@
(function() {
	Vue.component('change-phone', {
		template: `<div id="phone" class="pl30 hidden">
						<div class="pb10 c-border-b c-f20">
							更改安全手机
						</div>
						<form id="phoneForm" class="" onsubmit="return false">
							<div class="w3-row mt25 form-group">
								<div class="w3-col c-f16 m5 c-t-right c-909090" style="width:80px;">手机号码</div>
								<div class="w3-rest pl15">
									<input type="text" class="form-control" style="width:310px;" name="phone" autocomplete="off">
								</div>
							</div>
							<div class="c-t-center mt50">
								<button type="submit" class="btn btn-theme c-f16" style="width:144px;height: 50px;" @click="changePhone()">确 定</button>
								<button type="button" class="btn btn-default c-f16 ml20" style="width:144px;height: 50px;" @click="gotosetting()">取 消</button>
							</div>
						</form>
					</div>`,
		props: [],
		data: function() {
			return {
				
			}
		},
		mounted: function() {
		},
		methods: {
			gotosetting: function() {
				$("#phone").addClass("hidden")
				$("#security").removeClass("hidden")
			},
			changePhone:function(){
				
			}
		},
	})
})()

component/mine/left-menu.js

@@ -0,0 +1,54 @@
(function() {
	Vue.component('left-menu', {
		template: `<div class="w3-col c-border bgc-fff ptb20 plr40" style="width:237px;">
						<div class="w3-row">
							<div class="w3-col" style="width:30px;">
								<img class="media-object" src="../../../images/icon_wodezhanghu.png">
							</div>
							<div class="w3-rest plr12">
								<div class="c-f20">我的账户</div>
								<div class="mine-menu">
									<div id="info" class="pt20" @click="goinfo()">个人设置</div>
									<div id="securitySetting" class="pt20"  @click="gosecuritySetting()">安全设置</div>
								</div>
							</div>
						</div>
						<div class="w3-row pt30 pb10">
							<div class="w3-col" style="width:30px;">
								<img class="media-object" src="../../../images/icon_yuyueguahao.png">
							</div>
							<div class="w3-rest plr12">
								<div class="c-f20">预约挂号</div>
								<div class="mine-menu">
									<div id="record" class="pt20"  @click="gorecord()">预约记录</div>
									<div id="doctor" class="pt20"  @click="godoctor()">常用就诊人</div>
								</div>
							</div>
						</div>
					</div>`,
		props: ["code"],
		data: function() {
			return {
			}
		},
		mounted: function() {
			$("#" + this.code).addClass("active")
		},
		methods: {
			goinfo: function() {
				location.href = "../../mine/html/personal-info.html"
			},
			gosecuritySetting: function() {
				location.href = "../../mine/html/security-setting.html"
			},
			gorecord: function() {
				location.href = "../../mine/html/record.html"
			},
			godoctor: function() {
				location.href = "../../mine/html/doctor.html"
			},
		},
	})
})()

component/mine/personal-dialog-form.js

@@ -0,0 +1,40 @@
(function() {
	var personalDialogForm = {
		// 修改密码
		selectIndustry: function(industryid, directionid) {
			top.layer.open({
				type: 2,
				title: '<h3 class="mt15 bgc-f9f9f9">请选择行业<h3>',
				shadeClose: false,
				closeBtn: true, //显示关闭按钮
				area: ['620px', '455px'],
				content: "../../mine/html/select-industry.html?industryid=" + industryid + "&directionid=" + directionid, //iframe的url
			});
		},
		// 取消预约
		cancelAppointment: function(id) {
			return new Promise(function(resolve, reject) {
				var layerid = top.layer.confirm('取消须知：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', {
					title: '是否确认取消预约？',
					btn: ['确定', '取消'] //按钮
				}, function() {
					//					agentAPI.delCompany({
					//						id: companyId
					//					}).then(function(res) {
					//						if(res.successMsg == "find success") {
					//							top.toastr.success("删除成功！")
					//						} else {
					//							top.toastr.error("删除失败！")
					//						}
					//						resolve(layerid)
					//					})
					resolve(layerid)
				}, function() {
				});
			})
		},
	}
	window.personalDialogForm = personalDialogForm
})()

component/mine/personal-info.js

@@ -0,0 +1,138 @@
(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="../image/touxiang.jpg" 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">
									</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="sex" id="male" checked="checked" value="male">&emsp;男&emsp;
										<input type="radio" name="sex" id="female" value="female">&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">
									</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">
									</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">
									</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">
									</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"><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"><span class="caret selcaret"></span>
											</a>
											<selsect-address></selsect-address>
										</div>
										<textarea class="form-control mt10"></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 {
				gotoAddid: "Province",
				code: "info",
				industryid: -1,
				directionid: -1,
				industryname: "",
				directionname: "",
			}
		},
		mounted: function() {
			var vm = this
			$('.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)
				}
			}
		},
	})
	var gotoAddid = "Province"
	function initInterfaceTypeSelect(industry) {
		$(".dropdown-menu").on("click", "[data-stopPropagation]", function(e) {
			e.stopPropagation();
		});
		Selectors.createDefinedSelect(industry.el, industry.data)
	}
	function gotoAdd(id) {
		var addid = $(id).attr("id")
		if(addid == undefined) {
			addid = id
		}
		$("#" + gotoAddid).removeClass("active")
		$("#" + addid).addClass("active")
		$("#_" + gotoAddid).addClass("hidden")
		$("#_" + addid).removeClass("hidden")
		gotoAddid = addid
	}
})()

component/mine/record.js

@@ -0,0 +1,204 @@
(function() {
	Vue.component('record', {
		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" style="min-height: 706px;">
							<ul class="nav nav-tabs c-inline-block width-100" role="tablist" id="recordlist">
								<li role="presentation" class="active">
									<a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="_home">待就诊</a>
								</li>
								<li role="presentation">
									<a href="#history" aria-controls="history" role="tab" data-toggle="tab" id="_history">历史记录</a>
								</li>
							</ul>
							<div class="tab-content plr25 ptb8">
								<div role="tabpanel" class="tab-pane active" id="home">
									<div class="list-body" v-for="record in records">
										<div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</span></div>
										<div class="div-table">
											<div class="table-row">
												<div class="table-cell">
													<div class="w3-row">
														<div class="w3-col pl15" style="width:95px">
															<img :src="record.photo" class="img-circle" width="80" height="80" />
														</div>
														<div class="w3-rest c-t-left pl20 c-f14 ">
															<div class="mt15">
																<span class="c-f16">{{record.doctor}}</span>
																<span class="plr10">{{record.zhiwu}}</span>
																<span class="c-909090">{{record.keshi}}</span>
															</div>
															<div class="mt10 c-909090">{{record.yiyuan}}</div>
														</div>
													</div>
												</div>
												<div class="table-cell c-f16">
													<div class="mt15">
														{{record.othertime}}
													</div>
													<div class="mt10">
														{{record.othertime1}}
													</div>
												</div>
												<div class="table-cell c-f16 mt25">{{record.bingren}}
												</div>
												<div class="table-cell">
													<div class="cancelbtn" @click="cancelbtn(record.id)">取消预约</div>
													<div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane" id="history">
									<div class="list-body" v-for="record in records">
										<div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</span></div>
										<div class="div-table">
											<div class="table-row">
												<div class="table-cell">
													<div class="w3-row">
														<div class="w3-col pl15" style="width:95px">
															<img :src="record.photo" class="img-circle" width="80" height="80" />
														</div>
														<div class="w3-rest c-t-left pl20 c-f14 ">
															<div class="mt15">
																<span class="c-f16">{{record.doctor}}</span>
																<span class="plr10">{{record.zhiwu}}</span>
																<span class="c-909090">{{record.keshi}}</span>
															</div>
															<div class="mt10 c-909090">{{record.yiyuan}}</div>
														</div>
													</div>
												</div>
												<div class="table-cell c-f16">
													<div class="mt15">
														{{record.othertime}}
													</div>
													<div class="mt10">
														{{record.othertime1}}
													</div>
												</div>
												<div class="table-cell c-f16 mt25">{{record.bingren}}
												</div>
												<div class="table-cell">
													<div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<navigation></navigation>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="appointmentinfo" tabindex="-1" role="dialog" aria-labelledby="appointmentinfoLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="appointmentinfoLabel">挂号明细</h4>
						</div>
						<div class="modal-body">
							<div class="p15 bgc-fff">
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">订单号</div>
									<div class="w3-rest">18721839005577</div>
								</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">订单状态</div>
									<div class="w3-rest">待就诊</div>
								</div>
								<div class="w3-row c-border-b c-f0f0f0">预约信息</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">预约医院</div>
									<div class="w3-rest">福建省立医院</div>
								</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">预约科室</div>
									<div class="w3-rest">睡眠眼科</div>
								</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">就诊日期</div>
									<div class="w3-rest">2018-04-04 上午</div>
								</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">就诊时间</div>
									<div class="w3-rest">07:50</div>
								</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">就诊序号</div>
									<div class="w3-rest">2</div>
								</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">退号截止时间</div>
									<div class="w3-rest">2018-04-04 23:59:00</div>
								</div>
								<div class="w3-row c-border-b c-f0f0f0">就诊人信息</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">姓名</div>
									<div class="w3-rest">郑绩</div>
								</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">证件号</div>
									<div class="w3-rest">35040319850707201X</div>
								</div>
								<div class="w3-row c-border-b">
									<div class="w3-col" style="width:80px;">手机号</div>
									<div class="w3-rest">137******96</div>
								</div>
								<div class="c-t-center">
									<button type="button" class="btn btn-default c-f16 mt20" style="width:144px;">关 闭</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>`,
		props: [],
		data: function() {
			return {
				code: "record",
				records: [{
					time: "2017年11月11日 13:13:13",
					photo: "../image/touxiang.jpg",
					doctor: "张三",
					zhiwu: "主任医生",
					keshi: "骨科",
					yiyuan: "上饶医院",
					othertime: "2018-04-04上午",
					othertime1: "第2号,07:50",
					bingren: "李花花",
					id: "1",
				}, {
					time: "2017年11月11日 13:13:13",
					photo: "../image/touxiang.jpg",
					doctor: "张三",
					zhiwu: "主任医生",
					keshi: "骨科",
					yiyuan: "上饶医院",
					othertime: "2018-04-04上午",
					othertime1: "第2号,07:50",
					bingren: "李花花",
					id: "1",
				}, ]
			}
		},
		mounted: function() {
		},
		methods: {
			cancelbtn: function(id) {
				personalDialogForm.cancelAppointment(id).then(function(layerid) {
					top.layer.close(layerid)
				})
			},
		},
	})
})()

component/mine/security-setting.js

@@ -0,0 +1,56 @@
(function() {
	Vue.component('security-setting', {
		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" style="height: 706px;">
							<div id="security">
								<div class="w3-row pl30">
									<div class="w3-col" style="width:60px;"><img src="../../../images/icon_wodezhanghu.png" width="43" height="50" /></div>
									<div class="w3-rest pl10 pb35 c-border-b pr30">
										<div class="w3-col mt15" style="width:117px;float: right;"><button class="btn btn-default btn-block" type="button" @click="changePassword()">修 改</button></div>
										<div class="w3-rest">
											<div class="c-f20 ">登陆密码</div>
											<div class="c-f14 c-909090 mt15 ">建议您定期更改密码，设置安全性高的密码可以使账号更安全</div>
										</div>
									</div>
								</div>
								<div class="w3-row pl30 pt30">
									<div class="w3-col" style="width:60px; "><img src="../../../images/icon_wodezhanghu.png " width="43 " height="50 " /></div>
									<div class="w3-rest pl10 pb35 c-border-b pr30">
										<div class="w3-col mt15 " style="width:117px;float: right; "><button class="btn btn-default btn-block " type="button" @click="changePhone()">更 改</button></div>
										<div class="w3-rest">
											<div class="c-f20 ">安全手机 180****1111</div>
											<div class="c-f14 c-909090 mt15 ">安全手机可以用于登录账号，重置密码或者其他安全验证</div>
										</div>
									</div>
								</div>
							</div>							
							<change-password></change-password>
							<change-phone></change-phone>
						</div>
					</div>
				</div>`,
		props: [],
		data: function() {
			return {
				code: "securitySetting",
			}
		},
		mounted: function() {
		},
		methods: {
			changePassword: function() {
				$("#security").addClass("hidden")
				$("#password").removeClass("hidden")
			},
			changePhone: function() {
				$("#security").addClass("hidden")
				$("#phone").removeClass("hidden")
			},
		},
	})
})()

component/mine/select-address.js

@@ -0,0 +1,541 @@
(function() {
	Vue.component('selsect-address', {
		template: `<div class="bgc-fff dropdown-menu dropdown-menu-right" aria-labelledby="addressLabel" style="width:308px;">
						<ul class="nav nav-tabs" role="tablist" id="addresslist">
							<li role="presentation" class="active" style="width:102px;">
								<a href="#province" aria-controls="province" role="tab" data-toggle="tab" id="_province" data-stopPropagation="true">{{provincename}}</a>
							</li>
							<li role="presentation" style="width:102px;">
								<a href="#city" aria-controls="city" role="tab" data-toggle="tab" id="_city" data-stopPropagation="true">{{cityname}}</a>
							</li>
							<li role="presentation" style="width:102px;">
								<a href="#county" aria-controls="county" role="tab" data-toggle="tab" id="_county" data-stopPropagation="true">{{countyname}}</a>
							</li>
						</ul>
						<div class="tab-content industrybox" style="height: auto">
							<div role="tabpanel" class="tab-pane active industry c-t-left" id="province" data-stopPropagation="true">
								<div class="w3-row mt10">
									<div class="w3-col c-f16 pl10" style="width:50px;">A-G</div>
									<div class="w3-rest c-f14 c-666">
										<span :id="province[0]" v-for="province in province1" @click="selectP(province[0],province[2])">{{province[2]}}</span>
									</div>
								</div>
								<div class="w3-row mt10">
									<div class="w3-col c-f16 pl10" style="width:50px;">H-J</div>
									<div class="w3-rest c-f140 c-666">
										<span :id="province[0]" v-for="province in province2" @click="selectP(province[0],province[2])">{{province[2]}}</span>
									</div>
								</div>
								<div class="w3-row mt10">
									<div class="w3-col c-f16 pl10" style="width:50px;">L-S</div>
									<div class="w3-rest c-f14 c-666">
										<span :id="province[0]" v-for="province in province3" @click="selectP(province[0],province[2])">{{province[2]}}</span>
									</div>
								</div>
								<div class="w3-row mt10">
									<div class="w3-col c-f16 pl10" style="width:50px;">T-Z</div>
									<div class="w3-rest c-f14 c-666">
										<span :id="province[0]" v-for="province in province4" @click="selectP(province[0],province[2])">{{province[2]}}</span>
									</div>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane w3-row-padding industry" id="city" data-stopPropagation="true">
								<div :id="city[0]" class="w3-third mb20" v-for="city in cities" @click="selectCi(city[0],city[2])">
									<div>{{city[2]}}</div>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane w3-row-padding industry" id="county" data-stopPropagation="true">
								<div :id="county[0]" class="w3-third mb20" v-for="county in counties" @click="selectCo(county[0],county[2])">
									<div>{{county[2]}}</div>
								</div>
							</div>
						</div>
					</div>`,
		props: [],
		data: function() {
			return {
				"province1": [
					["541", "489", "安徽", "a"],
					["562", "489", "澳门", "a"],
					["530", "489", "北京", "b"],
					["551", "489", "重庆", "c"],
					["542", "489", "福建", "f"],
					["549", "489", "广西", "g"],
					["553", "489", "贵州", "g"],
					["557", "489", "甘肃", "g"],
				],
				"province2": [
					["546", "489", "湖北", "h"],
					["537", "489", "黑龙江", "h"],
					["545", "489", "河南", "h"],
					["547", "489", "湖南", "h"],
					["550", "489", "海南", "h"],
					["532", "489", "河北", "h"],
					["536", "489", "吉林", "j"],
					["539", "489", "江苏", "j"],
					["543", "489", "江西", "j"],
				],
				"province3": [
					["535", "489", "辽宁", "l"],
					["534", "489", "内蒙古", "n"],
					["559", "489", "宁夏", "n"],
					["558", "489", "青海", "q"],
					["544", "489", "山东", "s"],
					["538", "489", "上海", "s"],
					["548", "489", "广东", "s"],
					["533", "489", "山西", "s"],
					["552", "489", "四川", "s"],
					["556", "489", "陕西", "s"],
				],
				"province4": [
					["531", "489", "天津", "t"],
					["563", "489", "台湾省", "t"],
					["555", "489", "西藏", "x"],
					["560", "489", "新疆", "x"],
					["561", "489", "香港", "x"],
					["554", "489", "云南", "y"],
					["540", "489", "浙江", "z"],
				],
				"cities": [],
				"counties": [],
				"city": [
					["489", "0", "全国"],
					["763", "548", "广州"],
					["764", "548", "韶关"],
					["765", "548", "深圳"],
					["766", "548", "珠海"],
					["767", "548", "汕头"],
					["768", "548", "佛山"],
					["769", "548", "江门"],
					["770", "548", "湛江"],
					["771", "548", "茂名"],
					["772", "548", "肇庆"],
					["773", "548", "惠州"],
					["774", "548", "梅州"],
					["775", "548", "汕尾"],
					["776", "548", "河源"],
					["777", "548", "阳江"],
					["778", "548", "清远"],
					["779", "548", "东莞"],
					["780", "548", "中山"],
					["781", "548", "潮州"],
					["782", "548", "揭阳"],
					["783", "548", "云浮"],
					["736", "546", "武汉"],
					["737", "546", "黄石"],
					["738", "546", "十堰"],
					["739", "546", "宜昌"],
					["740", "546", "襄阳"],
					["741", "546", "鄂州"],
					["742", "546", "荆门"],
					["743", "546", "孝感"],
					["744", "546", "荆州"],
					["745", "546", "黄冈"],
					["746", "546", "咸宁"],
					["747", "546", "随州"],
					["748", "546", "恩施"],
					["10057", "546", "公安"],
					["10139", "546", "武穴"],
					["10140", "546", "天门"],
					["10168", "546", "仙桃"],
					["10169", "546", "潜江"],
					["10171", "546", "宜城"],
					["10179", "546", "神农架"],
					["854", "556", "西安"],
					["855", "556", "铜川"],
					["856", "556", "宝鸡"],
					["857", "556", "咸阳"],
					["858", "556", "渭南"],
					["859", "556", "延安"],
					["860", "556", "汉中"],
					["861", "556", "榆林"],
					["862", "556", "安康"],
					["863", "556", "商洛"],
					["10058", "556", "兴平"],
					["10470", "556", "杨凌"],
					["933", "556", "西咸新区"],
					["801", "552", "成都"],
					["802", "552", "自贡"],
					["803", "552", "攀枝花"],
					["804", "552", "泸州"],
					["805", "552", "德阳"],
					["806", "552", "绵阳"],
					["807", "552", "广元"],
					["808", "552", "遂宁"],
					["809", "552", "内江"],
					["810", "552", "乐山"],
					["811", "552", "南充"],
					["812", "552", "眉山"],
					["813", "552", "宜宾"],
					["814", "552", "广安"],
					["815", "552", "达州"],
					["816", "552", "雅安"],
					["817", "552", "巴中"],
					["818", "552", "资阳"],
					["819", "552", "阿坝"],
					["820", "552", "甘孜"],
					["821", "552", "凉山"],
					["10065", "552", "峨眉"],
					["10104", "552", "西昌"],
					["10201", "552", "简阳"],
					["600", "535", "大连"],
					["599", "535", "沈阳"],
					["601", "535", "鞍山"],
					["602", "535", "抚顺"],
					["603", "535", "本溪"],
					["604", "535", "丹东"],
					["605", "535", "锦州"],
					["606", "535", "营口"],
					["607", "535", "阜新"],
					["608", "535", "辽阳"],
					["609", "535", "盘锦"],
					["610", "535", "铁岭"],
					["611", "535", "朝阳"],
					["612", "535", "葫芦岛"],
					["10023", "535", "兴城"],
					["10070", "535", "海城"],
					["10080", "535", "昌图"],
					["10144", "535", "开原"],
					["931", "535", "东港"],
					["613", "536", "长春"],
					["10198", "536", "珲春"],
					["614", "536", "吉林市"],
					["615", "536", "四平"],
					["616", "536", "辽源"],
					["617", "536", "通化"],
					["618", "536", "白山"],
					["619", "536", "松原"],
					["620", "536", "白城"],
					["621", "536", "延边"],
					["10122", "536", "公主岭"],
					["635", "539", "南京"],
					["639", "539", "苏州"],
					["640", "539", "昆山"],
					["650", "539", "常熟"],
					["652", "539", "张家港"],
					["636", "539", "无锡"],
					["637", "539", "徐州"],
					["638", "539", "常州"],
					["641", "539", "南通"],
					["642", "539", "连云港"],
					["643", "539", "淮安"],
					["644", "539", "盐城"],
					["645", "539", "扬州"],
					["646", "539", "镇江"],
					["647", "539", "泰州"],
					["648", "539", "宿迁"],
					["911", "539", "太仓市"],
					["702", "544", "济南"],
					["703", "544", "青岛"],
					["704", "544", "淄博"],
					["705", "544", "枣庄"],
					["706", "544", "东营"],
					["707", "544", "烟台"],
					["708", "544", "潍坊"],
					["709", "544", "济宁"],
					["710", "544", "泰安"],
					["711", "544", "威海"],
					["712", "544", "日照"],
					["713", "544", "莱芜"],
					["714", "544", "临沂"],
					["715", "544", "德州"],
					["716", "544", "聊城"],
					["717", "544", "滨州"],
					["718", "544", "菏泽"],
					["653", "540", "杭州"],
					["654", "540", "宁波"],
					["655", "540", "温州"],
					["656", "540", "嘉兴"],
					["657", "540", "湖州"],
					["658", "540", "绍兴"],
					["659", "540", "金华"],
					["660", "540", "衢州"],
					["661", "540", "舟山"],
					["662", "540", "台州"],
					["663", "540", "丽水"],
					["10158", "540", "方家山"],
					["785", "549", "南宁"],
					["786", "549", "柳州"],
					["787", "549", "桂林"],
					["788", "549", "梧州"],
					["789", "549", "北海"],
					["790", "549", "防城港"],
					["791", "549", "钦州"],
					["792", "549", "贵港"],
					["793", "549", "玉林"],
					["794", "549", "百色"],
					["795", "549", "贺州"],
					["796", "549", "河池"],
					["904", "549", "来宾"],
					["905", "549", "崇左"],
					["664", "541", "合肥"],
					["665", "541", "芜湖"],
					["666", "541", "蚌埠"],
					["667", "541", "淮南"],
					["668", "541", "马鞍山"],
					["669", "541", "淮北"],
					["670", "541", "铜陵"],
					["671", "541", "安庆"],
					["672", "541", "黄山"],
					["673", "541", "滁州"],
					["674", "541", "阜阳"],
					["675", "541", "宿州"],
					["677", "541", "六安"],
					["678", "541", "亳州"],
					["679", "541", "池州"],
					["680", "541", "宣城"],
					["10069", "541", "凤阳"],
					["10181", "541", "广德"],
					["10182", "541", "宿松"],
					["565", "532", "石家庄"],
					["566", "532", "唐山"],
					["567", "532", "秦皇岛"],
					["568", "532", "邯郸"],
					["569", "532", "邢台"],
					["570", "532", "保定"],
					["571", "532", "张家口"],
					["572", "532", "承德"],
					["573", "532", "沧州"],
					["574", "532", "廊坊"],
					["575", "532", "衡水"],
					["10143", "532", "遵化"],
					["576", "533", "太原"],
					["577", "533", "大同"],
					["578", "533", "阳泉"],
					["579", "533", "长治"],
					["580", "533", "晋城"],
					["581", "533", "朔州"],
					["582", "533", "晋中"],
					["583", "533", "运城"],
					["584", "533", "忻州"],
					["585", "533", "临汾"],
					["586", "533", "吕梁"],
					["910", "533", "永济市"],
					["587", "534", "呼和浩特"],
					["588", "534", "包头"],
					["589", "534", "乌海"],
					["590", "534", "赤峰"],
					["591", "534", "通辽"],
					["592", "534", "鄂尔多斯"],
					["593", "534", "呼伦贝尔"],
					["594", "534", "兴安盟"],
					["595", "534", "锡林郭勒盟"],
					["596", "534", "乌兰察布"],
					["597", "534", "巴彦淖尔"],
					["598", "534", "阿拉善盟"],
					["10031", "534", "乌审旗"],
					["10157", "534", "满洲里"],
					["622", "537", "哈尔滨"],
					["623", "537", "齐齐哈尔"],
					["624", "537", "鸡西"],
					["625", "537", "鹤岗"],
					["626", "537", "双鸭山"],
					["627", "537", "大庆"],
					["628", "537", "伊春"],
					["629", "537", "佳木斯"],
					["630", "537", "七台河"],
					["631", "537", "牡丹江"],
					["632", "537", "黑河"],
					["633", "537", "绥化"],
					["634", "537", "大兴安岭"],
					["10081", "537", "安达"],
					["10159", "537", "双城"],
					["10160", "537", "尚志"],
					["10161", "537", "绥芬河"],
					["10510", "537", "肇东市"],
					["681", "542", "福州"],
					["682", "542", "厦门"],
					["683", "542", "莆田"],
					["684", "542", "三明"],
					["685", "542", "泉州"],
					["687", "542", "漳州"],
					["688", "542", "南平"],
					["689", "542", "龙岩"],
					["690", "542", "宁德"],
					["691", "543", "南昌"],
					["692", "543", "景德镇"],
					["693", "543", "萍乡"],
					["694", "543", "九江"],
					["695", "543", "新余"],
					["696", "543", "鹰潭"],
					["697", "543", "赣州"],
					["698", "543", "吉安"],
					["699", "543", "宜春"],
					["700", "543", "抚州"],
					["701", "543", "上饶"],
					["719", "545", "郑州"],
					["720", "545", "开封"],
					["721", "545", "洛阳"],
					["722", "545", "平顶山"],
					["723", "545", "安阳"],
					["724", "545", "鹤壁"],
					["725", "545", "新乡"],
					["726", "545", "焦作"],
					["727", "545", "濮阳"],
					["728", "545", "许昌"],
					["729", "545", "漯河"],
					["730", "545", "三门峡"],
					["731", "545", "南阳"],
					["732", "545", "商丘"],
					["733", "545", "信阳"],
					["734", "545", "周口"],
					["735", "545", "驻马店"],
					["10044", "545", "济源"],
					["10059", "545", "西平"],
					["749", "547", "长沙"],
					["750", "547", "株洲"],
					["751", "547", "湘潭"],
					["752", "547", "衡阳"],
					["753", "547", "邵阳"],
					["754", "547", "岳阳"],
					["755", "547", "常德"],
					["756", "547", "张家界"],
					["757", "547", "益阳"],
					["758", "547", "郴州"],
					["759", "547", "永州"],
					["760", "547", "怀化"],
					["761", "547", "娄底"],
					["762", "547", "湘西"],
					["799", "550", "海口"],
					["800", "550", "三亚"],
					["907", "550", "洋浦市/洋浦经济开发区"],
					["10153", "550", "琼海"],
					["10183", "550", "儋州"],
					["10184", "550", "五指山"],
					["10185", "550", "文昌"],
					["10186", "550", "万宁"],
					["10187", "550", "东方"],
					["10188", "550", "定安"],
					["10189", "550", "屯昌"],
					["10190", "550", "澄迈"],
					["10191", "550", "临高"],
					["10192", "550", "琼中"],
					["10193", "550", "保亭"],
					["10194", "550", "白沙"],
					["10195", "550", "昌江"],
					["10196", "550", "乐东"],
					["10197", "550", "陵水"],
					["822", "553", "贵阳"],
					["823", "553", "六盘水"],
					["824", "553", "遵义"],
					["825", "553", "安顺"],
					["826", "553", "铜仁"],
					["827", "553", "黔西南"],
					["828", "553", "毕节"],
					["829", "553", "黔东南"],
					["830", "553", "黔南"],
					["831", "554", "昆明"],
					["832", "554", "曲靖"],
					["833", "554", "玉溪"],
					["834", "554", "保山"],
					["835", "554", "昭通"],
					["836", "554", "楚雄"],
					["837", "554", "红河"],
					["838", "554", "文山"],
					["840", "554", "西双版纳"],
					["841", "554", "大理"],
					["842", "554", "德宏"],
					["843", "554", "丽江"],
					["844", "554", "怒江"],
					["845", "554", "迪庆"],
					["846", "554", "临沧"],
					["10163", "554", "普洱"],
					["847", "555", "拉萨"],
					["848", "555", "昌都"],
					["849", "555", "山南"],
					["850", "555", "日喀则"],
					["851", "555", "那曲"],
					["852", "555", "阿里"],
					["853", "555", "林芝"],
					["864", "557", "兰州"],
					["865", "557", "嘉峪关"],
					["866", "557", "金昌"],
					["867", "557", "白银"],
					["868", "557", "天水"],
					["869", "557", "武威"],
					["870", "557", "张掖"],
					["871", "557", "平凉"],
					["872", "557", "酒泉"],
					["873", "557", "庆阳"],
					["874", "557", "定西"],
					["875", "557", "陇南"],
					["876", "557", "临夏"],
					["877", "557", "甘南"],
					["878", "558", "西宁"],
					["879", "558", "海东"],
					["880", "558", "海北"],
					["881", "558", "黄南"],
					["882", "558", "海南州"],
					["883", "558", "果洛"],
					["884", "558", "玉树"],
					["885", "558", "海西"],
					["886", "559", "银川"],
					["887", "559", "石嘴山"],
					["888", "559", "吴忠"],
					["889", "559", "固原"],
					["906", "559", "中卫"],
					["890", "560", "乌鲁木齐"],
					["891", "560", "克拉玛依"],
					["892", "560", "吐鲁番"],
					["893", "560", "哈密"],
					["894", "560", "昌吉"],
					["895", "560", "博尔塔拉"],
					["896", "560", "巴音郭楞"],
					["897", "560", "阿克苏"],
					["898", "560", "克孜勒苏"],
					["899", "560", "喀什"],
					["900", "560", "和田"],
					["901", "560", "伊犁"],
					["902", "560", "塔城"],
					["903", "560", "阿勒泰"],
					["10061", "560", "石河子"],
					["10164", "560", "奎屯市"],
					["10166", "560", "乌苏"],
					["10176", "560", "阿拉尔"],
					["10177", "560", "图木舒克"],
					["10178", "560", "五家渠"],
					["932", "560", "北屯市"],
				],
				"cityid": -1,
				"countyid": -1,
				"provinceid": -1,
				"cityname": "城市",
				"countyname": "县区",
				"provincename": "省份",
			}
		},
		mounted: function() {
			$(".dropdown-menu").on("click", "[data-stopPropagation]", function(e) {
				e.stopPropagation();
				var tabid = e.currentTarget.id //js控制标签页
				if(tabid.indexOf("_") > 0) {
					$('#' + tabid).tab('show')
				}
			});
		},
		methods: {
			selectP: function(id, name) {
				var vm = this
				$("#" + id).addClass("active")
				if(vm.provinceid != -1) {
					$("#" + vm.provinceid).removeClass("active")
				}
				vm.provinceid = id
				vm.provincename = name
				vm.getCities(id)
			},
			getCities: function(id) {
				var vm = this
				var cities = []
				for(var i in vm.city) {
					if(vm.city[i][1] == id) {
						cities.push(vm.city[i])
					}
				}
				vm.cities = cities
				$('#addresslist a[href="#city"]').tab('show')
			},
		},
	})
})()

component/mine/select-industry.js

@@ -0,0 +1,181 @@
(function() {
	Vue.component('select-industry', {
		template: `<div class="modal fade" id="selindustry" tabindex="-1" role="dialog" aria-labelledby="selindustryLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="selindustryLabel">请选择行业</h4>
						</div>
						<div class="modal-body">
							<div class="p15 bgc-fff">
								<ul class="nav nav-tabs" role="tablist" id="industrylist">
									<li role="presentation" class="active">
										<a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="_home">{{industryname}}</a>
									</li>
									<li role="presentation">
										<a href="#direction" aria-controls="direction" role="tab" data-toggle="tab" id="_direction">{{directionname}}</a>
									</li>
								</ul>
								<div class="tab-content industrybox">
									<div role="tabpanel" class="tab-pane active w3-row-padding industry" id="home">
										<div :id="'industry_'+industry.id" class="w3-quarter mb20" v-for="industry in industrys" @click="selectindustry(industry.id,industry.name)">
											<div class="industryname">{{industry.name}}</div>
										</div>
									</div>
									<div role="tabpanel" class="tab-pane  w3-row-padding industry" id="direction">
										<div :id="'direction_'+direction.id" class="w3-quarter mb20" v-for="direction in directions" @click="selectdirection(direction.id,direction.name)">
											<div class="industryname">{{direction.name}}</div>
										</div>
									</div>
								</div>
								<div class="c-t-center">
									<button type="button" class="btn btn-default c-f16 mt20" style="width:144px;" @click="back">取 消</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>`,
		props: ["industryid", "directionid"],
		data: function() {
			return {
				industrys: [{
					id: 0,
					name: "政府科研NGO"
				}, {
					id: 1,
					name: "IT互联网",
					direction: [{
						id: 0,
						name: "开发"
					}, {
						id: 1,
						name: "测试"
					}, {
						id: 2,
						name: "运维/安全"
					}, {
						id: 3,
						name: "硬件"
					}, {
						id: 4,
						name: "产品"
					}, {
						id: 5,
						name: "运营"
					}, {
						id: 6,
						name: "设计"
					}, {
						id: 7,
						name: "编辑/文档"
					}, ]
				}, {
					id: 2,
					name: "文化传媒"
				}, {
					id: 3,
					name: "医疗生物"
				}, {
					id: 4,
					name: "通信"
				}, {
					id: 5,
					name: "金融"
				}, {
					id: 6,
					name: "学生"
				}, {
					id: 7,
					name: "教育培训"
				}, {
					id: 8,
					name: "司法法律"
				}, {
					id: 9,
					name: "房产建筑"
				}, {
					id: 10,
					name: "服务业"
				}, {
					id: 7,
					name: "教育培训"
				}, {
					id: 8,
					name: "司法法律"
				}, {
					id: 9,
					name: "房产建筑"
				}, {
					id: 10,
					name: "服务业"
				}, {
					id: 7,
					name: "教育培训"
				}, {
					id: 8,
					name: "司法法律"
				}, {
					id: 9,
					name: "房产建筑"
				}, {
					id: 10,
					name: "服务业"
				}],
				directions: [],
				industryname:"请选择行业",
				directionname:"请选择方向",
			}
		},
		mounted: function() {
			this.initindustry()
		},
		methods: {
			initindustry: function() {
				var vm = this
				//			getAllIndustry() //获取所有行业
				$("#industry_" + vm.industryid).addClass("selected")
				if(vm.industryid == -1) {
					$('#_direction').parent("li").addClass("hidden")
				} else {
					vm.getDirection(vm.industryid)
				}
			},
			selectindustry: function(id, name) {
				var vm = this
				if(vm.industryid != -1) {
					$("#industry_" + vm.industryid).removeClass("selected")
				}
				$("#industry_" + id).addClass("selected")
				vm.industryid = id
				vm.industryname = name
				if($('#_direction').parent("li").hasClass("hidden")) {
					$('#_direction').parent("li").removeClass("hidden")
				}
				$('#industrylist a[href="#direction"]').tab('show') //转到方向页面
				vm.getDirection(id) //通过id获取方向
			},
			getDirection: function(id) {
				//			getAllDirection() //获取该行业所有方向			
				var vm = this
				vm.directions = vm.industrys[id].direction
			},
			selectdirection: function(id, name) {
				var vm = this
				if(vm.directionid != -1) {
					$("#direction_" + vm.directionid).removeClass("selected")
				}
				$("#direction_" + id).addClass("selected")
				vm.directionid = id
				vm.directionname = name
			},
			back: function() {
				//				var index = top.layer.getFrameIndex(window.name);
				//				top.layer.close(index);
				$('#selindustry').modal('hide')
			},
		},
	})
})()

js/selector.js

@@ -0,0 +1,18 @@
(function(exports) {
	var Selectors = {		
		createDefinedSelect: function(el, datas) {
			//			$(el).bsSuggest("destroy");
			$(el).bsSuggest({
				data: {
					value: datas
				},
				getDataMethod: "data",
				effectiveFields: ["name"],
				idField: "code",
				keyField: "name"
			});
		},
	}
	exports.Selectors = Selectors;
})(window)

js/util.js

@@ -57,3 +57,13 @@ function GetRequest() {
   return theRequest;
}
//判断输入字符串是否为空或全是空格
function isNull(str) {
	if(str == null) return true;
	if(str == "") return true;
	var regu = "^[ ]+$";
	var re = new RegExp(regu);
	var bb = re.test(str);
	return re.test(str);
}

page/login/login.css

@@ -1,56 +1,86 @@
body {
	width: 100%;
	height: 100%;
	background: url(../../images/BG.jpg);
	font-size: 14px;
}
.mainbox{	
	background: url("../../images/BG.jpg") no-repeat 100% 100%;
}
#main {
	width: 1200px;
	margin: 0 auto;
	height: 100%;
	width: 1294px;
	padding-bottom: 200px;
	padding-top: 100px;
}
#head{
	background:#fff;
}
.hlogo{	
	margin: 0 auto;
	width: 1294px;
	transition: all 0.6s;
}
.hlogo span img:hover {
	transform: scale(2);
	position: relative;
	z-index: 2;
	top: 30px;
	right: 30px;
	box-shadow: 0 4px 8px 0 rgba(255,255,255,0.2),0 6px 20px 0 rgba(255,255,255,0.19);
}
.box-border{
	border: 3px solid #38D1CB;
}
#foot{
	background:#fff;
	text-align: center;
	font-size: 14px;
	padding: 34px 0 34px;
	color:#909090;	
}
.tabs-container {
	margin-top: 40;
	border: 10px solid rgba(255,255,255,0.2);
}
.tabs-container .nav-tabs {
	border: 0;
}
.nav.nav-tabs {
	background-color: #fff;
}
.nav.nav-tabs li {
	width: 50%;
	text-align: center;
	padding: 0 15px;
}
.nav.nav-tabs li.active a {
	color: #1eaaff;
	color: #0AD8C8;
}
.tabs-container .nav-tabs>li.active>a, 
.tabs-container .nav-tabs>li.active>a:focus, 
.tabs-container .nav-tabs>li.active>a:hover {
	border: 0;
	border-bottom: 3px solid #1eaaff;
	border-bottom: 3px solid #0AD8C8;
}
button[type="submit"] {
	margin-top: 40px;
	margin-top: 20px;
}
.form-group {
		position: relative;
	}
	
.fa-eye,
.fa-eye-slash {
	position: absolute;
	top: 16px;
	right: 10px;
	margin-top: -8px;
	font-size: 16px;
	cursor: pointer;
}
.form-control{
	height: 50px;	
	background: #F5FAFA;
}	
	
.getCaptcha {
	position: absolute;
@@ -65,27 +95,38 @@ button[type="submit"] {
	box-shadow: none;
	opacity: .65;
}
.left-img img{
	width: 100%;
#loginForm{	
	width: 400px;
	border: 5px solid rgba(75, 202, 208, 0.7);
	background-color: #fff;
}
#loginForm{margin-top: 150px;}
@media only screen and (max-width: 1200px) {
	#main,.left-img,#loginForm {
		width: 100%;
	}
	
	#loginForm {
		margin-top: 0px;
	}
	.left-img > img{
		display: block;
		width: 500px;
		margin: 0 auto;
	}
	.tabs-container {
		width: 400px;
		margin: -40px auto 0;
	}
.btn-theme{
	color:#fff;
	background: #0AD8C8;
	border-color: #0AD8C8;
	font-size: 20px;
}
.btn-theme:hover,.btn-theme:active{
	color:#fff;
	background: #0aD9ff;
	border-color: #0AD8C8;
}
.btn-default{
	background: #fff;
	color:#333;
	font-size: 20px;
    padding-top: 10px;
}
.btn-default:hover,.btn-default:active{
	color:#333;
	background: #F4F6FA;
}
.btn{
	height: 53px;
}

page/login/login.html

@@ -1,80 +1,40 @@
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="keywords" content="登录">
    <meta name="description" content="登录">
    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../plugins/artDialog/6.0.5/api/css/ui-dialog.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/cross.css"/>
    <link rel="stylesheet" type="text/css" href="login.css"/>
</head>
<body>
    <div id="main">
        <div class="row">
            <div class="col-sm-8 left-img">
                <img src="../../images/icon_chahua.png" />
            </div>
            <div id="loginForm" class="col-sm-4">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li :class="{'active': type==1}" @click="changeType(1)"><a>手机号登录</a>
                        </li>
                        <li :class="{'active': type==2}" @click="changeType(2)"><a>验证码登录</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" :class="{'active': type==1}">
                            <div class="panel-body">
                                <form id="form1" class="m-t" role="form" onsubmit="return false;">
                                    <div class="form-group">
                                        <input class="form-control" type="text" maxlength="11" v-model="mobile" placeholder="请输入手机号码">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" :type="eyeIsOpen?'text':'password'" v-model="password" placeholder="初始密码为手机号码后六位">
                                        <i class="fa" :class="eyeIsOpen? 'fa-eye': 'fa-eye-slash'"></i>
                                    </div>
                                    <button type="submit" class="btn btn-success block full-width m-b" @click="login">登 录</button>                 
                                </form>
                            </div>
                        </div>
                        <div class="tab-pane" :class="{'active': type==2}">
                            <div class="panel-body">
                                <form id="form2" class="m-t" role="form" onsubmit="return false;">
                                    <div class="form-group">
                                        <input class="form-control" type="text" maxlength="11" v-model="mobile" placeholder="请输入手机号码">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" type="text" v-model="captcha" placeholder="请输入短信验证码">
                                        <a class="getCaptcha" :class="{'disabled': countdown}" @click="getCaptcha">{{infoText}}</a>
                                    </div>
                                    <button type="submit" class="btn btn-success block full-width m-b" @click="login">登 录</button>
                                </form>    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery-2.2.4.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/validate/jquery.validate.min.js"></script>
    <script src="../../js/validate/messages_zh.min.js"></script>
    <script src="../../js/security.js"></script>
    <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
    <script src="login.js"></script>
</body>
</html>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="keywords" content="登录">
		<meta name="description" content="登录">
		<link rel="shortcut icon" href="../../favicon.ico">
		<link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../plugins/artDialog/6.0.5/api/css/ui-dialog.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="login.css" />
	</head>
	<body>
		<div id="app">
			<login-form></login-form>
		</div>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery-2.2.4.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<script src="../../js/validate/jquery.validate.min.js"></script>
		<script src="../../js/validate/messages_zh.min.js"></script>
		<script src="../../js/security.js"></script>
		<script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>		
		<script src="../../component/login-register/login.js"></script>
		<script src="login.js"></script>
	</body>
</html>

page/login/login.js

@@ -1,123 +1,5 @@
new Vue({
    el: "#main",
    data: {
        type: 1, //记录选择的登录方式，1-手机号登录，2-验证码登录
        mobile: '',
        password: '',
        captcha: '',
        eyeIsOpen: false,
        infoText: '获取验证码',
        countdown: false //是否在倒计时
    },
    methods: {
        changeType: function(val){
            this.type = val;
        },
        getCaptcha: function(){
            //先校验手机号码是否正确
            var isMobile = isMobilePhone(this.mobile);
            if(!isMobile){
                tip('请输入正确的手机号码！');
                return false;
            }
            setTimer(this);
            //发送请求
            sendToGetCaptcha(this);
        },
        login: function(){
            if(this.type == 1){
                var validation = $("#form1").valid();
                if(validation){
                    getPublicKey(this);
                }
            }else{
                var validation = $("#form2").valid();
                if(validation){
                    login({
                        mobile: this.mobile,
                        captcha: this.captcha,
                        platform: 4
                    })
                }
            }
        },
    }
});
//验证码定时
function setTimer(vm) {
    var seconds = 59;
    vm.countdown = true;
    timer = setInterval(function() {
        if(seconds == 0) {
            clearInterval(timer);
            timer = null;
            seconds = 59;
            vm.infoText = "获取验证码";
            vm.countdown = false;
            return ;
        }
        seconds --;
        vm.infoText = seconds+"s后重新获取";
    }, 1000)
}
function sendToGetCaptcha(vm){
    var url = "common/captcha",
        params = {
            mobile: vm.mobile,
            type: 5,
            captchaToken: 5
        };
    httpRequest.post(url, {data: params}).then(function(res){
        if(res.status == 200){
            tip('发送成功','add');
        }else{
            tip('获取验证码失败');
        }
    });
}
function getPublicKey(vm){
    var url = "login/public_key";
    httpRequest.post(url).then(function(res){
        if(res.status){
            var mod = res.data.modulus;
            var exp = res.data.exponent;
            key = RSAUtils.getKeyPair(exp, "", mod);
            if (key) {
                encryedPwd = RSAUtils.encryStr(key, vm.password);
                login({
                    mobile: vm.mobile,
                    password: encryedPwd,
                    platform: 4
                })
            }else {
               tip("获取数据失败")
               $submit.removeAttr('disabled')
            }
        }else{
            tip(res.msg);
        }
    })
}
function login(data) {
    httpRequest.post('login/doctor', {data: data}).then(function(res){
        if(res.status == 200){
            var docInfo = res.data;
            localStorage.setItem(httpRequest.agentName,JSON.stringify({
                id: docInfo.id,
                uid: docInfo.uid,
                token: docInfo.token,
                imei: localStorage.getItem('WLYY_IMEI'),
                platform: 4
            }));
            //将用户的角色信息单独存储在localstorage中
            localStorage.setItem("userRole", JSON.stringify(docInfo.userRole));
            window.location.href = "../home/html/index.html";
        }else{
            tip(res.msg);
        }
    });
}
	el: "#app",
	data: {
	},
});

page/mine/css/personal-info.css

@@ -0,0 +1,215 @@
body {
	background: rgba(245, 249, 249, 1);
	color: #323232;
}
.w3-row:after {
	content: "";
	display: table;
	clear: both
}
.w3-col {
	float: left;
	width: 100%
}
.w3-rest {
	overflow: hidden
}
.mine-menu {}
.mine-menu {
	font-size: 16px;
	color: #909090;
}
.mine-menu .active {
	color: #0AD8C8;
}
.all-center {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0 auto;
}
.mainbox {
	width: 420px;
	margin: 0 auto;
}
.btn-theme {
	color: #fff;
	background: #0AD8C8;
	border-color: #0AD8C8;
}
.btn-theme:hover,
.btn-theme:active {
	color: #fff;
	background: #0aD9ff;
	border-color: #0AD8C8;
}
.pl105 {
	padding-left: 105px;
}
.pl251 {
	padding-left: 251px;
}
.m8 {
	margin-top: 8px;
}
input.type-hide {
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
}
.changeImg {
	position: relative;
	top: -20px;
}
.addlist {
	width: 315px;
	box-shadow: none;
	-webkit-box-shadow: none;
	border: solid 1px #D1D7D4;
}
.industry span {
	display: inline-block;
	white-space: nowrap;
	padding: 5px 13px 3px;
}
.industry span.active {
	background: #0AD8C8;
	color: #fff;
	border-radius: 14px;
}
.selcaret {
	float: right;
	margin-top: -17px;
	margin-right: 15px;
}
/*行业选择*/
#industrylist li,#addresslist li {
	width: 98px;
	border: solid 1px #D1D7D4 !important;
	background-color: #F9F9F9!important;
	text-align: center;
}
#industrylist li.active,#addresslist li.active {
	border-bottom: solid 1px transparent !important;
}
#industrylist>li>a,#addresslist>li>a {
	font-size: 14px;
	color: #909090;
	font-weight: normal;
	padding: 6px 0 5px;
	margin-right: 0;
	border-radius: 0;
}
#industrylist>li.active>a,
#industrylist>li.active>a:focus,
#industrylist>li.active>a:hover,
#addresslist>li.active>a,
#addresslist>li.active>a:focus,
#addresslist>li.active>a:hover{
	background: #fff;
	color: #909090;
	font-size: 14px;
	margin-right: 0;
	border: none;
	height: 33px;
}
.addlist {
	width: 315px;
	box-shadow: none;
	-webkit-box-shadow: none;
	border: solid 1px #D1D7D4;
}
.w3-row-padding:after {
	content: "";
	display: table;
	clear: both
}
.w3-quarter {
	float: left;
	width: 24.99999%;
	padding: 10px;
}
.w3-third {
	float: left;
	width: 33.33333%
}
.w3-row-padding>.w3-quarter {
	padding: 0 10px;
}
.industrybox {
	border-color: rgba(0, 0, 0, 0) #D1D7D4 #D1D7D4;
	border-style: solid;
	border-width: 1px;
	padding: 18px 10px;
	text-align: center;
	font-size: 14px;
	height: 281px;
}
.industryname {
	border: 1px solid #D1D7D4;
	width: 100%;
	height: 32px;
	line-height: 32px;
}
.selected .industryname {
	background: url(../../../images/icon_xuanzhong.png) no-repeat 101% 105%;
	border: #0AD8C8 1px solid;
	background-size: 19px 21px;
}
.modal-content {
	border-radius: 0;
}
.modal-body {
	padding: 0;
}
.btn-default {
	background: #fff;
	color: #909090;
	font-size: 16px;
	border: 1px solid #D1D7D4;
	height: 40px;
}
.btn-default:hover,
.btn-default:active {
	color: #333;
	background: #F4F6FA;
}

page/mine/css/record.css

@@ -0,0 +1,141 @@
body {
	background: rgba(245, 249, 249, 1);
	color: #323232;
}
.w3-row:after {
	content: "";
	display: table;
	clear: both
}
.w3-col {
	float: left;
	width: 100%
}
.w3-rest {
	overflow: hidden
}
.div-table{
    display: table;
    width: 100%;
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
}
.table-row{
    display: table-row;
}
.table-cell{
    display: table-cell;
    border-bottom: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    padding: 15px 0 16px;
    text-align: center;
    vertical-align: middle;
}
.mine-menu {}
.mine-menu {
	font-size: 16px;
	color: #909090;
}
.mine-menu .active {
	color: #0AD8C8;
}
.all-center {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0 auto;
}
.mainbox {
	width: 420px;
	margin: 0 auto;
}
.pl105 {
	padding-left: 105px;
}
.pl251 {
	padding-left: 251px;
}
.plr25{
	padding-left: 25px;
	padding-right: 25px;
}
.m8 {
	margin-top: 8px;
}
.cancelbtn{
	padding: 8px 16px 5px;
	border: 1px solid #E3EDE8;
	color:#FF8787;
	font-size: 14px;
	width: 90px;
	margin: 0 auto;
}
#recordlist{
	border-bottom: 1px solid #0AD8C8;
}
#recordlist li{
	width: 129px;
	border-left: solid 1px #E3EDE8;
	border-right: solid 1px #E3EDE8;
	text-align: center;
}
#recordlist li.active{
	border: none;background: #0AD8C8;
}
#recordlist>li>a {
	font-size: 16px;
	color: #323232;
	font-weight: normal;
	padding: 13px 0 10px;
	margin-right: 0;
	border-radius: 0;
	height: 48px;
}
#recordlist>li.active>a{
	background: url(../../../images/icon_shangla.png) no-repeat 50% 100%;	
	background-size: 9px 7px;
	color: #fff;
	font-size: 16px;
	margin-right: 0;
	border: none;
	height: 47px;
}
.list-body{
	border:1px solid #E3EDE8;
	margin-top: 17px;
}
.list-header{
	background: #E8F6F5;
	font-size: 16px;
	color: #00786F;
	padding: 13px 0 15px 15px;
}
.list-r-border{
	border-right:1px solid #E3EDE8;
}

page/mine/css/security-setting.css

@@ -0,0 +1,81 @@
body {
	background: rgba(245, 249, 249, 1);
	color: #323232;
}
.w3-row:after {
	/*content: "";*/
	display: table;
	clear: both
}
.w3-col {
	float: left;
	width: 100%
}
.w3-rest {
	overflow: hidden
}
.mine-menu {}
.mine-menu {
	font-size: 16px;
	color: #909090;
}
.mine-menu .active {
	color: #0AD8C8;
}
.all-center {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0 auto;
}
.mainbox {
	width: 420px;
	margin: 0 auto;
}
.btn-theme {
	color: #fff;
	background: #0AD8C8;
	border-color: #0AD8C8;
}
.btn-theme:hover,
.btn-theme:active {
	color: #fff;
	background: #0aD9ff;
	border-color: #0AD8C8;
}
.pl105 {
	padding-left: 105px;
}
.pl251 {
	padding-left: 251px;
}
.m8 {
	margin-top: 8px;
}
.btn-default{
	background: #fff;
	color:#909090;
	font-size: 16px;
	border: 1px solid #D1D7D4;
}
.btn-default:hover,.btn-default:active{
	color:#333;
	background: #F4F6FA;
}

page/mine/html/personal-info.html

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人信息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="shortcut icon" href="../../../favicon.ico">
		<link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../plugins/artDialog/6.0.5/api/css/ui-dialog.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../css/personal-info.css" />
	</head>
	<body>
		<div id="app">
			<page-header></page-header>
			<personal-info></personal-info>			
			<page-footer></page-footer>
		</div>
		<script src="../../../js/vue.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/jquery-2.2.4.js "></script>
		<script src="../../../js/bootstrap.min.js "></script>
		<script src="../../../js/validate/jquery.validate.min.js "></script>
		<script src="../../../js/validate/messages_zh.min.js "></script>
		<script src="../../../js/security.js "></script>
		<script src="../../../plugins/layer/layer.min.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../plugins/suggest/bootstrap-suggest.min.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/es6-promise.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/underscore.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/util.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../api/http-request.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../plugins/artDialog/6.0.5/api/js/dialog-plus.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/selector.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../component/mine/personal-dialog-form.js "></script>
		<script src="../../../component/common/footer.js "></script>
		<script src="../../../component/common/header.js "></script>
		<script src="../../../component/mine/left-menu.js "></script>
		<script src="../../../component/mine/personal-info.js "></script>
		<script src="../../../component/mine/select-industry.js "></script>
		<script src="../../../component/mine/select-address.js "></script>
		<script src="../js/personal-info.js "></script>
	</body>
</html>

page/mine/html/record.html

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>预约记录</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="shortcut icon" href="../../../favicon.ico">
		<link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../plugins/artDialog/6.0.5/api/css/ui-dialog.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../css/record.css" />
	</head>
	<body>
		<div id="app">
			<page-header></page-header>
			<record></record>
			<page-footer></page-footer>
		</div>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/jquery-2.2.4.js"></script>
		<script src="../../../js/bootstrap.min.js"></script>
		<script src="../../../js/validate/jquery.validate.min.js"></script>
		<script src="../../../js/validate/messages_zh.min.js"></script>
		<script src="../../../js/security.js"></script>
		<script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/util.js" type="text/javascript " charset="utf-8"></script>
		<script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../plugins/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../component/common/footer.js"></script>
		<script src="../../../component/common/header.js"></script>
		<script src="../../../component/common/pagination.js"></script>
		<script src="../../../component/mine/left-menu.js"></script>
		<script src="../../../component/mine/personal-dialog-form.js"></script>
		<script src="../../../component/mine/record.js"></script>
		<script src="../js/record.js"></script>
	</body>
</html>

page/mine/html/security-setting.html

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>安全设置</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="shortcut icon" href="../../../favicon.ico">
		<link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../plugins/artDialog/6.0.5/api/css/ui-dialog.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../css/security-setting.css" />
	</head>
	<body>
		<div id="app">
			<page-header></page-header>
			<security-setting></security-setting>
			<page-footer></page-footer>
		</div>
		<script src="../../../js/vue.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/jquery-2.2.4.js "></script>
		<script src="../../../js/bootstrap.min.js "></script>
		<script src="../../../js/validate/jquery.validate.min.js "></script>
		<script src="../../../js/validate/messages_zh.min.js "></script>
		<script src="../../../js/security.js "></script>
		<script src="../../../plugins/suggest/bootstrap-suggest.min.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/es6-promise.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/underscore.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/util.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../api/http-request.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../plugins/artDialog/6.0.5/api/js/dialog-plus.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../js/selector.js " type="text/javascript " charset="utf-8 "></script>
		<script src="../../../component/common/footer.js "></script>
		<script src="../../../component/common/header.js "></script>
		<script src="../../../component/mine/left-menu.js "></script>
		<script src="../../../component/mine/security-setting.js "></script>
		<script src="../../../component/mine/change-password.js "></script>
		<script src="../../../component/mine/change-phone.js "></script>
		<script src="../js/security-setting.js "></script>
	</body>
</html>

page/mine/js/personal-info.js

@@ -0,0 +1,11 @@
new Vue({
	el: "#app",
	data: {
	},
	mounted: function() {
	},
	methods: {
		
	}
});

page/mine/js/record.js

@@ -0,0 +1,10 @@
new Vue({
	el: "#app",
	data: {		
	},
	mounted: function() {},
	methods: {
		
	}
});

page/mine/js/security-setting.js

@@ -0,0 +1,76 @@
new Vue({
	el: "#app",
	data: {
		code: "securitySetting"
	},
	mounted: function() {
	},
	methods: {
	}
});
$.validator.setDefaults({
	highlight: function(e) {
		$(e).closest(".form-group").removeClass("has-success").addClass("has-error")
	},
	success: function(e) {
		e.closest(".form-group").removeClass("has-error").addClass("has-success")
	},
	errorElement: "span",
	errorPlacement: function(e, r) {
		e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
	},
	errorClass: "help-block m-b-none",
	validClass: "help-block m-b-none"
}), $().ready(function() {
	var e = "<i class='fa fa-times-circle'></i> ";
	$("#passwordForm").validate({
		rules: {
			oldpassword: {
				required: !0,
				noNull: !0,
			},
			newpassword: {
				required: !0,
				noNull: !0,
			},
			confirm_password: {
				required: !0,
				noNull: !0,
				equalTo:"#newpassword"
			},
		},
		messages: {
			oldpassword: {
				required: e + "请输入旧密码",
			},
			newpassword: {
				required: e + "请输入新密码",
			},
			confirm_password: {
				required: e + "请再次输入新密码",
				equalTo:e+"两次输入的密码不一致"
			},
		}
	})
	$("#phoneForm").validate({
		rules: {
			phone: {
				required: !0,
				noNull: !0,
				regexPhone:!0
			}
		},
		messages: {
			phone: {
				required: e + "请输入手机号码",
			},
		}
	})
});
jQuery.validator.addMethod("noNull", function(value, element) {
	return this.optional(element) || !isNull(value)
}, "此项必填，不得为空！");
jQuery.validator.addMethod("regexPhone", function(value, element) {return this.optional(element) || /0?(13|14|15|18|17)[0-9]{9}/.test(value); }, "请输入正确的手机号码！"); 

page/register/register.css

@@ -0,0 +1,106 @@
body {
	font-size: 14px;
}
.mainbox {
	background: url("../../images/BG.jpg") no-repeat 100% 100%;
}
#main {
	margin: 0 auto;
	width: 1294px;
	padding-bottom: 200px;
	padding-top: 100px;
}
#head {
	background: #fff;
}
.hlogo {
	margin: 0 auto;
	width: 1294px;
	transition: all 0.6s;
}
.box-border {
	border: 3px solid #38D1CB;
}
#foot {
	background: #fff;
	text-align: center;
	font-size: 14px;
	padding: 34px 0 34px;
	color: #909090;
}
.form-group {
	position: relative;
}
.form-control {
	height: 50px;
	background: #F5FAFA;
}
.checkbox input[type=checkbox] {
	margin-top: 3px;
}
#registerForm {
	width: 400px;
	border: 5px solid rgba(75, 202, 208, 0.7);
	background-color: #fff;
	padding: 20px 0;
}
.btn-theme {
	color: #fff;
	background: #0AD8C8;
	border-color: #0AD8C8;
	font-size: 20px;
}
.btn-theme:hover,
.btn-theme:active {
	color: #fff;
	background: #0aD9ff;
	border-color: #0AD8C8;
}
a {
	color: #0AD8C8;
}
a:hover,
a:active {
	color: #0aD9ff;
	text-decoration: underline;
}
.pl80 {
	padding-left: 80px;
}
option {
	padding: 6px 12px;
	border: solid #909090 1px;
}
.c-f26 {
	font-size: 26px;
}
.btn {
	height: 53px;
}
.hlogo span img:hover {
	transform: scale(2);
	position: relative;
	z-index: 2;
	top: 30px;
	right: 30px;
	box-shadow: 0 4px 8px 0 rgba(255,255,255,0.2),0 6px 20px 0 rgba(255,255,255,0.19);
}

page/register/register.html

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="keywords" content="注册">
		<meta name="description" content="注册">
		<link rel="shortcut icon" href="../../favicon.ico">
		<link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../plugins/artDialog/6.0.5/api/css/ui-dialog.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="register.css" />
	</head>
	<body>		
		<div id="app">
			<register-form></register-form>
		</div>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery-2.2.4.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<script src="../../js/validate/jquery.validate.min.js"></script>
		<script src="../../js/validate/messages_zh.min.js"></script>
		<script src="../../js/toastr/toastr.min.js"></script>
		<script src="../../js/security.js"></script>
		<script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>		
		<script src="../../component/login-register/register.js"></script>
		<script src="register.js"></script>
	</body>
</html>

page/register/register.js

@@ -0,0 +1,5 @@
new Vue({
	el: "#app",
	data: {
	},
});

plugins/suggest/data.json

@@ -0,0 +1,64 @@
{
	"message": "",
	"value": [
		{
			"userName": "淳芸",
			"shortAccount": "chunyun",
			"userId": 20001
		}, {
			"userName": "orion-01",
			"shortAccount": "chunyun",
			"userId": 20000
		}, {
			"userName": "穆晓晨",
			"shortAccount": "chunyun",
			"userId": 20002
		}, {
			"userName": "张欢引",
			"shortAccount": "chunyun",
			"userId": 20003
		}, {
			"userName": "吴琼",
			"shortAccount": "wuqiong",
			"userId": 20004
		}, {
			"userName": "吴东鹏",
			"shortAccount": "wudongpeng",
			"userId": 20005
		}, {
			"userName": "黄少铅",
			"shortAccount": "huangshaoqian",
			"userId": 20006
		}, {
			"userName": "胡运燕",
			"shortAccount": "yunyan",
			"userId": 20007
		}, {
			"userName": "刘幸",
			"shortAccount": "liuxing",
			"userId": 20008
		}, {
			"userName": "陈媛媛",
			"shortAccount": "chenyuanyuan",
			"userId": 20009
		}, {
			"userName": "旷东林",
			"shortAccount": "chunyun",
			"userId": 20010
		}, {
			"userName": "唐宏禹",
			"shortAccount": "chunyun",
			"userId": 20011
		}, {
			"userName": "旷东林",
			"shortAccount": "kuangdonglin",
			"userId": 20010
		}, {
			"userName": "唐宏禹",
			"shortAccount": "tanghongyu",
			"userId": 20011
		}
	],
	"code": 200,
	"redirect": ""
}

plugins/suggest/suggest/bootstrap-suggest.min.js

@@ -0,0 +1,1013 @@
/**
 * Bootstrap Search Suggest
 * @desc    这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件，必须使用于按钮式下拉菜单组件上。
 * @author  renxia <lzwy0820#qq.com>
 * @github  https://github.com/lzwme/bootstrap-suggest-plugin.git
 * @since   2014-10-09
 *===============================================================================
 * (c) Copyright 2014-2016 http://lzw.me All Rights Reserved.
 ********************************************************************************/
(function (factory) {
    if (typeof define === "function" && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports === 'object' && typeof module === 'object') {
        factory(require('jquery'));
    } else if (window.jQuery) {
        factory(window.jQuery);
    } else {
        throw new Error('Not found jQuery.');
    }
})(function($) {
    var VERSION = 'VERSION_PLACEHOLDER';
    var $window = $(window);
    var isIe = 'ActiveXObject' in window; // 用于对 IE 的兼容判断
    var inputLock; // 用于中文输入法输入时锁定搜索
    // ie 下和 chrome 51 以上浏览器版本，出现滚动条时不计算 padding
    var chromeVer = navigator.userAgent.match(/Chrome\/(\d+)/);
    if (chromeVer) {
        chromeVer = +chromeVer[1];
    }
    var notNeedCalcPadding = isIe || chromeVer > 51;
    // 一些常量
    var BSSUGGEST = 'bsSuggest';
    var onDataRequestSuccess = 'onDataRequestSuccess';
    var DISABLED = 'disabled';
    var TRUE = true;
    var FALSE = false;
    /**
     * 错误处理
     */
    function handleError(e1, e2) {
        if (!window.console || !window.console.trace) {
            return;
        }
        console.trace(e1);
        if (e2) {
            console.trace(e2);
        }
    }
    /**
     * 获取当前 tr 列的关键字数据
     */
    function getPointKeyword($list) {
        return $list.data();
    }
    /**
     * 设置或获取输入框的 alt 值
     */
    function setOrGetAlt($input, val) {
        return val !== undefined ? $input.attr('alt', val) : $input.attr('alt');
    }
    /**
     * 设置或获取输入框的 data-json 值
     */
    function setJson($input, val) {
        return val !== undefined ? $input.attr('data-json', val) : $input.attr('data-json');
    }
    /**
     * 设置或获取输入框的 data-id 值
     */
    function setOrGetDataId($input, val) {
        return val !== (void 0) ? $input.attr('data-id', val) : $input.attr('data-id');
    }
    /**
     * 设置选中的值
     */
    function setValue($input, keywords, options) {
        if (!keywords || !keywords.key) {
            return;
        }
        var separator = options.separator || ',',
            inputValList,
            inputIdList,
            dataId = setOrGetDataId($input);
        if (options && options.multiWord) {
            inputValList = $input.val().split(separator);
            inputValList[inputValList.length - 1] = keywords.key;
            //多关键字检索支持设置id --- 存在 bug，不建议使用
            if (!dataId) {
                inputIdList = [keywords.id];
            } else {
                inputIdList = dataId.split(separator);
                inputIdList.push(keywords.id);
            }
            setOrGetDataId($input, inputIdList.join(separator))
                .val(inputValList.join(separator))
                .focus();
        } else {
            setOrGetDataId($input, keywords.id || '').val(keywords.key).focus();
        }
        $input.data('pre-val', $input.val())
            .trigger('onSetSelectValue', [keywords, (options.data.value || options._lastData.value)[keywords.index]]);
    }
    /**
     * 调整选择菜单位置
     * @param {Object} $input
     * @param {Object} $dropdownMenu
     * @param {Object} options
     */
    function adjustDropMenuPos($input, $dropdownMenu, options) {
        if (!$dropdownMenu.is(':visible')) {
            return;
        }
        var $parent = $input.parent();
        var parentHeight = $parent.height();
        var parentWidth = $parent.width();
        if (options.autoDropup) {
            setTimeout(function() {
                var offsetTop = $input.offset().top;
                var winScrollTop = $window.scrollTop();
                var menuHeight = $dropdownMenu.height();
                if ( // 自动判断菜单向上展开
                    ($window.height() + winScrollTop - offsetTop) < menuHeight && // 假如向下会撑长页面
                    offsetTop > (menuHeight + winScrollTop) // 而且向上不会撑到顶部
                ) {
                    $parent.addClass('dropup');
                } else {
                    $parent.removeClass('dropup');
                }
            }, 10);
        }
        // 列表对齐方式
        var dmcss = {};
        if (options.listAlign === 'left') {
            dmcss = {
                'left': $input.siblings('div').width() - parentWidth,
                'right': 'auto'
            };
        } else if (options.listAlign === 'right') {
            dmcss = {
                'left': 'auto',
                'right': 0
            };
        }
        // ie 下，不显示按钮时的 top/bottom
        if (isIe && !options.showBtn) {
            if (!$parent.hasClass('dropup')) {
                dmcss.top = parentHeight;
                dmcss.bottom = 'auto';
            } else {
                dmcss.top = 'auto';
                dmcss.bottom = parentHeight;
            }
        }
        // 是否自动最小宽度
        if (!options.autoMinWidth) {
            dmcss.minWidth = parentWidth;
        }
        /* else {
            dmcss['width'] = 'auto';
        }*/
        $dropdownMenu.css(dmcss);
        return $input;
    }
    /**
     * 设置输入框背景色
     * 当设置了 indexId，而输入框的 data-id 为空时，输入框加载警告色
     */
    function setBackground($input, options) {
        var inputbg, bg, warnbg;
        if ((options.indexId === -1 && !options.idField) || options.multiWord) {
            return $input;
        }
        bg = options.inputBgColor;
        warnbg = options.inputWarnColor;
        var curVal = $input.val();
        var preVal = $input.data('pre-val');
        if (setOrGetDataId($input) || !curVal) {
            $input.css('background', bg || '');
            if (!curVal && preVal) {
                $input.trigger('onUnsetSelectValue').data('pre-val', '');
            }
            return $input;
        }
        inputbg = $input.css('backgroundColor').replace(/ /g, '').split(',', 3).join(',');
        // 自由输入的内容，设置背景色
        if (!~warnbg.indexOf(inputbg)) {
            $input.trigger('onUnsetSelectValue') // 触发取消data-id事件
                .data('pre-val', '')
                .css('background', warnbg);
        }
        return $input;
    }
    /**
     * 调整滑动条
     */
    function adjustScroll($input, $dropdownMenu, options) {
        // 控制滑动条
        var $hover = $input.parent().find('tbody tr.' + options.listHoverCSS),
            pos, maxHeight;
        if ($hover.length) {
            pos = ($hover.index() + 3) * $hover.height();
            maxHeight = +$dropdownMenu.css('maxHeight').replace('px', '');
            if (pos > maxHeight || $dropdownMenu.scrollTop() > maxHeight) {
                pos = pos - maxHeight;
            } else {
                pos = 0;
            }
            $dropdownMenu.scrollTop(pos);
        }
    }
    /**
     * 解除所有列表 hover 样式
     */
    function unHoverAll($dropdownMenu, options) {
        $dropdownMenu.find('tr.' + options.listHoverCSS).removeClass(options.listHoverCSS);
    }
    /**
     * 验证 $input 对象是否符合条件
     *   1. 必须为 bootstrap 下拉式菜单
     *   2. 必须未初始化过
     */
    function checkInput($input, $dropdownMenu, options) {
        if (
            !$dropdownMenu.length || // 过滤非 bootstrap 下拉式菜单对象
            $input.data(BSSUGGEST) // 是否已经初始化的检测
        ) {
            return FALSE;
        }
        $input.data(BSSUGGEST, {
            options: options
        });
        return TRUE;
    }
    /**
     * 数据格式检测
     * 检测 ajax 返回成功数据或 data 参数数据是否有效
     * data 格式：{"value": [{}, {}...]}
     */
    function checkData(data) {
        var isEmpty = TRUE, o;
        for (o in data) {
            if (o === 'value') {
                isEmpty = FALSE;
                break;
            }
        }
        if (isEmpty) {
            handleError('返回数据格式错误!');
            return FALSE;
        }
        if (!data.value.length) {
            // handleError('返回数据为空!');
            return FALSE;
        }
        return data;
    }
    /**
     * 判断字段名是否在 options.effectiveFields 配置项中
     * @param  {String} field   要判断的字段名
     * @param  {Object} options
     * @return {Boolean}        effectiveFields 为空时始终返回 true
     */
    function inEffectiveFields(field, options) {
        var effectiveFields = options.effectiveFields;
        return !(field === '__index' ||
            effectiveFields.length &&
            !~$.inArray(field, effectiveFields));
    }
    /**
     * 判断字段名是否在 options.searchFields 搜索字段配置中
     */
    function inSearchFields(field, options) {
        return ~$.inArray(field, options.searchFields);
    }
    /**
     * 通过下拉菜单显示提示文案
     */
    function showTip(tip, $input, $dropdownMenu, options) {
        $dropdownMenu.html('<div style="padding:10px 5px 5px">' + tip + '</div>').show();
        adjustDropMenuPos($input, $dropdownMenu, options);
    }
    /**
     * 下拉列表刷新
     * 作为 fnGetData 的 callback 函数调用
     */
    function refreshDropMenu($input, data, options) {
        var $dropdownMenu = $input.parent().find('ul:eq(0)'),
            len, i, field, index = 0,
            tds,
            html = ['<table class="table table-condensed table-sm" style="margin:0">'],
            idValue, keyValue; // 作为输入框 data-id 和内容的字段值
        var dataList = data.value;
        if (!data || !(len = dataList.length)) {
            if (options.emptyTip) {
                showTip(options.emptyTip, $input, $dropdownMenu, options);
            } else {
                $dropdownMenu.empty().hide();
            }
            return $input;
        }
        // 相同数据，不用继续渲染了
        if (
            options._lastData &&
            JSON.stringify(options._lastData) === JSON.stringify(data) &&
            $dropdownMenu.find('tr').length === len
        ) {
            $dropdownMenu.show();
            return adjustDropMenuPos($input, $dropdownMenu, options);
            // return $input;
        }
        options._lastData = data;
        // 生成表头
        if (options.showHeader) {
            html.push('<thead><tr>');
            for (field in dataList[0]) {
                if (!inEffectiveFields(field, options)) {
                    continue;
                }
                html.push('<th>', (options.effectiveFieldsAlias[field] || field),
                    index === 0 ? ('(' + len + ')') : '' , // 表头第一列记录总数
                    '</th>');
                index++;
            }
            html.push('</tr></thead>');
        }
        html.push('<tbody>');
        // console.log(data, len);
        // 按列加数据
        var dataI;
        for (i = 0; i < len; i++) {
            index = 0;
            tds = [];
            dataI = dataList[i];
            idValue = dataI[options.idField] || '';
            keyValue = dataI[options.keyField] || '';
            for (field in dataI) {
                // 标记作为 value 和 作为 id 的值
                if (!keyValue && options.indexKey === index) {
                    keyValue = dataI[field];
                }
                if (!idValue && options.indexId === index) {
                    idValue = dataI[field];
                }
                index++;
                // 列表中只显示有效的字段
                if (inEffectiveFields(field, options)) {
                    tds.push('<td data-name="', field, '">', dataI[field], '</td>');
                }
            }
            html.push('<tr data-index="', (dataI.__index || i),
                '" data-id="', idValue,
                '" data-key="', keyValue, 
                '" data-json="', encodeURIComponent(JSON.stringify(dataI)), '">',
                tds.join(''), '</tr>');
        }
        html.push('</tbody></table>');
        $dropdownMenu.html(html.join('')).show();
        // scrollbar 存在时，延时到动画结束时调整 padding
        setTimeout(function() {
            if (notNeedCalcPadding) {
                return;
            }
            var $table = $dropdownMenu.find('table:eq(0)'),
                pdr = 0,
                mgb = 0;
            if (
                $dropdownMenu.height() < $table.height() &&
                +$dropdownMenu.css('minWidth').replace('px', '') < $dropdownMenu.width()
            ) {
                pdr = 18;
                mgb = 20;
            }
            $dropdownMenu.css('paddingRight', pdr);
            $table.css('marginBottom', mgb);
        }, 301);
        adjustDropMenuPos($input, $dropdownMenu, options);
        return $input;
    }
    /**
     * ajax 获取数据
     * @param  {Object} options
     * @return {Object}         $.Deferred
     */
    function ajax(options, keyword) {
        keyword = keyword || '';
        var preAjax = options._preAjax;
        if (preAjax && preAjax.abort && preAjax.readyState !== 4) {
            // console.log('abort pre ajax');
            preAjax.abort();
        }
        var ajaxParam = {
            type: 'GET',
            dataType: options.jsonp ? 'jsonp' : 'json',
            timeout: 5000,
        };
        // jsonp
        if (options.jsonp) {
            ajaxParam.jsonp = options.jsonp;
        }
        // 自定义 ajax 请求参数生成方法
        var adjustAjaxParam,
            fnAdjustAjaxParam = options.fnAdjustAjaxParam;
        if ($.isFunction(fnAdjustAjaxParam)) {
            adjustAjaxParam = fnAdjustAjaxParam(keyword, options);
            // options.fnAdjustAjaxParam 返回false，则终止 ajax 请求
            if (FALSE === adjustAjaxParam) {
                return;
            }
            $.extend(ajaxParam, adjustAjaxParam);
        }
        // url 调整
        ajaxParam.url = function() {
            if (!keyword || ajaxParam.data) {
                return ajaxParam.url || options.url;
            }
            var type = '?';
            if (/=$/.test(options.url)) {
                type = '';
            } else if (/\?/.test(options.url)) {
                type = '&';
            }
            return options.url + type + encodeURIComponent(keyword);
        }();
        return options._preAjax = $.ajax(ajaxParam).done(function(result) {
            options.data = options.fnProcessData(result);
        }).fail(function(err) {
            if (options.fnAjaxFail) {
                options.fnAjaxFail(err, options);
            }
        });
    }
    /**
     * 检测 keyword 与 value 是否存在互相包含
     * @param  {String}  keyword 用户输入的关键字
     * @param  {String}  key     匹配字段的 key
     * @param  {String}  value   key 字段对应的值
     * @param  {Object}  options
     * @return {Boolean}         包含/不包含
     */
    function isInWord(keyword, key, value, options) {
        value = $.trim(value);
        if (options.ignorecase) {
            keyword = keyword.toLocaleLowerCase();
            value = value.toLocaleLowerCase();
        }
        return value &&
            (inEffectiveFields(key, options) || inSearchFields(key, options)) && // 必须在有效的搜索字段中
            (
                ~value.indexOf(keyword) || // 匹配值包含关键字
                options.twoWayMatch && ~keyword.indexOf(value) // 关键字包含匹配值
            );
    }
    /**
     * 通过 ajax 或 json 参数获取数据
     */
    function getData(keyword, $input, callback, options) {
        var data, validData, filterData = {
                value: []
            },
            i, key, len,
            fnPreprocessKeyword = options.fnPreprocessKeyword;
        keyword = keyword || '';
        // 获取数据前对关键字预处理方法
        if ($.isFunction(fnPreprocessKeyword)) {
            keyword = fnPreprocessKeyword(keyword, options);
        }
        // 给了url参数，则从服务器 ajax 请求
        // console.log(options.url + keyword);
        if (options.url) {
            var timer;
            if (options.searchingTip) {
                timer = setTimeout(function() {
                    showTip(options.searchingTip, $input, $input.parent().find('ul'), options);
                }, 600);
            }
            ajax(options, keyword).done(function(result) {
                callback($input, options.data, options); // 为 refreshDropMenu
                $input.trigger(onDataRequestSuccess, result);
                if (options.getDataMethod === 'firstByUrl') {
                    options.url = null;
                }
            }).always(function() {
                timer && clearTimeout(timer);
            });
        } else {
            // 没有给出 url 参数，则从 data 参数获取
            data = options.data;
            validData = checkData(data);
            // 本地的 data 数据，则在本地过滤
            if (validData) {
                if (keyword) {
                    // 输入不为空时则进行匹配
                    len = data.value.length;
                    for (i = 0; i < len; i++) {
                        for (key in data.value[i]) {
                            if (
                                data.value[i][key] &&
                                isInWord(keyword, key, data.value[i][key] + '', options)
                            ) {
                                filterData.value.push(data.value[i]);
                                filterData.value[filterData.value.length - 1].__index = i;
                                break;
                            }
                        }
                    }
                } else {
                    filterData = data;
                }
            }
            callback($input, filterData, options);
        } // else
    }
    /**
     * 数据处理
     * url 获取数据时，对数据的处理，作为 fnGetData 之后的回调处理
     */
    function processData(data) {
        return checkData(data);
    }
    /**
     * 取得 clearable 清除按钮
     */
    function getIClear($input, options) {
        var $iClear = $input.prev('i.clearable');
        // 是否可清除已输入的内容(添加清除按钮)
        if (options.clearable && !$iClear.length) {
                $iClear = $('<i class="clearable glyphicon glyphicon-remove"></i>')
                    .prependTo($input.parent());
        }
        return $iClear.css({
            position: 'absolute',
            top: 12,
            right: options.showBtn ? ($input.next('.input-group-btn').width() || 33) + 2 : 12,
            zIndex: 4,
            cursor: 'pointer',
            fontSize: 12
        }).hide();
    }
    /**
     * 默认的配置选项
     * @type {Object}
     */
    var defaultOptions = {
        url: null,                      // 请求数据的 URL 地址
        jsonp: null,                    // 设置此参数名，将开启jsonp功能，否则使用json数据结构
        data: {
            value: []
        },                              // 提示所用的数据，注意格式
        indexId: 0,                     // 每组数据的第几个数据，作为input输入框的 data-id，设为 -1 且 idField 为空则不设置此值
        indexKey: 0,                    // 每组数据的第几个数据，作为input输入框的内容
        idField: '',                    // 每组数据的哪个字段作为 data-id，优先级高于 indexId 设置（推荐）
        keyField: '',                   // 每组数据的哪个字段作为输入框内容，优先级高于 indexKey 设置（推荐）
        /* 搜索相关 */
        autoSelect: TRUE,               // 键盘向上/下方向键时，是否自动选择值
        allowNoKeyword: TRUE,           // 是否允许无关键字时请求数据
        getDataMethod: 'firstByUrl',    // 获取数据的方式，url：一直从url请求；data：从 options.data 获取；firstByUrl：第一次从Url获取全部数据，之后从options.data获取
        delayUntilKeyup: FALSE,         // 获取数据的方式 为 firstByUrl 时，是否延迟到有输入时才请求数据
        ignorecase: FALSE,              // 前端搜索匹配时，是否忽略大小写
        effectiveFields: [],            // 有效显示于列表中的字段，非有效字段都会过滤，默认全部有效。
        effectiveFieldsAlias: {},       // 有效字段的别名对象，用于 header 的显示
        searchFields: [],               // 有效搜索字段，从前端搜索过滤数据时使用，但不一定显示在列表中。effectiveFields 配置字段也会用于搜索过滤
        twoWayMatch: TRUE,              // 是否双向匹配搜索。为 true 即输入关键字包含或包含于匹配字段均认为匹配成功，为 false 则输入关键字包含于匹配字段认为匹配成功
        multiWord: FALSE,               // 以分隔符号分割的多关键字支持
        separator: ',',                 // 多关键字支持时的分隔符，默认为半角逗号
        delay: 300,                     // 搜索触发的延时时间间隔，单位毫秒
        emptyTip: '',                   // 查询为空时显示的内容，可为 html
        searchingTip: '搜索中...',      // ajax 搜索时显示的提示内容，当搜索时间较长时给出正在搜索的提示
        /* UI */
        autoDropup: FALSE,              // 选择菜单是否自动判断向上展开。设为 true，则当下拉菜单高度超过窗体，且向上方向不会被窗体覆盖，则选择菜单向上弹出
        autoMinWidth: FALSE,            // 是否自动最小宽度，设为 false 则最小宽度不小于输入框宽度
        showHeader: FALSE,              // 是否显示选择列表的 header。为 true 时，有效字段大于一列则显示表头
        showBtn: TRUE,                  // 是否显示下拉按钮
        inputBgColor: '',               // 输入框背景色，当与容器背景色不同时，可能需要该项的配置
        inputWarnColor: 'rgba(255,0,0,.1)', // 输入框内容不是下拉列表选择时的警告色
        listStyle: {
            'padding-top': 0,
            'max-height': '375px',
            'max-width': '800px',
            'overflow': 'auto',
            'width': 'auto',
            'transition': '0.3s',
            '-webkit-transition': '0.3s',
            '-moz-transition': '0.3s',
            '-o-transition': '0.3s'
        },                              // 列表的样式控制
        listAlign: 'left',              // 提示列表对齐位置，left/right/auto
        listHoverStyle: 'background: #07d; color:#fff', // 提示框列表鼠标悬浮的样式
        listHoverCSS: 'jhover',         // 提示框列表鼠标悬浮的样式名称
        clearable: FALSE,               // 是否可清除已输入的内容
        /* key */
        keyLeft: 37,                    // 向左方向键，不同的操作系统可能会有差别，则自行定义
        keyUp: 38,                      // 向上方向键
        keyRight: 39,                   // 向右方向键
        keyDown: 40,                    // 向下方向键
        keyEnter: 13,                   // 回车键
        /* methods */
        fnProcessData: processData,     // 格式化数据的方法，返回数据格式参考 data 参数
        fnGetData: getData,             // 获取数据的方法，无特殊需求一般不作设置
        fnAdjustAjaxParam: null,        // 调整 ajax 请求参数方法，用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等
        fnPreprocessKeyword: null,      // 搜索过滤数据前，对输入关键字作进一步处理方法。注意，应返回字符串
        fnAjaxFail: null,               // ajax 失败时回调方法
    };
    var methods = {
        init: function(options) {
            // 参数设置
            var self = this;
            options = options || {};
            // 默认配置有效显示字段多于一个，则显示列表表头，否则不显示
            if (undefined === options.showHeader && options.effectiveFields && options.effectiveFields.length > 1) {
                options.showHeader = TRUE;
            }
            options = $.extend(TRUE, {}, defaultOptions, options);
            // 旧的方法兼容
            if (options.processData) {
                options.fnProcessData = options.processData;
            }
            if (options.getData) {
                options.fnGetData = options.getData;
            }
            if (options.getDataMethod === 'firstByUrl' && options.url && !options.delayUntilKeyup) {
                ajax(options).done(function(result) {
                    options.url = null;
                    self.trigger(onDataRequestSuccess, result);
                });
            }
            // 鼠标滑动到条目样式
            if (!$('#' + BSSUGGEST).length) {
                $('head:eq(0)').append('<style id="' + BSSUGGEST + '">.' + options.listHoverCSS + '{' + options.listHoverStyle + '}</style>');
            }
            return self.each(function() {
                var $input = $(this),
                    $parent = $input.parent(),
                    $iClear = getIClear($input, options),
                    isMouseenterMenu,
                    keyupTimer, // keyup 与 input 事件延时定时器
                    $dropdownMenu = $parent.find('ul:eq(0)');
                // 验证输入框对象是否符合条件
                if (!checkInput($input, $dropdownMenu, options)) {
                    console.warn('不是一个标准的 bootstrap 下拉式菜单或已初始化:', $input);
                    return;
                }
                // 是否显示 button 按钮
                if (!options.showBtn) {
                    $input.css('borderRadius', 4);
                    $parent.css('width', '100%')
                        .find('.btn:eq(0)').hide();
                }
                // 移除 disabled 类，并禁用自动完成
                $input.removeClass(DISABLED).prop(DISABLED, FALSE).attr('autocomplete', 'off');
                // dropdown-menu 增加修饰
                $dropdownMenu.css(options.listStyle);
                // 默认背景色
                if (!options.inputBgColor) {
                    options.inputBgColor = $input.css('backgroundColor');
                }
                // 开始事件处理
                $input.on('keydown', function(event) {
                    var currentList, tipsKeyword; // 提示列表上被选中的关键字
                    // 当提示层显示时才对键盘事件处理
                    if (!$dropdownMenu.is(':visible')) {
                        setOrGetDataId($input, '');
                        return;
                    }
                    currentList = $dropdownMenu.find('.' + options.listHoverCSS);
                    tipsKeyword = ''; // 提示列表上被选中的关键字
                    unHoverAll($dropdownMenu, options);
                    if (event.keyCode === options.keyDown) { // 如果按的是向下方向键
                        if (!currentList.length) {
                            // 如果提示列表没有一个被选中,则将列表第一个选中
                            tipsKeyword = getPointKeyword($dropdownMenu.find('tbody tr:first').mouseover());
                        } else if (!currentList.next().length) {
                            // 如果是最后一个被选中,则取消选中,即可认为是输入框被选中，并恢复输入的值
                            if (options.autoSelect) {
                                setOrGetDataId($input, '').val(setOrGetAlt($input));
                            }
                        } else {
                            // 选中下一行
                            tipsKeyword = getPointKeyword(currentList.next().mouseover());
                        }
                        // 控制滑动条
                        adjustScroll($input, $dropdownMenu, options);
                        if (!options.autoSelect) {
                            return;
                        }
                    } else if (event.keyCode === options.keyUp) { // 如果按的是向上方向键
                        if (!currentList.length) {
                            tipsKeyword = getPointKeyword($dropdownMenu.find('tbody tr:last').mouseover());
                        } else if (!currentList.prev().length) {
                            if (options.autoSelect) {
                                setOrGetDataId($input, '').val(setOrGetAlt($input));
                            }
                        } else {
                            // 选中前一行
                            tipsKeyword = getPointKeyword(currentList.prev().mouseover());
                        }
                        // 控制滑动条
                        adjustScroll($input, $dropdownMenu, options);
                        if (!options.autoSelect) {
                            return;
                        }
                    } else if (event.keyCode === options.keyEnter) {
                        tipsKeyword = getPointKeyword(currentList);
                        $dropdownMenu.hide(); // .empty();
                    } else {
                        setOrGetDataId($input, '');
                    }
                    // 设置值 tipsKeyword
                    // console.log(tipsKeyword);
                    setValue($input, tipsKeyword, options);
                }).on('compositionstart', function(event) {
                    // 中文输入开始，锁定
                    // console.log('compositionstart');
                    inputLock = TRUE;
                }).on('compositionend', function(event) {
                    // 中文输入结束，解除锁定
                    // console.log('compositionend');
                    inputLock = FALSE;
                }).on('keyup input paste', function(event) {
                    var word;
                    if (event.keyCode) {
                        setBackground($input, options);
                    }
                    // 如果弹起的键是回车、向上或向下方向键则返回
                    if (~$.inArray(event.keyCode, [options.keyDown, options.keyUp, options.keyEnter])) {
                        $input.val($input.val()); // 让鼠标输入跳到最后
                        return;
                    }
                    clearTimeout(keyupTimer);
                    keyupTimer = setTimeout(function() {
                        // console.log('input keyup', event);
                        // 锁定状态，返回
                        if (inputLock) {
                            return;
                        }
                        word = $input.val();
                        // 若输入框值没有改变则返回
                        if ($.trim(word) && word === setOrGetAlt($input)) {
                            return;
                        }
                        // 当按下键之前记录输入框值,以方便查看键弹起时值有没有变
                        setOrGetAlt($input, word);
                        if (options.multiWord) {
                            word = word.split(options.separator).reverse()[0];
                        }
                        // 是否允许空数据查询
                        if (!word.length && !options.allowNoKeyword) {
                            return;
                        }
						
						if (options.url) {
                        	options.fnGetData($.trim(word), $input, refreshDropMenu, options);
                        }
                    }, options.delay || 300);
                }).on('focus', function() {
                    // console.log('input focus');
                    adjustDropMenuPos($input, $dropdownMenu, options);
                }).on('blur', function() {
                    if (!isMouseenterMenu) { // 不是进入下拉列表状态，则隐藏列表
                        $dropdownMenu.css('display', '');
                    }
                }).on('click', function() {
                    // console.log('input click');
                    var word = $input.val();
                    if (
                        $.trim(word) &&
                        word === setOrGetAlt($input) &&
                        $dropdownMenu.find('table tr').length
                    ) {
                        return $dropdownMenu.show();
                    }
                    // if ($dropdownMenu.css('display') !== 'none') {
                    if ($dropdownMenu.is(':visible')) {
                        return;
                    }
                    if (options.multiWord) {
                        word = word.split(options.separator).reverse()[0];
                    }
                    // 是否允许空数据查询
                    if (!word.length && !options.allowNoKeyword) {
                        return;
                    }
                    // console.log('word', word);
                    options.fnGetData($.trim(word), $input, refreshDropMenu, options);
                });
                // 下拉按钮点击时
                $parent.find('.btn:eq(0)').attr('data-toggle', '').click(function() {
                    var display = 'none';
                    // if ($dropdownMenu.is(':visible')) {
                    if ($dropdownMenu.css('display') === display) {
                        display = 'block';
                        if (options.url) {
                            $input.click().focus();
                            if (!$dropdownMenu.find('tr').length) {
                                display = 'none';
                            }
                        } else {
                            // 不以 keyword 作为过滤，展示所有的数据
                            refreshDropMenu($input, options.data, options);
                        }
                    }
                    $dropdownMenu.css('display', display);
                    return FALSE;
                });
                // 列表中滑动时，输入框失去焦点
                $dropdownMenu.mouseenter(function() {
                        // console.log('mouseenter')
                        isMouseenterMenu = 1;
                        $input.blur();
                    }).mouseleave(function() {
                        // console.log('mouseleave')
                        isMouseenterMenu = 0;
                        $input.focus();
                    }).on('mouseenter', 'tbody tr', function() {
                        // 行上的移动事件
                        unHoverAll($dropdownMenu, options);
                        $(this).addClass(options.listHoverCSS);
                        return FALSE; // 阻止冒泡
                    })
                    .on('mousedown', 'tbody tr', function() {
                        var keywords = getPointKeyword($(this));
                        setValue($input, keywords, options);
                        setOrGetAlt($input, keywords.key);
                        setJson($input, keywords.json);
                        setBackground($input, options);
                        $dropdownMenu.hide();
                    });
                // 存在清空按钮
                if ($iClear.length) {
                    $iClear.click(function () {
                        setOrGetDataId($input, '').val('');
                        setBackground($input, options);
                    });
                    $parent.mouseenter(function() {
                        if (!$input.prop(DISABLED)) {
                            $iClear.show();
                        }
                    }).mouseleave(function() {
                        $iClear.hide();
                    });
                }
            });
        },
        show: function() {
            return this.each(function() {
                $(this).click();
            });
        },
        hide: function() {
            return this.each(function() {
                $(this).parent().find('ul:eq(0)').css('display', '');
            });
        },
        disable: function() {
            return this.each(function() {
                $(this).attr(DISABLED, TRUE)
                    .parent().find('.btn:eq(0)').prop(DISABLED, TRUE);
            });
        },
        enable: function() {
            return this.each(function() {
                $(this).attr(DISABLED, FALSE)
                    .parent().find('.btn:eq(0)').prop(DISABLED, FALSE);
            });
        },
        destroy: function() {
            return this.each(function() {
                $(this).off().removeData(BSSUGGEST).removeAttr('style')
                    .parent().find('.btn:eq(0)').off().show().attr('data-toggle', 'dropdown').prop(DISABLED, FALSE) // .addClass(DISABLED);
                    .next().css('display', '').off();
            });
        },
        version: function() {
            return VERSION;
        }
    };
    $.fn[BSSUGGEST] = function(options) {
        // 方法判断
        if (typeof options === 'string' && methods[options]) {
            var inited = TRUE;
            this.each(function() {
                if (!$(this).data(BSSUGGEST)) {
                    return inited = FALSE;
                }
            });
            // 只要有一个未初始化，则全部都不执行方法，除非是 init 或 version
            if (!inited && 'init' !== options && 'version' !== options) {
                return this;
            }
            // 如果是方法，则参数第一个为函数名，从第二个开始为函数参数
            return methods[options].apply(this, [].slice.call(arguments, 1));
        } else {
            // 调用初始化方法
            return methods.init.apply(this, arguments);
        }
    }
});

plugins/suggest/suggest/data.json

@@ -0,0 +1,64 @@
{
	"message": "",
	"value": [
		{
			"userName": "淳芸",
			"shortAccount": "chunyun",
			"userId": 20001
		}, {
			"userName": "orion-01",
			"shortAccount": "chunyun",
			"userId": 20000
		}, {
			"userName": "穆晓晨",
			"shortAccount": "chunyun",
			"userId": 20002
		}, {
			"userName": "张欢引",
			"shortAccount": "chunyun",
			"userId": 20003
		}, {
			"userName": "吴琼",
			"shortAccount": "wuqiong",
			"userId": 20004
		}, {
			"userName": "吴东鹏",
			"shortAccount": "wudongpeng",
			"userId": 20005
		}, {
			"userName": "黄少铅",
			"shortAccount": "huangshaoqian",
			"userId": 20006
		}, {
			"userName": "胡运燕",
			"shortAccount": "yunyan",
			"userId": 20007
		}, {
			"userName": "刘幸",
			"shortAccount": "liuxing",
			"userId": 20008
		}, {
			"userName": "陈媛媛",
			"shortAccount": "chenyuanyuan",
			"userId": 20009
		}, {
			"userName": "旷东林",
			"shortAccount": "chunyun",
			"userId": 20010
		}, {
			"userName": "唐宏禹",
			"shortAccount": "chunyun",
			"userId": 20011
		}, {
			"userName": "旷东林",
			"shortAccount": "kuangdonglin",
			"userId": 20010
		}, {
			"userName": "唐宏禹",
			"shortAccount": "tanghongyu",
			"userId": 20011
		}
	],
	"code": 200,
	"redirect": ""
}