jobslink-user-clent/pageMy/setUserBase/seal/setSealPassword.vue

<template>
	<view style="padding: 122rpx 80rpx 0 80rpx;">
		<jl-input type="number" :maxlength="maxlength" v-model="password" placeholder="请输入六位数字密码" @confirm="regPassword" showPassword clearable></jl-input>
		<jl-input type="number" :maxlength="maxlength" v-model="newPassword" placeholder="请再次输入六位数字密码" @confirm="regNewPassword" showPassword clearable></jl-input>
		<view v-if="error" class="error">两次密码输入不一致，请重新输入</view>
		<view class="btn" >
			<view v-if="loading" class="bottombtn nocheck">提交中</view>
			<view v-else @click="submit" class="bottombtn" :class="{'nocheck':!validate}">确认</view>
		</view>
	</view>
</template>

<script>
	import jlInput from '@/components/jl-input/main.vue'
	import {signGather} from '@/api/auth.js'
	export default{
		data (){
			return {
			    sealSrc: '',
				password: '',
				newPassword: '',
				path: '',
				maxlength: 6,
				error: false,
				loading: false,
			}
		},
		onLoad(options){
			this.path = options.path
			// this.sealSrc = options.src + '?x-oss-process=image/resize,w_150,h_150/rotate,90'
			this.sealSrc = options.src
		},
		components:{jlInput},
		methods: {
			submit(){
				if (!this.validate) return
				this.loading = true
				const that = this
				signGather(this.sealSrc,this.password,this.newPassword).then(res => {
					that.loading = false
					// that.$store.dispatch('setAutograph')
					if (this.path) {
						uni.navigateBack({
							url: this.path
						})
					}
				}, error => {
					that.loading = false
					console.log(error);
				});
			},
			regPassword(){
				if(this.password.length !== 6) {
					uni.showToast({
						title: '请设置长度6位的密码',
						icon: 'none'
					});
				}
			},
			regNewPassword(){
				if(this.newPassword.length !== 6) {
					uni.showToast({
						title: '请设置长度6位的密码',
						icon: 'none'
					});
				} else if (this.password !== this.newPassword) {
					this.error = true
				}
			}
		},
		computed: {
			validate() {
				return this.password.length ===6 && this.newPassword.length === 6 && this.password==this.newPassword
			}
		}
	}
</script>

<style>
	.error {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: red;
		margin-top:23rpx;
	}
	
	.nocheck {
		opacity: 0.3;
	}
	.bottombtn {
		background-color: #1B66FF;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		font-family: PingFangSC-Medium;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	
	.btn {
		background-color: #fefefe;
		padding: 70rpx 0;
	}
</style>