first

pages/userSetUp/payPassword.vue

@@ -0,0 +1,160 @@
+<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>