优化

ghsApp/src/pagesPurchase/supplier.vue

@@ -13,43 +13,69 @@
       </Tabs>
 		</view>
   <view class="order-page">
-    <view class="order_list" >
-    <view style="padding:22upx 0 0 20upx;font-size:30upx;">总欠款：{{info.totalDebtAmount?parseFloat(info.totalDebtAmount):0}}</view>
-    <block>
-        <block v-if="!$util.isEmpty(list.data)">
-          <view class="list_item" v-for="(item, index) in list.data" :key="index">
-
-            <view @click.stop="changeLocation(item)" v-if="item.location == 1" style="width:90upx;padding:5upx 0 5upx 0;font-size:20upx;background-color:#7babc1;color:white;position:absolute;left:0;top:0;text-align:center;">本地</view>
-            <view @click.stop="changeLocation(item)" v-else style="width:90upx;padding:5upx 0 5upx 0;font-size:20upx;background-color:#DDDDDD;color:white;position:absolute;left:0;top:0;text-align:center;">上游</view>
+    <view class="order_list">
+      <!-- 总欠款统计 -->
+      <view class="total-debt-header">
+        总欠款：{{info.totalDebtAmount?parseFloat(info.totalDebtAmount):0}}
+      </view>
 
-            <view class="store_name">
-              <view class="store_title" @click.stop="nameModify(item)">
+      <!-- 列表内容 -->
+      <block v-if="!$util.isEmpty(list.data)">
+        <view class="list_item" v-for="(item, index) in list.data" :key="index">
+          
+          <!-- 主体内容区 -->
+          <view class="item-main-content">
+            <!-- 供货商信息 -->
+            <view class="store-info">
+              <view class="store-title" @click.stop="nameModify(item)">
                 {{item.name}}
               </view>
-              <view class="accumulative"></view>
+              <view class="store-subtitle"></view>
             </view>
-            <view class="store_btn">
-              <view class="btn_entrance" @click.stop="pageTo({ url: '/admin/clear/list?ghsId='+item.id})"> 结账记录</view>
-              <view class="btn_entrance" @click.stop="getDebtList(item)"> 挂账变动明细 </view>
-              <view class="btn_entrance" @click.stop="cgList(item)">采购记录</view>
-              <view class="cg-button" @click="goToCg(item)">采购</view>
-              <view class="search-button" @click.stop="goToSearchDebt(item)">搜索</view>
-              <text class="mobile"></text>
+
+            <!-- 操作按钮区（上部） -->
+            <view class="action-buttons-top">
+              <view class="action-btn success" @click.stop="goToSearchDebt(item)">搜索</view>
+              <view class="action-btn primary" @click="goToCg(item)">采购</view>
             </view>
+          </view>
 
-            <view class="box_6 flex-row" @click.stop="goToDebtList(item)" v-if="Number(item.debtAmount)>0">
-              <view class="show_clear_area flex-row justify-between">
-                <image class="icon_2" referrerpolicy="no-referrer" src="/static/lanhu_020105gongyingshangliebiao/ps2pvfa1l5i34w5vqj2k7b3kejml3i3nmrba1421bf-caa2-491b-8773-af413df7e96d.png" />
-                <text class="waite_clear_order">待结订单&nbsp;{{item.debtNum}}笔&nbsp;¥{{item.debtAmount?parseFloat(item.debtAmount):0}} 查看明细&gt;</text>
-              </view>
+          <!-- 记录信息区（下部） -->
+          <view class="record-section">
+            <view class="record-buttons">
+              <view class="record-btn" @click.stop="pageTo({ url: '/admin/clear/list?ghsId='+item.id})">结账记录</view>
+              <view class="record-btn" @click.stop="getDebtList(item)">挂账变动明细</view>
+              <view class="record-btn" @click.stop="cgList(item)">采购记录</view>
             </view>
+          </view>
 
+          <!-- 地区标签（左下角） -->
+          <view 
+            class="location-tag"
+            :class="item.location == 1 ? 'location-local' : 'location-upstream'"
+            @click.stop="changeLocation(item)">
+            {{item.location == 1 ? '本地' : '上游'}}
           </view>
-        </block>
-        <block v-else>
-          <AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
-        </block>
+
+          <!-- 待结订单提示区（如果有欠款） -->
+          <view 
+            class="pending-order-box"
+            @click.stop="goToDebtList(item)"
+            v-if="Number(item.debtAmount)>0">
+            <view class="pending-order-content">
+              <image class="pending-icon" referrerpolicy="no-referrer" src="/static/lanhu_020105gongyingshangliebiao/ps2pvfa1l5i34w5vqj2k7b3kejml3i3nmrba1421bf-caa2-491b-8773-af413df7e96d.png" />
+              <text class="pending-text">待结订单&nbsp;{{item.debtNum}}笔&nbsp;¥{{item.debtAmount?parseFloat(item.debtAmount):0}} 查看明细&gt;</text>
+            </view>
+          </view>
+
+        </view>
+      </block>
+
+      <!-- 空状态提示 -->
+      <block v-else>
+        <AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
       </block>
+
     </view>
   </view>
 
@@ -253,193 +279,197 @@ export default {
   .order_list {
     height: 100%;
     background-color: #ece5e5;
-    padding:90upx 0 20upx;
-    .flex-col {
-      display: flex;
-      flex-direction: column;
-    }
-    .flex-row {
-      display: flex;
-      flex-direction: row;
-    }
-    .justify-start {
-        display: flex;
-        justify-content: flex-start;
-      }
-    .justify-center {
-        display: flex;
-        justify-content: center;
-    }
-    .justify-end {
-        display: flex;
-        justify-content: flex-end;
-    }
-    .justify-evenly {
-        display: flex;
-        justify-content: space-evenly;
-    }
-    .justify-around {
-        display: flex;
-        justify-content: space-around;
-    }
-    .justify-between {
-        display: flex;
-        justify-content: space-between;
-    }
-    .align-start {
-        display: flex;
-        align-items: flex-start;
-    }
-    .align-center {
-        display: flex;
-        align-items: center;
-    }
-    .align-end {
-        display: flex;
-        align-items: flex-end;
+    padding: 90upx 0 20upx;
+
+    // ========== 总欠款统计 ==========
+    .total-debt-header {
+      padding: 22upx 0 0 20upx;
+      font-size: 30upx;
+      color: #333;
+      font-weight: 500;
+      background: #fff;
+      margin-bottom: 20upx;
     }
+
+    // ========== 列表项容器 ==========
     .list_item {
       margin: 20upx 0 0;
       position: relative;
-      height: 320upx;
-      padding-bottom:60upx;
-      width: 100vw;
+      width: 100%;
       background: #fff;
       display: flex;
-      align-items: center;
-      & > .store_name {
-        margin-left: 30upx;
-        width: 700upx;
-        display: block;
-        image{
-          width:35upx;
-          height:35upx;
-          border-radius:60upx;
-          float:left;
-        }
-        & > .store_title {
-          margin-bottom:58upx;
-          margin-left:0upx;
-          width: 420upx;
-          white-space: nowrap;
-          word-break: break-all;
-          font-size: 32upx;
-          font-weight:700;
-          color: #333;
-          display:inline-block;
-        }
-        & > .accumulative {
-          font-size: 26upx;
-          color: #999;
-        }
-      }
-      & > .store_btn {
+      flex-direction: column;
+      padding: 20upx 0;
+
+      // ========== 地区标签 ==========
+      .location-tag {
         position: absolute;
-        top:130upx;
-        left: 0upx;
-        & > .btn_entrance {
-          display: inline-block;
-          font-size: 32upx;
-          color: #666666;
-          padding: 30upx 20upx 10upx 20upx;
-          margin-left: 14upx;
-          text-decoration:underline;
+        top: 0;
+        left: 0;
+        width: 90upx;
+        padding: 8upx 0;
+        font-size: 20upx;
+        color: white;
+        text-align: center;
+        cursor: pointer;
+        z-index: 2;
+        
+        &.location-local {
+          background-color: #7babc1;
         }
-        .mobile{
-          color:#b7a3a3;
-          font-size:26upx;
-          position: absolute;
-          top:-30upx;
-          left:37upx;          
+        
+        &.location-upstream {
+          background-color: #DDDDDD;
+          color: #666;
         }
-        .search-button{
-            display: inline-block;
-            font-size: 28upx;
-            color: white;
-            border: 1upx solid #2ca99d;
-            border-radius: 80upx;
-            padding: 18upx 32upx;
-            background: #2ca99d;
-            position: absolute;
-            top:-80upx;
-            right:70upx;
+      }
+
+      // ========== 主体内容区 ==========
+      .item-main-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 20upx 0 30upx;
+        margin-top: 50upx;
+
+        // 供货商信息
+        .store-info {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          
+          .store-title {
+            font-size: 32upx;
+            font-weight: 700;
+            color: #333;
+            margin-bottom: 12upx;
+            cursor: pointer;
+            max-width: 450upx;
+            word-break: break-word;
+            white-space: normal;
+          }
+          
+          .store-subtitle {
+            font-size: 26upx;
+            color: #999;
+          }
         }
-        .cg-button{
-            display: inline-block;
+
+        // 右上方操作按钮
+        .action-buttons-top {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-left: 16upx;
+          margin-right: 30upx;
+
+          .action-btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             font-size: 28upx;
             color: white;
-            border: 1upx solid #3385FF;
+            border: 1upx solid;
             border-radius: 80upx;
-            padding: 18upx 32upx;
-            background: #3385FF;
-            position: absolute;
-            top:-80upx;
-            right:-90upx;
+            padding: 16upx 28upx;
+            cursor: pointer;
+            margin-left: 32upx;
+            transition: all 0.3s ease;
+
+            &:first-child {
+              margin-left: 0;
+            }
+
+            &.primary {
+              background-color: #3385FF;
+              border-color: #3385FF;
+
+              &:active {
+                opacity: 0.8;
+              }
+            }
+
+            &.success {
+              background-color: #2ca99d;
+              border-color: #2ca99d;
+
+              &:active {
+                opacity: 0.8;
+              }
+            }
+          }
         }
-        .my-cg-button{
-            display: inline-block;
-            font-size: 28upx;
-            color: white;
-            border: 1upx solid #2ca99d;
-            border-radius: 80upx;
-            padding: 18upx 32upx;
-            background: #2ca99d;
-            position: absolute;
-            top:40upx;
-            right:-125upx;
-            z-index: 1;
+      }
+
+      // ========== 记录按钮区 ==========
+      .record-section {
+        padding: 0 20upx;
+        margin-top: 30upx;
+
+        .record-buttons {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          
+          .record-btn {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 34upx;
+            color: #666666;
+            padding: 12upx 0;
+            text-decoration: underline;
+            cursor: pointer;
+            margin-right: 16upx;
+            transition: color 0.2s ease;
+
+            &:last-child {
+              margin-right: 0;
+            }
+
+            &:active {
+              color: #3385FF;
+            }
+          }
         }
       }
-      .box_6 {
-        background-color: rgb(248, 242, 242);
-        width: 750upx;
-        height:85upx;
-        position:absolute;
-        top:237upx;
-        .show_clear_area {
-          width: 247upx;
-          height: 29upx;
-          margin: 26upx 0 0 30upx;
-          .icon_2 {
-            width: 22upx;
-            height: 26upx;
-            margin-top: 2upx;
+
+      // ========== 待结订单提示区 ==========
+      .pending-order-box {
+        background-color: #f4f1f1;
+        margin: 16upx 20upx 0;
+        padding: 20upx;
+        border-radius: 12upx;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+
+        .pending-order-content {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          
+          .pending-icon {
+            width: 24upx;
+            height: 28upx;
+            margin-right: 12upx;
+            flex-shrink: 0;
           }
-          .waite_clear_order {
-            width: 214upx;
-            height: 29upx;
-            overflow-wrap: break-word;
-            color: rgba(255, 40, 66, 1);
+
+          .pending-text {
+            flex: 1;
             font-size: 30upx;
-            text-align: left;
-            white-space: nowrap;
-            line-height: 29upx;
-          }
-        }
-        .image-text_9 {
-          width: 134upx;
-          height: 27upx;
-          margin: 26upx 29upx 0 310upx;
-          .text-group_4 {
-            width: 111upx;
-            height: 27upx;
+            font-weight:bold;
+            color: #ff2842;
+            line-height: 1.4;
             overflow-wrap: break-word;
-            color: rgba(255, 40, 66, 1);
-            font-size: 30upx;
-            text-align: left;
-            white-space: nowrap;
-            line-height: 27upx;
-          }
-          .icon_3 {
-            width: 14upx;
-            height: 24upx;
-            margin-top: 2upx;
           }
         }
       }
-
     }
   }
+
   .pay_list {
     padding-top: 20upx;
     background-color: #f0f2f6;