完善添加银行卡功能

pages/my-index/wallet/edit-password.vue

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