Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7bef4e0f 1 parent 45567965

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

- 替换银行名称输入框为银行选择器组件
- 添加银行选择弹窗及相关样式
- 修改银行账号输入框为原生input组件
- 优化表单输入框的placeholder样式
Inline Side-by-side
Showing 2 changed files with 217 additions and 17 deletions
......@@ -107,16 +107,22 @@
.form-input {
width: 100%;
padding: 24rpx 0;
font-size: 32rpx;
// color: #eee;
// 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;
......
<!--
* @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
v-model="tempAccountInfo.bankName"
placeholder="请输入银行名称"
class="form-input"
/>
<view class="bank-selector" @click="showBankPicker">
<text class="bank-text" :class="{ 'bank-selected': tempAccountInfo.bankName }">
{{ tempAccountInfo.bankName || '请选择银行' }}
</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 = () => {
......