sr-publicServicePlatform/component/doctor/forget.js

(function() {
	Vue.component('forget-form', {
		template: `<div><div class="container-fluid">
				<div class="container" id="head">
					<div class="top-banner">
						<img src="../../../images/doctor_logo_img.png" class="hlogo" />
						<span class="qr-container">
							<img src="../../../images/qr_code.png" class="qr_code" />
							<p class="c-f12 text-center">下载APP</p>
						</span>
						<span class="c-border-l return" @click="goLogin()">返回登录页</span>
					</div>
				</div>
			</div>
			<div class="container-fluid chahua-bg c-border-t">
				<div class="container ptb100">
					<div class="forget-form c-border">
						<div class="clearfix">
							<div v-for="step in indexArr" :key="step" class="fl step" :class="{'set-active': activeIndex >= step}">
								<div class="clearfix" :class="{'pl15': step == 1}">
									<p v-if="step > 1" class="fl clearfix">
										<em class="fl"></em>
									</p>
									<span class="fl">{{step}}</span>
									<p v-if="step < 4" class="fl">
										<em class="fl"></em>
									</p>
								</div>
								<label class="mt20" :class="setClass(step)">{{setTxt(step)}}</label>
							</div>
						</div>
						<div class="detail-form">
							<div class="container-fluid" v-if="activeIndex == 1">
								<p class="form-group clearfix">
									<label class="fl form-label">用户名称</label>
									<input class="fl form-control" placeholder="手机号码/用户名称" />
								</p>
								<p class="form-group clearfix">
									<label class="fl form-label">验证码</label>
									<input class="fl form-control" placeholder="输入图形验证码" />
								</p>
								<p class="form-group clearfix">
									<label class="fl form-label"></label>
									<img class="fl" height="30" src="">看不清&nbsp;?&nbsp;<span class="c-0ad8c8">换一张</span>
								</p>
							</div>
							<div class="container-fluid" v-if="activeIndex == 2">
								<p class="form-group clearfix">
									<label class="fl form-label">用户名称</label>
									<input class="fl form-control" readonly="true" placeholder="用户名称" />
								</p>
								<div class="form-group">
									<p class="m0 clearfix">
										<label class="fl form-label">手机号码</label>
										<input class="fl form-control" readonly="true" placeholder="手机号码" />
									</p>
									<p class="c-909090 c-f12 m0"><label class="form-label h0"></label>若该手机号码无法正常使用请<span class="c-37a6ed ml5 appeal" @click="goHelp()">账号申诉</span></p>
								</div>
								<p class="form-group clearfix">
									<label class="fl form-label">验证码</label>
									<input class="fl form-control" placeholder="短信验证码" />
									<span class="c-0ad8c8 send">发送验证码</span>
								</p>
							</div>
							<div class="container-fluid" v-if="activeIndex == 3">
								<p class="form-group clearfix">
									<label class="fl form-label">新的密码</label>
									<input class="fl form-control" placeholder="设置6-20位登录密码" />
								</p>
								<p class="form-group clearfix">
									<label class="fl form-label">重复密码</label>
									<input class="fl form-control" placeholder="请再次输入登录密码" />
								</p>
							</div>
							<div class="step4 container-fluid" v-if="activeIndex == 4">
								<h3 class="success">密码重置成功</h3>
								<p class="c-909090">下次请使用新密码登录</p>
							</div>
						</div>
						<div>
							<span class="btn" v-if="activeIndex != 4" @click="next()">下一步</span>
							<span class="btn" v-if="activeIndex == 4" @click="goLogin()">进入登录页</span>
						<div>
					</div>
				</div>
			</div></div>`,
		props: [],
		data: function() {
			return {
				indexArr: [1, 2, 3, 4],
				activeIndex: 1
			}
		},
		methods: {
			setTxt: function(index) {
				var str = ''
				switch(+index) {
					case 1: str = '填写账号名';break
					case 2: str = '验证身份';break
					case 3: str = '设置新密码';break
					case 4: str = '完成';break
				}
				return str
			},
			setClass: function(index) {
				var str = ''
				switch(+index) {
					case 1: str = '';break
					case 2: str = 'txt-center';break
					case 3: str = 'txt-center';break
					case 4: str = 'txt-right';break
				}
				return str
			},
			goHelp: function() {
				window.location.href = "appeal.html"
			},
			goLogin: function() {
				window.location.href = "login.html"
			},
			next: function() {
				this.activeIndex++
			}
		},
		watch: {
//			Password: function(newVal, oldVal) {
//				var val = newVal.toString();
//				var reg = /\s+/g; //去除空格
//				if(reg.test(val)) {
//					this.Password = oldVal;
//				}
//			}
		}
	})

//	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);
//			}
//		});
//	}

})()