sr-publicServicePlatform/component/doctor-home/safe-setting.js

(function() {
	Vue.component('safe-setting', {
		template: `<div>
						<ul class="safe-setting" v-if="!modifyJudge">
							<li class="set-psw m0 c-border-tb clearfix">
								<div class="fl li-txt">
									<h3 class="m0 mtb10">登录密码</h3>
									<p class="m0 c-888 c-f14">建议您定期更换密码,设置安全性更高的密码可以使账户更安全</p>
								</div>
								<div class="fr operate"><span class="btn" @click="modifyPsw">修改</span></>
							</li>
							<li class="safe-phone m0 c-border-b clearfix">
								<div class="fl li-txt">
									<h3 class="m0 mtb10">安全手机&emsp;{{info}}</h3>
									<p class="m0 c-888 c-f14">安全手机可用与登录账号,重置密码或其他安全验证</p>
								</div>
								<div class="fr operate"><span class="btn" @click="modifyPhone">更换</span></>
							</li>
						</ul>
						<div class="modify plr30" v-if="ismdiPsw">
							<h3 class="pt40 pb20 pl30 mb50 c-f16  c-border-b">修改密码</h3>
							<div class="psw-form pt30">
								<h4 class="m0 mb20">原密码</h4>
								<p class="form-group">
									<input class="fl form-control" placeholder="请输入原密码" />
								</p>
								<h4 class="m0 mb20">新密码</h4>
								<p class="form-group">
									<input class="fl form-control" placeholder="请输入6-20位登录密码" />
								</p>
								<p class="form-group">
									<input class="fl form-control" placeholder="请再次输入登录密码" />
								</p>
							</div>
							<div class="operate-btn pt40">
								<span class="btn" @click="savePsw()">确&emsp;定</span>
								<span class="btn btn-cancel" @click="cancel()">取&emsp;消</span>
							</div>
						</div>
						<div class="modify plr30" v-if="ismdiPhone">
							<h3 class="pt40 pb20 pl30 mb50 c-f16 c-border-b">更换手机号码</h3>
							<div class="mdiphone-form pt30">
								<div class="clearfix">
									<div v-for="step in indexArr" :key="step" class="fl step" :class="{'set-active': activeIndex >= step}">
										<div class="clearfix">
											<p v-if="step > 1" class="fl clearfix">
												<em class="fl"></em>
											</p>
											<span class="fl">{{step}}</span>
											<p v-if="step < 3" class="fl">
												<em class="fl"></em>
											</p>
										</div>
										<label class="mt20" :class="setClass(step)">{{setTxt(step)}}</label>
									</div>
								</div>
								<div class="mdi-detail-form txt-center pt50">
									<div class="container-fluid" v-if="activeIndex == 1">
										<h3 class="c-f14 mb40">已绑定的手机号:{{handlePhone(info)}}</h3>
										<p class="form-group clearfix">
											<label class="fl form-label">验证码</label>
											<input class="fl form-control" placeholder="短信验证码" />
											<span class="c-0ad8c8 send">发送验证码</span>
										</p>
										<p class="c-888">若您的手机号码无法使用,请尝试&nbsp;<span class="c-37a6ed">账号申诉</span></p>
									</div>
									<div class="container-fluid pt50" v-if="activeIndex == 2">
										<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="短信验证码" />
											<span class="c-0ad8c8 send">发送验证码</span>
										</p>
									</div>
									<div class="step3 container-fluid" v-if="activeIndex == 3">
										<h3 class="success">手机号码更换成功</h3>
										<p class="c-909090">下次请使用新号码登录</p>
									</div>
								</div>
								<div>
									<span class="btn" v-if="activeIndex != 3" @click="next()">下一步</span>
									<span class="btn" v-if="activeIndex == 3" @click="cancel()">返回</span>
								</div>
							</div>
						</div>
					</div>`,
		props: [],
		data: function() {
			return {
				info: null,
				
				modifyJudge: false,
				ismdiPsw: false,
				ismdiPhone: false,
				
				indexArr: [1, 2, 3],
				activeIndex: 1
			}
		},
		methods: {
			modifyPsw: function() {
				this.modifyJudge = true
				this.ismdiPsw = true
			},
			modifyPhone: function() {
				this.modifyJudge = true
				this.ismdiPhone = true
			},
			savePsw: function() {},
			cancel: function() {
				this.modifyJudge = false
				this.ismdiPsw = false
				this.ismdiPhone = false
				this.activeIndex = 1
			},
			// 更换手机号
			setTxt: function(index) {
				var str = ''
				switch(+index) {
					case 1: str = '验证身份';break
					case 2: str = '修改手机号码';break
					case 3: 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-right';break
				}
				return str
			},
			handlePhone: function(phone) {
				if(!phone) {
					return ''
				}
				return phone.substr(0,3) + '****' + phone.substr(7, 4)
			},
			next: function() {
				this.activeIndex++
			}
		}
	})
})()