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

src/views/order/index/config/config.ts

@@ -37,12 +37,30 @@ export const payTypeOptions: payTypeOptions[] = [
     value: "arrears",
   },
 ];
-export type optionsType = "status";
+export const options: { [key in optionsType]: options[] } = {
+  status: statusOptions,
+  payType: payTypeOptions,
+  platformType: [
+    { label: '微信小程序', value: 'wechat' },
+    { label: '网页后台管理端', value: 'WEB' },
+  ],
+  sendType: [
+    { label: '快递', value: 'post' },
+    { label: '外卖', value: 'takeaway' },
+    { label: '自提', value: 'takeself' },
+    { label: '堂食', value: 'table' },
+  ],
+  dineMode: [
+    { label: '堂食', value: 'dine-in' },
+    { label: '外带', value: 'take-out' },
+    { label: '外卖', value: 'take-away' },
+
+  ]
+}
+export type optionsType = string;
 
 export function returnOptions(type: optionsType) {
-  if (type === "status") {
-    return statusOptions;
-  }
+  return options[type];
 }
 
 export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
@@ -54,6 +72,7 @@ export function returnOptionsLabel(optionsType: optionsType, value: string | num
   return option ? option.label : "";
 }
 
+
 export interface options {
   label: string;
   value: string | number;

src/views/order/index/config/content.ts

@@ -1,7 +1,7 @@
 import OrderApi from "@/api/order/order";
 import type { editRequest } from "@/api/system/version";
 import type { IContentConfig } from "@/components/CURD/types";
-
+import { returnOptionsLabel } from "./config";
 const contentConfig: IContentConfig = {
   pageName: "sys:user",
   table: {
@@ -11,7 +11,7 @@ const contentConfig: IContentConfig = {
   pagination: {
     background: true,
     layout: "prev,pager,next,jumper,total,sizes",
-    pageSize: 20,
+    pageSize: 10,
     pageSizes: [10, 20, 30, 50],
   },
   indexAction: function (params) {
@@ -27,31 +27,87 @@ const contentConfig: IContentConfig = {
   cols: [
     { type: "selection", width: 50, align: "center" },
     // { label: "id", align: "center", prop: "id", width: 100, show: true },
+    {
+      label: "平台类型",
+      align: "center",
+      prop: "platformType",
+      templet: "custom",
+      slotName: "options",
+    },
     {
       label: "订单号信息",
       align: "center",
       prop: "orderNo",
+    },
+    {
+      label: "商品信息",
+      align: "center",
+      templet: 'custom',
+      prop: 'goods',
+      slotName: 'goods',
+      width: 240,
+    },
+    {
+      label: "台桌信息",
+      align: "center",
+      templet: 'custom',
+      slotName: 'table',
+      width: 150,
+    },
+    {
+      label: "订单原金额 不含折扣价格",
+      align: "center",
+      prop: "originAmount",
+      width: 120,
+      hidden: true,
+    },
+    {
+      label: "支付金额",
+      align: "center",
+      prop: "payAmount",
       width: 120,
     },
+    {
+      label: "订单金额 (扣除各类折扣)",
+      align: "center",
+      prop: "orderAmount",
+      width: 120,
+      hidden: true,
+    },
+    {
+      label: "用餐模式",
+      align: "center",
+      prop: "dineMode",
+      width: 120,
+      templet: "custom",
+      slotName: "options",
+    },
 
+    {
+      label: "状态",
+      align: "center",
+      prop: "status",
+      width: 120,
+      templet: "custom",
+      slotName: "state",
+    },
+    {
+      label: "备注",
+      align: "center",
+      prop: "remark",
+    },
+    {
+      label: "创建时间",
+      align: "center",
+      prop: "createTime",
+    },
     {
       label: "操作",
       align: "center",
       fixed: "right",
-      width: 280,
-      templet: "tool",
-      operat: [
-        {
-          icon: "Document",
-          name: "detail",
-          text: "详情",
-        },
-        {
-          icon: "Printer",
-          name: "printer",
-          text: "开票",
-        },
-      ],
+      width: 150,
+      templet: "custom",
+      slotName: 'operate'
     },
   ],
 };

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>