hookehuyr

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

移除自定义银行选择弹窗的样式和逻辑代码,改用NutUI Picker组件实现
简化代码结构,提高组件复用性
......@@ -194,68 +194,7 @@
}
}
// 银行选择弹窗样式
.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 Picker组件,无需自定义样式)
}
// NutUI 组件样式覆盖
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-06 11:06:23
* @LastEditTime: 2025-08-06 12:03:17
* @FilePath: /jgdl/src/pages/collectionSettings/index.vue
* @Description: 收款设置
-->
......@@ -96,34 +96,18 @@
</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-picker
v-model="bankPickerValue"
:columns="bankOptions"
title="选择银行"
@confirm="onBankConfirm"
@cancel="showBankModal = false"
></nut-picker>
</nut-popup>
<!-- 身份信息弹窗 -->
......@@ -262,27 +246,32 @@ const showBankModal = ref(false);
*/
const idCardError = ref('');
// 银行选择器当前选中的值
const bankPickerValue = 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 bankOptions = ref([
{ text: '中国工商银行', value: '中国工商银行' },
{ text: '中国建设银行', value: '中国建设银行' },
{ text: '中国农业银行', value: '中国农业银行' },
{ text: '中国银行', value: '中国银行' },
{ text: '交通银行', value: '交通银行' },
{ text: '招商银行', value: '招商银行' },
{ text: '中信银行', value: '中信银行' },
{ text: '光大银行', value: '光大银行' },
{ text: '华夏银行', value: '华夏银行' },
{ text: '民生银行', value: '民生银行' },
{ text: '广发银行', value: '广发银行' },
{ text: '平安银行', value: '平安银行' },
{ text: '浦发银行', value: '浦发银行' },
{ text: '兴业银行', value: '兴业银行' },
{ text: '邮储银行', value: '邮储银行' }
]);
/**
* 获取用户信息
*/
......@@ -373,23 +362,23 @@ const handleIdCardBlur = () => {
* 显示银行选择弹窗
*/
const showBankPicker = () => {
// 设置当前选中的值
if (tempAccountInfo.value.bankName) {
bankPickerValue.value = [tempAccountInfo.value.bankName];
} else {
bankPickerValue.value = [bankOptions.value[0].value];
}
showBankModal.value = true;
};
/**
* 关闭银行选择弹窗
*/
const closeBankModal = () => {
showBankModal.value = false;
};
/**
* 选择银行
* @param {Object} bank - 银行对象
* 银行选择确认回调
*/
const selectBank = (bank) => {
tempAccountInfo.value.bankName = bank.name;
closeBankModal();
const onBankConfirm = ({ selectedValue }) => {
tempAccountInfo.value.bankName = selectedValue[0];
showBankModal.value = false;
};
/**
......