wangluohuoyun-app/pages/mine/settings/editPassword.vue

<template>
	<view class="container">
		<u-icon class="back-btn" name="arrow-left" color="black" size="20" @click="navBack"></u-icon>
		<view class="wrapper">
			<h2>重置密码</h2>
			<view style='width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;' class="flex">
				<view style='width:15%;border-right:1px solid #E8E9ED;'>+86</view>
				<view style='width:85%;'><input maxlength="11" @input='phoneinput' style='padding-left:10px;' v-model='phone' placeholder="请输入手机号码" type="text"></view>
			</view>
			<view style='width:100%;border-bottom:1px solid #E8E9ED;position:relative;padding:10px;' class="flex">
				<view style='width:85%;'><input maxlength="6" v-model='verifyCode' placeholder="请输入验证码" type="text"></view>
				<button @click='getcode' :class='status&&!sendDisabled?"active":""' class='getcode'>{{sendText}}</button>
			</view>
			<view style='border-bottom:1px solid #E8E9ED;padding:10px;position:relative;'>
				<input class='password' style='height:30px;' v-model='password' placeholder="请输入新密码，6-16位字符" :type="type" value="" />
				<view  style='position:absolute;right:0;top:38%;z-index:10;cursor:pointer;' class="iconfont ">
					<image class='yanjingicon' style='width:22px;height:22px;margin-top: -10rpx;' @click='switchover' v-if="type=='password'" src="../../../static/yioncang.png" mode=""></image>
					<image class='yanjingicon' style='width:22px;height:22px;margin-top: -10rpx;' @click='switchover' v-else src="../../../static/xianshi.png" mode=""></image>
				</view>
			</view>
			<button :class='phone!=""&&verifyCode!=""&&password!=""?"active":""' @click='reset' class='verificationCode'>重置密码</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	// import { openFSqlite, createFSQL, selectFSQL, addFSQL } from '../../util/f.js'
	// import { queryData, upData, initData } from '../../util/dbUtil.js'
	export default {
		data() {
			return {
				inputContent: null,
				loginType: "wechat",
				phone: '',
				password: '',
				logining: false,
				isPhone: false,
				isApple: true,
				accessToken:'',
				params:{
					encryptedData:'',
					session_key:'',
					iv:'',
				},
				status:false,
				userInfo:{
					nickName:'',
					avatarUrl:'',
					gender:'',
					phone:''
				},
				consentStatus:false,
				type:'password',
				inputStatus:'none',
				verifyCode:null,
				sendText:'获取验证码',
				sendDisabled: false,
				system:'',
				platform:'',
				userData:undefined,
				canIUseProfile:false,
				isPhone:""
			}
		},
		onShow() {
			// this.loginType = "wechat"
			this.$api.logout()
		},
		onLoad(options) {
			this.phone = options.phone //个人首页修改密码
			if(this.phone.length==11){
				this.status=true
			}
			// this.isPhone = options.phone //个人首页修改密码成功后自动退出重新登录
			// if( wx.getUserProfile ){  
			//     console.log('--check getUserProfile--OK');  
			//     this.canIUseProfile = true;  
			// } 
			// console.log("login on load")
			// var that = this
			// that.$api.request('user', 'sendIsApple', {
			// }).then(res => {
			// 	that.isApple = res.data
			// })
			//  uni.getSystemInfo({
			// 	success:(res) => {
			// 		// console.log(res)
			// 		this.system = res.system  // ios
			// 		this.platform = res.platform  // 14.3
			// 	}
			// })
		},
		methods: {
			phoneinput(e){
				if(e.detail.value.length==11){
					this.status=true
				}
			},
			getcode(e){
				if(this.phone.length!=11){
					uni.showToast({
						title: '请输入正确的手机号',
						icon:'none',
						duration: 2000
					})
					return
				}
				if(/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.phone)){
				var that=this
					this.$request.baseRequest('get','/commonUser/sendVerifyCode',{phone:this.phone,identification:1,flag:2}).then(res => {
					
					if(res.code==200){
						that.sendDisabled = true
						let sec = 60
						let interval = setInterval(() => {
							sec--;
							that.sendText = sec + 's后重发'
							if (sec <= 0) {
								that.sendDisabled = false
								that.sendText = "获取验证码"
								clearInterval(interval)
							}
						}, 1000)
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					}
					
					})
					.catch(res => {
					    if(res.message){
					    	uni.showToast({
					    		title: res.message,
					    		icon: 'none',
					    		duration: 2000
					    	})
					    }
					    else{
					    	uni.showToast({
					    		title: "系统异常，请联系管理员",
					    		icon: 'none',
					    		duration: 2000
					    	})
					    }
					 });
				}else{
					uni.showToast({
						title: '请输入正确的手机号',
						icon:'none',
						duration: 2000
					})
				}
			},
			reset(){
				var that = this
				if (this.password.length < 6) {
					uni.showToast({
						title: '密码请输入6-16字符格式',
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.showLoading({
					title: '重置密码中'
				})
				this.$request.baseRequest('post','/commonUser/resetPassword',{phone:this.phone,password:this.password,verifyCode:this.verifyCode,identification:1}).then(res => {
					// 获得数据
					if(res.code==200){
						if(this.isPhone){//判断是否是在个人首页进来的（若是退出重进）
							uni.clearStorageSync();
							this.$request.baseRequest('post', '/auth/api/logout').then(res => {})
							this.$store.commit('logout')
							this.$api.logout()
								setTimeout(() => {
							uni.showToast({
								title: '修改成功',
								icon: 'none',
								duration: 2000
							})
							},2000)
							uni.navigateTo({
								url: `/pages/public/login`
							})
							
						}else{
							setTimeout(() => {
								uni.navigateBack()
						    }, 1000)
						}
						uni.showToast({
							title: '重置成功',
							icon: 'none',
							duration: 2000
						})
					}else{
						uni.showToast({
							title: res.message,
							icon:'none',
							duration: 2000
						})
					}
					uni.hideLoading()
				})
				.catch(res => {
				    uni.showToast({
				    	title: "系统异常，请联系管理员",
				    	icon:'none',
				    	duration: 2000
				    })
					uni.hideLoading()
				});
			},
		
			switchover(){
				if(this.type=='password'){
					this.type='text'
				}else{
					this.type='password'
				}
			},
			cancel() {
				this.inputShow = false
				this.inputStatus = 'none'
				this.isPhone = false
			},
			...mapMutations(['login']),
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},

	


		},

	}
</script>

<style lang='scss' scoped>
	
	.apple{
		background: #000;
		width: 35px;
		height: 35px;
		padding: 8px;
		border-radius: 50%;
		vertical-align: middle;
	}
	page {
		background: #fff;
	}
	.cuIcon-weixin{
		background: #2772FB;
		color: #fff;
		font-size: 18px;
		padding: 9px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right:5px;
	}
	.container {
		padding-top: 85px;
		position: relative;
		width: 100vw;
		height:calc(100vh - 85px);
		overflow: hidden;
		background: url('~@/static/images/mine/bg@2x.png');
		background-size:100% 100vh;
		background-repeat: no-repeat;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		padding-bottom: 40upx;
		height:100%;
		padding:0 30px;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color:black;
	}
	.verificationCode{
		margin-top:20px;
		background:#F5F6F9;
		color:#AFB3BF;
	}
	.verificationCode:after{
		border:none;
	}
	.verificationCode.active{
		background:#2772FB;
		color:#fff;
	}
	.register{
		position:absolute;
		bottom:20px;
		left:50%;
		transform: translateX(-50%);
		color:#333333;
		height:50px;
		line-height:50px;
		border-radius:30px;border: 1px solid #444444;
	}
	.register:after{
		border:none;
	}
	.getcode{
		font-size:14px;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
		color:#AFB3BF;
		background:#F5F6F9;
		height:30px;
		line-height:30px;
		
	}
	.password{
		border:none;
		outline: none;
	}
	.getcode:after{
		border:none;
	}
	.getcode.active{
		background:#2772FB;
		color:#fff;
	}
	uni-navigator{
		display:inline-block;
		color:#2772FB;
	}
	.yanjingicon{
		margin: 0;
		justify-content: flex-end;
	}
</style>