From 5ceb814e7f8c9a85f7e9241ec64618f8bce70100 Mon Sep 17 00:00:00 2001
From: mixtan <424491071@qq.com>
Date: Sun, 20 Jul 2025 18:14:13 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=B8=BB=E9=A1=B5UI=EF=BC=88=E8=BF=98=E5=B7=AE=E5=86=85?=
 =?UTF-8?q?=E9=83=A8=E6=8C=89=E9=92=AE=E6=93=8D=E4=BD=9C=E9=83=A8=E5=88=86?=
 =?UTF-8?q?UI=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/warehouse/manage/productList.vue    | 196 ++++++++++--------
 1 file changed, 109 insertions(+), 87 deletions(-)

diff --git a/java-mall-app-shop-admin/pages/warehouse/manage/productList.vue b/java-mall-app-shop-admin/pages/warehouse/manage/productList.vue
index e3e6ddb..d633c42 100644
--- a/java-mall-app-shop-admin/pages/warehouse/manage/productList.vue
+++ b/java-mall-app-shop-admin/pages/warehouse/manage/productList.vue
@@ -8,7 +8,7 @@
       :height="'44px'"
       rightWidth="0"
       :leftWidth="30"
-      backgroundColor="#f5f6fa"
+       backgroundColor="#f5f6fa"
     >
       <block slot="left">
         <u-icon
@@ -21,7 +21,7 @@
       <block slot="default">
         <u-search
           class="search"
-          placeholder="请输入商品名称查找"
+          placeholder="搜索你想要的商品"
           :showAction="false"
           bgColor="#fff"
         ></u-search>
@@ -33,7 +33,7 @@
         scroll-with-animation
         class="tab-view"
         :scroll-into-view="scrollViewId"
-        :style="{ height: height - 130 + 'px', top: top + 'px' }"
+        :style="{ top: top + 'px' }"
       >
         <block v-for="(item, index) of tabbar" :key="index">
           <tui-collapse
@@ -77,10 +77,10 @@
             ref="tabsRef"
             :list="commodityStatusList"
             @click="handerCommodityStatus"
-            itemStyle="padding-left: 15px; padding-right: 15px; height: 57px;"
-            activeStyle="font-weight: bold;color: #000;"
-            inactiveStyle="color:#999999;"
-            lineColor="#e41f19"
+            itemStyle="padding:0 15px;height: 44px;"
+            activeStyle="color: #222;"
+            inactiveStyle="color:#666;"
+            lineColor="#FE411B"
           ></u-tabs>
         </view>
         <favorite-loading
@@ -100,7 +100,7 @@
         <scroll-view
           v-if="commodityList.length > 0 && !loadingCommodityData"
           scroll-y
-          :style="{ height: height - 200 + 'px', top: top + 'px' }"
+          :style="{ height: height - 118 + 'px', top: top + 'px' }"
           :show-scrollbar="false"
           @scrolltolower="handerScrolltolower"
           refresher-enabled
@@ -122,9 +122,9 @@
                 >
                   <u--image
                     :src="item.product_image"
-                    radius="8"
-                    width="60px"
-                    height="60px"
+                    radius="12"
+                    width="64px"
+                    height="64px"
                   ></u--image>
                 </view>
                 <view class="commodity-info-box">
@@ -141,43 +141,31 @@
                 </view>
               </view>
               <view class="commodity-btn-content">
-                <u-button
+                <view
                   @click="handerShowPricePopup(item)"
                   class="commodity-btn-item"
-                  :hairline="true"
-                  :plain="true"
-                  shape="circle"
                 >
                   价格/库存
-                </u-button>
-                <u-button
+                </view>
+                <view
                   v-if="item.product_state_id == 1002"
-                  class="commodity-btn-item commodity-btn-item-2"
-                  :hairline="true"
-                  :plain="true"
-                  shape="circle"
+                  class="commodity-btn-item"
                   @click="updateProductPutaway(item, index, 1001)"
                 >
                   上架
-                </u-button>
-                <u-button
+                </view>
+                <view
                   v-if="item.product_state_id == 1001"
-                  class="commodity-btn-item commodity-btn-item-2"
-                  :hairline="true"
-                  :plain="true"
-                  shape="circle"
+                  class="commodity-btn-item"
                   @click="updateProductPutaway(item, index, 1002)"
                 >
                   下架
-                </u-button>
-                <u-button
-                  class="commodity-btn-item commodity-btn-item-2"
-                  :hairline="true"
-                  :plain="true"
-                  shape="circle"
+                </view>
+                <view
+                  class="commodity-btn-item"
                 >
                   编辑
-                </u-button>
+                </view>
               </view>
             </view>
           </view>
@@ -201,22 +189,30 @@
       </view>
     </view>
     <view class="productList-bottom">
-      <view class="bottom-item">分类管理</view>
       <view class="bottom-item">
-        <u-icon
+         <u-icon
           class="u-icon"
-          custom-prefix="custom-icon-piliangcaozuo custom-icon"
-          size="14"
-          color="#000"
+          name="grid"
+          size="16"
+          color="#222"
+        ></u-icon>
+         <view class="bottom-item-name">分类管理</view>
+      </view>
+      <view class="bottom-item">
+       <u-icon
+          class="u-icon"
+          name="list-dot"
+          size="16"
+          color="#222"
         ></u-icon>
         <view class="bottom-item-name" @click="skipuBatch">批量操作</view>
       </view>
       <view class="bottom-item">
-        <u-icon
+         <u-icon
           class="u-icon"
-          custom-prefix="custom-icon-xinjiantuopu custom-icon"
+          name="bag"
           size="16"
-          color="#000"
+          color="#222"
         ></u-icon>
         <view class="bottom-item-name">商品新建</view>
       </view>
@@ -386,7 +382,7 @@ export default {
           let header = 60;
           let top = 0;
           //#ifdef H5
-          top = 44;
+          top = 25;
           //#endif
           //#ifdef APP-PLUS
           top = 70;
@@ -664,11 +660,16 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/styles/variables.scss";
+
+page{
+  background: #f5f6fa;
+}
+
 .productList-container {
   height: calc(100vh);
-  background: #f5f6fa;
-  .nav-bar {
-    padding-top: 20rpx;
+
+  ::v-deep .uni-navbar{
+    border-bottom: 2rpx solid $uni-border-color;
   }
 
   ::-webkit-scrollbar {
@@ -724,40 +725,43 @@ export default {
 
   .tab-view {
     /* height: 100%; */
-    width: 200rpx;
+    width: 210rpx;
     position: fixed;
     left: 0;
+    bottom: 88rpx;
     z-index: 10;
+    background: #f5f6fa;
   }
 
   .tab-bar-item {
-    width: 200rpx;
-    min-height: 57px;
+    width: 210rpx;
+    min-height: 88rpx;
     background: #f5f6fa;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    font-size: 30rpx;
-    color: #666666;
+    font-size: 28rpx;
+    color: #555;
     font-weight: 400;
-    padding: 12rpx;
-    padding-left: 28px;
-    padding-right: 32rpx;
+    padding-left: 44rpx;
     word-wrap: break-word;
     word-break: break-all;
   }
 
+  ::v-deep .tui-icon-arrow{
+    left: 8rpx;
+  }
+
   .active {
     position: relative;
     color: #000;
-
-    font-weight: 600;
     background: #fff;
   }
 
   .tab-bar-item-2 {
-    font-size: 28rpx;
+     min-height: 96rpx;
+    font-size: 24rpx;
     background: #fff !important;
   }
 
@@ -768,9 +772,11 @@ export default {
   .active::before {
     content: "";
     position: absolute;
-    border-left: 8rpx solid #e41f19;
+    border-left: 4rpx solid #FE411B;
     height: 30rpx;
     left: 0;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   /* 左侧导航布局 end*/
@@ -795,7 +801,7 @@ export default {
 
   .swiper {
     width: 100%;
-    height: 220rpx;
+    height: 210rpx;
     border-radius: 12rpx;
     overflow: hidden;
     transform: translateZ(0);
@@ -857,7 +863,7 @@ export default {
 
   .slide-image {
     width: 100%;
-    height: 220rpx;
+    height: 210rpx;
   }
 
   .class-box {
@@ -909,6 +915,7 @@ export default {
   }
 
   .u-tabs {
+    margin-left: 20rpx;
     border-bottom: 1px solid #f3f3f3;
   }
 
@@ -932,19 +939,21 @@ export default {
     padding: 20rpx;
 
     .commodity-item {
-      margin-bottom: 60rpx;
+      margin-bottom: 32rpx;
+      clear: both;
+    overflow: hidden;
 
       .commodity-info {
         display: flex;
-        margin-bottom: 40rpx;
+        margin-bottom: 24rpx;
 
         .commodity-img {
           position: relative;
           margin-right: 20rpx;
-          width: 60px;
-          height: 60px;
-          border: 1px solid #ebebeb;
-          border-radius: 16rpx;
+          width: 128rpx;
+          height: 128rpx;
+          border: 1px solid $uni-border-color;
+          border-radius: 24rpx;
         }
 
         .commodity-img-sold-out {
@@ -969,9 +978,9 @@ export default {
           display: flex;
           flex-flow: column;
           justify-content: space-between;
+          color: #666;
 
           .commodity-name {
-            font-weight: 700;
             font-size: 32rpx;
             word-break: break-all; /* 允许在任意字符间断行 */
             overflow-wrap: break-word; /* 优先在单词间断行 */
@@ -980,18 +989,16 @@ export default {
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis; /* 超出部分显示省略号 */
+             color: #222;
           }
 
           .commodity-inventory {
             font-size: 24rpx;
-            color: #626262;
-            margin: 20rpx 0;
           }
 
           .commodity-price {
-            font-size: 32rpx;
-            font-weight: bold;
-            color: #ea3938;
+            font-size: 28rpx;
+            color: #FE411B;
 
             .currency {
               margin-right: 4px;
@@ -1002,16 +1009,20 @@ export default {
       }
 
       .commodity-btn-content {
+          border-bottom: 2rpx solid #eee;
         display: flex;
         justify-content: flex-end;
+        float: right;
+        padding-bottom: 20rpx;
+
         .commodity-btn-item {
-          margin: 0;
-          margin-right: 20rpx;
-          width: 160rpx;
-          height: 60rpx;
+          padding: 8rpx 12rpx;
           font-size: 24rpx;
-          border-color: #d2d2d2;
-          color: #000;
+          border: 2rpx solid #d2d2d2;
+          color: #333;
+          text-align: center;
+          margin-left: 24rpx;
+          border-radius: 40rpx;
 
           &::after {
             border: none;
@@ -1030,33 +1041,44 @@ export default {
       margin: 60% auto;
       margin-bottom: 0;
       width: 300rpx;
-      height: 200rpx;
+      height: 210rpx;
       background-image: url("../../../static/no-commodity.png");
       background-size: 100%;
     }
     .no-data-tips {
-      margin: 80rpx auto;
-      color: #aaaaaa;
+      margin: 40rpx auto;
+      color: #999;
       text-align: center;
+      font-size: 24rpx;
+      font-weight: normal;
     }
   }
 
   .productList-bottom {
     position: fixed;
     bottom: 0;
+    left: 0;
+    right: 0;
     z-index: 99;
     display: flex;
-    padding: 40rpx;
-    width: 100%;
+    padding: 0 24rpx;
+    height: 88rpx;
     background: #fff;
-    border-top: 2px solid #f3f3f3;
-    // box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.1);
+    border-top: 2rpx solid $uni-border-color;
+    display: flex;
+      align-items: center;
+      justify-content: center;
 
     .bottom-item {
+      flex: 1;
       display: flex;
       align-items: center;
-      margin-bottom: 40rpx;
-      margin-right: 80rpx;
+      justify-content: center;
+
+        .bottom-item-name{
+          font-size: 28rpx;
+          color: #222;
+        }
 
       .u-icon {
         margin-right: 8rpx;