编辑

hdApp/src/admin/goods/category.vue

@@ -1,75 +1,130 @@
 <template>
-  <view class="app-content">
-    <view class="list-wrap">
+  <view class="page-container">
+
+    <!-- 分类列表 -->
+    <view class="list-container">
       <block v-if="!$util.isEmpty(list.data)">
-        <block v-for="(item, index) in list.data" :key="index">
-          <view class="list" @click="edit(item)">
-            <view class="list-img">
-              <image :src="item.img" mode="aspectFit"></image>
+        <view class="list-item" v-for="(item, index) in list.data" :key="index">
+          <!-- 列表项内容 -->
+          <view class="item-content" @click="edit(item)">
+            <view class="item-image">
+              <image :src="item.img" mode="aspectFit" class="image"></image>
             </view>
-            <view class="list-det">
-              <view class="app-size-28 app-color-0" style="font-size: 30upx; font-weight: bold">{{ item.categoryName }}</view>
+            
+            <view class="item-info">
+              <view class="info-main">
+                <text class="category-name">{{ item.categoryName }}</text>
+                <text v-if="item.default == 1" class="default-tag">默认</text>
+              </view>
+              <view class="info-details">
+                <text class="detail-text">序号: {{ item.inTurn }}</text>
+                <text class="detail-text status-text" :class="{ 'active': item.status == 1 }">
+                  {{ item.status == 1 ? '显示' : '隐藏' }}
+                </text>
+              </view>
             </view>
+          </view>
 
-            <text style="position: absolute; bottom: 8upx; left: 150upx; color: #cccccc">序号 {{ item.inTurn }}</text>
-            <!-- <text style="position:absolute;top:65upx;right:150upx;color:blue;" @click.stop="delCategory(item.id)">删除</text> -->
-            <button v-if="item.default != 1" style="position: absolute; top: 6upx; right: 150upx" class="admin-button-com middle" @click.stop="delCategory(item.id)">
-              删除
+          <!-- 操作按钮 -->
+          <view class="item-actions">
+            <button 
+              v-if="item.default != 1" 
+              class="action-btn edit-btn" 
+              @click="edit(item)"
+            >
+              编辑
             </button>
-            <button v-if="item.default != 1" style="position: absolute; top: 6upx; right: 30upx" class="admin-button-com middle blue" @click="edit(item)">修改</button>
-            <button v-if="item.picTextId == 0" style="position: absolute; bottom: 6upx; right: 30upx" class="admin-button-com middle" @click.stop="selectPicText(item.id, item.picTextId)">
-              设置图文
+            
+            <button 
+              v-if="item.default != 1" 
+              class="action-btn delete-btn" 
+              @click.stop="delCategory(item.id)"
+            >
+              删除
             </button>
-            <button v-else style="position: absolute; bottom: 6upx; right: 30upx" class="admin-button-com middle blue" @click.stop="selectPicText(item.id, item.picTextId)">
-              图文-{{ item.picTextId }}
+            
+            <button 
+              class="action-btn pictext-btn" 
+              :class="{ 'has-pictext': item.picTextId > 0 }"
+              @click.stop="selectPicText(item.id, item.picTextId)"
+            >
+              {{ item.picTextId == 0 ? '设图文' : `图文-${item.picTextId}` }}
             </button>
           </view>
-        </block>
+        </view>
       </block>
+      
       <block v-else>
-        <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+        <app-wrapper-empty title="暂无分类数据" :is-empty="$util.isEmpty(list.data)" />
       </block>
     </view>
 
-    <view class="app-footer">
-      <button class="admin-button-com big blue" @click="addCategoryFn">添加分类</button>
+    <!-- 底部添加按钮 -->
+    <view class="bottom-toolbar">
+      <button class="add-category-btn" @click="addCategoryFn">
+        <text class="btn-icon">+</text>
+        <text class="btn-text">添加分类</text>
+      </button>
     </view>
 
+    <!-- 编辑分类模态框 -->
     <modal-module
       :show="modifyModal"
       :maskClosable="false"
       @cancel="modalCancel"
       @click="modifyModalClick"
-      width="92%"
-      :title="modifyTitle"
-      padding="30rpx 30rpx"
+      width="90%"
+      :title="modifyTitle + '分类'"
+      padding="40rpx"
     >
       <template v-slot:content>
-        <view class="app-modal-input-wrap modify-modal">
-          <view class="inp-list-line">
-            <view class="line-label">名称</view>
-            <view class="line-input">
-              <input type="text" v-model="modifyForm.categoryName" :adjust-position="false" class="inp-input" placeholder="请填写" />
+        <view class="modal-form">
+          <view class="form-group">
+            <view class="form-label">
+              <text class="label-text">分类名称</text>
+              <text class="required-mark">*</text>
+            </view>
+            <view class="form-input">
+              <input 
+                type="text" 
+                v-model="modifyForm.categoryName" 
+                :adjust-position="false" 
+                class="input-field" 
+                placeholder="请输入分类名称"
+                maxlength="20"
+              />
             </view>
           </view>
-          <view class="inp-list-line">
-            <view class="line-label">排序</view>
-            <view class="line-input">
+
+          <view class="form-group">
+            <view class="form-label">
+              <text class="label-text">排序权重</text>
+            </view>
+            <view class="form-input">
               <input
                 type="number"
                 v-model="modifyForm.inTurn"
                 @focus="modifyForm.inTurn = ''"
                 :adjust-position="false"
-                class="inp-input"
-                placeholder="值越大越靠前"
+                class="input-field"
+                placeholder="数值越大排序越靠前"
               />
             </view>
           </view>
 
-          <view class="inp-list-line switch-wrap">
-            <view class="line-label">商城上</view>
-            <view class="line-input flex-strat">
-              <switch :checked="modifyForm.status == '0' ? false : true" @change="switchChangeFn" /><text style="margin-left:10upx;">{{ modifyForm.status==0?'隐藏':'显示' }}</text>
+          <view class="form-group switch-group">
+            <view class="form-label">
+              <text class="label-text">显示状态</text>
+            </view>
+            <view class="form-switch">
+              <switch 
+                :checked="modifyForm.status == 1" 
+                @change="switchChangeFn"
+                color="#007AFF"
+              />
+              <text class="switch-text">
+                {{ modifyForm.status == 1 ? '商城显示' : '商城隐藏' }}
+              </text>
             </view>
           </view>
         </view>
@@ -253,84 +308,323 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.app-content {
-  min-height: calc(100vh - 100upx);
-  padding-bottom: 100upx;
+// 页面容器
+.page-container {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20rpx 20rpx 120rpx 20rpx; // 底部留出空间给固定按钮
 }
-.list-wrap {
-  position: relative;
-  background-color: #fff;
-  .list {
-    height: 160upx;
-    @include disFlex(center, flex-start);
-    padding: 30upx 0;
-    margin: 0 30upx;
-    color: $fontColor3;
-    border-bottom: 1px solid $borderColor;
-    position: relative;
-    .list-index {
-      width: 50upx;
-    }
-    .list-img {
-      width: 130upx;
-      height: 130upx;
-      image {
-        width: 130upx;
-        height: 130upx;
-        border-radius: 20upx;
+
+// 页面头部
+.page-header {
+  padding: 30rpx 40rpx;
+  background: #fff;
+  border-radius: 12rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  
+  .page-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    text-align: center;
+  }
+}
+
+// 列表容器
+.list-container {
+  background: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+}
+
+// 列表项
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  transition: background-color 0.2s ease;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:active {
+    background: #f8f8f8;
+  }
+  
+  // 列表项内容
+  .item-content {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    
+    .item-image {
+      width: 80rpx;
+      height: 80rpx;
+      margin-right: 24rpx;
+      border-radius: 8rpx;
+      overflow: hidden;
+      background: #f5f5f5;
+      
+      .image {
+        width: 100%;
+        height: 100%;
       }
     }
-    .list-det {
-      margin-left: 20upx;
-      & > div {
-        margin-top: 14upx;
-        &:first-child {
-          margin-top: 0;
+    
+    .item-info {
+      flex: 1;
+      
+      .info-main {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8rpx;
+        
+        .category-name {
+          font-size: 30rpx;
+          font-weight: 600;
+          color: #333;
+          margin-right: 16rpx;
+        }
+        
+        .default-tag {
+          background: #FF9500;
+          color: #fff;
+          font-size: 20rpx;
+          padding: 4rpx 12rpx;
+          border-radius: 12rpx;
+          font-weight: 500;
         }
       }
-      .list-operate {
-        width: 480upx;
-        margin-top: 10upx;
-        @include disFlex(center, space-between);
-        .operate-det {
-          width: 490upx;
-          padding-left: 120upx;
-          & > span {
-            border: 1px solid #ccc;
-            border-radius: 25upx;
-            padding: 5upx 20upx 5upx 20upx;
-            font-size: 25upx;
-            margin-left: 35upx;
-            &:first-child {
-              margin-left: 0;
+      
+      .info-details {
+        display: flex;
+        gap: 24rpx;
+        
+        .detail-text {
+          font-size: 24rpx;
+          color: #666;
+          
+          &.status-text {
+            font-weight: 500;
+            
+            &.active {
+              color: #34C759;
+            }
+            
+            &:not(.active) {
+              color: #FF3B30;
             }
           }
         }
       }
     }
   }
+  
+  // 操作按钮区域
+  .item-actions {
+    display: flex;
+    gap: 12rpx;
+    flex-shrink: 0;
+    
+    .action-btn {
+      padding: 12rpx 20rpx;
+      border: none;
+      border-radius: 6rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      min-width: 80rpx;
+      text-align: center;
+      
+      &.edit-btn {
+        background: #52c41a;
+        color: #fff;
+      }
+      
+      &.delete-btn {
+        background: #FF3B30;
+        color: #fff;
+      }
+      
+      &.pictext-btn {
+        background: #8E8E93;
+        color: #fff;
+        
+        &.has-pictext {
+          background: #FF9500;
+        }
+      }
+      
+      &:active {
+        opacity: 0.8;
+      }
+    }
+  }
 }
-.app-footer {
-  justify-content: flex-end;
-  .admin-button-com {
-    width: 200upx;
-    margin-right: 30upx;
+
+// 底部工具栏
+.bottom-toolbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  padding: 20rpx 30rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); // 适配刘海屏
+  border-top: 1rpx solid #e5e5e5;
+  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);
+  z-index: 1000;
+  
+  .add-category-btn {
+    width: 100%;
+    background: #52c41a;
+    color: #fff;
+    border: none;
+    border-radius: 8rpx;
+    padding: 24rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    .btn-icon {
+      font-size: 32rpx;
+      margin-right: 12rpx;
+      font-weight: bold;
+    }
+    
+    .btn-text {
+      font-weight: 600;
+    }
+    
+    &:active {
+      background: #389e0d;
+      transform: scale(0.98);
+    }
   }
 }
-.modify-modal {
-  .prompt-text {
-    color: red;
-    position: relative;
-    right: 52upx;
-    bottom: 24upx;
-    // margin-bottom: 10upx;
+
+// 模态框表单样式
+.modal-form {
+  .form-group {
+    margin-bottom: 32rpx;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .form-label {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16rpx;
+      
+      .label-text {
+        font-size: 28rpx;
+        color: #333;
+        font-weight: 500;
+      }
+      
+      .required-mark {
+        color: #FF3B30;
+        margin-left: 6rpx;
+        font-size: 28rpx;
+        font-weight: bold;
+      }
+    }
+    
+    .form-input {
+      .input-field {
+        width: 100%;
+        padding: 20rpx 24rpx;
+        border: 1rpx solid #e0e0e0;
+        border-radius: 8rpx;
+        font-size: 28rpx;
+        color: #333;
+        background: #fff;
+        box-sizing: border-box;
+        
+        &:focus {
+          border-color: #007AFF;
+          outline: none;
+        }
+        
+        &::placeholder {
+          color: #999;
+        }
+      }
+    }
+    
+    &.switch-group {
+      .form-switch {
+        display: flex;
+        align-items: center;
+        padding: 16rpx 0;
+        
+        .switch-text {
+          margin-left: 16rpx;
+          font-size: 28rpx;
+          color: #333;
+          font-weight: 500;
+        }
+      }
+    }
   }
-  .line-label {
-    width: 140upx;
-    flex-shrink: 0;
+}
+
+// 响应式优化
+@media screen and (max-width: 750rpx) {
+  .list-item {
+    flex-direction: column;
+    align-items: stretch;
+    
+    .item-content {
+      margin-bottom: 16rpx;
+      
+      .item-image {
+        width: 60rpx;
+        height: 60rpx;
+        margin-right: 16rpx;
+      }
+      
+      .item-info {
+        .info-main {
+          .category-name {
+            font-size: 28rpx;
+          }
+        }
+        
+        .info-details {
+          .detail-text {
+            font-size: 22rpx;
+          }
+        }
+      }
+    }
+    
+    .item-actions {
+      justify-content: flex-end;
+      
+      .action-btn {
+        flex: 1;
+        max-width: 100rpx;
+        font-size: 22rpx;
+        padding: 10rpx 16rpx;
+      }
+    }
   }
-  .switch-wrap {
-    margin-top: 30upx;
+  
+  .bottom-toolbar {
+    padding: 16rpx 20rpx;
+    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+    
+    .add-category-btn {
+      padding: 20rpx;
+      font-size: 28rpx;
+    }
   }
 }
 </style>