Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
jgdl
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-08-13 14:35:01 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
fea3d8ec38ac57e194ea3d77f41fa1867562364e
fea3d8ec
1 parent
e5d3c239
feat(BrandModelPicker): 添加自定义型号输入功能
在品牌型号选择器中新增自定义型号输入弹窗,允许用户输入自定义型号名称
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
158 additions
and
2 deletions
src/components/BrandModelPicker.vue
src/pages/collectionSettings/index.vue
src/components/BrandModelPicker.vue
View file @
fea3d8e
...
...
@@ -62,6 +62,14 @@
>
<text class="model-name">{{ model.text }}</text>
</view>
<!-- 自定义型号选项 -->
<view
class="model-item"
@click="showCustomModelInput"
>
<text class="model-name">自定义型号</text>
<Right />
</view>
</view>
</view>
</nut-popup>
...
...
@@ -106,6 +114,39 @@
</view>
</view>
</nut-popup>
<!-- 自定义型号输入弹框 -->
<nut-popup v-model:visible="customModelInputVisible" position="bottom" :style="{ height: '50%' }">
<view class="custom-model-input-picker">
<view class="picker-header">
<nut-button size="small" @click="goBackToModelPicker">返回</nut-button>
<text class="picker-title">自定义{{ selectedBrandName }}型号</text>
<nut-button size="small" type="primary" @click="closePicker">关闭</nut-button>
</view>
<view class="custom-input-content">
<view class="input-group">
<text class="input-label">型号名称</text>
<nut-input
v-model="customModelOnly"
placeholder="请输入型号名称"
class="custom-input"
/>
</view>
<view class="button-group">
<nut-button
type="primary"
size="large"
color="orange"
@click="confirmCustomModelInput"
:disabled="!customModelOnly.trim()"
class="confirm-button"
>
确认
</nut-button>
</view>
</view>
</view>
</nut-popup>
</view>
</template>
...
...
@@ -130,12 +171,14 @@ const emit = defineEmits(['confirm', 'cancel'])
const brandPickerVisible = ref(false)
const modelPickerVisible = ref(false)
const customInputVisible = ref(false)
const customModelInputVisible = ref(false)
const selectedBrandName = ref('')
const currentBrandModels = ref([])
const contentHeight = ref(800) // 默认高度 rpx
const searchKeyword = ref('') // 搜索关键词
const customBrand = ref('') // 自定义品牌
const customModel = ref('') // 自定义型号
const customModelOnly = ref('') // 只自定义型号
// 使用父组件传入的品牌数据,并添加"其他"选项
const allBrands = computed(() => {
...
...
@@ -268,6 +311,48 @@ const confirmCustomInput = () => {
closeAllPickers()
}
/**
* 显示自定义型号输入弹窗
*/
const showCustomModelInput = () => {
modelPickerVisible.value = false
customModelInputVisible.value = true
customModelOnly.value = '' // 清空之前的输入
}
/**
* 确认自定义型号输入
*/
const confirmCustomModelInput = () => {
if (!customModelOnly.value.trim()) {
return
}
// 找到对应的品牌ID
const selectedBrand = props.brandOptions.find(brand => brand.text === selectedBrandName.value)
const result = {
brand: selectedBrandName.value,
model: customModelOnly.value.trim(),
brandValue: selectedBrand ? selectedBrand.value : selectedBrandName.value,
modelValue: customModelOnly.value.trim()
}
// 发送确认事件
emit('confirm', result)
// 关闭所有弹框
closeAllPickers()
}
/**
* 返回型号选择器
*/
const goBackToModelPicker = () => {
customModelInputVisible.value = false
modelPickerVisible.value = true
}
// 返回品牌选择
const goBackToBrandPicker = () => {
modelPickerVisible.value = false
...
...
@@ -286,10 +371,12 @@ const closeAllPickers = () => {
brandPickerVisible.value = false
modelPickerVisible.value = false
customInputVisible.value = false
customModelInputVisible.value = false
selectedBrandName.value = ''
currentBrandModels.value = []
customBrand.value = ''
customModel.value = ''
customModelOnly.value = ''
}
// 组件挂载时初始化
...
...
@@ -477,6 +564,7 @@ defineExpose({
.model-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 20rpx;
border-bottom: 1rpx solid #f8f8f8;
transition: background-color 0.2s;
...
...
@@ -489,6 +577,8 @@ defineExpose({
font-size: 30rpx;
color: #333;
}
}
}
}
...
...
@@ -558,4 +648,70 @@ defineExpose({
}
}
}
/* 自定义型号输入弹窗样式 */
.custom-model-input-picker {
padding: 20rpx;
height: 100%;
display: flex;
flex-direction: column;
.picker-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f0f0f0;
margin-bottom: 20rpx;
.picker-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
.custom-input-content {
flex: 1;
display: flex;
flex-direction: column;
.input-group {
margin-bottom: 40rpx;
.input-label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 20rpx;
font-weight: 500;
}
.custom-input {
width: 100%;
height: 80rpx;
border: 1rpx solid #e0e0e0;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx;
background: #fff;
&:focus {
border-color: #1890ff;
}
}
}
.button-group {
margin-top: auto;
padding-top: 40rpx;
.confirm-button {
width: 100%;
height: 80rpx;
border-radius: 8rpx;
}
}
}
}
</style>
...
...
src/pages/collectionSettings/index.vue
View file @
fea3d8e
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-13
09:50:04
* @LastEditTime: 2025-08-13
10:45:26
* @FilePath: /jgdl/src/pages/collectionSettings/index.vue
* @Description: 收款设置
-->
...
...
@@ -109,7 +109,7 @@
</nut-popup>
<!-- 身份信息弹窗 -->
<nut-popup v-model:visible="showIdentityModal" position="bottom" :style="{ width: '100%', height: '
100
%' }"
<nut-popup v-model:visible="showIdentityModal" position="bottom" :style="{ width: '100%', height: '
85
%' }"
:close-on-click-overlay="false" closeable close-icon-position="top-right" @close="closeIdentityModal">
<view class="modal-content">
<view class="modal-header">
...
...
Please
register
or
login
to post a comment