feat(收款设置): 添加银行选择器组件及样式

- 替换银行名称输入框为银行选择器组件 - 添加银行选择弹窗及相关样式 - 修改银行账号输入框为原生input组件 - 优化表单输入框的placeholder样式

feat(收款设置): 添加银行选择器组件及样式
- 替换银行名称输入框为银行选择器组件 - 添加银行选择弹窗及相关样式 - 修改银行账号输入框为原生input组件 - 优化表单输入框的placeholder样式
hookehuyr
Commit 7bef4e0f4c69cfa50ca71f8e73a1440fc2cb4f80 7bef4e0f 1 parent 45567965
Showing 2 changed files with 217 additions and 17 deletions
src/pages/collectionSettings/index.less
src/pages/collectionSettings/index.vue
--- a/src/pages/collectionSettings/index.less
View file @7bef4e0
+++ b/src/pages/collectionSettings/index.less
View file @7bef4e0
@@ -107,16 +107,22 @@
         .form-input {
           width: 100%;
-          padding: 24rpx 0;
+          // color: #eee;
-          font-size: 32rpx;
+          // padding: 24rpx 0;
+          font-size: 30rpx;
           border: none;
-          // border-bottom: 2rpx solid #eee;
+          border-bottom: 2rpx solid #eee;
           background: transparent;
           transition: border-color 0.3s;
           &:focus {
             border-bottom-color: #1890ff;
           }
+
+            &::placeholder {
+              color: #e5e5e5;
+              font-size: 24rpx;
+            }
         }
         .error-text {
@@ -125,6 +131,38 @@
           color: #ff4d4f;
           margin-top: 8rpx;
         }
+
+        // 银行选择器样式
+        .bank-selector {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 24rpx 0;
+          border-bottom: 2rpx solid #eee;
+          cursor: pointer;
+          transition: border-color 0.3s;
+
+          &:active {
+            border-bottom-color: #1890ff;
+          }
+
+          .bank-text {
+            font-size: 32rpx;
+            color: #ccc;
+            flex: 1;
+
+            &.bank-selected {
+              color: #333;
+            }
+          }
+
+          .arrow-down {
+            font-size: 32rpx;
+            color: #ccc;
+            // transform: rotate(90deg);
+            transition: transform 0.3s;
+          }
+        }
       }
     }
@@ -155,6 +193,69 @@
       }
     }
   }
+
+  // 银行选择弹窗样式
+  .bank-modal-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+
+    .bank-modal-header {
+      padding: 32rpx;
+      border-bottom: 1rpx solid #eee;
+      background-color: #fff;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+
+      .bank-modal-title {
+        font-size: 36rpx;
+        font-weight: 600;
+        color: #333;
+        text-align: center;
+      }
+    }
+
+    .bank-list {
+      flex: 1;
+      overflow-y: auto;
+
+      .bank-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 32rpx 24rpx;
+        border-bottom: 1rpx solid #f0f0f0;
+        transition: background-color 0.2s;
+        cursor: pointer;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        &:active {
+          background-color: #f8f8f8;
+        }
+
+        &.bank-item-selected {
+          background-color: #e6f7ff;
+        }
+
+        .bank-name {
+          font-size: 32rpx;
+          color: #333;
+          flex: 1;
+        }
+
+        .bank-check {
+          font-size: 32rpx;
+          color: #1890ff;
+          font-weight: bold;
+        }
+      }
+    }
+  }
 }
 // NutUI 组件样式覆盖
@@ -165,6 +266,29 @@
   }
 }
+// 原生input组件样式
+.native-input {
+  width: 100%;
+  height: 88rpx;
+  // padding: 0 24rpx;
+  font-size: 32rpx;
+  color: #333;
+  background-color: #f8f8f8;
+  border: 2rpx solid #e5e5e5;
+  border-radius: 8rpx;
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: #e5e5e5;
+    font-size: 24rpx;
+  }
+
+  &:focus {
+    border-color: #fa2c19;
+    outline: none;
+  }
+}
+
 :deep(.nut-input) {
   .nut-input-value {
     font-size: 32rpx;
--- a/src/pages/collectionSettings/index.vue
View file @7bef4e0
+++ b/src/pages/collectionSettings/index.vue
View file @7bef4e0
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-05 20:03:22
+ * @LastEditTime: 2025-08-06 10:33:06
  * @FilePath: /jgdl/src/pages/collectionSettings/index.vue
  * @Description: 收款设置
 -->
@@ -55,21 +55,22 @@
         <view class="form-content">
           <view class="form-item">
             <text class="form-label">银行名称</text>
-            <nut-input
+            <view class="bank-selector" @click="showBankPicker">
-              v-model="tempAccountInfo.bankName"
+              <text class="bank-text" :class="{ 'bank-selected': tempAccountInfo.bankName }">
-              placeholder="请输入银行名称"
+                {{ tempAccountInfo.bankName || '请选择银行' }}
-              class="form-input"
+              </text>
-            />
+              <text class="arrow-down">></text>
+            </view>
           </view>
           <view class="form-item">
             <text class="form-label">银行账号</text>
-            <nut-input
+            <input
               v-model="tempAccountInfo.bankAccount"
               placeholder="请输入银行账号"
-              class="form-input"
+              class="form-input custom-input native-input"
               type="number"
-              :cursorSpacing="50"
+              :cursor-spacing="50"
             />
           </view>
         </view>
@@ -95,6 +96,36 @@
       </view>
     </nut-popup>
+    <!-- 银行选择弹窗 -->
+    <nut-popup
+      v-model:visible="showBankModal"
+      position="bottom"
+      :style="{ width: '100%', height: '60%' }"
+      :catch-move="true"
+      closeable
+      close-icon-position="top-right"
+      @close="closeBankModal"
+    >
+      <view class="bank-modal-content">
+        <view class="bank-modal-header">
+          <text class="bank-modal-title">选择银行</text>
+        </view>
+
+        <view class="bank-list">
+          <view
+            v-for="bank in bankList"
+            :key="bank.id"
+            class="bank-item"
+            :class="{ 'bank-item-selected': tempAccountInfo.bankName === bank.name }"
+            @click="selectBank(bank)"
+          >
+            <text class="bank-name">{{ bank.name }}</text>
+            <view v-if="tempAccountInfo.bankName === bank.name" class="bank-check">✓</view>
+          </view>
+        </view>
+      </view>
+    </nut-popup>
+
     <!-- 身份信息弹窗 -->
     <nut-popup
       v-model:visible="showIdentityModal"
@@ -113,22 +144,22 @@
         <view class="form-content">
           <view class="form-item">
             <text class="form-label">用户名称</text>
-            <nut-input
+            <input
               v-model="tempIdentityInfo.userName"
               placeholder="请输入真实姓名"
-              class="form-input"
+              class="form-input native-input"
             />
           </view>
           <view class="form-item">
             <text class="form-label">身份证号码</text>
-            <nut-input
+            <input
               v-model="tempIdentityInfo.idCard"
               placeholder="请输入身份证号码"
-              class="form-input"
+              class="form-input native-input"
               maxlength="18"
               @blur="handleIdCardBlur"
-              :cursorSpacing="50"
+              :cursor-spacing="50"
             />
             <text v-if="idCardError" class="error-text">{{ idCardError }}</text>
           </view>
@@ -202,6 +233,7 @@ const tempIdentityInfo = ref({
  */
 const showAccountModal = ref(false);
 const showIdentityModal = ref(false);
+const showBankModal = ref(false);
 /**
  * 身份证号码错误信息
@@ -209,6 +241,27 @@ const showIdentityModal = ref(false);
 const idCardError = ref('');
 /**
+ * 银行列表数据（模拟数据，后期从接口获取）
+ */
+const bankList = ref([
+  { id: 1, name: '中国工商银行' },
+  { id: 2, name: '中国建设银行' },
+  { id: 3, name: '中国农业银行' },
+  { id: 4, name: '中国银行' },
+  { id: 5, name: '交通银行' },
+  { id: 6, name: '招商银行' },
+  { id: 7, name: '中信银行' },
+  { id: 8, name: '光大银行' },
+  { id: 9, name: '华夏银行' },
+  { id: 10, name: '民生银行' },
+  { id: 11, name: '广发银行' },
+  { id: 12, name: '平安银行' },
+  { id: 13, name: '浦发银行' },
+  { id: 14, name: '兴业银行' },
+  { id: 15, name: '邮储银行' }
+]);
+
+/**
  * 获取用户信息
  */
 const getUserInfo = async () => {
@@ -295,6 +348,29 @@ const handleIdCardBlur = () => {
 };
 /**
+ * 显示银行选择弹窗
+ */
+const showBankPicker = () => {
+  showBankModal.value = true;
+};
+
+/**
+ * 关闭银行选择弹窗
+ */
+const closeBankModal = () => {
+  showBankModal.value = false;
+};
+
+/**
+ * 选择银行
+ * @param {Object} bank - 银行对象
+ */
+const selectBank = (bank) => {
+  tempAccountInfo.value.bankName = bank.name;
+  closeBankModal();
+};
+
+/**
  * 打开收款账号弹窗
  */
 const openAccountModal = () => {