jje_uniapp/loginPages/login/bind-transaction-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="transactionPassword"
					labelWidth="auto"
					labelAlign="right"
				  >
				<u--input
					v-model="userInfo.transactionPassword"
					placeholder="请输入账号支付密码"
					border="bottom"
					maxlength="6"
					type="password"
				></u--input>
				</u-form-item>
			  <u-form-item
					labelWidth="auto"
					labelAlign="right"
					label="确认密码"
					prop="transactionPassword1"
					width="120"
				>
				<u--input
					maxlength="6"
					v-model="userInfo.transactionPassword1"
					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>

  </view>
</template>
<script>
export default {
	data() {
		return {
			userInfo: {
				phone: '',
				smsCode: '',
				openId: '',
				password: "",
				password1: '',
				transactionPassword: "",
				transactionPassword1: "",
				reference: ""
			},
			tips2: '',
			rules: {
				transactionPassword: {
					required: true,
					min: 6,
					max: 6,
					message: '请输入6位密码',
					trigger: ['blur', 'change'],
				},
				transactionPassword1:  [
					{
						required: true,
						min: 6,
						max: 6,
						message: '请输入6位密码',
						trigger: ['blur', 'change'],
					},
					{
						validator: (rule, value, callback) => {
							if(this.userInfo.transactionPassword === value){
								return true;
							}
							return false;
						},
						message: "两次输入密码不一致",
						trigger: ['blur', 'change'],
					}
				],
			},
		}
	},
	onLoad(option) {
		// 判断Openid是否为空
		if(option != undefined){
			this.userInfo = JSON.parse(option.data);
		}
	},
	onReady() {
		this.$refs.form1.setRules(this.rules)
	},
	methods: {
		// 提交交易密码
		submitData(){
			let that = this;

			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.form1.validate().then(res => {
				console.log(that.userInfo)
				that.userInfo.password = that.userInfo.transactionPassword;
				if(that.userInfo.type == '1'){ // 新微信新手机注册
					// 调用注册
					that.wechatRegister();
				}
				if(that.userInfo.type == '2'){ // 新微信新手机注册
					// 调用注册
					that.realNameAuthLogin();
				}
			}).catch(errors => {
				uni.$u.toast('校验失败,请认真填写')
			})
		},
		// 新微信新手机注册
		wechatRegister(){
			const that = this;
			// 新微信新手机注册账号
      this.$api.wechatRegister({...this.userInfo}).then((res)=>{
       if(res.data.code == 200){
         that.setUserData(res);
       }else {
         uni.showToast({
           title: "用户注册失败"
         })
       }
			}).catch(() =>{
				uni.showToast({
					title: "操作失败"
				})
			});
		},
		realNameAuthLogin(){
      const that = this;
			// 新微信老手机注册账号
      this.$api.realNameAuthLogin({...this.userInfo}).then((res)=>{
        if(res.data.code == 200){
          that.setUserData(res);
        }else {
          uni.showToast({
            title: "用户注册失败"
          })
        }
			}).catch(() =>{
				uni.showToast({
					title: "操作失败"
				})
			});
		},
		// 设置登录后的用户数据
		setUserData(res){
			let loginState = {
				status: 1,
				accessToken: ""
			}
			// 数据获取token
			loginState.accessToken = res.data.access_token;
			this.$store.commit('updateLoginState', loginState);
			this.$store.commit('updateLoginUserInfo', res.data.userInfo)
      uni.switchTab({
        url: '/pages/index/index',
      })
		},

	}
}
</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;
		}
	}
}

</style>