102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<script setup>
|
|
import { reactive } from 'vue'
|
|
import CardInput from '../components/card-input.vue'
|
|
import { useUI } from '@/utils/use-ui'
|
|
import { validateTransactionPassword } from '@/utils/validate'
|
|
|
|
const { showToast } = useUI()
|
|
|
|
const formData = reactive({
|
|
// 旧密码
|
|
password: '',
|
|
// 新密码
|
|
newPassword: '',
|
|
// 确认密码
|
|
confirmPassword: ''
|
|
})
|
|
const onEdit = () => {
|
|
const passwordValue = validateTransactionPassword(
|
|
formData.password,
|
|
'旧密码'
|
|
)
|
|
if (!passwordValue.valid) {
|
|
showToast(passwordValue.message)
|
|
return
|
|
}
|
|
|
|
const newPasswordValue = validateTransactionPassword(
|
|
formData.newPassword,
|
|
'新的交易密码'
|
|
)
|
|
if (!newPasswordValue.valid) {
|
|
showToast(newPasswordValue.message)
|
|
return
|
|
}
|
|
|
|
const confirmPasswordValue = validateTransactionPassword(
|
|
formData.confirmPassword,
|
|
'确认交易密码'
|
|
)
|
|
if (!confirmPasswordValue.valid) {
|
|
showToast(confirmPasswordValue.message)
|
|
return
|
|
}
|
|
|
|
if (formData.newPassword !== formData.confirmPassword) {
|
|
showToast('两次密码不一致')
|
|
return
|
|
}
|
|
|
|
console.log('修改密码：', formData)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="edit-password">
|
|
<nav-bar isTopBg isPlaceholder title="交易密码">
|
|
<template #right>
|
|
<text class="top-right-name" @click="onEdit">确认</text>
|
|
</template>
|
|
</nav-bar>
|
|
|
|
<view class="input-box">
|
|
<CardInput
|
|
v-model="formData.password"
|
|
title="旧密码"
|
|
type="password"
|
|
></CardInput>
|
|
<CardInput
|
|
v-model="formData.newPassword"
|
|
title="设置新的交易密码"
|
|
type="password"
|
|
></CardInput>
|
|
<CardInput
|
|
v-model="formData.confirmPassword"
|
|
title="重复新的交易密码"
|
|
type="password"
|
|
></CardInput>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../styles/index.scss';
|
|
|
|
.top-right-name {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
background: #00d993;
|
|
padding: 6rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.input-box {
|
|
padding: 32rpx 24rpx;
|
|
}
|
|
</style>
|