feat(BrandModelPicker): 添加自定义型号输入功能

在品牌型号选择器中新增自定义型号输入弹窗，允许用户输入自定义型号名称

feat(BrandModelPicker): 添加自定义型号输入功能
在品牌型号选择器中新增自定义型号输入弹窗，允许用户输入自定义型号名称
hookehuyr
Commit fea3d8ec38ac57e194ea3d77f41fa1867562364e fea3d8ec 1 parent e5d3c239
Showing 2 changed files with 158 additions and 2 deletions
src/components/BrandModelPicker.vue
src/pages/collectionSettings/index.vue
--- a/src/components/BrandModelPicker.vue
View file @fea3d8e
+++ b/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>
--- a/src/pages/collectionSettings/index.vue
View file @fea3d8e
+++ b/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">