完善页面5

pages/mall/admin/cms/category/list.uvue

@@ -73,11 +73,20 @@
         <scroll-view class="drawer-body" :scroll-y="true">
           <view class="form-item row">
             <view class="label-box"><text class="label-txt">上级分类:</text></view>
-            <view class="input-box">
-              <view class="select-mock">
-                <text class="select-val">顶级分类</text>
-                <text class="arrow-down">▼</text>
-              </view>
+            <view class="input-box z-10" style="position: relative;">
+               <view class="select-mock" @click="toggleParentDropdown">
+                 <text class="select-val">{{ formParentCategory }}</text>
+                 <text class="arrow-down">▼</text>
+               </view>
+               <view v-if="parentDropdownVisible" class="dropdown-list">
+                 <view 
+                   v-for="(cat, index) in parentCategoryList" 
+                   :key="index" 
+                   class="dropdown-item" 
+                   @click="selectParentCategory(cat)">
+                   <text class="dropdown-txt">{{ cat }}</text>
+                 </view>
+               </view>
             </view>
           </view>
 
@@ -98,8 +107,9 @@
           <view class="form-item row">
             <view class="label-box"><text class="label-txt">分类图片:</text></view>
             <view class="input-box">
-              <view class="upload-btn">
-                <view class="img-icon">🖼️</view>
+              <view class="upload-btn" @click="handleUpload">
+                <view v-if="!formImage" class="img-icon">🖼️</view>
+                <text v-else style="font-size:12px;">已上传</text>
               </view>
             </view>
           </view>
@@ -151,23 +161,48 @@ const formName = ref('')
 const formDesc = ref('')
 const formSort = ref(0)
 const formStatus = ref(true)
+const formParentCategory = ref('顶级分类')
+const formImage = ref('')
+
+const parentCategoryList = ref(['顶级分类', '购物心得', '消费文化', '品牌资讯'])
+const parentDropdownVisible = ref(false)
+
+const toggleParentDropdown = () => {
+    parentDropdownVisible.value = !parentDropdownVisible.value
+}
+
+const selectParentCategory = (val: string) => {
+    formParentCategory.value = val
+    parentDropdownVisible.value = false
+}
+
+const handleUpload = () => {
+    formImage.value = 'uploaded'
+    uni.showToast({ title: '模拟上传图片', icon: 'none' })
+}
 
 const handleAdd = () => {
   formName.value = ''
   formDesc.value = ''
   formSort.value = 0
   formStatus.value = true
+  formParentCategory.value = '顶级分类'
+  formImage.value = ''
   isClosing.value = false
+  parentDropdownVisible.value = false
   showDrawer.value = true
 }
 
 const handleEdit = (item: any) => {
   formName.value = item.name
   // 模拟填充其他字段
-  formDesc.value = ''
+  formDesc.value = '分类简介...'
   formSort.value = 0
   formStatus.value = item.status
+  formParentCategory.value = '顶级分类'
+  formImage.value = 'exists'
   isClosing.value = false
+  parentDropdownVisible.value = false
   showDrawer.value = true
 }
 
@@ -182,7 +217,23 @@ const closeDrawer = () => {
     isClosing.value = false
   }, 300)
 }
-const handleConfirm = () => { closeDrawer() }
+const handleConfirm = () => { 
+  if (formName.value.trim() == '') {
+    uni.showToast({ title: '请输入分类名称', icon: 'none' })
+    return
+  }
+  
+  // 模拟保存逻辑
+  const newId = String(182 + categoryList.value.length)
+  categoryList.value.unshift({
+    id: newId,
+    name: formName.value,
+    status: formStatus.value
+  })
+  
+  uni.showToast({ title: '添加成功', icon: 'success' })
+  closeDrawer() 
+}
 const handleQuery = () => { console.log('Querying...') }
 </script>
 
@@ -238,6 +289,35 @@ const handleQuery = () => { console.log('Querying...') }
 .label-txt { font-size: 14px; color: #606266; text-align: right; }
 .input-box { flex: 1; }
 .input-base { width: 100%; height: 38px; border: 1px solid #dcdee2; border-radius: 4px; padding: 0 12px; font-size: 14px; }
+
+.dropdown-list {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  border: 1px solid #dcdee2;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.dropdown-item {
+  padding: 10px 15px;
+  cursor: pointer;
+  border-bottom: 1px solid #f0f0f0;
+}
+.dropdown-item:last-child {
+  border-bottom: none;
+}
+.dropdown-item:hover {
+  background-color: #f5f7fa;
+}
+.dropdown-txt {
+  font-size: 14px;
+  color: #606266;
+}
 .textarea-mini { width: 100%; height: 80px; border: 1px solid #dcdee2; border-radius: 4px; padding: 10px 12px; font-size: 14px; }
 
 .upload-btn {