GEKE_PHONE/pages/user/userpwd.vue

<template>
	<div>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">修改密码</block>
		</cu-custom>
		
		<div class="dt">
			<ul style="margin-left: -45px;">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
				<li >
					<view class="cu-form-group" >
					    <view class="title" style="margin-top: 10px;"><image src="../../static/eml.png" class="imgs"></image></view>
					    <input placeholder="请输入邮箱" v-model="name" ></input>
					</view>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;"></div>
				</li>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<li >
					<view class="cu-form-group" >
					    <view class="title" style="margin-top: 10px;"><image src="../../static/yzm.png" class="imgs"></image></view>
					    <input placeholder="邮箱验证码" v-model="code" ></input>
						<button class='cu-btn bg-blue shadow'@click="getCode" v-if="show">验证码</button>
						<span v-if="!show" style="color: #D7D9E0;float: right;font-size: 15px;">已发送({{ times }})</span>
					</view>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;"></div>
				</li>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
				<li >
					<view class="cu-form-group" >
					    <view class="title"><image src="../../static/emlpwd.png" class="img"></image></view>
					    <input placeholder="填写新密码" v-model="pwd" type="password" style="margin-top: -7px;"></input>
					</view>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;"></div>
				</li>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
				<li >
					<view class="cu-form-group" >
					    <view class="title"><image src="../../static/emlpwd.png" class="img"></image></view>
					    <input placeholder="确认新密码" v-model="pwds"type="password" style="margin-top: -7px;"></input>
					</view>
				</li>
				</view>
			</ul>
		</div>
		<br>
		<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
		<button style="background-color: #3C7AD8;color: #FFFFFF; width: 90%;" @click="save()">确定</button>
		<br>
		<div style="text-align: center;">
		<span style="color: #A3A7B1;">本操作将会重置您的登录密码,&nbsp;请牢记您的新密码</span>
		</div>
		</view>
		
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
			name:null,
			code:null,
			pwd:null,
			pwds:null,
			times: 60,
			show:true,
			userUrl:'/sys/user/sendEamilCode',
			userpwdUrl:'/sys/user/userpwd'
		}
		},
		methods:{
			getCode() {
				let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
				if(this.name==""||this.name==null){
					 this.$tip.alert("邮箱不能为空");
					return false;
				}
			  this.$http.get(this.userUrl,{params:{email:this.name,type:1}}).then(res=>{
				  console.log(res)
			  	if (res.data != "0"&&res.data != 0) {
			  		this.$tip.success('发送成功!')
			  		this.times = 60;
			  		this.show = false
			  		this.timer = setInterval(() => {
			  			this.times--
			  			if (this.times === 0) {
			  				this.show = true
			  				clearInterval(this.timer)
			  			}
			  		}, 1000)
			  	} else {
			  		this.$tip.alert('发送失败!')
			  	}
			  	
			  }).catch(err => {
			  	console.log(err);
			  });
			  
			},
			save:function(){
				if(this.name==null ||this.name==""){
					this.$tip.alert("邮箱不能为空");
					return false;
				}
				if(this.code==null ||this.code==""){
					this.$tip.alert("邮箱验证码不能为空");
					return false;
				}if(this.pwd==null ||this.pwd==""){
					this.$tip.alert("新密码不能为空");
					return false;
				}if(this.pwds==null ||this.pwds==""){
					this.$tip.alert("确认密码不能为空");
					return false;
				}if(this.pwd!=this.pwds){
					this.$tip.alert("两次密码不一致");
					return false;
				}
				
				this.$http.get(this.userpwdUrl,{params:{password:this.pwd,username:this.$store.getters.username,email:this.name,emailCode:this.code,userId:this.$store.getters.userid}}).then(res=>{
					console.log(res);	
					if(res.data.success=="true" ||res.data.success==true){
						this.$Router.push({name:'suecss'})
					}else{
						this.$tip.alert("修改失败");
					}
				}).catch(err => {
					console.log(err);
				});
				
				/* this.$Router.push({name:'suecss'}) */
			}
		}
		}
</script>

<style>
	.dt{
		background-color: #FFFFFF;
		width: 90%;
		margin: 0 auto;
		margin-top: 20px;
		
	}
	ul li{
		list-style-type:none;
		
	}
	.img{
		width: 25px;
		height: 25px;
		background-size:100% 100%; 
	}
	.imgs{
		width: 20px;
		height: 20px;
		background-size:100% 100%; 
	}
</style>