feat: 支付密码设置逻辑调整

2025-01-21 01:10:27 +08:00
parent 596433ed86
commit 894818401e
6 changed files with 133 additions and 87 deletions
--- a/src/api/user/index.ts
+++ b/src/api/user/index.ts
@@ -1,7 +1,7 @@
 /**
 * 用户信息相关接口
 */
-import type { CouponBean, LoginParams, LoginResult, RegisterParams, TerminalBean, SetPayPasswordParams, PayPasswordResponse } from './types';
+import type { CouponBean, LoginParams, LoginResult, RegisterParams, TerminalBean, SetPayPasswordParams} from './types';
 import { get, post } from '@/utils/request';
 import { UserBean } from '@/store/modules/user/types';

@@ -35,7 +35,6 @@ enum URL {
  cardLink = '/wc/wechat/get_card_url',
  registerCoupon = '/couponsStrategy/wx_register_coupon',
  setPayPassword = '/app/pay/set_paypwd',
-  payPasswordStatus = '/user/pay-password/status',
 }

 export const getUserProfile = () => get<UserBean>({ url: URL.profile });
@@ -86,10 +85,3 @@ export const setPayPassword = (data: SetPayPasswordParams) => post<PayPasswordRe
  url: URL.setPayPassword, 
  data 
 });
-
-/**
- * 获取支付密码状态
- */
-export const getPayPasswordStatus = () => get<{ hasPassword: boolean }>({ 
-  url: URL.payPasswordStatus 
-});
--- a/src/api/user/types.ts
+++ b/src/api/user/types.ts
@@ -120,12 +120,7 @@ export interface TerminalBean {
 }

 export interface SetPayPasswordParams {
-  paywithpwd: number
+  paywithpwd: number  // 0: 开启支付密码, 1: 关闭支付密码
  oldpwd: string,
  newpwd: string
 }
-
-export interface PayPasswordResponse {
-  success: boolean
-  message: string
-}
--- a/src/components/pay-password-dialog.vue
+++ b/src/components/pay-password-dialog.vue
@@ -2,19 +2,29 @@
  <uni-popup ref="popup" type="center" :safe-area="true" :mask-click="false">
    <view class="pay-password-dialog">
      <view class="dialog-header">
-        <text class="title">设置支付密码</text>
+        <text class="title">{{ getDialogTitle }}</text>
        <u-icon name="close" size="20" color="#999" @click="hide" />
      </view>
      
      <view class="form-container">
+        <!-- 关闭支付密码选项 -->
+        <view class="switch-item" v-if="hasOldPassword">
+          <text>关闭支付密码</text>
+          <u-switch
+            v-model="isClosePassword"
+            activeColor="#F32B2B"
+            @change="handleSwitchChange"
+          />
+        </view>
+
        <!-- 旧密码 -->
-        <view class="form-item">
-          <text class="label">旧密码：</text>
+        <view class="form-item" v-if="hasOldPassword && !isClosePassword">
+          <text class="label">原密码：</text>
          <view class="input-wrapper">
            <u-input
              v-model="oldPassword"
              :type="showOldPassword ? 'text' : 'password'"
-              placeholder="请输入旧密码"
+              placeholder="请输入原密码"
              :maxlength="6"
              :border="false"
              fontSize="28rpx"
@@ -28,55 +38,58 @@
          </view>
        </view>

-        <!-- 新密码 -->
-        <view class="form-item">
-          <text class="label">新密码：</text>
-          <view class="input-wrapper">
-            <u-input
-              v-model="newPassword"
-              :type="showNewPassword ? 'text' : 'password'"
-              placeholder="请输入6位数字密码"
-              maxlength="6"
-              :border="false"
-              fontSize="28rpx"
-              @input="validateInput"
-            />
-            <u-icon
-              :name="showNewPassword ? 'eye-fill' : 'eye-off'"
-              size="22"
-              color="#999"
-              @click="showNewPassword = !showNewPassword"
-            />
+        <!-- 新密码和确认密码部分只在非关闭模式下显示 -->
+        <template v-if="showNewPasswordInputs">
+          <!-- 新密码 -->
+          <view class="form-item">
+            <text class="label">新密码：</text>
+            <view class="input-wrapper">
+              <u-input
+                v-model="newPassword"
+                :type="showNewPassword ? 'text' : 'password'"
+                placeholder="请输入6位数字密码"
+                maxlength="6"
+                :border="false"
+                fontSize="28rpx"
+                @input="validateInput"
+              />
+              <u-icon
+                :name="showNewPassword ? 'eye-fill' : 'eye-off'"
+                size="22"
+                color="#999"
+                @click="showNewPassword = !showNewPassword"
+              />
+            </view>
          </view>
-        </view>

-        <!-- 确认密码 -->
-        <view class="form-item">
-          <text class="label">确认密码：</text>
-          <view class="input-wrapper">
-            <u-input
-              v-model="confirmPassword"
-              :type="showConfirmPassword ? 'text' : 'password'"
-              placeholder="请再次输入密码"
-              maxlength="6"
-              :border="false"
-              fontSize="28rpx"
-              @input="validateInput"
-            />
-            <u-icon
-              :name="showConfirmPassword ? 'eye-fill' : 'eye-off'"
-              size="22"
-              color="#999"
-              @click="showConfirmPassword = !showConfirmPassword"
-            />
+          <!-- 确认密码 -->
+          <view class="form-item">
+            <text class="label">确认密码：</text>
+            <view class="input-wrapper">
+              <u-input
+                v-model="confirmPassword"
+                :type="showConfirmPassword ? 'text' : 'password'"
+                placeholder="请再次输入密码"
+                maxlength="6"
+                :border="false"
+                fontSize="28rpx"
+                @input="validateInput"
+              />
+              <u-icon
+                :name="showConfirmPassword ? 'eye-fill' : 'eye-off'"
+                size="22"
+                color="#999"
+                @click="showConfirmPassword = !showConfirmPassword"
+              />
+            </view>
          </view>
-        </view>
+        </template>
      </view>

      <view class="footer">
        <button 
-          :class="{'primary-button': isValid, 'disabled-button': !isValid}" 
-          :disabled="!isValid"
+          :class="{'primary-button': isFormValid, 'disabled-button': !isFormValid}" 
+          :disabled="!isFormValid"
          @click.stop='handleConfirm'
        >
          完成
@@ -104,13 +117,40 @@ const newPassword = ref('')
 const confirmPassword = ref('')

 // 是否有旧密码
-const hasOldPassword = computed(() => userStore.userInfo.hasPayPassword)
+const hasOldPassword = ref(false)

-// 表单验证
-const isValid = computed(() => {
-  if (!newPassword.value || !confirmPassword.value) return false
-  if (newPassword.value.length !== 6 || confirmPassword.value.length !== 6) return false
-  return newPassword.value === confirmPassword.value
+// 是否关闭支付密码 
+const isClosePassword = ref(false)
+
+// 是否显示新密码输入框
+const showNewPasswordInputs = computed(() => {
+  // 当没有旧密码时(首次设置)，或者有旧密码且不是关闭操作时，显示新密码输入框
+  return !hasOldPassword.value || (hasOldPassword.value && !isClosePassword.value)
+})
+
+// 获取弹框标题
+const getDialogTitle = computed(() => {
+  if (!hasOldPassword.value) return '设置支付密码'
+  if (isClosePassword.value) return '关闭支付密码'
+  return '修改支付密码'
+})
+
+// 表单验证逻辑更新
+const isFormValid = computed(() => {
+  if (!hasOldPassword.value) {
+    // 首次设置密码
+    if (!newPassword.value || !confirmPassword.value) return false
+    if (newPassword.value.length !== 6 || confirmPassword.value.length !== 6) return false
+    return newPassword.value === confirmPassword.value
+  } else if (isClosePassword.value) {
+    // 关闭支付密码
+    return oldPassword.value.length === 6
+  } else {
+    // 修改密码
+    if (!oldPassword.value || !newPassword.value || !confirmPassword.value) return false
+    if (oldPassword.value.length !== 6 || newPassword.value.length !== 6 || confirmPassword.value.length !== 6) return false
+    return newPassword.value === confirmPassword.value
+  }
 })

 // 输入验证（只允许数字）
@@ -122,7 +162,17 @@ const validateInput = (value: string) => {
  }
 }

-// 重置表单
+// 处理开关切换
+const handleSwitchChange = (value: boolean) => {
+  isClosePassword.value = value
+  // 切换时重置新密码输入
+  if (value) {
+    newPassword.value = ''
+    confirmPassword.value = ''
+  }
+}
+
+// 重置表单更新
 const resetForm = () => {
  oldPassword.value = ''
  newPassword.value = ''
@@ -130,11 +180,13 @@ const resetForm = () => {
  showOldPassword.value = false
  showNewPassword.value = false
  showConfirmPassword.value = false
+  isClosePassword.value = false
 }

 // 显示弹框
-const show = () => {
+const show = async () => {
  console.log('show pay password dialog')
+  hasOldPassword.value = userStore.userInfo.paywithpwd===1
  popup.value?.open('center')
 }

@@ -151,23 +203,23 @@ const handleCancel = () => {
  resetForm()
 }

-// 确认
+// 确认按钮处理更新
 const handleConfirm = async () => {
  try {
    await userStore.setPayPassword({
-        paywithpwd:'0',
-        oldpwd: oldPassword.value,
-        newpwd: newPassword.value,
+      paywithpwd: isClosePassword.value ? 0 : 1, // 0:关闭 1:开启
+      oldpwd: hasOldPassword.value ? oldPassword.value : '',
+      newpwd: isClosePassword.value ? '' : newPassword.value,
    })
    uni.showToast({
-      title: '设置成功',
+      title: isClosePassword.value ? '已关闭支付密码' : '设置成功',
      icon: 'success',
    })
    hide()
    resetForm()
  } catch (error) {
    uni.showToast({
-      title: '设置失败',
+      title: '操作失败',
      icon: 'error',
    })
  }
@@ -202,6 +254,19 @@ defineExpose({
  }
  
  .form-container {
+    .switch-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx 0;
+      margin-bottom: 20rpx;
+      
+      text {
+        font-size: 28rpx;
+        color: #333;
+      }
+    }
+    
    .form-item {
      margin-bottom: 30rpx;
      
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -18,7 +18,7 @@
    "modules": {}
  },
  "mp-weixin": {
-    "appid": "wx67a750d0ceed4d88",
+    "appid": "wx92e663dc11d0c0a8",
    "setting": {
      "urlCheck": false
    },
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -12,7 +12,7 @@ import {
 } from '@/utils/auth';
 import type { RegisterParams, TerminalBean,SetPayPasswordParams } from '@/api/user/types';
 import { getCompanyInfo } from '@/api/company';
-import { setPayPassword, getPayPasswordStatus } from '@/api/user'
+import { setPayPassword } from '@/api/user'

 const useUserStore = defineStore('user', {
  state: () => ({
@@ -204,18 +204,12 @@ const useUserStore = defineStore('user', {
    async setPayPassword(params: SetPayPasswordParams) {
      const res = await setPayPassword(params)
      if (res.success) {
-        this.userInfo.hasPayPassword = true
+        this.userInfo.paywithpwd = 1
        return true
      }
      return false
    },
-    
-    // 获取支付密码状态
-    async getPayPasswordStatus() {
-      const res = await getPayPasswordStatus()
-      this.userInfo.hasPayPassword = res.hasPassword
-    },
  }
 });
-
+  
 export default useUserStore;
--- a/src/store/modules/user/types.ts
+++ b/src/store/modules/user/types.ts
@@ -14,7 +14,7 @@ export interface UserBean {
  consumptionDay: string;
  couponsCount: number;
  createTime: string;
-  creatorId: string;
+  creatorId: string;  
  creatorName: string;
  customerPrice: string;
  email: string;
@@ -53,7 +53,7 @@ export interface UserBean {
  useCouponsPrice: number;
  wirelinedTelephone: string;
  userDiscount: number;
-  hasPayPassword: boolean;
+  paywithpwd: number;
 }

 export type providerType =