uni-zhihuikuangshan/pages/my/repassword/repassword.vue

<template>
	<view>
		<view class="content">
			<view class="input_box">
				<input type="number" v-model="mobile" placeholder="请输入手机号" placeholder-style="color:#999;"/>
			</view>
			<view class="send_box">
				<view class="send_code">
					<input type="number" v-model="vcode" placeholder="验证码" placeholder-style="color:#999;"/>
				</view>
				
				<view class="send_btn" @click="send_vcode()">
					{{send_text}}
				</view>
			</view>
			<view class="input_box">
				<input type="password" v-model="password" placeholder="请输入新密码" placeholder-style="color:#999;"/>
			</view>
			<view class="input_box">
				<input type="password" v-model="copypassword" placeholder="请重复新密码" placeholder-style="color:#999;"/>
			</view>
			
			<view class="re_btn" @click="repassword()">
				确认修改
			</view>
		</view>
	</view>
</template>

<script>
	var testPassword =/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,15}$/
	
	export default {
		data() {
			return {
				mobile:'',
				vcode:'',
				password:'',
				copypassword:'',
				send_text:'发送验证码'
			};
		},
		methods:{
			send_vcode(){
				if(this.mobile.length < 11){
					uni.showToast({
						icon:'none',
						title:'请填写正确的手机号'
					})
					return
				}
				
				if(this.send_text == "发送验证码"){
					this.$api.sms_vcode({
						mobile:this.mobile
					}).then((res)=>{
						
						console.log(res.data)
						
						if(res.data.code == 3001){
							uni.showToast({
								icon:"none",
								title:"电话号码错误"
							})
						}else if(res.data.code == 3002){
							uni.showToast({
								icon:"none",
								title:"发送失败"
							})
						}else if(res.data.code == 0){
							uni.showToast({
								icon:"none",
								title:"验证码发送成功"
							})
						}
					})
				}
				
				this.send_text = "已发送"
				if(this.send_text = "已发送"){
					uni.showToast({
						icon:"none",
						title:"请勿重复发送"
					})
				}
				
			},
			
			
			repassword(){
				if(this.vcode == ''){
					uni.showToast({
						icon:'none',
						title:'请填写验证码'
					})
					return
				}
				
				if(this.password == '' || this.copypassword == ''){
					uni.showToast({
						icon:'none',
						title:'请填写完整信息'
					})
					return
				}
				
				if(this.password !== this.copypassword){
					uni.showToast({
						icon:'none',
						title:'两次密码输入不一致'
					})
					return
				}
				
				if( !testPassword.test(this.password) ){
					uni.showToast({
						icon:'none',
						title:'密码必须包含大写字母、小写字母、数字和特殊符号且长度在8位至16位之间'
					})
					return
				}
				
				this.$api.user_repassword({
					mobile:this.mobile,
					vcode:this.vcode,
					password:this.password
				}).then((res)=>{
					console.log(res)
					
					if(res.data.code == 4002){
						uni.showToast({
							icon:'none',
							title:"验证码超时或者错误"
						})
						return
					}else{
						uni.setStorageSync('login_password',this.password)
						
						uni.showToast({
							icon:'none',
							title:'密码修改成功'
						})
						this.send_text = "发送验证码"
						
						setTimeout(function(){
							uni.switchTab({
								url:"../../tabbar/my/my"
							})
						},1000)
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		box-sizing: border-box;
		padding: 25rpx;
		background-color: #f0f0f0;
	}
	.content{
		width: 700rpx;
		.input_box{
			margin-bottom: 10px;
			padding: 0 25px;
			background-color: #fff;
			input{
				height: 45px;
				color: #333;
			}
			
		}
		.send_box{
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
			.send_code{
				width: 380rpx;
				padding: 0 25px;
				background-color: #fff;
				input{
					height: 45px;
					color: #333;
				}
				
			}
			.send_btn{
				width: 200rpx;
				background-color: #009FE8;
				text-align: center;
				color: #fff;
				line-height: 45px;
			}
		}
		.re_btn{
			background-color: #009FE8;
			text-align: center;
			color: #fff;
			line-height: 45px;
		}
	}
</style>