jje_uniapp/myPages/setting/setting-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="phonenumber"
							labelWidth="auto"
							labelAlign="right"
						  >
						<u--input
							v-model="userInfo.phonenumber"
							placeholder="请输入手机号"
							border="bottom"
							type="number"
							disabled="disabled"
							maxlength="11"
						></u--input>
					</u-form-item>
					<u-form-item
						labelWidth="auto"
						labelAlign="right"
						label="验证码"
						prop="smsCode"
						width="120"
					>
					<u--input
						v-model="userInfo.smsCode"
						disabledColor="#ffffff"
						placeholder="请输入验证码"
						border="bottom"
						maxlength="4"
					></u--input>
					<template #right>
						<view class="identifying-code">
							<u-code
								ref="uCode2"
								@change="codeChange2"
								keep-running
								start-text="获取验证码"
							></u-code>
							<text
								@tap="getCode2"
								:text="tips2"
								class="u-page__code-text"
							>{{tips2}}</text>
						</view>
					</template>

					</u-form-item>

				  <u-form-item
					label="新账号支付密码"
					prop="password"
					labelWidth="auto"
					labelAlign="right"
				  >
					<u--input
						v-model="userInfo.password"
						placeholder="请输入6位新密码"
						border="bottom"
						maxlength="6"
						type="password"
					></u--input>
				</u-form-item>
				<u-form-item
						labelWidth="auto"
						labelAlign="right"
						label="确认密码"
						prop="password1"
						width="120"
					>
					<u--input
						maxlength="6"
						v-model="userInfo.password1"
						placeholder="请再次输入密码"
						border="bottom"
						type="password"
					></u--input>
				</u-form-item>
			</u--form>
		</view>
	</view>
	<view  @click="submitData()" class="op-btn-wrap">
		<view class="h-btn">
			<text>确定</text>
		</view>
	</view>

	<!-- 提示 -->
	<view class="h-mark-desc">
		<view class="h-text">
			<text>*账号密码建议输入不连续的6位数</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="h-btn-wrap">
			   <view @click="passwordSucessSure()" class="h-right-btn">
			   		<text>确定</text>
			   </view>
		   </view>
	  </view>
	</u-popup>
  </view>
</template>
<script>
export default {
	data() {
		return {
			show:  false,
			userInfo: {
				auth: true,
				password: '',
				password1: '',
				phone: '',
				phonenumber: '',
				smsCode: '',
				code: ''
			},
			tips2: '',
			rules: {
				phonenumber:  [
					{
						required: true,
						min: 10,
						max: 12,
						message: '请输入11位电话号码',
						trigger: ['blur', 'change'],
					},
					{
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return !this.$isDataEmpty(value);
						},
						message: "请认真填写电话号码",
						trigger: ['blur', 'change'],
					}
				],
				smsCode: {
					required: true,
					min: 4,
					max: 6,
					message: '请输入4位验证码',
					trigger: ['blur', 'change'],
				},
				password: {
					required: true,
					min: 6,
					max: 18,
					message: '请输入6位密账号交易密码',
					trigger: ['blur', 'change'],
				},
				password1:  [
					{
						required: true,
						min: 6,
						max: 18,
						message: '请再次输入',
						trigger: ['blur', 'change'],
					},
					{
						validator: (rule, value, callback) => {
							if(this.userInfo.password === value){
								return true;
							}
							return false;
						},
						message: "两次输入密码不一致",
						trigger: ['blur', 'change'],
					}
				],
			},
		}
	},
	onLoad() {
		// 用户信息
		let user = uni.getStorageSync('userInfo');
		this.userInfo.phonenumber = user.phone;
	},
	onReady() {
		this.$refs.form1.setRules(this.rules)
	},
	methods: {
		// 提交交易密码
		submitData(){

			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.form1.validate().then(res => {
				// 设置新密码
				this.updateUserAccountPassword();
			}).catch(errors => {
				uni.$u.toast('校验失败,请认真填写')
			})
		},
		// 设置交易密码
		updateUserAccountPassword(){

			this.userInfo.phone = this.userInfo.phonenumber;
			this.userInfo.code = this.userInfo.smsCode;
			// 保存数据
			this.$api.passwordByPhone(this.userInfo).then((res)=>{
					this.show = true;

			}).catch(() =>{
				uni.showToast({
					title: "操作失败"
				})
			});
		},
		passwordSucessSure(){
			uni.switchTab({
				url: '/pages/my/index'
			});
		},
		codeChange2(text) {
			this.tips2 = text;
		},
		getCode2() {
			let that = this;
			if (this.$refs.uCode2.canGetCode) {
				that.getSmsCode();
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		// 获取手机验证码
		getSmsCode(){
			let that = this;
			if(!this.userInfo.phonenumber){
				uni.$u.toast('请认真填写手机号');
				return;
			}
			that.getPhoneCode();
		},
		// 获取验证码
		getPhoneCode(){
			let that = this;
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})
			this.$api.getSmsCode({phonenumber:this.userInfo.phonenumber,auth: true}).then((res)=>{
				uni.hideLoading();
				// 这里此提示会被this.start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				that.$refs.uCode2.start();
			}).catch(() =>{
				uni.showToast({
					title: "操作失败"
				})
			});
		},
	}
}
</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>