hookehuyr

refactor(collectionSettings): 替换自定义银行选择器为NutUI Picker组件

移除自定义银行选择弹窗的样式和逻辑代码,改用NutUI Picker组件实现
简化代码结构,提高组件复用性
...@@ -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({
......