cashier_app/pages/userSetUp/payPassword.vue

<template>
  <view class="pay-wrapper">
    <view class="title">{{ vdata.steps[vdata.current].title }}</view>
    <view class="tips">{{ vdata.steps[vdata.current].subTitle }}</view>
    <JPasswordInput focus @inputChange="inputChange" ref="input" />
    <view class="confirm flex-center">
      <button
				v-if="vdata.current == 2"
        class="confirm-button flex-center"
        hover-class="touch-button"
        :style="{
          background: vdata.allowChange && (vdata.steps[vdata.current].pwd.length >= 6) ? 'linear-gradient(270deg, rgba(35,143,252,1) 0%, rgba(26,102,255,1) 100%)' : '',
        }"
				@click="confirm"
      >
        确认修改
      </button>
    </view>
		<view v-if="vdata.current != 0" class="back" @click="back">
			<image src="@/static/iconImg/icon-arrow-left.svg" class="arrow"></image>
			<text style="margin-left: 10rpx">返回上一步</text>
		</view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onBackPress } from "@dcloudio/uni-app"
import { $isSipw, $isMchSipw, $updateMchSipw } from "@/http/apiManager.js"
import infoBox from "@/commons/utils/infoBox.js"
import go from '@/commons/utils/go.js'
const input = ref(null) //输入框实例
const vdata = reactive({
	allowChange: false,
	current: 0,
	steps: [
		{
			title: '验证身份',
			subTitle: '请输入原支付密码以验证您的身份',
			pwd: ''
		},
		{
			title: '设置密码',
			subTitle: '请设置新的支付密码，用于退款验证',
			pwd: ''
		},
		{
			title: '确认密码',
			subTitle: '请再次输入支付密码确认',
			pwd: ''
		}
	]
})

onLoad(() => {
	$isSipw().then(({ bizData }) => {
		!bizData && (vdata.current = 1)
	})
})

const getInputVerification1 = (originalPwd) => {
	$isMchSipw(originalPwd).then(({ bizData }) => {
		if (bizData) {
			vdata.current = 1
			clearInput()
		} else {
			return infoBox.showToast('密码验证错误')
		}
	})
}

const getInputVerification2 = () => {
	vdata.current = 2
	clearInput()
}

const getInputVerification3 = (pwd, confirmPwd) => {
	if (pwd != confirmPwd) {
		vdata.allowChange = false
		return infoBox.showToast('两次输入的密码不一致')
	} else {
		vdata.allowChange = true;
	}
}

const inputChange = (e) => {
	let currentStep = vdata.steps[vdata.current];
	currentStep.pwd = e
	if (vdata.current === 0 && currentStep.pwd.length == 6) {
		getInputVerification1(currentStep.pwd)
	}
	if (vdata.current === 1 && currentStep.pwd.length == 6) {
		getInputVerification2(currentStep.pwd)
	}
	if (vdata.current === 2 && currentStep.pwd.length == 6) {
		getInputVerification3(vdata.steps[1].pwd, currentStep.pwd)
	}
}

const confirm = () => {
	if (vdata.allowChange) {
		let steps = vdata.steps;
		$updateMchSipw({
			originalPwd: steps[0].pwd,
			confirmPwd: steps[2].pwd
		}).then(() => {
			infoBox.showSuccessToast('修改成功')
			return go.back()
		})
	}
}

const back = () => {
	vdata.current = vdata.current - 1
}

// 清空输入框事件
const clearInput = () => input.value.clearInput()
</script>

<style lang="scss" scoped>
.title {
  margin-top: 200rpx;
  text-align: center;
  font-size: 50rpx;
  font-weight: 500;
}
.tips {
  margin: 30rpx 0 90rpx 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: 400;
  color: $J-color-t80;
}
.back {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #808080;
	font-size: 30rpx;
	margin-top: 53rpx;
	.arrow {
		width: 50rpx;
		height: 50rpx;
	}
}
.confirm {
  margin-top: 90rpx;
  height: 110rpx;
  .confirm-button {
    width: 400rpx;
    height: 110rpx;
    border-radius: 20rpx;
    font-size: 33rpx;
    font-weight: 500;
    color: #fff;
    background-color: #d9d9d9;
  }
}
</style>