优化会员支付，已会员价结算

src/views/order/index.vue

@@ -16,16 +16,38 @@
     </div>
     <div class="table_wrap">
       <div class="table">
-        <el-table :data="tableData.list" v-loading="tableData.loading" border strip height="100%">
+        <el-table ref="tableRef" :data="tableData.list" v-loading="tableData.loading" border strip height="100%">
           <el-table-column label="台桌" prop="tableName" align="center">
             <template v-slot="scope">
               <span v-if="scope.row.tableName">{{ scope.row.tableName }}</span>
               <span v-else>无</span>
             </template>
           </el-table-column>
-          <el-table-column label="商品信息" width="150">
+          <el-table-column label="商品信息" width="250">
             <template v-slot="scope">
-              {{ goodsNameFilter(scope.row.goods) }}
+              <div class="goods_wrap">
+                <div class="row" v-for="item in scope.row.goods" :key="item.id">
+                  <div class="cover">
+                    <el-image :src="item.productImg" style="width: 40px;height: 40px;"></el-image>
+                  </div>
+                  <div class="info">
+                    <div class="name">
+                      <span>{{ item.productName }}</span>
+                      <span class="amount">￥{{ formatDecimal(+item.payAmount) }}</span>
+                    </div>
+                    <div class="num">
+                      <span>￥{{ formatDecimal(+item.unitPrice) }}</span>
+                      <span>x{{ item.num }}</span>
+                    </div>
+                    <div class="num" v-if="item.returnNum">
+                      <span>退菜数量：{{ item.returnNum }}</span>
+                    </div>
+                    <div class="num" v-if="item.refundNum">
+                      <span>退单数量：{{ item.refundNum }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </template>
           </el-table-column>
           <el-table-column label="状态" width="100">
@@ -132,6 +154,7 @@ import { onMounted, ref, reactive } from "vue";
 import { orderList } from "@/api/order.js";
 import { useGlobal } from "@/store/global.js";
 import { useGoods } from '@/store/goods.js'
+import { formatDecimal } from '@/utils/index.js'
 import DateRange from "./components/dateRange.vue";
 import RefundDrawer from "./components/refundDrawer.vue";
 import PrintDrawer from "./components/printDrawer.vue";
@@ -141,6 +164,7 @@ const RefundDrawerRef = ref(null);
 const PrintDrawerRef = ref(null);
 const DateRangeRef = ref(null);
 const SettleAccountRef = ref(null)
+const tableRef = ref(null);
 
 const goodsStore = useGoods()
 const globalStore = useGlobal();
@@ -236,6 +260,7 @@ async function orderDoneHandle(row) {
 // 获取订单列表
 async function orderListAjax() {
   try {
+
     tableData.loading = true;
     const res = await orderList(queryForm.value);
     res.records.map(item => {
@@ -244,6 +269,9 @@ async function orderListAjax() {
     tableData.list = [];
     tableData.list = res.records;
     tableData.total = +res.totalRow;
+
+    tableRef.value.setScrollTop(0);
+    tableRef.value.setScrollLeft(0);
   } catch (error) {
     console.log(error);
   }
@@ -313,4 +341,37 @@ onMounted(() => {
   justify-content: flex-end;
   padding-top: var(--el-font-size-base);
 }
+
+.goods_wrap {
+  .row {
+    display: flex;
+    padding: 10px 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #ececec;
+    }
+
+    .info {
+      padding-left: 10px;
+
+      .name {
+        width: 160px;
+        display: flex;
+        gap: 10px;
+        justify-content: space-between;
+
+        .amount {
+          color: var(--el-color-danger);
+        }
+      }
+
+      .num {
+        color: #999;
+        font-size: 14px;
+        display: flex;
+        gap: 10px;
+      }
+    }
+  }
+}
 </style>