优化新版台桌显示

src/views/table/components/tableInfo.vue

@@ -1,7 +1,7 @@
 <!-- 空闲台桌 -->
 <template>
     <div class="table_wrap">
-        <div class="header">
+        <!-- <div class="header">
             <span class="t">{{ props.tableInfo.name }}</span>
             <div class="close" @click="close">
                 <el-icon class="icon">
@@ -14,15 +14,20 @@
                 <Clock />
             </el-icon>
             <span class="t">{{tableStatusList.find(val => val.type == props.tableInfo.status).label}}</span>
-        </div>
+        </div> -->
         <div class="cart" v-loading="payLoading" v-if="props.tableInfo.status == 'unsettled'">
             <div class="cart_list">
                 <div class="item" v-for="item in cartList" :key="item.id">
                     <div class="top">
                         <span class="name">{{ item.productName }}</span>
-                        <span class="n">x{{ item.num }}</span>
+                        <span class="n">x{{ item.num - item.returnNum }}</span>
                         <span class="p">￥{{ item.price }}</span>
                     </div>
+                    <div class="top" v-if="item.returnNum > 0" style="font-size: 12px;color: #999;">
+                        <span class="name">[退菜]</span>
+                        <span class="n">x{{ item.returnNum }}</span>
+                        <span class="p" color="color:var(--el-color-danger)">-￥{{ item.returnAmount }}</span>
+                    </div>
                     <div class="tag_wrap" v-if="item.skuName">
                         <div class="tag" v-for="item in item.skuName.split(',')">
                             {{ item }}
@@ -182,7 +187,7 @@ async function getOrderDetail() {
 
             let total = 0
             res.cartList.forEach(item => {
-                total += +item.payAmount
+                total += +item.payAmount - (item.returnAmount || 0)
             })
             orderInfo.value.orderAmount = formatDecimal(total)
         }
@@ -256,7 +261,8 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .table_wrap {
-    padding: 20px;
+    // padding: 20px;
+    padding-top: 14px;
 
     .header {
         display: flex;
@@ -298,14 +304,14 @@ onMounted(() => {
     }
 
     .cart {
-        height: calc(100vh - 160px);
+        height: calc(100vh - 75px);
         display: flex;
         flex-direction: column;
 
         .cart_list {
             flex: 1;
             border-radius: 6px;
-            background-color: #efefef;
+            background-color: #fff;
             padding: 0 var(--el-font-size-base);
             overflow-y: auto;