fix: 更新优惠券页面，订单列表页面，代客下单页面

src/views/order/index/index.vue

@@ -25,11 +25,39 @@
           {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
         </el-tag>
       </template>
+      <template #goods="scope">
+        <div class="goods_info">
+          <div class="row" v-for="item in scope.row.goods" :key="item.id">
+            <el-image :src="item.productImg" class="cover" lazy></el-image>
+            <div class="info">
+              <div class="name">
+                <span :class="[item.isVip == 1 ? 'colorStyle' : '']">
+                  {{ item.productName }}
+                </span>
+                <span class="refund" v-if="item.refundNumber">(退 - {{ item.refundNumber }})</span>
+              </div>
+              <div class="sku">{{ item.productSkuName }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #table="scope">
+        <div>
+          <p>
+            名称：
+            <el-tag type="primary">{{ scope.row.tableName }}</el-tag>
+          </p>
+          <p v-if="scope.row.tableCode">编号：{{ scope.row.tableCode }}</p>
+        </div>
+      </template>
+
       <template #options="scope">
         {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
       </template>
-      <template #gender="scope">
-        <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+      <template #state="scope">
+        <el-tag :type="returnStateType(scope.row[scope.prop])">
+          {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+        </el-tag>
       </template>
       <template #mobile="scope">
         <el-text>{{ scope.row[scope.prop] }}</el-text>
@@ -39,6 +67,19 @@
           style="margin-left: 2px"
         />
       </template>
+      <template #operate="scope">
+        <div>
+          <el-button link>详情</el-button>
+          <el-button link v-if="scope.row.status == 'done'">开票</el-button>
+          <el-button
+            v-if="scope.row.status == 'unpaid'"
+            @click="toPayOrder(scope.row)"
+            type="primary"
+          >
+            结账
+          </el-button>
+        </div>
+      </template>
     </page-content>
 
     <!-- 新增 -->
@@ -64,9 +105,7 @@
 </template>
 
 <script setup lang="ts">
-import VersionApi from "@/api/system/version";
-import DeptAPI from "@/api/system/dept";
-import RoleAPI from "@/api/system/role";
+import orderApi, { type getListResponse } from "@/api/order/order";
 import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 import addModalConfig from "./config/add";
@@ -125,6 +164,177 @@ async function handleOperatClick(data: IOperatData) {
   }
 }
 
-// 切换示例
-const isA = ref(true);
+function returnStateType(status: string) {
+  if (status === "unpaid") {
+    return "warning";
+  }
+  if (status === "done") {
+    return "primary";
+  }
+  if (status === "cancelled") {
+    return "info";
+  }
+  if (status === "refund") {
+    return "danger";
+  }
+}
+
+const route = useRouter();
+// 结账
+function toPayOrder(order: getListResponse) {
+  route.push({
+    path: "/tool/index",
+    query: {
+      id: order.id,
+    },
+  });
+}
 </script>
+
+<style scoped lang="scss">
+.collect_wrap {
+  display: flex;
+  gap: 14px;
+
+  .item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    background-color: #f5f5f5;
+    padding: 20px;
+
+    .icon_wrap {
+      $size: 34px;
+      $border: 6px;
+      width: $size;
+      height: $size;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--bg-color);
+      border-radius: 50%;
+      position: relative;
+
+      &::after {
+        content: "";
+        width: $size + $border;
+        height: $size + $border;
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: var(--bg-color);
+        opacity: 0.3;
+      }
+
+      .icon {
+        font-size: 16px;
+        color: #fff;
+      }
+
+      .img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding-left: 10px;
+
+      .m {
+        font-weight: bold;
+      }
+
+      .t {
+        font-size: 12px;
+        color: #999;
+        padding-top: 4px;
+      }
+    }
+  }
+}
+
+.refund {
+  color: #ff9731;
+  font-weight: bold;
+}
+
+.table_order_info {
+  .order_no {
+    color: #999;
+  }
+
+  .type {
+    color: #e6a23c;
+  }
+}
+
+.goods_info {
+  .row {
+    display: flex;
+
+    &:not(:first-child) {
+      margin-top: 10px;
+    }
+
+    .cover {
+      width: 40px;
+      height: 40px;
+    }
+
+    .info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding-left: 10px;
+
+      .sku {
+        color: #999;
+      }
+    }
+  }
+}
+
+.colorStyle {
+  color: #ffc315;
+}
+
+.qrStyle {
+  width: 100%;
+  height: 100%;
+  background-color: rgba($color: #000000, $alpha: 0.7);
+  position: fixed;
+  z-index: 999999;
+  top: 0;
+  left: 0;
+
+  .box {
+    width: 380px;
+    height: 320px;
+    position: absolute;
+    background: #fff;
+    top: 26%;
+    left: 36%;
+    padding: 18px;
+
+    > div:first-child {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    #canvas {
+      margin-left: 49%;
+      transform: translateX(-80px);
+    }
+
+    > div:last-child {
+      text-align: center;
+    }
+  }
+}
+</style>