jje_uniapp/loginPages/login/retrieve-account-password.vue

<template>
  <view class="container">
    <view class="login-wrap">
		<view class="login-form">
			<u--form
				labelPosition="left"
				:model="userInfo"
				:rules="rules"
				ref="form1"
			>
				<u-form-item
					label="账号密码"
					prop="password"
					borderBottom
					labelWidth="auto"
					labelAlign="right"
				  >
				<u--input
					v-model="userInfo.password"
					placeholder="请输入账号密码"
					border="bottom"
					type="password"
				></u--input>
			  </u-form-item>
			</u--form>
		</view>
	</view>
	<view @click="submitAccountPasswordVerify()" class="op-btn-wrap">
		<view class="h-btn">
			<text>确定</text>
		</view>
	</view>
	
	<!-- 密码正确 -->
	<u-popup :show="show" :round="10"  mode="center"  @close="close" @open="open">
	  <view class="h-popo-content">
		   <view class="h-img">
			   <u-icon name="checkbox-mark" color="green" size="40"></u-icon>
		   </view>
		   <view class="text">
			   <text>账号找回成功</text>
		   </view>
		   <view class="text">
			   <text> 是否立即绑定新的微信号</text>
		   </view>
		   <view class="h-btn-wrap">
			   <view @click="show = false" class="h-left-btn">
				   <text>取消</text>
			   </view>
			   <view @click="gotoBindWechat()" class="h-right-btn">
			   		<text>立即绑定</text>
			   </view>
		   </view>
	  </view>
	</u-popup>
	
	<!-- 密码正确 -->
	<u-popup :show="passwordErrShow" :round="10"  mode="center"  @close="close" @open="open">
	  <view class="h-popo-content">
		   <view class="h-img">
			   <!-- <u-icon name="close" color="red" size="40"></u-icon> -->
			   <u-icon name="/static/login/u01.png" color="red" size="50"></u-icon>
		   </view>
		   <view class="h-text">
			   <text>密码错误</text>
		   </view>
		   <view class="h-btn-wrap">
			   <view @click="passwordErrShow = false" class="h-right-btn">
				   <text>确定</text>
			   </view>
		   </view>
	  </view>
	</u-popup>
	
  </view>
</template>
 <script>
import {wechatRetrieveAccountPwdLogin} from '/src/api/login/login.js';
export default {
	data() {
		return {
			passwordErrShow: false,
			show: false,
			userInfo: {
				phone: '',
				password: '',
			},
			rules: {
				password:{
					required: true,
					message: '请输入账号密码',
					trigger: ['blur', 'change'],
				},
			},
		}
	},
	onLoad(option) {
		// 判断Openid是否为空
		if(!this.$isDataEmpty(option)){
			this.userInfo.phone = option.data;
		}
	},
	onReady() {
		this.$refs.form1.setRules(this.rules)
	},
	methods: {
		// 提交账号密码验证
		submitAccountPasswordVerify(){
			this.$refs.form1.validate().then(res => {
				// 验证找回
				this.wechatRetrieveAccountPwdLogin();
			}).catch(errors => {
				uni.$u.toast('校验失败,请认真填写')
			})
		},
		// 去绑定微信
		gotoBindWechat(){
			this.show = false;
			uni.$u.route({
				url: '/pages/setting/setting-wechat',
				params: {
					name: 'lisa'
				}
			})
		},
		// 账号密码找回登录
		wechatRetrieveAccountPwdLogin(){
			let that = this;
			// 根据手机和密码找回账号，成功自动登录
			wechatRetrieveAccountPwdLogin(null,{data:this.userInfo}).then((res)=>{
				if(!this.$isDataEmpty(res.access_token)){
					let loginState = {
						status: 1,
						accessToken: ""
					}
					// 数据获取token
					loginState.accessToken = res.access_token;
					that.$store.commit('updateLoginState', loginState);
					that.$store.commit('updateLoginUserInfo', res.userInfo)
					
					that.show = true;
					
				} else {
					uni.showToast({
						title: "操作失败"
					})
				}
			}).catch(() =>{
				uni.showToast({
					title: "操作失败"
				})
			});
		},
		open() {
			
		},
		close() {
			
		}
	}
}
</script>
<style lang="scss">
page,body{
	background: #fff;
}
.container{
	background: #fff;
	height: 300px;
	.login-wrap {
		display: flex;
		justify-content: center;
		.login-form{
			width: 90%;
		}
		.account{
			display: flex;
		}
		.identifying-code{
		}
	}
	.op-btn-wrap{
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		.h-btn{
			text-align: center;
			width: 343px;
			height: 42px;
			background: #FFE05C;
			border-radius: 27px;
			line-height: 42px;
		}
	}
}

.h-popo-content{
	height: 160px;
	padding: 12px;
	width: 300px;
	text-align: center;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	.h-img{
		display: flex;
		justify-content: center;
	}
	.h-text{
		margin-top: 12px;
		font-weight: 400;
		color: #666666;
	}
	.text{
		margin-top: 6px;
		font-weight: 400;
		color: #666666;
	}
	.h-btn-wrap{
		display: flex;
		justify-content: space-between;
		color: #333333;
		text-align: center;
		margin-top: 14px;
		.h-left-btn{
			height: 32px;
			line-height: 30px;
			background: #EEEEEE;
			width: 100px;
			text-align: center;
			border-radius: 16px;
			margin: 0 auto;
		}
		.h-right-btn{
			height: 32px;
			line-height: 30px;
			background: #FFE05C;
			width: 100px;
			border-radius: 16px;
			margin: 0 auto;
			
		}
	}
}
</style>