refactor(collectionSettings): 替换自定义银行选择器为NutUI Picker组件
移除自定义银行选择弹窗的样式和逻辑代码,改用NutUI Picker组件实现 简化代码结构,提高组件复用性
Showing
2 changed files
with
46 additions
and
118 deletions
| ... | @@ -194,68 +194,7 @@ | ... | @@ -194,68 +194,7 @@ |
| 194 | } | 194 | } |
| 195 | } | 195 | } |
| 196 | 196 | ||
| 197 | - // 银行选择弹窗样式 | 197 | + // 银行选择器样式(使用NutUI Picker组件,无需自定义样式) |
| 198 | - .bank-modal-content { | ||
| 199 | - height: 100%; | ||
| 200 | - display: flex; | ||
| 201 | - flex-direction: column; | ||
| 202 | - background-color: #fff; | ||
| 203 | - | ||
| 204 | - .bank-modal-header { | ||
| 205 | - padding: 32rpx; | ||
| 206 | - border-bottom: 1rpx solid #eee; | ||
| 207 | - background-color: #fff; | ||
| 208 | - position: sticky; | ||
| 209 | - top: 0; | ||
| 210 | - z-index: 10; | ||
| 211 | - | ||
| 212 | - .bank-modal-title { | ||
| 213 | - font-size: 36rpx; | ||
| 214 | - font-weight: 600; | ||
| 215 | - color: #333; | ||
| 216 | - text-align: center; | ||
| 217 | - } | ||
| 218 | - } | ||
| 219 | - | ||
| 220 | - .bank-list { | ||
| 221 | - flex: 1; | ||
| 222 | - overflow-y: auto; | ||
| 223 | - | ||
| 224 | - .bank-item { | ||
| 225 | - display: flex; | ||
| 226 | - align-items: center; | ||
| 227 | - justify-content: space-between; | ||
| 228 | - padding: 32rpx 24rpx; | ||
| 229 | - border-bottom: 1rpx solid #f0f0f0; | ||
| 230 | - transition: background-color 0.2s; | ||
| 231 | - cursor: pointer; | ||
| 232 | - | ||
| 233 | - &:last-child { | ||
| 234 | - border-bottom: none; | ||
| 235 | - } | ||
| 236 | - | ||
| 237 | - &:active { | ||
| 238 | - background-color: #f8f8f8; | ||
| 239 | - } | ||
| 240 | - | ||
| 241 | - &.bank-item-selected { | ||
| 242 | - background-color: #e6f7ff; | ||
| 243 | - } | ||
| 244 | - | ||
| 245 | - .bank-name { | ||
| 246 | - font-size: 32rpx; | ||
| 247 | - color: #333; | ||
| 248 | - flex: 1; | ||
| 249 | - } | ||
| 250 | - | ||
| 251 | - .bank-check { | ||
| 252 | - font-size: 32rpx; | ||
| 253 | - color: #1890ff; | ||
| 254 | - font-weight: bold; | ||
| 255 | - } | ||
| 256 | - } | ||
| 257 | - } | ||
| 258 | - } | ||
| 259 | } | 198 | } |
| 260 | 199 | ||
| 261 | // NutUI 组件样式覆盖 | 200 | // NutUI 组件样式覆盖 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-08-06 11:06:23 | 4 | + * @LastEditTime: 2025-08-06 12:03:17 |
| 5 | * @FilePath: /jgdl/src/pages/collectionSettings/index.vue | 5 | * @FilePath: /jgdl/src/pages/collectionSettings/index.vue |
| 6 | * @Description: 收款设置 | 6 | * @Description: 收款设置 |
| 7 | --> | 7 | --> |
| ... | @@ -96,34 +96,18 @@ | ... | @@ -96,34 +96,18 @@ |
| 96 | </view> | 96 | </view> |
| 97 | </nut-popup> | 97 | </nut-popup> |
| 98 | 98 | ||
| 99 | - <!-- 银行选择弹窗 --> | 99 | + <!-- 银行选择器弹窗 --> |
| 100 | <nut-popup | 100 | <nut-popup |
| 101 | v-model:visible="showBankModal" | 101 | v-model:visible="showBankModal" |
| 102 | position="bottom" | 102 | position="bottom" |
| 103 | - :style="{ width: '100%', height: '60%' }" | ||
| 104 | - :catch-move="true" | ||
| 105 | - closeable | ||
| 106 | - close-icon-position="top-right" | ||
| 107 | - @close="closeBankModal" | ||
| 108 | > | 103 | > |
| 109 | - <view class="bank-modal-content"> | 104 | + <nut-picker |
| 110 | - <view class="bank-modal-header"> | 105 | + v-model="bankPickerValue" |
| 111 | - <text class="bank-modal-title">选择银行</text> | 106 | + :columns="bankOptions" |
| 112 | - </view> | 107 | + title="选择银行" |
| 113 | - | 108 | + @confirm="onBankConfirm" |
| 114 | - <view class="bank-list"> | 109 | + @cancel="showBankModal = false" |
| 115 | - <view | 110 | + ></nut-picker> |
| 116 | - v-for="bank in bankList" | ||
| 117 | - :key="bank.id" | ||
| 118 | - class="bank-item" | ||
| 119 | - :class="{ 'bank-item-selected': tempAccountInfo.bankName === bank.name }" | ||
| 120 | - @click="selectBank(bank)" | ||
| 121 | - > | ||
| 122 | - <text class="bank-name">{{ bank.name }}</text> | ||
| 123 | - <view v-if="tempAccountInfo.bankName === bank.name" class="bank-check">✓</view> | ||
| 124 | - </view> | ||
| 125 | - </view> | ||
| 126 | - </view> | ||
| 127 | </nut-popup> | 111 | </nut-popup> |
| 128 | 112 | ||
| 129 | <!-- 身份信息弹窗 --> | 113 | <!-- 身份信息弹窗 --> |
| ... | @@ -262,27 +246,32 @@ const showBankModal = ref(false); | ... | @@ -262,27 +246,32 @@ const showBankModal = ref(false); |
| 262 | */ | 246 | */ |
| 263 | const idCardError = ref(''); | 247 | const idCardError = ref(''); |
| 264 | 248 | ||
| 249 | +// 银行选择器当前选中的值 | ||
| 250 | +const bankPickerValue = ref([]); | ||
| 251 | + | ||
| 265 | /** | 252 | /** |
| 266 | * 银行列表数据(模拟数据,后期从接口获取) | 253 | * 银行列表数据(模拟数据,后期从接口获取) |
| 267 | */ | 254 | */ |
| 268 | -const bankList = ref([ | 255 | +const bankOptions = ref([ |
| 269 | - { id: 1, name: '中国工商银行' }, | 256 | + { text: '中国工商银行', value: '中国工商银行' }, |
| 270 | - { id: 2, name: '中国建设银行' }, | 257 | + { text: '中国建设银行', value: '中国建设银行' }, |
| 271 | - { id: 3, name: '中国农业银行' }, | 258 | + { text: '中国农业银行', value: '中国农业银行' }, |
| 272 | - { id: 4, name: '中国银行' }, | 259 | + { text: '中国银行', value: '中国银行' }, |
| 273 | - { id: 5, name: '交通银行' }, | 260 | + { text: '交通银行', value: '交通银行' }, |
| 274 | - { id: 6, name: '招商银行' }, | 261 | + { text: '招商银行', value: '招商银行' }, |
| 275 | - { id: 7, name: '中信银行' }, | 262 | + { text: '中信银行', value: '中信银行' }, |
| 276 | - { id: 8, name: '光大银行' }, | 263 | + { text: '光大银行', value: '光大银行' }, |
| 277 | - { id: 9, name: '华夏银行' }, | 264 | + { text: '华夏银行', value: '华夏银行' }, |
| 278 | - { id: 10, name: '民生银行' }, | 265 | + { text: '民生银行', value: '民生银行' }, |
| 279 | - { id: 11, name: '广发银行' }, | 266 | + { text: '广发银行', value: '广发银行' }, |
| 280 | - { id: 12, name: '平安银行' }, | 267 | + { text: '平安银行', value: '平安银行' }, |
| 281 | - { id: 13, name: '浦发银行' }, | 268 | + { text: '浦发银行', value: '浦发银行' }, |
| 282 | - { id: 14, name: '兴业银行' }, | 269 | + { text: '兴业银行', value: '兴业银行' }, |
| 283 | - { id: 15, name: '邮储银行' } | 270 | + { text: '邮储银行', value: '邮储银行' } |
| 284 | ]); | 271 | ]); |
| 285 | 272 | ||
| 273 | + | ||
| 274 | + | ||
| 286 | /** | 275 | /** |
| 287 | * 获取用户信息 | 276 | * 获取用户信息 |
| 288 | */ | 277 | */ |
| ... | @@ -373,23 +362,23 @@ const handleIdCardBlur = () => { | ... | @@ -373,23 +362,23 @@ const handleIdCardBlur = () => { |
| 373 | * 显示银行选择弹窗 | 362 | * 显示银行选择弹窗 |
| 374 | */ | 363 | */ |
| 375 | const showBankPicker = () => { | 364 | const showBankPicker = () => { |
| 365 | + // 设置当前选中的值 | ||
| 366 | + if (tempAccountInfo.value.bankName) { | ||
| 367 | + bankPickerValue.value = [tempAccountInfo.value.bankName]; | ||
| 368 | + } else { | ||
| 369 | + bankPickerValue.value = [bankOptions.value[0].value]; | ||
| 370 | + } | ||
| 376 | showBankModal.value = true; | 371 | showBankModal.value = true; |
| 377 | }; | 372 | }; |
| 378 | 373 | ||
| 379 | -/** | 374 | + |
| 380 | - * 关闭银行选择弹窗 | ||
| 381 | - */ | ||
| 382 | -const closeBankModal = () => { | ||
| 383 | - showBankModal.value = false; | ||
| 384 | -}; | ||
| 385 | 375 | ||
| 386 | /** | 376 | /** |
| 387 | - * 选择银行 | 377 | + * 银行选择确认回调 |
| 388 | - * @param {Object} bank - 银行对象 | ||
| 389 | */ | 378 | */ |
| 390 | -const selectBank = (bank) => { | 379 | +const onBankConfirm = ({ selectedValue }) => { |
| 391 | - tempAccountInfo.value.bankName = bank.name; | 380 | + tempAccountInfo.value.bankName = selectedValue[0]; |
| 392 | - closeBankModal(); | 381 | + showBankModal.value = false; |
| 393 | }; | 382 | }; |
| 394 | 383 | ||
| 395 | /** | 384 | /** |
| ... | @@ -429,13 +418,13 @@ const saveAccountInfo = async () => { | ... | @@ -429,13 +418,13 @@ const saveAccountInfo = async () => { |
| 429 | 418 | ||
| 430 | if (result.code) { | 419 | if (result.code) { |
| 431 | accountInfo.value = { ...tempAccountInfo.value }; | 420 | accountInfo.value = { ...tempAccountInfo.value }; |
| 432 | - | 421 | + |
| 433 | // 更新全局用户状态 | 422 | // 更新全局用户状态 |
| 434 | userStore.updateUserInfo({ | 423 | userStore.updateUserInfo({ |
| 435 | bank: tempAccountInfo.value.bankName, | 424 | bank: tempAccountInfo.value.bankName, |
| 436 | bank_no: tempAccountInfo.value.bankAccount | 425 | bank_no: tempAccountInfo.value.bankAccount |
| 437 | }); | 426 | }); |
| 438 | - | 427 | + |
| 439 | closeAccountModal(); | 428 | closeAccountModal(); |
| 440 | 429 | ||
| 441 | Taro.showToast({ | 430 | Taro.showToast({ |
| ... | @@ -500,13 +489,13 @@ const saveIdentityInfo = async () => { | ... | @@ -500,13 +489,13 @@ const saveIdentityInfo = async () => { |
| 500 | 489 | ||
| 501 | if (result.code) { | 490 | if (result.code) { |
| 502 | identityInfo.value = { ...tempIdentityInfo.value }; | 491 | identityInfo.value = { ...tempIdentityInfo.value }; |
| 503 | - | 492 | + |
| 504 | // 更新全局用户状态 | 493 | // 更新全局用户状态 |
| 505 | userStore.updateUserInfo({ | 494 | userStore.updateUserInfo({ |
| 506 | name: tempIdentityInfo.value.userName, | 495 | name: tempIdentityInfo.value.userName, |
| 507 | idcard: tempIdentityInfo.value.idCard | 496 | idcard: tempIdentityInfo.value.idCard |
| 508 | }); | 497 | }); |
| 509 | - | 498 | + |
| 510 | closeIdentityModal(); | 499 | closeIdentityModal(); |
| 511 | 500 | ||
| 512 | Taro.showToast({ | 501 | Taro.showToast({ | ... | ... |
-
Please register or login to post a comment