diff --git a/.env.development b/.env.development
index fc90eae..d0b36c9 100644
--- a/.env.development
+++ b/.env.development
@@ -6,11 +6,8 @@ VITE_APP_BASE_API=/dev-api
 
 # 接口地址
 
-# VITE_APP_API_URL=https://admintestpapi.sxczgkj.cn/ # 线上
 VITE_APP_API_URL=https://tapi.cashier.sxczgkj.cn/ # 正式
 
-# VITE_APP_API_URL=https://api.youlai.tech # 线上
-# VITE_APP_API_URL=http://localhost:8989    # 本地
 
 # WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
 VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss
diff --git a/.env.production b/.env.production
index 17729b6..72449c3 100644
--- a/.env.production
+++ b/.env.production
@@ -4,3 +4,14 @@ VITE_APP_BASE_API = '/prod-api'
 
 # WebSocket端点(可选)
 #VITE_APP_WS_ENDPOINT=wss://api.youlai.tech/ws 
+
+# 接口地址
+
+VITE_APP_API_URL=https://tapi.cashier.sxczgkj.cn/ # 正式
+
+
+# WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
+VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss
+
+# 启用 Mock 服务
+VITE_MOCK_DEV_SERVER=false
diff --git a/README.md b/README.md
index 97fb75b..8137a30 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,12 @@
 
  基于 Vue3 + Vite5+ TypeScript5 + Element-Plus + Pinia 等主流技术栈构建
 
+## 宝塔
+
+101.37.12.135:19928/mianban
+chaozg
+chaozg123
+
 ## API文档
 
 [超掌柜收银机](https://app.apifox.com/project/5827475)
diff --git a/src/api/account/permission.ts b/src/api/account/permission.ts
index 038b653..8530815 100644
--- a/src/api/account/permission.ts
+++ b/src/api/account/permission.ts
@@ -4,14 +4,14 @@ const baseURL = Account_BaseUrl + "/admin";
 const ShopStaffApi = {
   // 获取店铺权限列表
   getshopPermission() {
-    return request<any>({
+    return request<any, PermissionResonpseResponse>({
       url: `${baseURL}/shopPermission`,
       method: "get",
     });
   },
   // 获取员工对应的权限id
   getPermission(id: number | string) {
-    return request<any>({
+    return request<any, string[]>({
       url: `${baseURL}/shopStaff/permission`,
       method: "get",
       params: { id }
@@ -20,3 +20,56 @@ const ShopStaffApi = {
 };
 
 export default ShopStaffApi;
+
+/**
+ * 权限列表
+ *
+ * CzgResult«List«ShopPermission»»
+ */
+export interface PermissionResonpseResponse {
+  code?: number | null;
+  data?: ShopPermission[] | null;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+/**
+* 店铺权限 实体类。
+*
+* ShopPermission
+*/
+export interface ShopPermission {
+  children?: ShopPermission[] | null;
+  /**
+   * 权限code，为了区分采用汉语拼音
+   */
+  code?: null | string;
+  createTime?: null | string;
+  id: string;
+  /**
+   * 是否重要： 重要对应页面红色
+   */
+  isImportant?: number | null;
+  /**
+   * 权限名称
+   */
+  label?: null | string;
+  /**
+   * 层级
+   */
+  level?: number | null;
+  /**
+   * 上级ID
+   */
+  parentId?: number | null;
+  /**
+   * 排序
+   */
+  sort?: number | null;
+  /**
+   * 权限类型：staff 员工，
+   */
+  type?: null | string;
+  updateTime?: null | string;
+  [property: string]: any;
+}
\ No newline at end of file
diff --git a/src/api/account/shopArea.ts b/src/api/account/shopArea.ts
new file mode 100644
index 0000000..db9a4ea
--- /dev/null
+++ b/src/api/account/shopArea.ts
@@ -0,0 +1,78 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/shopArea";
+const ShopStaffApi = {
+  getList(params: getListRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "get",
+      params
+    });
+  },
+  add(data: addRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "post",
+      data
+    });
+  },
+  edit(data: editRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "put",
+      data
+    });
+  },
+  delete(id: string | number) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "delete",
+      data: { id }
+    });
+  },
+};
+
+export default ShopStaffApi;
+
+export interface getListRequest {
+  /**
+   * 区域名称
+   */
+  name?: string;
+  page?: string;
+  size?: string;
+  [property: string]: any;
+}
+/**
+ * ShopAreaEditDTO
+ */
+export interface editRequest {
+  /**
+   * id
+   */
+  id: number | null;
+  /**
+   * 区域名称
+   */
+  name?: null | string;
+  /**
+   * 排序
+   */
+  sort?: number | null;
+  [property: string]: any;
+}
+
+/**
+ * ShopAreaAddDTO
+ */
+export interface addRequest {
+  /**
+   * 区域名称
+   */
+  name: null | string;
+  /**
+   * 排序
+   */
+  sort?: number | null;
+  [property: string]: any;
+}
\ No newline at end of file
diff --git a/src/api/account/table.ts b/src/api/account/table.ts
index 0991f28..7e3b3ca 100644
--- a/src/api/account/table.ts
+++ b/src/api/account/table.ts
@@ -34,7 +34,7 @@ const API = {
   delete(id: number | string) {
     return request({
       url: `${baseURL}`,
-      method: "post",
+      method: "delete",
       data: { id },
     });
   }
diff --git a/src/api/product/index.ts b/src/api/product/index.ts
index f0776ba..b0cc00c 100644
--- a/src/api/product/index.ts
+++ b/src/api/product/index.ts
@@ -62,4 +62,306 @@ export interface Responseres {
   [property: string]: any;
 }
 
-export default AuthAPI;
\ No newline at end of file
+export default AuthAPI;
+
+
+export interface Response {
+  code: number;
+  data: Data;
+  msg: string;
+  [property: string]: any;
+}
+
+export interface Data {
+  pageNumber: string;
+  pageSize: string;
+  records: Record[];
+  totalPage: string;
+  totalRow: string;
+  [property: string]: any;
+}
+
+export interface Record {
+  /**
+   * 分类id
+   */
+  categoryId: string;
+  /**
+   * 分类名称
+   */
+  categoryName: string;
+  /**
+   * 封面图url
+   */
+  coverImg: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+  /**
+   * 定时上下架周期
+   */
+  days: string;
+  /**
+   * 起用结束时间
+   */
+  endTime: string;
+  /**
+   * 团购卷分类，可有多个分类
+   */
+  groupCategoryId: string;
+  /**
+   * 套餐内容
+   */
+  groupSnap: GroupSnap[];
+  /**
+   * 套餐类型，0 固定套餐 1可选套餐
+   */
+  groupType: number;
+  /**
+   * 商品id
+   */
+  id: string;
+  /**
+   * 封面图urls
+   */
+  images: string[];
+  /**
+   * 是否允许临时改价
+   */
+  isAllowTempModifyPrice: number;
+  /**
+   * 是否逻辑删除
+   */
+  isDel: number;
+  /**
+   * 是否推荐
+   */
+  isHot: number;
+  /**
+   * 退款是否退回库存
+   */
+  isRefundStock: number;
+  /**
+   * 是否上架
+   */
+  isSale: number;
+  /**
+   * 是否售罄
+   */
+  isSoldStock: number;
+  /**
+   * 是否启用库存
+   */
+  isStock: number;
+  /**
+   * 会员最低价
+   */
+  lowMemberPrice: number;
+  /**
+   * 商品最低价
+   */
+  lowPrice: number;
+  /**
+   * 商品名称
+   */
+  name: string;
+  /**
+   * 打包费
+   */
+  packFee: number;
+  /**
+   * 套餐详情入参使用
+   */
+  proGroupVo: string[];
+  selectSpecInfo: { [key: string]: any };
+  /**
+   * 店铺id
+   */
+  shopId: string;
+  /**
+   * 商品介绍
+   */
+  shortTitle: string;
+  /**
+   * sku集合
+   */
+  skuList: SkuList[];
+  /**
+   * 排序值
+   */
+  sort: number;
+  /**
+   * 规格完整名称
+   */
+  specFullName: string;
+  /**
+   * 规格id
+   */
+  specId: null;
+  /**
+   * 规格名称
+   */
+  specName: string;
+  /**
+   * 起用开始时间
+   */
+  startTime: string;
+  /**
+   * 库存
+   */
+  stockNumber: number;
+  /**
+   * 商品类型，single-单规格商品 sku-多规格商品 package-套餐商品  weight-称重商品 coupon-团购券
+   */
+  type: string;
+  /**
+   * 单位id
+   */
+  unitId: string;
+  /**
+   * 单位名称
+   */
+  unitName: string;
+  /**
+   * 更新时间
+   */
+  updateTime: string;
+  /**
+   * 库存警戒线
+   */
+  warnLine: number;
+  /**
+   * 重量
+   */
+  weight?: number;
+  [property: string]: any;
+}
+
+export interface GroupSnap {
+  /**
+   * 套餐内商品总数
+   */
+  count: number;
+  /**
+   * 套餐内商品列表
+   */
+  goods: Good[];
+  /**
+   * 可选套餐几选几，固定套餐没有值
+   */
+  number: number;
+  /**
+   * 可选套餐名称
+   */
+  title: string;
+  [property: string]: any;
+}
+
+export interface Good {
+  /**
+   * 商品数量
+   */
+  number: string;
+  /**
+   * 商品单价
+   */
+  price: number;
+  /**
+   * 商品ID
+   */
+  proId: number;
+  /**
+   * 商品名称
+   */
+  proName: string;
+  /**
+   * skuId
+   */
+  skuId: number;
+  /**
+   * sku名称
+   */
+  skuName: string;
+  /**
+   * 单位名称
+   */
+  unitName: string;
+  [property: string]: any;
+}
+
+export interface SkuList {
+  /**
+   * 条形码
+   */
+  barCode: string;
+  /**
+   * 成本价
+   */
+  costPrice: number;
+  /**
+   * 封面图
+   */
+  coverImg: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+  /**
+   * sku-id
+   */
+  id: string;
+  /**
+   * 是否已删除
+   */
+  isDel: number;
+  /**
+   * 是否上架
+   */
+  isGrounding: number;
+  /**
+   * 是否售罄
+   */
+  isPauseSale: number;
+  /**
+   * 会员价
+   */
+  memberPrice: number;
+  /**
+   * 原价
+   */
+  originPrice: number;
+  /**
+   * 商品id
+   */
+  productId: string;
+  /**
+   * 销量
+   */
+  realSalesNumber: number;
+  /**
+   * 售价
+   */
+  salePrice: number;
+  /**
+   * 店铺id
+   */
+  shopId: string;
+  /**
+   * 规格详情
+   */
+  specInfo: string;
+  /**
+   * 起售数量
+   */
+  suitNum: number;
+  /**
+   * 更新时间
+   */
+  updateTime: string;
+  /**
+   * 重量
+   */
+  weight: null;
+  [property: string]: any;
+}
\ No newline at end of file
diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index c820190..b9c9ac7 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -1,9 +1,20 @@
 <template>
   <!-- drawer -->
   <template v-if="modalConfig.component === 'drawer'">
-    <el-drawer v-model="modalVisible" :append-to-body="true" v-bind="modalConfig.drawer" @close="handleCloseModal">
+    <el-drawer
+      v-model="modalVisible"
+      :append-to-body="true"
+      v-bind="modalConfig.drawer"
+      @close="handleCloseModal"
+    >
       <!-- 表单 -->
-      <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form" :model="formData" :rules="formRules">
+      <el-form
+        ref="formRef"
+        label-width="auto"
+        v-bind="modalConfig.form"
+        :model="formData"
+        :rules="formRules"
+      >
         <el-row :gutter="20">
           <template v-for="item in formItems" :key="item.prop">
             <template v-if="item.type === 'title'">
@@ -15,7 +26,12 @@
                 <template v-if="item.tips" #label>
                   <span>
                     {{ item.label }}
-                    <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
+                    <el-tooltip
+                      placement="bottom"
+                      effect="light"
+                      :content="item.tips"
+                      :raw-content="true"
+                    >
                       <el-icon style="vertical-align: -0.15em" size="16">
                         <QuestionFilled />
                       </el-icon>
@@ -90,13 +106,20 @@
                 </template>
                 <!-- 自定义 -->
                 <template v-else-if="item.type === 'custom'">
-                  <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData" :attrs="item.attrs" />
+                  <slot
+                    :name="item.slotName ?? item.prop"
+                    :prop="item.prop"
+                    :formData="formData"
+                    :attrs="item.attrs"
+                  />
                 </template>
               </el-form-item>
             </el-col>
           </template>
         </el-row>
       </el-form>
+      <!-- 表单底部插槽 -->
+      <slot name="formFooter" />
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div v-if="!formDisable">
@@ -111,13 +134,26 @@
   </template>
   <!-- dialog -->
   <template v-else>
-    <el-dialog v-model="modalVisible" :align-center="true" :append-to-body="true" width="70vw"
-      v-bind="modalConfig.dialog" style="padding-right: 0" @close="handleCloseModal">
+    <el-dialog
+      v-model="modalVisible"
+      :align-center="true"
+      :append-to-body="true"
+      width="70vw"
+      v-bind="modalConfig.dialog"
+      style="padding-right: 0"
+      @close="handleCloseModal"
+    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form"
-          style="padding-right: var(--el-dialog-padding-primary)" :model="formData" :rules="formRules">
+        <el-form
+          ref="formRef"
+          label-width="auto"
+          v-bind="modalConfig.form"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="formData"
+          :rules="formRules"
+        >
           <el-row :gutter="20">
             <template v-for="item in formItems" :key="item.prop">
               <template v-if="item.type === 'title'">
@@ -131,7 +167,12 @@
                   <template v-if="item.tips" #label>
                     <span>
                       {{ item.label }}
-                      <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
+                      <el-tooltip
+                        placement="bottom"
+                        effect="light"
+                        :content="item.tips"
+                        :raw-content="true"
+                      >
                         <el-icon style="vertical-align: -0.15em" size="16">
                           <QuestionFilled />
                         </el-icon>
@@ -140,7 +181,11 @@
                   </template>
                   <!-- Input 输入框 -->
                   <template v-if="item.type === 'input' || item.type === undefined">
-                    <el-input v-model="formData[item.prop]" v-bind="item.attrs" :disabled="item.disabled" />
+                    <el-input
+                      v-model="formData[item.prop]"
+                      v-bind="item.attrs"
+                      :disabled="item.disabled"
+                    />
                   </template>
                   <!-- textarea 输入框 -->
                   <template v-else-if="item.type === 'textarea'">
@@ -212,8 +257,12 @@
                   </template>
                   <!-- 自定义 -->
                   <template v-else-if="item.type === 'custom'">
-                    <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData"
-                      :attrs="item.attrs" />
+                    <slot
+                      :name="item.slotName ?? item.prop"
+                      :prop="item.prop"
+                      :formData="formData"
+                      :attrs="item.attrs"
+                    />
                   </template>
                 </el-form-item>
               </el-col>
@@ -221,6 +270,8 @@
           </el-row>
         </el-form>
       </el-scrollbar>
+      <!-- 表单底部插槽 -->
+      <slot name="formFooter" />
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div style="padding-right: var(--el-dialog-padding-primary)">
@@ -375,7 +426,14 @@ function handleDisabled(disable: boolean) {
 }
 
 // 暴露的属性和方法
-defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData, handleDisabled, handleClose });
+defineExpose({
+  setModalVisible,
+  getFormData,
+  setFormData,
+  setFormItemData,
+  handleDisabled,
+  handleClose,
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/coupon/index.vue b/src/components/coupon/index.vue
new file mode 100644
index 0000000..b2c65e2
--- /dev/null
+++ b/src/components/coupon/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <el-dialog title="选择优惠劵" top="5vh" :visible.sync="dialogVisible">
+    <div class="head-container">
+      <el-table ref="table" :data="tableData.list" height="500" v-loading="tableData.loading">
+        <!-- <el-table-column type="selection" width="55" align="center" v-if="!radio"></el-table-column> -->
+        <el-table-column label="名称" prop="title" />
+        <el-table-column label="使用门槛">
+          <template v-slot="scope">
+            {{
+              `满${scope.row.fullAmount}${
+                scope.row.discountAmount ? "减" + scope.row.discountAmount + "元" : ""
+              }`
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="总发放数量" prop="number" />
+        <el-table-column label="已使用" prop="useNumber" />
+        <el-table-column label="剩余" prop="leftNumber" />
+        <el-table-column label="操作">
+          <template v-slot="scope">
+            <el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      :total="tableData.total"
+      :current-page="tableData.page + 1"
+      :page-size="tableData.size"
+      @current-change="paginationChange"
+      @size-change="sizeChange"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+    <span slot="footer" class="dialog-footer" v-if="!radio">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="confirmHandle">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+// import { getTbShopCoupon, delTbShopCoupon } from '@/api/coupon'
+export default {
+  props: {
+    // 是否为单选
+    radio: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      searhForm: {
+        name: "",
+        category: "",
+      },
+      categoryList: [],
+      tableData: {
+        page: 0,
+        size: 10,
+        total: 0,
+        loading: false,
+        list: [],
+      },
+      goods: [],
+    };
+  },
+  methods: {
+    // 单选商品
+    selectHandle(row) {
+      this.$emit("success", [{ ...row }]);
+      this.close();
+    },
+    // 确定选商品
+    confirmHandle() {
+      let res = this.$refs.table.selection;
+      this.$emit("success", res);
+      this.close();
+    },
+    // 重置查询
+    resetHandle() {
+      this.searhForm.name = "";
+      this.searhForm.category = "";
+      this.tableData.page = 0;
+      this.tableData.size = 10;
+      this.tableData.list = [];
+      this.getTableData();
+    },
+    // 分页大小改变
+    sizeChange(e) {
+      this.tableData.size = e;
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e - 1;
+      this.getTableData();
+    },
+    // 商品列表
+    async getTableData() {
+      this.tableData.loading = true;
+      try {
+        const res = await getTbShopCoupon({
+          page: this.tableData.page,
+          size: this.tableData.size,
+          name: this.searhForm.name,
+          categoryId: this.searhForm.category,
+          shopId: localStorage.getItem("shopId"),
+          sort: "id",
+        });
+        this.tableData.list = res.content;
+        this.tableData.total = res.totalElements;
+
+        if (this.goods.length) {
+          this.$nextTick(() => {
+            this.selection();
+          });
+        }
+        setTimeout(() => {
+          this.tableData.loading = false;
+        }, 500);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 商品分类
+    async tbShopCategoryGet() {
+      try {
+        const res = await getTbShopCoupon({
+          page: 0,
+          size: 100,
+          sort: "id",
+          shopId: localStorage.getItem("shopId"),
+        });
+        this.categoryList = res.content;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async show(goods, categoryId) {
+      this.dialogVisible = true;
+      if (goods && goods.length) {
+        this.goods = goods;
+      } else {
+        this.goods = [];
+      }
+      this.resetHandle();
+
+      console.log(categoryId);
+
+      if (categoryId) {
+        this.searhForm.category = categoryId;
+      }
+
+      console.log(this.searhForm);
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+    selection() {
+      this.goods.forEach((row) => {
+        this.tableData.list.forEach((item, index) => {
+          if (row.id == item.id) {
+            this.$refs.table.toggleRowSelection(this.tableData.list[index]);
+          }
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.shop_info {
+  display: flex;
+  align-items: center;
+
+  span {
+    margin-left: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/components/NavBar/components/Notification.vue b/src/layout/components/NavBar/components/Notification.vue
index aed67a3..3dd0920 100644
--- a/src/layout/components/NavBar/components/Notification.vue
+++ b/src/layout/components/NavBar/components/Notification.vue
@@ -181,27 +181,25 @@ onMounted(() => {
   // NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5, isRead: 0 }).then((data) => {
   //   notices.value = data.list;
   // });
-
-  WebSocketManager.subscribeToTopic("/user/queue/message", (message) => {
-    console.log("收到消息：", message);
-    const data = JSON.parse(message);
-    const id = data.id;
-    if (!notices.value.some((notice) => notice.id == id)) {
-      notices.value.unshift({
-        id,
-        title: data.title,
-        type: data.type,
-        publishTime: data.publishTime,
-      });
-
-      ElNotification({
-        title: "您收到一条新的通知消息！",
-        message: data.title,
-        type: "success",
-        position: "bottom-right",
-      });
-    }
-  });
+  // WebSocketManager.subscribeToTopic("/user/queue/message", (message) => {
+  //   console.log("收到消息：", message);
+  //   const data = JSON.parse(message);
+  //   const id = data.id;
+  //   if (!notices.value.some((notice) => notice.id == id)) {
+  //     notices.value.unshift({
+  //       id,
+  //       title: data.title,
+  //       type: data.type,
+  //       publishTime: data.publishTime,
+  //     });
+  //     ElNotification({
+  //       title: "您收到一条新的通知消息！",
+  //       message: data.title,
+  //       type: "success",
+  //       position: "bottom-right",
+  //     });
+  //   }
+  // });
 });
 
 // 阅读通知公告
diff --git a/src/main.ts b/src/main.ts
index b14ea03..a358819 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,6 +8,8 @@ import "element-plus/theme-chalk/dark/css-vars.css";
 // 暗黑模式自定义变量
 import "@/styles/dark/css-vars.css";
 import "@/styles/index.scss";
+//辅助工具类
+import "@/styles/util.scss";
 import "uno.css";
 // 自动为某些默认事件（如 touchstart、wheel 等）添加 { passive: true },提升滚动性能并消除控制台的非被动事件监听警告
 import "default-passive-events";
diff --git a/src/router/index.ts b/src/router/index.ts
index e29029b..b26f593 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -311,7 +311,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "index",
-        component: () => import("@/views/tool/index.vue"),
+        component: () => import("@/views/tool/Instead/index.vue"),
         name: "toolIndex",
         meta: {
           title: "代客下单",
diff --git a/src/store/modules/carts.ts b/src/store/modules/carts.ts
new file mode 100644
index 0000000..e2a41d7
--- /dev/null
+++ b/src/store/modules/carts.ts
@@ -0,0 +1,228 @@
+import { store } from "@/store";
+import WebSocketManager, { type ApifoxModel, msgType } from "@/utils/websocket";
+
+export interface CartsState {
+  id: string | number;
+  [property: string]: any;
+}
+
+export const useCartsStore = defineStore("carts", () => {
+  //当前购物车数据
+  const list = useStorage<any[]>("carts", []);
+  //赠菜
+  const giftList = useStorage<any[]>("giftList", []);
+  let goodsMap: { [key: string]: any } = {};
+  //当前选中cart
+  let selListIndex = ref(-1);
+  //当前选中商品是否是赠菜
+  const isSelGift = ref(false);
+  const defaultCart = {
+    id: '',
+    number: 0,
+  }
+  const selCart = computed(() => {
+    if (isSelGift.value) {
+      return giftList.value[selListIndex.value] || defaultCart
+    }
+    return list.value[selListIndex.value] || defaultCart
+  })
+  //赠菜总价
+  const giftMoney = computed(() => {
+    return giftList.value.reduce((acc: number, cur: any) => {
+      return acc + cur.number * cur.salePrice
+    }, 0)
+  })
+  const yiyouhui = computed(() => {
+    const youhui = giftMoney.value
+    if (youhui > 0) {
+      return '已优惠￥' + youhui.toFixed(2)
+    }
+    return ''
+  })
+
+  //支付总价
+  const payMoney = computed(() => {
+    const money = list.value.reduce((acc: number, cur: any) => {
+      return acc + cur.number * cur.salePrice
+    }, 0)
+    return money.toFixed(2)
+  })
+  //总计数量
+  const totalNumber = computed(() => {
+    const cartNumber = list.value.reduce((acc: number, cur: any) => {
+      return acc + cur.number * 1
+    }, 0)
+    const giftNumber = list.value.reduce((acc: number, cur: any) => {
+      return acc + cur.number * 1
+    }, 0)
+    return cartNumber + giftNumber
+  })
+
+
+  const table_code = ref('');
+  function changeNumber(step: number, item: CartsState) {
+    if (item.number * 1 + step <= 0) {
+      del(item);
+      return;
+    }
+    update({ ...item, number: step * 1 });
+  }
+
+  function changeSelCart(cart: CartsState) {
+    console.log(cart)
+    if (!cart.id) {
+      return
+    }
+    if (cart.is_gift) {
+      isSelGift.value = true
+      selListIndex.value = giftList.value.findIndex((item: CartsState) => item.id === cart.id);
+      console.log(selListIndex.value)
+
+    } else {
+      isSelGift.value = false
+      selListIndex.value = list.value.findIndex((item: CartsState) => item.id === cart.id);
+    }
+  }
+  function add(data: any) {
+    sendMessage('add', data);
+  }
+  function del(data: any) {
+    sendMessage('del', data);
+  }
+
+  function update(data: any) {
+    console.log(data);
+    sendMessage('edit', data);
+  }
+  function updateTag(key: string, val: any) {
+    sendMessage('edit', { ...selCart.value, number: 0, [key]: val });
+  }
+  function clear() {
+    sendMessage('cleanup', {});
+  }
+  function getProductDetails(v: { product_id: string, sku_id: string }) {
+    const goods = goodsMap[v.product_id]
+    const skuData = goods?.skuList.find((sku: { id: string, salePrice: number }) => sku.id == v.sku_id);
+    if (skuData) {
+      return {
+        salePrice: skuData ? skuData.salePrice : 0,
+        coverImg: goods.coverImg,
+        name: goods.name
+      }
+    } else {
+      return undefined
+    }
+  }
+
+  function init(initParams: ApifoxModel, $goodsMap: any) {
+    // 商品id对应的数据map
+    goodsMap = $goodsMap
+    table_code.value = initParams && initParams.table_code ? initParams.table_code : '';
+    WebSocketManager.subscribeToTopic(initParams, (msg) => {
+      console.log("收到消息：", msg);
+      if (msg.hasOwnProperty('status') && msg.status != 1) {
+        return ElMessage.error(msg.message || '操作失败')
+      }
+      // 初始化
+      if (msg.operate_type === "manage_init") {
+        // 设置单价
+        list.value = msg.data.filter((v: { is_gift: any; }) => !v.is_gift).map((v: Record<string, any>) => {
+          const skuData = getProductDetails({ product_id: v.product_id, sku_id: v.sku_id })
+          return {
+            ...skuData,
+            ...v,
+          }
+        });
+        giftList.value = msg.data.filter((v: { is_gift: any; }) => v.is_gift).map((v: Record<string, any>) => {
+          const skuData = getProductDetails({ product_id: v.product_id, sku_id: v.sku_id })
+          return {
+            ...skuData,
+            ...v,
+          }
+        });
+        console.log(giftList.value)
+      }
+      if (msg.operate_type === "manage_add") {
+        const skuData = getProductDetails({ product_id: msg.data[0].product_id, sku_id: msg.data[0].sku_id })
+        list.value.push({ ...skuData, ...msg.data[0] })
+        return ElMessage.success(msg.message || '添加成功')
+
+      }
+      if (msg.operate_type === "manage_edit") {
+        const newCart = msg.data[0]
+        const index = list.value.findIndex((item) => item.id === newCart.id)
+        const giftIndex = giftList.value.findIndex((item) => item.id === newCart.id)
+        const cartItem = list.value[index];
+        const giftItem = giftList.value[giftIndex];
+        if (isSelGift.value) {
+          //操作赠菜
+          if (newCart.is_gift != giftItem.is_gift) {
+            //修改了赠菜状态
+            giftList.value.splice(giftIndex, 1)
+            list.value.push({ ...giftItem, ...newCart })
+            selListIndex.value = -1
+          } else {
+            giftList.value[giftIndex] = { ...giftItem, ...newCart }
+          }
+          return
+        }
+        if (!isSelGift.value) {
+          //操作非赠菜
+          if (newCart.is_gift != cartItem.is_gift) {
+            list.value.splice(index, 1)
+            giftList.value.push({ ...cartItem, ...newCart })
+            selListIndex.value = -1
+          } else {
+            list.value[index] = { ...cartItem, ...newCart }
+          }
+          return
+        }
+
+      }
+      if (msg.operate_type === "manage_del") {
+        if (!isSelGift.value) {
+          const index = list.value.findIndex((item) => item.id === msg.data.id)
+          if (index > -1) {
+            list.value.splice(index, 1)
+            if (list.value.length >= 1) {
+              selListIndex.value = index - 1;
+            }
+            return ElMessage.success(msg.message || '删除成功')
+          }
+        } else {
+          const index = giftList.value.findIndex((item) => item.id === msg.data.id)
+          if (index > -1) {
+            giftList.value.splice(index, 1)
+            if (giftList.value.length >= 1) {
+              selListIndex.value = index - 1;
+            }
+            return ElMessage.success(msg.message || '删除成功')
+          }
+        }
+
+
+      }
+      console.log(list.value)
+    });
+  }
+  function sendMessage(operate_type: msgType, message: any) {
+    console.log({ ...message, operate_type: operate_type, table_code: table_code.value })
+    WebSocketManager.sendMessage({ ...message, operate_type: operate_type, table_code: table_code.value });
+  }
+  return {
+    updateTag,
+    list,
+    add,
+    del,
+    update,
+    init,
+    changeNumber,
+    selCart, totalNumber,
+    changeSelCart, payMoney,
+    clear, yiyouhui, giftList
+  };
+});
+
+export function useDictStoreHook() {
+  return useCartsStore(store);
+}
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index c18d156..548e0ec 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -11,7 +11,6 @@ const Layout = () => import("@/layout/index.vue");
 export const usePermissionStore = defineStore("permission", () => {
   // 储所有路由，包括静态路由和动态路由
   const routes = ref<RouteRecordRaw[]>(constantRoutes);
-  console.log(router);
   // 混合模式左侧菜单路由
   const mixedLayoutLeftRoutes = ref<RouteRecordRaw[]>([]);
   // 路由是否加载完成
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index da9e44c..28fc8e4 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -23,7 +23,7 @@ export const useUserStore = defineStore("user", () => {
     return new Promise<void>((resolve, reject) => {
       AuthAPI.login(loginRequest)
         .then((data) => {
-          Object.assign(userInfo.value, { ...data.shopInfo });
+          Object.assign(userInfo.value, { ...data.shopInfo, shopId: data.shopInfo.id });
           promissionList.value = data.promissionList;
           const token = data.tokenInfo.tokenValue;
           setToken(token); // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx
diff --git a/src/styles/util.scss b/src/styles/util.scss
new file mode 100644
index 0000000..4f2478a
--- /dev/null
+++ b/src/styles/util.scss
@@ -0,0 +1,384 @@
+.u-relative,
+.u-rela,
+.relative {
+	position: relative;
+}
+
+.u-absolute,
+.u-abso,
+.absolute {
+	position: absolute;
+}
+
+.u-fixed,
+.u-fix {
+	position: fixed;
+}
+
+// nvue不能用标签命名样式，不能放在微信组件中，否则微信开发工具会报警告，无法使用标签名当做选择器
+/* #ifndef APP-NVUE */
+image {
+	display: inline-block;
+}
+
+// 在weex，也即nvue中，所有元素默认为border-box
+view,
+text {
+	box-sizing: border-box;
+}
+
+/* #endif */
+
+.u-font-xs {
+	font-size: 11px;
+}
+
+.u-font-sm {
+	font-size: 13px;
+}
+
+.u-font-md {
+	font-size: 14px;
+}
+
+.u-font-lg {
+	font-size: 15px;
+}
+
+.u-font-xl {
+	font-size: 17px;
+}
+
+.flex {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.u-flex {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.u-flex-wrap {
+	flex-wrap: wrap;
+}
+
+.u-flex-nowrap {
+	flex-wrap: nowrap;
+}
+
+.free-price {
+	text-decoration: line-through;
+	color: #999;
+}
+.cur-pointer{
+	cursor: pointer;
+}
+.u-col-center {
+	align-items: center;
+}
+
+.u-col-top {
+	align-items: flex-start;
+}
+
+.u-col-bottom {
+	align-items: flex-end;
+}
+
+.u-row-center {
+	justify-content: center;
+}
+
+.u-row-left {
+	justify-content: flex-start;
+}
+
+.u-row-right {
+	justify-content: flex-end;
+}
+
+.u-row-between {
+	justify-content: space-between;
+}
+
+.u-row-around {
+	justify-content: space-around;
+}
+
+.u-text-left {
+	text-align: left;
+}
+
+.u-text-center {
+	text-align: center;
+}
+
+.u-text-right {
+	text-align: right;
+}
+
+.u-flex-col {
+	display: flex;
+	flex-direction: column;
+}
+
+// 定义flex等分
+@for $i from 0 through 12 {
+	.u-flex-#{$i} {
+		flex: $i;
+	}
+}
+
+// 定义字体(px)单位，小于20都为px单位字体
+@for $i from 9 to 20 {
+	.u-font-#{$i} {
+		font-size: $i + px;
+	}
+}
+
+// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
+@for $i from 20 through 40 {
+	.u-font-#{$i} {
+		font-size: $i + px;
+	}
+}
+
+// 定义内外边距，历遍1-80
+@for $i from 0 through 80 {
+
+	// 只要双数和能被5除尽的数
+	@if $i % 2==0 or $i % 5==0 {
+
+		// 得出：u-margin-30或者u-m-30
+		.u-margin-#{$i},
+		.u-m-#{$i} {
+			margin: $i + px !important;
+		}
+
+		// 得出：u-padding-30或者u-p-30
+		.u-padding-#{$i},
+		.u-p-#{$i} {
+			padding: $i + px !important;
+		}
+
+		@each $short, $long in l left, t top, r right, b bottom {
+
+			// 缩写版，结果如： u-m-l-30
+			// 定义外边距
+			.u-m-#{$short}-#{$i} {
+				margin-#{$long}: $i + px !important;
+			}
+
+			// 定义内边距
+			.u-p-#{$short}-#{$i} {
+				padding-#{$long}: $i + px !important;
+			}
+
+			// 完整版，结果如：u-margin-left-30
+			// 定义外边距
+			.u-margin-#{$long}-#{$i} {
+				margin-#{$long}: $i + px !important;
+			}
+
+			// 定义内边距
+			.u-padding-#{$long}-#{$i} {
+				padding-#{$long}: $i + px !important;
+			}
+		}
+	}
+}
+
+// 重置nvue的默认关于flex的样式
+.u-reset-nvue {
+	flex-direction: row;
+	align-items: center;
+}
+
+/* start--文本行数限制--start */
+.u-line-1 {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.u-line-2 {
+	-webkit-line-clamp: 2;
+}
+
+.u-line-3 {
+	-webkit-line-clamp: 3;
+}
+
+.u-line-4 {
+	-webkit-line-clamp: 4;
+}
+
+.u-line-5 {
+	-webkit-line-clamp: 5;
+}
+
+.u-line-2,
+.u-line-3,
+.u-line-4,
+.u-line-5 {
+	overflow: hidden;
+	word-break: break-all;
+	text-overflow: ellipsis;
+	display: -webkit-box; // 弹性伸缩盒
+	-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
+}
+
+/* end--文本行数限制--end */
+
+
+/* start--不同颜色文字--start */
+.color-333 {
+	color: #333;
+}
+
+.color-666 {
+	color: #666;
+}
+
+.color-999 {
+	color: #999;
+}
+
+.color-red {
+	color: rgb(250, 85, 85);
+}
+
+
+/* end--不同颜色文字--end */
+
+.tranistion {
+	transition: all .3s ease-in-out;
+}
+
+.tranistion-1 {
+	transition: all .1s ease-in-out;
+}
+
+.tranistion-2 {
+	transition: all .2s ease-in-out;
+}
+
+.font-bold {
+	font-weight: 700;
+}
+
+.font-600 {
+	font-weight: 600;
+}
+
+.bg-gray {
+	background-color: #F9F9F9;
+}
+
+.w-full {
+	width: 100%;
+}
+
+.gap-10 {
+	gap: 10px;
+}
+
+.gap-20 {
+	gap: 20px;
+}
+
+.color-aaa {
+	color: #aaa;
+}
+
+.color-000 {
+	color: #000;
+}
+
+.color-fff {
+	color: #fff;
+}
+
+.bg-fff {
+	background-color: #fff;
+}
+
+.bg-gray {
+	background-color: #F9F9F9;
+}
+
+.overflow-hide {
+	overflow: hidden;
+}
+
+.no-wrap {
+	white-space: nowrap;
+}
+
+.border-r-12 {
+	border-radius: 12px;
+}
+
+.border-r-18 {
+	border-radius: 18px;
+}
+
+.border-top {
+	border-top: 1px solid #E5E5E5;
+}
+
+.border-bottom {
+	border-bottom: 1px solid #E5E5E5;
+}
+
+.scale7 {
+	transform: scale(0.7);
+}
+
+.position-all {
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+
+.lh16 {
+	line-height: 16px;
+}
+
+.default-box-padding {
+	padding: 16px 14px;
+}
+
+.zIndex-999 {
+	z-index: 999;
+}
+
+.icon-default-size {
+	width: 14px;
+	height: 14px;
+}
+
+.filter-gray {
+	filter: grayscale(1);
+}
+.youhui-tips.el-tooltip__popper {
+	background: #fff;
+	min-width: 150px;
+	border-radius: 4px;
+	border: 1px solid #ebeef5 !important;
+	padding: 12px;
+	color: #606266;
+	line-height: 1.4;
+	text-align: justify;
+	font-size: 14px;
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+	word-break: break-all;
+  }
+  .youhui-tips.el-tooltip__popper[x-placement^="top"] .popper__arrow:after,
+  .youhui-tips.el-tooltip__popper[x-placement^="top"] .popper__arrow {
+  border-top-color: #fff;
+}
\ No newline at end of file
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 424ced4..a7cc189 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -8,14 +8,13 @@ import router from "@/router";
 const service = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
   timeout: 50000,
-  headers: { "Content-Type": "application/json;charset=utf-8" },
+  headers: { "Content-Type": "application/json;charset=utf-8", platformType: 'WEB' },
   paramsSerializer: (params) => qs.stringify(params),
 });
 
 // 请求拦截器
 service.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
-    console.log(config);
     const accessToken = getToken();
     // 如果 Authorization 设置为 no-auth，则不携带 Token，用于登录、刷新 Token 等接口
     if (config.headers.Authorization !== "no-auth" && accessToken) {
diff --git a/src/utils/websocket.ts b/src/utils/websocket.ts
index e0202af..da3e637 100644
--- a/src/utils/websocket.ts
+++ b/src/utils/websocket.ts
@@ -1,7 +1,36 @@
+import qs from "qs";
+import { useUserStoreHook } from "@/store";
 
+const user = useUserStoreHook()
+
+export interface ApifoxModel {
+  account: string;
+  /**
+   * 操作类型
+   */
+  operate_type: string;
+  shop_id: string;
+  /**
+   * 桌码
+   */
+  table_code?: string;
+  /**
+   * 消息类型
+   */
+  type: string;
+  [property: string]: any;
+}
+export type msgType = 'add' | 'reduce' | 'remove' | 'edit' | 'init' | 'cleanup' | 'del'
 class WebSocketManager {
   private client: WebSocket | null = null;
   private connected: boolean = false;
+  private initParams: ApifoxModel = {
+    type: 'manage',
+    account: `${user.userInfo.shopId}`,
+    operate_type: 'init',
+    table_code: '',
+    shop_id: `${user.userInfo.shopId}`,
+  };
   private onMessage: (message: any) => void = function () { };
   private messageHandlers: Map<string, ((message: string) => void)[]> = new Map();
   private type: string = 'manage';
@@ -23,11 +52,13 @@ class WebSocketManager {
       console.log("客户端已存在并且连接正常");
       return this.client;
     }
-    this.client = new WebSocket(endpoint)
+    const url = qs.stringify(this.initParams)
+    console.log(this.initParams)
+    this.client = new WebSocket(endpoint + '?' + url);
     this.client.onopen = () => {
       this.connected = true;
       console.log("WebSocket 连接已建立");
-      this.sendMessage('test')
+      this.sendMessage(this.initParams)
     };
     this.client.onclose = () => {
       this.connected = false;
@@ -35,31 +66,53 @@ class WebSocketManager {
     };
     this.client.onerror = (error) => {
       console.error("WebSocket 发生错误:", error);
+      ElNotification({
+        title: "提示",
+        message: "WebSocket 发生错误",
+        type: "error",
+      });
     };
     this.client.onmessage = (event) => {
       const message = event.data;
-      this.getMessage(message)
+      const msg = JSON.parse(message)
+      if (msg && msg.msg_id) {
+        this.onMessageHandler({ msg_id: msg.msg_id })
+      }
+      this.onMessage(msg);
     };
   }
-  private getMessage(message: any) {
-    console.log("收到消息:", message);
+
+  // 消息回执
+  public onMessageHandler(data: any) {
+    if (this.client) {
+      this.client.send(JSON.stringify({ ...data, type: 'receipt' }));
+    }
   }
 
   // 订阅主题
-  public subscribeToTopic(topic: string, onMessage: (message: string) => void) {
-    console.log(`正在订阅主题: ${topic}`);
-    if (!this.client || !this.connected) {
-      this.setupWebSocket();
-    }
-    if (this.connected) {
-      this.onMessage = onMessage;
+  public subscribeToTopic(initParams: ApifoxModel, onMessage: (message: any) => void) {
+    console.log(`正在订阅主题: `);
+    console.log(initParams);
+
+    this.initParams = { ...this.initParams, ...initParams }
+    if (this.client && this.connected) {
+      this.disconnect();
     }
+    this.setupWebSocket();
+    this.onMessage = onMessage;
   }
   public sendMessage(message: any) {
     if (this.client) {
-      this.client.send(message);
+      const msg = JSON.stringify({
+        ...this.initParams,
+        ...message,
+      })
+      this.client.send(msg);
     }
   }
+  public canSendMessage() {
+    return this.client && this.connected;
+  }
   // 断开 WebSocket 连接
   public disconnect() {
     if (this.client) {
diff --git a/src/views/admim/system/miniAppPages/config/add.ts b/src/views/admim/system/miniAppPages/config/add.ts
index 17223ca..8743270 100644
--- a/src/views/admim/system/miniAppPages/config/add.ts
+++ b/src/views/admim/system/miniAppPages/config/add.ts
@@ -1,11 +1,10 @@
-import VersionApi, { type addRequest } from "@/api/system/version";
-import { sourceOptions, typeOptions, isForceOptions } from "./config";
+import API, { type addRequest } from "@/api/system/miniAppPages";
 import type { IModalConfig } from "@/components/CURD/types";
 
 const modalConfig: IModalConfig<addRequest> = {
   pageName: "sys:user",
   dialog: {
-    title: "新增版本",
+    title: "新增小程序页面",
     width: 800,
     draggable: true,
   },
@@ -13,75 +12,78 @@ const modalConfig: IModalConfig<addRequest> = {
     labelWidth: 140,
   },
   formAction: function (data) {
-    return VersionApi.add({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
+    if (data.icon) {
+      data.icon = typeof data.icon === "string" ? data.icon : data.icon[0]
+    }
+    return API.add(data);
   },
   beforeSubmit(data) {
     console.log("提交之前处理", data);
   },
   formItems: [
+
     {
-      label: "渠道",
-      prop: "source",
-      rules: [{ required: true, message: "请选择渠道", trigger: "blur" }],
-      type: "select",
+      type: "UpImage",
+      label: "图标",
+      prop: "icon",
+      rules: [{ required: false, message: "请上传图标", trigger: "blur" }],
       attrs: {
-        placeholder: "请选择渠道",
+        placeholder: "请上传图标",
       },
-      options: sourceOptions,
-    },
-    {
-      label: "类型",
-      prop: "type",
-      rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
-      type: "select",
-      attrs: {
-        placeholder: "请选择类型",
-      },
-      col: {
-        xs: 24,
-        sm: 12,
-      },
-      options: typeOptions,
     },
     {
       type: "input",
-      label: "版本号",
-      prop: "version",
-      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      label: "小程序页面名称",
+      prop: "name",
+      rules: [{ required: true, message: "请输入小程序页面名称", trigger: "blur" }],
       attrs: {
-        placeholder: "请输入版本号",
+        placeholder: "请输入小程序页面名称",
       },
     },
     {
-      type: "radio",
-      label: "是否强制更新",
-      prop: "isForce",
-      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      type: "input",
+      label: "小程序页面路径",
+      prop: "path",
+      rules: [{ required: true, message: "请输入小程序页面路径", trigger: "blur" }],
       attrs: {
-        placeholder: "请输入版本号",
+        placeholder: "请输入小程序页面路径",
       },
-      initialValue: 0,
-      options: isForceOptions,
     },
     {
       type: "textarea",
-      label: "更新提示内容",
-      prop: "message",
-      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
+      label: "页面描述",
+      prop: "description",
+      rules: [{ required: false, message: "请输入页面描述", trigger: "blur" }],
       attrs: {
-        placeholder: "请输入更新提示内容",
+        placeholder: "请输入页面描述",
       },
     },
     {
-      type: "custom",
-      label: "版本文件",
-      prop: "url",
-      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
+      type: "input-number",
+      label: "排序",
+      prop: "sort",
+      rules: [{ required: false, message: "请输入排序", trigger: "blur" }],
       attrs: {
-        placeholder: "请上传版本文件",
+        placeholder: "请输入排序",
       },
-      initialValue: [],
+      initialValue: 0,
     },
+    {
+      type: "radio-button",
+      label: "小程序页面状态",
+      prop: "status",
+      options: [
+        {
+          label: "启用",
+          value: 1,
+        },
+        {
+          label: "禁用",
+          value: 0,
+        },
+      ],
+      initialValue: 1,
+    }
   ],
 };
 
diff --git a/src/views/admim/system/miniAppPages/config/config.ts b/src/views/admim/system/miniAppPages/config/config.ts
index b956baa..8739ffe 100644
--- a/src/views/admim/system/miniAppPages/config/config.ts
+++ b/src/views/admim/system/miniAppPages/config/config.ts
@@ -1,31 +1,17 @@
 import { property } from "lodash";
 
-export const sourceOptions: options[] = [
-  { label: "桌面端", value: "pc" },
-  { label: "管理端", value: "manager_app" },
-  { label: "电话机点餐", value: "phone_book " },
-];
-export const typeOptions: options[] = [
-  { label: "windows", value: "0" },
-  { label: "安卓", value: "1" },
-  { label: "IOS", value: "2" },
-];
-export const isForceOptions: options[] = [
-  { label: "不强制更新", value: 0 },
-  { label: "强制更新", value: 1 },
+export const statusOptions: options[] = [
+  { label: "全部", value: '' },
+  { label: "启用", value: 1 },
+  { label: "禁用", value: 0 },
 ];
 
-export type optionsType = "source" | "type" | "isForce";
+
+export type optionsType = "status";
 
 export function returnOptions(type: optionsType) {
-  if (type === "source") {
-    return sourceOptions;
-  }
-  if (type === "type") {
-    return typeOptions;
-  }
-  if (type === "isForce") {
-    return isForceOptions;
+  if (type === "status") {
+    return statusOptions;
   }
 }
 
diff --git a/src/views/admim/system/miniAppPages/config/content.ts b/src/views/admim/system/miniAppPages/config/content.ts
index 1590471..f20b18e 100644
--- a/src/views/admim/system/miniAppPages/config/content.ts
+++ b/src/views/admim/system/miniAppPages/config/content.ts
@@ -1,5 +1,4 @@
-import VersionApi from "@/api/system/version";
-import type { editRequest } from "@/api/system/version";
+import API, { type editRequest } from "@/api/system/miniAppPages";
 import type { IContentConfig } from "@/components/CURD/types";
 
 const contentConfig: IContentConfig<editRequest> = {
@@ -15,61 +14,50 @@ const contentConfig: IContentConfig<editRequest> = {
     pageSizes: [10, 20, 30, 50],
   },
   indexAction: function (params) {
-    return VersionApi.getList();
+    return API.getList(params);
   },
-  deleteAction: VersionApi.delete,
+  deleteAction: API.delete,
   // modifyAction: function (data) {
-  //   // return VersionApi.edit(data);
+  //   // return API.edit(data);
   // },
   pk: "id",
   toolbar: ["add"],
   defaultToolbar: ["refresh", "filter", "search"],
   cols: [
     { type: "selection", width: 50, align: "center" },
-    { label: "id", align: "center", prop: "id", width: 100, show: true },
     {
-      label: "渠道",
+      label: "小程序页面名称",
       align: "center",
-      prop: "source",
-      width: 120,
+      prop: "name",
+    },
+    {
+      label: "图标",
+      align: "center",
+      prop: "icon",
       templet: "custom",
-      slotName: "options",
+      slotName: "icon",
     },
     {
-      label: "类型",
+      label: "小程序页面路径",
       align: "center",
-      prop: "type",
-      width: 120,
+      prop: "path",
+    },
+    {
+      label: "页面描述",
+      align: "center",
+      prop: "description",
+    },
+    {
+      label: "排序",
+      align: "center",
+      prop: "sort",
+    },
+    {
+      label: "状态",
+      align: "center",
+      prop: "status",
       templet: "custom",
-      slotName: "options",
-    },
-    {
-      label: "版本号",
-      align: "center",
-      width: 120,
-      prop: "version",
-    },
-
-    {
-      label: "是否强制升级",
-      align: "center",
-      prop: "isForce",
-      width: 120,
-      templet: "switch",
-      slotName: "isForce",
-    },
-    {
-      label: "更新内容",
-      align: "center",
-      prop: "message",
-      width: 240,
-    },
-    {
-      label: "下载地址",
-      align: "center",
-      prop: "url",
-      templet: "url",
-      slotName: "url",
+      slotName: "status",
     },
     {
       label: "操作",
diff --git a/src/views/admim/system/miniAppPages/config/edit.ts b/src/views/admim/system/miniAppPages/config/edit.ts
index 105f37c..58d5477 100644
--- a/src/views/admim/system/miniAppPages/config/edit.ts
+++ b/src/views/admim/system/miniAppPages/config/edit.ts
@@ -1,86 +1,91 @@
-import VersionApi, { type editRequest } from "@/api/system/version";
+import API, { type editRequest } from "@/api/system/miniAppPages";
 import type { IModalConfig } from "@/components/CURD/types";
-import { sourceOptions, typeOptions, isForceOptions } from "./config";
 
 const modalConfig: IModalConfig<editRequest> = {
   pageName: "sys:user",
   dialog: {
-    title: "编辑版本",
+    title: "编辑小程序页面",
     width: 800,
     draggable: true,
   },
-  pk: "id",
+  form: {
+    labelWidth: 140,
+  },
   formAction: function (data) {
-    return VersionApi.edit({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
+    if (data.icon) {
+      data.icon = typeof data.icon === "string" ? data.icon : data.icon[0]
+    }
+    return API.edit(data);
   },
   beforeSubmit(data) {
     console.log("提交之前处理", data);
   },
   formItems: [
+
     {
-      label: "渠道",
-      prop: "source",
-      rules: [{ required: true, message: "请选择渠道", trigger: "blur" }],
-      type: "select",
+      type: "UpImage",
+      label: "图标",
+      prop: "icon",
+      rules: [{ required: false, message: "请上传图标", trigger: "blur" }],
       attrs: {
-        placeholder: "请选择渠道",
+        placeholder: "请上传图标",
       },
-      options: sourceOptions,
-    },
-    {
-      label: "类型",
-      prop: "type",
-      rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
-      type: "select",
-      attrs: {
-        placeholder: "请选择类型",
-      },
-      col: {
-        xs: 24,
-        sm: 12,
-      },
-      options: typeOptions,
     },
     {
       type: "input",
-      label: "版本号",
-      prop: "version",
-      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      label: "小程序页面名称",
+      prop: "name",
+      rules: [{ required: true, message: "请输入小程序页面名称", trigger: "blur" }],
       attrs: {
-        placeholder: "请输入版本号",
+        placeholder: "请输入小程序页面名称",
       },
     },
     {
-      type: "radio",
-      label: "是否强制更新",
-      prop: "isForce",
-      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      type: "input",
+      label: "小程序页面路径",
+      prop: "path",
+      rules: [{ required: true, message: "请输入小程序页面路径", trigger: "blur" }],
       attrs: {
-        placeholder: "请输入版本号",
+        placeholder: "请输入小程序页面路径",
       },
-      initialValue: 0,
-      options: isForceOptions,
     },
     {
       type: "textarea",
-      label: "更新提示内容",
-      prop: "message",
-      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
+      label: "页面描述",
+      prop: "description",
+      rules: [{ required: false, message: "请输入页面描述", trigger: "blur" }],
       attrs: {
-        placeholder: "请输入更新提示内容",
+        placeholder: "请输入页面描述",
       },
     },
     {
-      type: "custom",
-      label: "版本文件",
-      prop: "url",
-      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
+      type: "input-number",
+      label: "排序",
+      prop: "sort",
+      rules: [{ required: false, message: "请输入排序", trigger: "blur" }],
       attrs: {
-        placeholder: "请上传版本文件",
+        placeholder: "请输入排序",
       },
-      initialValue: [],
+      initialValue: 0,
     },
+    {
+      type: "radio-button",
+      label: "小程序页面状态",
+      prop: "status",
+      options: [
+        {
+          label: "启用",
+          value: 1,
+        },
+        {
+          label: "禁用",
+          value: 0,
+        },
+      ],
+      initialValue: 1,
+    }
   ],
 };
 
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
 export default reactive(modalConfig);
diff --git a/src/views/admim/system/miniAppPages/config/search.ts b/src/views/admim/system/miniAppPages/config/search.ts
index 29cbdd9..915f0b2 100644
--- a/src/views/admim/system/miniAppPages/config/search.ts
+++ b/src/views/admim/system/miniAppPages/config/search.ts
@@ -1,20 +1,39 @@
 import type { ISearchConfig } from "@/components/CURD/types";
-
+import { statusOptions } from './config'
 const searchConfig: ISearchConfig = {
   pageName: "sys:user",
   formItems: [
     {
       type: "input",
-      label: "版本号",
-      prop: "keywords",
+      label: "小程序页面路径",
+      prop: "name",
       attrs: {
-        placeholder: "请输入版本号",
+        placeholder: "请输入小程序页面路径",
         clearable: true,
         style: {
           width: "200px",
         },
       },
     },
+    {
+      type: "input",
+      label: "小程序页面路径",
+      prop: "path",
+      attrs: {
+        placeholder: "请输入小程序页面路径",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "radio-button",
+      label: "小程序页面状态",
+      prop: "status",
+      options: statusOptions,
+      initialValue: '',
+    }
   ],
 };
 
diff --git a/src/views/admim/system/miniAppPages/index.vue b/src/views/admim/system/miniAppPages/index.vue
index 9653963..47f967e 100644
--- a/src/views/admim/system/miniAppPages/index.vue
+++ b/src/views/admim/system/miniAppPages/index.vue
@@ -25,6 +25,13 @@
           {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
         </el-tag>
       </template>
+      <template #icon="scope">
+        <el-image
+          style="width: 50px; height: 50px"
+          :src="scope.row[scope.prop]"
+          :preview-src-list="[scope.row[scope.prop]]"
+        />
+      </template>
       <template #options="scope">
         {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
       </template>
@@ -99,8 +106,8 @@ async function handleEditClick(row: IObject) {
   editModalRef.value?.setModalVisible();
   // 根据id获取数据进行填充
   // const data = await Api.getFormData(row.id);
-  console.log({ ...row, url: [row.url] });
-  editModalRef.value?.setFormData({ ...row, url: [row.url] });
+  console.log({ ...row, icon: row.icon ? [row.icon] : [] });
+  editModalRef.value?.setFormData({ ...row, icon: row.icon ? [row.icon] : [] });
 }
 1;
 // 其他工具栏
diff --git a/src/views/data/index copy.vue b/src/views/data/index copy.vue
new file mode 100644
index 0000000..8a98c27
--- /dev/null
+++ b/src/views/data/index copy.vue	
@@ -0,0 +1,1479 @@
+<template>
+  <div class="app-container" style="padding-bottom: 100px">
+    <!-- <div class="card_wrap">
+      <div class="card">
+        <div class="header">
+          <div class="card_title">总销售额</div>
+          <el-tooltip effect="dark" content="订单支付金额" placement="top">
+            <i class="icon el-icon-warning-outline"></i>
+          </el-tooltip>
+        </div>
+        <div class="number">{{ topData.totalSales || 0 }}</div>
+        <div class="row">平均每单{{ topData.averageSales || 0 }}</div>
+        <div class="row">今日销售额{{ topData.totalSalesToday || 0 }}</div>
+      </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">支付笔数</div>
+        </div>
+        <div class="number">{{ topData.paymentsNumber }}</div>
+        <div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
+        <div class="row">
+          今日支付笔数{{ topData.paymentsNumberToday || 0 }}
+        </div>
+      </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">访问量</div>
+        </div>
+        <div class="number">{{ topData.totalVisits }}</div>
+        <div class="row" ref="cardCountChart" style="padding-bottom: 2px;"></div>
+        <div class="row">
+          <div class="dot"></div>
+          今日访问 {{ topData.totalVisitsToday || 0 }}
+        </div>
+      </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">用户数</div>
+        </div>
+        <div class="number">{{ topData.totalUser }}</div>
+        <div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
+        <div class="row">
+          今日新增 {{ topData.userToday || 0 }}
+          <i class="icon el-icon-caret-top"></i>
+        </div>
+      </div>
+    </div> -->
+    <div class="h_card_wrap">
+      <div class="status_wrap">
+        <div class="left">
+          <div class="dot"></div>
+          <span>营业</span>
+        </div>
+        <div class="time_wrap">
+          <el-radio-group v-model="timeValue" @change="timeChange">
+            <el-radio-button value="0">今天</el-radio-button>
+            <el-radio-button value="-1">昨天</el-radio-button>
+            <el-radio-button value="-7">最近7天</el-radio-button>
+            <el-radio-button value="-30">最近30天</el-radio-button>
+            <el-radio-button value="week">本周</el-radio-button>
+            <el-radio-button value="month">本月</el-radio-button>
+            <el-radio-button value="custom">自定义</el-radio-button>
+          </el-radio-group>
+          <el-date-picker
+            v-model="query.createdAt"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            v-if="timeValue == 'custom'"
+            @change="summarytrade"
+          ></el-date-picker>
+        </div>
+      </div>
+      <div class="content" v-loading="tradeLoading">
+        <div class="top">
+          <div class="item earnings">
+            <div class="num_wrap">
+              <div class="num">{{ formatDecimal(tradeSale.incomeAmountAll || 0) }}</div>
+              <div class="tips">
+                营业实收（元）
+                <el-tooltip popper-class="popper" effect="light" placement="bottom">
+                  <div class="tips_row" slot="content">
+                    <div class="item" v-for="(item, index) in tradeSale.payCount" :key="index">
+                      <div class="left">
+                        <img class="icon" :src="item.icon" />
+                        <span>{{ item.payType }}</span>
+                      </div>
+                      <span class="num">{{ item.payAmount }}</span>
+                    </div>
+                  </div>
+                  <el-icon class="el-icon-question" />
+                </el-tooltip>
+              </div>
+            </div>
+            <div class="line_wrap">
+              <div class="line_item">
+                <div class="line_item_top">
+                  <div>销售金额（元）</div>
+                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div> -->
+                </div>
+                <div class="line_gropress">
+                  <div
+                    class="gropress l"
+                    :style="{
+                      width: `${
+                        tradeSale.incomeAmount
+                          ? (tradeSale.incomeAmount / tradeSale.totalSaleAmount) * 100
+                          : 0
+                      }%`,
+                    }"
+                  ></div>
+                  <div
+                    class="gropress r"
+                    :style="{
+                      width: `${
+                        tradeSale.refundAmount
+                          ? (tradeSale.refundAmount / tradeSale.totalSaleAmount) * 100
+                          : 0
+                      }%`,
+                    }"
+                  ></div>
+                </div>
+                <div class="line_btm">
+                  <el-icon class="icon el-icon-caret-right" />
+                  <div class="info">
+                    <span class="l_t">收：{{ formatDecimal(tradeSale.incomeAmount || 0) }}</span>
+                    <span class="l_r">退：{{ formatDecimal(tradeSale.refundAmount || 0) }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="line_item">
+                <div class="line_item_top">
+                  <div>充值金额（元）</div>
+                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div> -->
+                </div>
+                <div class="line_gropress">
+                  <div
+                    class="gropress l"
+                    :style="{
+                      width: `${
+                        tradeSale.inAmount
+                          ? (tradeSale.inAmount / tradeSale.totalVipAmount) * 100
+                          : 0
+                      }%`,
+                    }"
+                  ></div>
+                  <div
+                    class="gropress r"
+                    :style="{
+                      width: `${
+                        tradeSale.inAmount
+                          ? (tradeSale.outAmount / tradeSale.totalVipAmount) * 100
+                          : 0
+                      }%`,
+                    }"
+                  ></div>
+                </div>
+                <div class="line_btm">
+                  <el-icon class="icon el-icon-caret-right" />
+                  <div class="info">
+                    <span class="l_t">收：{{ formatDecimal(tradeSale.inAmount || 0) }}</span>
+                    <span class="l_r">退：{{ formatDecimal(tradeSale.outAmount || 0) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="item data">
+            <div class="data_item">
+              <div class="num_wrap">
+                <div class="num">{{ formatDecimal(tradeVip.useAmount || 0) }}</div>
+                <div class="tips">会员消费（元）</div>
+              </div>
+            </div>
+            <div class="data_item_right">
+              <div class="t">
+                <span>新增会员数</span>
+                <span class="n">{{ tradeVip.newFlow || 0 }}(人)</span>
+              </div>
+              <div class="t">
+                <span>会员消费笔数</span>
+                <span class="n">{{ tradeVip.useNum || 0 }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="btm">
+          <div class="item item1">
+            <div class="title">客单价</div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item1_icon.png" />
+              <div class="t">{{ formatDecimal(tradeCount.unitPrice || 0) }}</div>
+            </div>
+          </div>
+          <div class="item item2">
+            <div class="title">
+              翻台率
+              <el-tooltip
+                effect="dark"
+                content="翻台率=（客单数-桌台数）/桌台数*100%"
+                placement="top"
+              >
+                <el-icon class="icon el-icon-question" />
+              </el-tooltip>
+            </div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item2_icon.png" />
+              <div class="t">{{ tradeCount.turnoverRate }}</div>
+            </div>
+          </div>
+          <div class="item item3">
+            <div class="title">优惠金额</div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item3_icon.png" />
+              <div class="t">{{ formatDecimal(tradeCount.saveAmount || 0) }}</div>
+            </div>
+          </div>
+          <div class="item item4">
+            <div class="title">优惠笔数</div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item4_icon.png" />
+              <div class="t">{{ tradeCount.saveNum || 0 }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 销售额 -->
+    <div class="chart_wrap" style="display: flex">
+      <div class="item">
+        <div class="header">
+          <div class="tab_wrap">
+            <div
+              class="item"
+              :class="{ active: lineChartType == 0 }"
+              @click="lineChartTypeChange(0)"
+            >
+              销售趋势
+            </div>
+            <div
+              class="item"
+              :class="{ active: lineChartType == 1 }"
+              @click="lineChartTypeChange(1)"
+            >
+              支付占比
+            </div>
+          </div>
+          <el-radio-group v-model="saleActive" @change="lineChartTypeChange(lineChartType)">
+            <el-radio-button value="7">近7天</el-radio-button>
+            <el-radio-button value="30">30天</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div
+          class="chart"
+          ref="saleChart"
+          v-loading="saleLoading"
+          style="height: 350px"
+          v-show="lineChartType == 0"
+        ></div>
+        <div
+          class="chart"
+          ref="payChart"
+          v-loading="payChartLoading"
+          style="height: 350px"
+          v-show="lineChartType == 1"
+        ></div>
+      </div>
+      <!-- 商品销售排行 -->
+      <div class="item" style="margin-left: 20px">
+        <div class="header">
+          <div class="tab_wrap">
+            <div class="item active">商品销售排行</div>
+          </div>
+          <el-radio-group v-model="saleTableActive" @change="rankChange">
+            <!-- <el-radio-button label="1">今天</el-radio-button> -->
+            <el-radio-button value="7">近7天</el-radio-button>
+            <el-radio-button value="30">30天</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="sale_data">
+          <!-- <div class="card">
+            <div class="sale_data_header">
+              <div class="card_title">销售数量</div>
+            </div>
+            <div class="number">{{ productCount }}</div>
+            <div class="product_chart_wrap" ref="productCountChart"></div>
+          </div> -->
+          <!-- <div class="card">
+            <div class="sale_data_header">
+              <div class="card_title">销售金额</div>
+            </div>
+            <div class="number">￥{{ productSum }}</div>
+            <div class="product_chart_wrap" ref="productSumChart"></div>
+          </div> -->
+        </div>
+        <div class="table">
+          <el-table :data="saleTable" v-loading="saleTableLoading">
+            <!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
+            <el-table-column label="商品名称" prop="productName"></el-table-column>
+            <el-table-column label="数量" prop="salesNum"></el-table-column>
+            <el-table-column label="金额" prop="salesAmount"></el-table-column>
+          </el-table>
+          <div
+            class="head-container"
+            style="padding-top: 20px; display: flex; justify-content: flex-end"
+          >
+            <el-pagination
+              :total="saleTableTotal"
+              :page-size="saleTableSize"
+              :current-page="saleTablePage + 1"
+              @current-change="paginationChange"
+              layout="total, prev, pager, next, jumper"
+            ></el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="chart_wrap" style="display: flex;">
+      <div class="item" style="margin-left: 20px;">
+        <div class="header">
+          <div class="tab_wrap">
+            <div class="item active">支付占比类型</div>
+          </div>
+          <el-radio-group v-model="payChartDay" @change="datePayType">
+            <el-radio-button label="7">近7天</el-radio-button>
+            <el-radio-button label="30">30天</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div style="height: 400px;margin-top: 30px;" ref="payChart" v-loading="payChartLoading"></div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import {
+  summaryGet,
+  summaryTodayGet,
+  dateProduct,
+  dateAmount,
+  datePayType,
+  summaryDateGet,
+  summarytrade,
+} from "@/api/data/index.js";
+import dayjs from "dayjs";
+import * as echarts from "echarts";
+import { debounce, formatDecimal } from "@/utils/tools.js";
+export default {
+  name: "home",
+  data() {
+    return {
+      formatDecimal,
+      topData: "",
+      saleTab: "sale",
+      saleActive: "7",
+      cardPayChart: null,
+      cardCountChart: null,
+      cardUserChart: null,
+      saleLoading: false,
+      saleChart: null,
+      payChartDay: "7",
+      payChartLoading: false,
+      payChart: null,
+      chartType: 1,
+      productCount: 0,
+      productSum: 0,
+      saleTableActive: "7",
+      saleTable: [],
+      saleTableLoading: false,
+      saleTablePage: 0,
+      saleTableTotal: 0,
+      saleTableSize: 5,
+      __resizeHandler: null,
+      productCountChart: null,
+      productSumChart: null,
+      lineChartType: 0,
+      timeValue: "0",
+      query: {
+        createdAt: "",
+      },
+      tradeLoading: false,
+      tradeSale: {
+        payCount: [],
+      },
+      tradeVip: "",
+      tradeCount: "",
+    };
+  },
+  mounted() {
+    // 增加首页提示是否账号30天过期
+    let date = dayjs(localStorage.getItem("expireDate")).diff(dayjs().format("YYYY-MM-DD"), "day");
+    if (date <= 30 && date >= 0) {
+      this.$alert(
+        `店铺账号有限期至${localStorage.getItem("expireDate")}，店铺账号到期剩余${date}天!`,
+        "提示"
+      );
+    }
+    // this.summaryGet();
+    this.dateAmount();
+    this.dateProduct();
+    // this.summaryDateGet();
+    this.timeChange("0");
+
+    this.__resizeHandler = debounce(() => {
+      if (this.saleChart) {
+        this.saleChart.resize();
+      }
+      if (this.payChart) {
+        this.payChart.resize();
+      }
+      if (this.cardPayChart) {
+        this.cardPayChart.resize();
+      }
+      if (this.cardUserChart) {
+        this.cardUserChart.resize();
+      }
+      if (this.productCountChart) {
+        this.productCountChart.resize();
+      }
+      // if (this.productSumChart) {
+      //   this.productSumChart.resize();
+      // }
+    }, 100);
+    window.addEventListener("resize", this.__resizeHandler);
+    // this.initCardUserChart();
+  },
+  methods: {
+    // 切换时间
+    timeChange(e) {
+      const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
+      switch (e) {
+        case "":
+          // 全部
+          this.query.createdAt = [];
+          break;
+        case "0":
+          // 今天
+          this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
+          break;
+        case "-1":
+          // 昨天
+          this.query.createdAt = [
+            dayjs().add(-1, "d").format(format[0]),
+            dayjs().add(-1, "d").format(format[1]),
+          ];
+          break;
+        case "-7":
+          // 最近7天
+          this.query.createdAt = [
+            dayjs().add(-7, "d").format(format[0]),
+            dayjs().format(format[1]),
+          ];
+          break;
+        case "-30":
+          // 最近7天
+          this.query.createdAt = [
+            dayjs().add(-30, "d").format(format[0]),
+            dayjs().format(format[1]),
+          ];
+          break;
+        case "week":
+          // 本周
+          this.query.createdAt = [
+            dayjs().startOf("week").format(format[0]),
+            dayjs().endOf("week").format(format[1]),
+          ];
+          break;
+        case "month":
+          // 本周
+          this.query.createdAt = [
+            dayjs().startOf("month").format(format[0]),
+            dayjs().endOf("month").format(format[1]),
+          ];
+          break;
+        case "custom":
+          // 自定义
+          this.query.createdAt = [];
+          break;
+        default:
+          break;
+      }
+      if (e != "custom") {
+        this.summarytrade();
+      }
+    },
+    // 获取营业板块数据
+    async summarytrade() {
+      try {
+        this.tradeLoading = true;
+        const res = await summarytrade({
+          startTime: this.query.createdAt[0],
+          endTime: this.query.createdAt[1],
+        });
+        this.tradeLoading = false;
+        this.tradeSale = res.sale;
+        this.tradeVip = res.vip;
+        this.tradeCount = res.count;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    lineChartTypeChange(i) {
+      this.lineChartType = i;
+      if (i == 0) {
+        this.dateAmount();
+      } else {
+        this.datePayType();
+      }
+    },
+    // 初始化支付笔数柱状图
+    initCardPayChart(time = [], data = []) {
+      this.cardPayChart = echarts.init(this.$refs.cardPayChart);
+      this.cardPayChart.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        series: [
+          {
+            data: data,
+            type: "bar",
+            barWidth: "30%",
+          },
+        ],
+      });
+    },
+    // 初始化访问量柱状图
+    initCardCountChart(time = [], data = []) {
+      this.cardCountChart = echarts.init(this.$refs.cardCountChart);
+      this.cardCountChart.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        series: [
+          {
+            data: data,
+            type: "bar",
+            barWidth: "30%",
+          },
+        ],
+      });
+    },
+    // 初始化用户数折线图
+    initCardUserChart(time = [], data = []) {
+      this.cardUserChart = echarts.init(this.$refs.cardUserChart);
+      this.cardUserChart.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          x: 0,
+          y: 10,
+          x2: 0,
+          y2: 2,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        series: [
+          {
+            data: data,
+            type: "line",
+            symbol: "none",
+          },
+        ],
+      });
+    },
+    // 初始化销售额图标
+    initSaleChart(time, data) {
+      this.saleChart = null;
+      this.saleChart = echarts.init(this.$refs.saleChart);
+      this.saleChart.setOption({
+        title: {
+          text: "销售趋势",
+          x: "center",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#999",
+              },
+            },
+            axisLabel: {
+              rotate: time.length <= 7 ? 0 : 45,
+              interval: 0,
+              fontSize: "9",
+            },
+          },
+        ],
+        color: ["#409eff", "#FFC83A", "#F98B26"],
+        yAxis: [
+          {
+            type: "value",
+            axisLine: {
+              lineStyle: {
+                color: "#999",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#ececec",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "订单金额",
+            type: "bar",
+            barWidth: time.length <= 7 ? "50%" : "30%",
+            data: data.map((item) => item.orderAmount),
+          },
+          // {
+          //   name: '实收金额',
+          //   type: "bar",
+          //   barWidth: time.length <= 7 ? "30%" : "20%",
+          //   data: data.map(item => item.actualAmount),
+          // },
+          // {
+          //   name: '优惠金额',
+          //   type: "bar",
+          //   barWidth: time.length <= 7 ? "30%" : "20%",
+          //   data: data.map(item => item.discountAmount),
+          // }
+        ],
+      });
+    },
+    // 初始化销售额图表
+    initPayChart(data) {
+      this.payChart = echarts.init(this.$refs.payChart);
+      this.payChart.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: (params) => {
+            return `${params.name}：${params.value}笔`;
+          },
+        },
+        legend: {
+          top: "5%",
+          left: "center",
+        },
+        color: [
+          "#409eff",
+          "#91cc75",
+          "#fac858",
+          "#ee6666",
+          "#73c0de",
+          "#3ba272",
+          "#fc8452",
+          "#9a60b4",
+          "#ea7ccc",
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 20,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: data,
+          },
+        ],
+      });
+    },
+    // 获取销售额柱状图数据
+    async dateAmount() {
+      try {
+        this.saleLoading = true;
+        const res = await dateAmount(this.saleActive);
+        const data = res.total.map((item) => {
+          return {
+            orderAmount: item.orderAmount,
+            // actualAmount: item.actualAmount,
+            // discountAmount: item.discountAmount
+          };
+        });
+        const time = res.total.map((item) => item.tradeDay);
+        this.initSaleChart(time, data);
+        setTimeout(() => {
+          this.saleLoading = false;
+        }, 300);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    paginationChange(e) {
+      this.saleTablePage = e - 1;
+      this.dateProduct();
+    },
+    // 获取销售额排行表格数据
+    async dateProduct() {
+      try {
+        this.saleTableLoading = true;
+        const res = await dateProduct(this.saleTableActive, this.saleTablePage, this.saleTableSize);
+        this.saleTable = res.productList.content;
+        this.saleTableTotal = res.productList.totalElements;
+        this.productCount = res.productCount.payAmount;
+        this.productSum = res.productSum.payAmount;
+
+        this.summaryDateGet(res.countList);
+        setTimeout(() => {
+          this.saleTableLoading = false;
+        }, 300);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 支付类型占比 饼图
+    async datePayType() {
+      try {
+        this.payChartLoading = true;
+        const res = await datePayType(this.saleActive);
+        const data = res.countPayType.map((item) => {
+          return {
+            value: item.count,
+            name: item.payType,
+          };
+        });
+        setTimeout(() => {
+          this.payChartLoading = false;
+        }, 300);
+        this.initPayChart(data);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 汇总数据
+    async summaryGet() {
+      try {
+        const res1 = await summaryGet();
+        const res2 = await summaryTodayGet();
+        this.topData = {
+          ...res1,
+          ...res2,
+        };
+        let payTime = res1.countDateList.map((item) => item.tradeDay);
+        let payData = res1.countDateList.map((item) => item.count);
+
+        let countTime = res1.visitsCountList.map((item) => item.tradeDay);
+        let countData = res1.visitsCountList.map((item) => item.count);
+
+        this.initCardPayChart(payTime, payData);
+        this.initCardCountChart(countTime, countData);
+        console.log(this.topData);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    rankChange() {
+      this.dateProduct();
+      // this.summaryDateGet();
+    },
+    // 初始化销售图标
+    initProduceChart(p1, p2) {
+      this.productCountChart = echarts.init(this.$refs.productCountChart);
+      // this.productSumChart = echarts.init(this.$refs.productSumChart);
+
+      this.productCountChart.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0,
+        },
+        xAxis: [
+          {
+            boundaryGap: false,
+            type: "category",
+            data: p1[0],
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        series: [
+          {
+            data: p1[1],
+            type: "line",
+            symbol: "none",
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#409eff", // 渐变颜色
+                },
+                {
+                  offset: 1,
+                  color: "#409eff", // 渐变颜色
+                },
+              ]),
+            },
+          },
+        ],
+      });
+
+      // this.productSumChart.setOption({
+      //   tooltip: {
+      //     trigger: "axis"
+      //   },
+      //   grid: {
+      //     x: 0,
+      //     y: 0,
+      //     x2: 0,
+      //     y2: 0
+      //   },
+      //   xAxis: [
+      //     {
+      //       boundaryGap: false,
+      //       type: "category",
+      //       data: p2[0],
+      //       show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+      //       axisTick: {
+      //         show: false // 不显示坐标轴刻度线
+      //       },
+      //       axisLine: {
+      //         show: false // 不显示坐标轴线
+      //       },
+      //       axisLabel: {
+      //         show: false // 不显示坐标轴上的文字
+      //       },
+      //       splitLine: {
+      //         show: false // 不显示网格线
+      //       }
+      //     }
+      //   ],
+      //   color: "#409eff",
+      //   yAxis: [
+      //     {
+      //       type: "value",
+      //       show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+      //       axisTick: {
+      //         show: false // 不显示坐标轴刻度线
+      //       },
+      //       axisLine: {
+      //         show: false // 不显示坐标轴线
+      //       },
+      //       axisLabel: {
+      //         show: false // 不显示坐标轴上的文字
+      //       },
+      //       splitLine: {
+      //         show: false // 不显示网格线
+      //       }
+      //     }
+      //   ],
+      //   series: [
+      //     {
+      //       data: p2[1],
+      //       type: "line",
+      //       symbol: "none",
+      //       smooth: true,
+      //       areaStyle: {
+      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //           {
+      //             offset: 0,
+      //             color: "#409eff" // 渐变颜色
+      //           },
+      //           {
+      //             offset: 1,
+      //             color: "#409eff" // 渐变颜色
+      //           }
+      //         ])
+      //       }
+      //     }
+      //   ]
+      // });
+    },
+    // 日期汇总数据
+    async summaryDateGet(res) {
+      try {
+        console.log(res);
+
+        // const res = await summaryDateGet(this.saleTableActive);
+        let p1 = [res.map((item) => item.tradeDay), res.map((item) => item.saleNum)];
+        let p2 = [res.map((item) => item.tradeDay), res.map((item) => item.saleAmount)];
+
+        // console.log(p1);
+        // console.log(p2);
+
+        // this.initProduceChart(p1, p2);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.popper {
+  border: 1px solid #d9d9d9 !important;
+}
+</style>
+<style scoped lang="scss">
+.tips_row {
+  width: 300px;
+  padding: 0 10px;
+
+  .item {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    color: #666;
+    justify-content: space-between;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #d9d9d9;
+    }
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        font-size: 20px;
+        margin-right: 10px;
+      }
+    }
+
+    .num {
+      color: #1890ff;
+    }
+  }
+}
+
+.app-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+}
+
+.h_card_wrap {
+  .status_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .dot {
+        $size: 6px;
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        background-color: #1890ff;
+        margin-right: 10px;
+      }
+    }
+
+    .time {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .content {
+    background-color: #fff;
+    margin-top: 15px;
+    padding: 20px;
+
+    .top {
+      display: flex;
+
+      .item {
+        flex: 1;
+
+        &.earnings {
+          display: flex;
+        }
+
+        &.data {
+          margin-left: 40px;
+          background: url("../../assets/images/data_home_bg1.png") no-repeat center center / cover;
+          display: flex;
+          align-items: center;
+        }
+
+        .data_item {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .data_item_right {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+
+          .t {
+            width: 200px;
+            color: #333;
+            display: flex;
+
+            &:not(:first-child) {
+              margin-top: 20px;
+            }
+          }
+
+          .n {
+            color: #1890ff;
+            margin-left: 20px;
+          }
+        }
+
+        .num_wrap {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .num {
+            font-size: 30px;
+            color: #1890ff;
+          }
+
+          .tips {
+            font-size: 12px;
+            margin-top: 10px;
+          }
+        }
+
+        .line_wrap {
+          flex: 1;
+          padding-left: 20px;
+
+          .line_item {
+            &:not(:first-child) {
+              margin-top: 20px;
+            }
+
+            .line_item_top {
+              display: flex;
+              justify-content: space-between;
+              font-size: 12px;
+
+              .t {
+                color: #999;
+              }
+            }
+
+            .line_gropress {
+              display: flex;
+              margin-top: 6px;
+              background-color: #f6f6f6;
+
+              .gropress {
+                height: 5px;
+
+                &.l {
+                  background-color: #1890ff;
+                }
+
+                &.r {
+                  background-color: #ff3f3f;
+                }
+              }
+            }
+
+            .line_btm {
+              display: flex;
+              justify-content: space-between;
+              margin-top: 5px;
+
+              .icon {
+                color: #a2a2a2;
+                position: relative;
+                left: -5px;
+                font-size: 12px;
+              }
+
+              .info {
+                font-size: 12px;
+
+                .l_t {
+                  color: #1890ff;
+                }
+
+                .l_r {
+                  color: #ff3f3f;
+                  margin-left: 10px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .btm {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+
+      .item {
+        width: 200px;
+        height: 83px;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-left: 18px;
+
+        &.item1 {
+          background-image: url("../../assets/images/data_home_item1.png");
+        }
+
+        &.item2 {
+          background-image: url("../../assets/images/data_home_item2.png");
+        }
+
+        &.item3 {
+          background-image: url("../../assets/images/data_home_item3.png");
+        }
+
+        &.item4 {
+          background-image: url("../../assets/images/data_home_item4.png");
+        }
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #333;
+          font-size: 14px;
+
+          .icon {
+            font-size: 12px;
+            color: #999;
+            margin-left: 6px;
+          }
+        }
+
+        .icon_wrap {
+          display: flex;
+          align-items: center;
+          margin-top: 10px;
+
+          .img {
+            width: 36px;
+            height: 36px;
+          }
+
+          .t {
+            font-size: 24px;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.card_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  .card {
+    flex: 1;
+    background-color: #fff;
+    border-radius: 2px;
+    padding: 0 20px;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      color: #999;
+      padding-top: 20px;
+
+      .card_title {
+        font-size: 14px;
+        flex: 1;
+      }
+    }
+
+    .number {
+      padding: 20px 0 10px 0;
+      font-size: 24px;
+      height: 60px;
+    }
+
+    .row {
+      height: 50px;
+      color: #555;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #ececec;
+      }
+
+      .icon {
+        color: rgb(255, 85, 85);
+        margin-left: 4px;
+      }
+
+      .dot {
+        $size: 6px;
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        background-color: #1890ff;
+        margin-right: 6px;
+      }
+    }
+  }
+}
+
+.chart_wrap {
+  margin-top: 20px;
+
+  .sale_data {
+    display: flex;
+
+    .card {
+      flex: 1;
+      background-color: #fff;
+      border-radius: 2px;
+      padding: 0 20px;
+
+      .sale_data_header {
+        display: flex;
+        justify-content: space-between;
+        color: #999;
+        padding-top: 20px;
+
+        .card_title {
+          font-size: 14px;
+          flex: 1;
+        }
+      }
+
+      .number {
+        padding-top: 10px;
+        font-size: 24px;
+        height: 60px;
+      }
+
+      .product_chart_wrap {
+        height: 50px;
+      }
+    }
+  }
+
+  .item {
+    flex: 1;
+    background-color: #fff;
+    border-radius: 2px;
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #ececec;
+      padding: 0 20px;
+
+      .tab_wrap {
+        display: flex;
+        $color: #1890ff;
+
+        .item {
+          padding: 0 10px;
+          height: 60px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          margin-right: 20px;
+
+          &.active {
+            position: relative;
+            color: $color;
+
+            &::after {
+              content: "";
+              width: 100%;
+              border-bottom: 2px solid $color;
+              position: absolute;
+              bottom: 0;
+              left: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .chart {
+      padding: 20px 0;
+      height: 300px;
+    }
+
+    .table {
+      padding: 20px;
+    }
+  }
+}
+</style>
diff --git a/src/views/data/index.vue b/src/views/data/index.vue
index 8a98c27..41a40c8 100644
--- a/src/views/data/index.vue
+++ b/src/views/data/index.vue
@@ -1,1479 +1 @@
-<template>
-  <div class="app-container" style="padding-bottom: 100px">
-    <!-- <div class="card_wrap">
-      <div class="card">
-        <div class="header">
-          <div class="card_title">总销售额</div>
-          <el-tooltip effect="dark" content="订单支付金额" placement="top">
-            <i class="icon el-icon-warning-outline"></i>
-          </el-tooltip>
-        </div>
-        <div class="number">{{ topData.totalSales || 0 }}</div>
-        <div class="row">平均每单{{ topData.averageSales || 0 }}</div>
-        <div class="row">今日销售额{{ topData.totalSalesToday || 0 }}</div>
-      </div>
-      <div class="card">
-        <div class="header">
-          <div class="card_title">支付笔数</div>
-        </div>
-        <div class="number">{{ topData.paymentsNumber }}</div>
-        <div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
-        <div class="row">
-          今日支付笔数{{ topData.paymentsNumberToday || 0 }}
-        </div>
-      </div>
-      <div class="card">
-        <div class="header">
-          <div class="card_title">访问量</div>
-        </div>
-        <div class="number">{{ topData.totalVisits }}</div>
-        <div class="row" ref="cardCountChart" style="padding-bottom: 2px;"></div>
-        <div class="row">
-          <div class="dot"></div>
-          今日访问 {{ topData.totalVisitsToday || 0 }}
-        </div>
-      </div>
-      <div class="card">
-        <div class="header">
-          <div class="card_title">用户数</div>
-        </div>
-        <div class="number">{{ topData.totalUser }}</div>
-        <div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
-        <div class="row">
-          今日新增 {{ topData.userToday || 0 }}
-          <i class="icon el-icon-caret-top"></i>
-        </div>
-      </div>
-    </div> -->
-    <div class="h_card_wrap">
-      <div class="status_wrap">
-        <div class="left">
-          <div class="dot"></div>
-          <span>营业</span>
-        </div>
-        <div class="time_wrap">
-          <el-radio-group v-model="timeValue" @change="timeChange">
-            <el-radio-button value="0">今天</el-radio-button>
-            <el-radio-button value="-1">昨天</el-radio-button>
-            <el-radio-button value="-7">最近7天</el-radio-button>
-            <el-radio-button value="-30">最近30天</el-radio-button>
-            <el-radio-button value="week">本周</el-radio-button>
-            <el-radio-button value="month">本月</el-radio-button>
-            <el-radio-button value="custom">自定义</el-radio-button>
-          </el-radio-group>
-          <el-date-picker
-            v-model="query.createdAt"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :default-time="['00:00:00', '23:59:59']"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            v-if="timeValue == 'custom'"
-            @change="summarytrade"
-          ></el-date-picker>
-        </div>
-      </div>
-      <div class="content" v-loading="tradeLoading">
-        <div class="top">
-          <div class="item earnings">
-            <div class="num_wrap">
-              <div class="num">{{ formatDecimal(tradeSale.incomeAmountAll || 0) }}</div>
-              <div class="tips">
-                营业实收（元）
-                <el-tooltip popper-class="popper" effect="light" placement="bottom">
-                  <div class="tips_row" slot="content">
-                    <div class="item" v-for="(item, index) in tradeSale.payCount" :key="index">
-                      <div class="left">
-                        <img class="icon" :src="item.icon" />
-                        <span>{{ item.payType }}</span>
-                      </div>
-                      <span class="num">{{ item.payAmount }}</span>
-                    </div>
-                  </div>
-                  <el-icon class="el-icon-question" />
-                </el-tooltip>
-              </div>
-            </div>
-            <div class="line_wrap">
-              <div class="line_item">
-                <div class="line_item_top">
-                  <div>销售金额（元）</div>
-                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div> -->
-                </div>
-                <div class="line_gropress">
-                  <div
-                    class="gropress l"
-                    :style="{
-                      width: `${
-                        tradeSale.incomeAmount
-                          ? (tradeSale.incomeAmount / tradeSale.totalSaleAmount) * 100
-                          : 0
-                      }%`,
-                    }"
-                  ></div>
-                  <div
-                    class="gropress r"
-                    :style="{
-                      width: `${
-                        tradeSale.refundAmount
-                          ? (tradeSale.refundAmount / tradeSale.totalSaleAmount) * 100
-                          : 0
-                      }%`,
-                    }"
-                  ></div>
-                </div>
-                <div class="line_btm">
-                  <el-icon class="icon el-icon-caret-right" />
-                  <div class="info">
-                    <span class="l_t">收：{{ formatDecimal(tradeSale.incomeAmount || 0) }}</span>
-                    <span class="l_r">退：{{ formatDecimal(tradeSale.refundAmount || 0) }}</span>
-                  </div>
-                </div>
-              </div>
-              <div class="line_item">
-                <div class="line_item_top">
-                  <div>充值金额（元）</div>
-                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div> -->
-                </div>
-                <div class="line_gropress">
-                  <div
-                    class="gropress l"
-                    :style="{
-                      width: `${
-                        tradeSale.inAmount
-                          ? (tradeSale.inAmount / tradeSale.totalVipAmount) * 100
-                          : 0
-                      }%`,
-                    }"
-                  ></div>
-                  <div
-                    class="gropress r"
-                    :style="{
-                      width: `${
-                        tradeSale.inAmount
-                          ? (tradeSale.outAmount / tradeSale.totalVipAmount) * 100
-                          : 0
-                      }%`,
-                    }"
-                  ></div>
-                </div>
-                <div class="line_btm">
-                  <el-icon class="icon el-icon-caret-right" />
-                  <div class="info">
-                    <span class="l_t">收：{{ formatDecimal(tradeSale.inAmount || 0) }}</span>
-                    <span class="l_r">退：{{ formatDecimal(tradeSale.outAmount || 0) }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="item data">
-            <div class="data_item">
-              <div class="num_wrap">
-                <div class="num">{{ formatDecimal(tradeVip.useAmount || 0) }}</div>
-                <div class="tips">会员消费（元）</div>
-              </div>
-            </div>
-            <div class="data_item_right">
-              <div class="t">
-                <span>新增会员数</span>
-                <span class="n">{{ tradeVip.newFlow || 0 }}(人)</span>
-              </div>
-              <div class="t">
-                <span>会员消费笔数</span>
-                <span class="n">{{ tradeVip.useNum || 0 }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="btm">
-          <div class="item item1">
-            <div class="title">客单价</div>
-            <div class="icon_wrap">
-              <img class="img" src="@/assets/images/data_home_item1_icon.png" />
-              <div class="t">{{ formatDecimal(tradeCount.unitPrice || 0) }}</div>
-            </div>
-          </div>
-          <div class="item item2">
-            <div class="title">
-              翻台率
-              <el-tooltip
-                effect="dark"
-                content="翻台率=（客单数-桌台数）/桌台数*100%"
-                placement="top"
-              >
-                <el-icon class="icon el-icon-question" />
-              </el-tooltip>
-            </div>
-            <div class="icon_wrap">
-              <img class="img" src="@/assets/images/data_home_item2_icon.png" />
-              <div class="t">{{ tradeCount.turnoverRate }}</div>
-            </div>
-          </div>
-          <div class="item item3">
-            <div class="title">优惠金额</div>
-            <div class="icon_wrap">
-              <img class="img" src="@/assets/images/data_home_item3_icon.png" />
-              <div class="t">{{ formatDecimal(tradeCount.saveAmount || 0) }}</div>
-            </div>
-          </div>
-          <div class="item item4">
-            <div class="title">优惠笔数</div>
-            <div class="icon_wrap">
-              <img class="img" src="@/assets/images/data_home_item4_icon.png" />
-              <div class="t">{{ tradeCount.saveNum || 0 }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 销售额 -->
-    <div class="chart_wrap" style="display: flex">
-      <div class="item">
-        <div class="header">
-          <div class="tab_wrap">
-            <div
-              class="item"
-              :class="{ active: lineChartType == 0 }"
-              @click="lineChartTypeChange(0)"
-            >
-              销售趋势
-            </div>
-            <div
-              class="item"
-              :class="{ active: lineChartType == 1 }"
-              @click="lineChartTypeChange(1)"
-            >
-              支付占比
-            </div>
-          </div>
-          <el-radio-group v-model="saleActive" @change="lineChartTypeChange(lineChartType)">
-            <el-radio-button value="7">近7天</el-radio-button>
-            <el-radio-button value="30">30天</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div
-          class="chart"
-          ref="saleChart"
-          v-loading="saleLoading"
-          style="height: 350px"
-          v-show="lineChartType == 0"
-        ></div>
-        <div
-          class="chart"
-          ref="payChart"
-          v-loading="payChartLoading"
-          style="height: 350px"
-          v-show="lineChartType == 1"
-        ></div>
-      </div>
-      <!-- 商品销售排行 -->
-      <div class="item" style="margin-left: 20px">
-        <div class="header">
-          <div class="tab_wrap">
-            <div class="item active">商品销售排行</div>
-          </div>
-          <el-radio-group v-model="saleTableActive" @change="rankChange">
-            <!-- <el-radio-button label="1">今天</el-radio-button> -->
-            <el-radio-button value="7">近7天</el-radio-button>
-            <el-radio-button value="30">30天</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div class="sale_data">
-          <!-- <div class="card">
-            <div class="sale_data_header">
-              <div class="card_title">销售数量</div>
-            </div>
-            <div class="number">{{ productCount }}</div>
-            <div class="product_chart_wrap" ref="productCountChart"></div>
-          </div> -->
-          <!-- <div class="card">
-            <div class="sale_data_header">
-              <div class="card_title">销售金额</div>
-            </div>
-            <div class="number">￥{{ productSum }}</div>
-            <div class="product_chart_wrap" ref="productSumChart"></div>
-          </div> -->
-        </div>
-        <div class="table">
-          <el-table :data="saleTable" v-loading="saleTableLoading">
-            <!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
-            <el-table-column label="商品名称" prop="productName"></el-table-column>
-            <el-table-column label="数量" prop="salesNum"></el-table-column>
-            <el-table-column label="金额" prop="salesAmount"></el-table-column>
-          </el-table>
-          <div
-            class="head-container"
-            style="padding-top: 20px; display: flex; justify-content: flex-end"
-          >
-            <el-pagination
-              :total="saleTableTotal"
-              :page-size="saleTableSize"
-              :current-page="saleTablePage + 1"
-              @current-change="paginationChange"
-              layout="total, prev, pager, next, jumper"
-            ></el-pagination>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- <div class="chart_wrap" style="display: flex;">
-      <div class="item" style="margin-left: 20px;">
-        <div class="header">
-          <div class="tab_wrap">
-            <div class="item active">支付占比类型</div>
-          </div>
-          <el-radio-group v-model="payChartDay" @change="datePayType">
-            <el-radio-button label="7">近7天</el-radio-button>
-            <el-radio-button label="30">30天</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div style="height: 400px;margin-top: 30px;" ref="payChart" v-loading="payChartLoading"></div>
-      </div>
-    </div> -->
-  </div>
-</template>
-
-<script>
-import {
-  summaryGet,
-  summaryTodayGet,
-  dateProduct,
-  dateAmount,
-  datePayType,
-  summaryDateGet,
-  summarytrade,
-} from "@/api/data/index.js";
-import dayjs from "dayjs";
-import * as echarts from "echarts";
-import { debounce, formatDecimal } from "@/utils/tools.js";
-export default {
-  name: "home",
-  data() {
-    return {
-      formatDecimal,
-      topData: "",
-      saleTab: "sale",
-      saleActive: "7",
-      cardPayChart: null,
-      cardCountChart: null,
-      cardUserChart: null,
-      saleLoading: false,
-      saleChart: null,
-      payChartDay: "7",
-      payChartLoading: false,
-      payChart: null,
-      chartType: 1,
-      productCount: 0,
-      productSum: 0,
-      saleTableActive: "7",
-      saleTable: [],
-      saleTableLoading: false,
-      saleTablePage: 0,
-      saleTableTotal: 0,
-      saleTableSize: 5,
-      __resizeHandler: null,
-      productCountChart: null,
-      productSumChart: null,
-      lineChartType: 0,
-      timeValue: "0",
-      query: {
-        createdAt: "",
-      },
-      tradeLoading: false,
-      tradeSale: {
-        payCount: [],
-      },
-      tradeVip: "",
-      tradeCount: "",
-    };
-  },
-  mounted() {
-    // 增加首页提示是否账号30天过期
-    let date = dayjs(localStorage.getItem("expireDate")).diff(dayjs().format("YYYY-MM-DD"), "day");
-    if (date <= 30 && date >= 0) {
-      this.$alert(
-        `店铺账号有限期至${localStorage.getItem("expireDate")}，店铺账号到期剩余${date}天!`,
-        "提示"
-      );
-    }
-    // this.summaryGet();
-    this.dateAmount();
-    this.dateProduct();
-    // this.summaryDateGet();
-    this.timeChange("0");
-
-    this.__resizeHandler = debounce(() => {
-      if (this.saleChart) {
-        this.saleChart.resize();
-      }
-      if (this.payChart) {
-        this.payChart.resize();
-      }
-      if (this.cardPayChart) {
-        this.cardPayChart.resize();
-      }
-      if (this.cardUserChart) {
-        this.cardUserChart.resize();
-      }
-      if (this.productCountChart) {
-        this.productCountChart.resize();
-      }
-      // if (this.productSumChart) {
-      //   this.productSumChart.resize();
-      // }
-    }, 100);
-    window.addEventListener("resize", this.__resizeHandler);
-    // this.initCardUserChart();
-  },
-  methods: {
-    // 切换时间
-    timeChange(e) {
-      const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
-      switch (e) {
-        case "":
-          // 全部
-          this.query.createdAt = [];
-          break;
-        case "0":
-          // 今天
-          this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
-          break;
-        case "-1":
-          // 昨天
-          this.query.createdAt = [
-            dayjs().add(-1, "d").format(format[0]),
-            dayjs().add(-1, "d").format(format[1]),
-          ];
-          break;
-        case "-7":
-          // 最近7天
-          this.query.createdAt = [
-            dayjs().add(-7, "d").format(format[0]),
-            dayjs().format(format[1]),
-          ];
-          break;
-        case "-30":
-          // 最近7天
-          this.query.createdAt = [
-            dayjs().add(-30, "d").format(format[0]),
-            dayjs().format(format[1]),
-          ];
-          break;
-        case "week":
-          // 本周
-          this.query.createdAt = [
-            dayjs().startOf("week").format(format[0]),
-            dayjs().endOf("week").format(format[1]),
-          ];
-          break;
-        case "month":
-          // 本周
-          this.query.createdAt = [
-            dayjs().startOf("month").format(format[0]),
-            dayjs().endOf("month").format(format[1]),
-          ];
-          break;
-        case "custom":
-          // 自定义
-          this.query.createdAt = [];
-          break;
-        default:
-          break;
-      }
-      if (e != "custom") {
-        this.summarytrade();
-      }
-    },
-    // 获取营业板块数据
-    async summarytrade() {
-      try {
-        this.tradeLoading = true;
-        const res = await summarytrade({
-          startTime: this.query.createdAt[0],
-          endTime: this.query.createdAt[1],
-        });
-        this.tradeLoading = false;
-        this.tradeSale = res.sale;
-        this.tradeVip = res.vip;
-        this.tradeCount = res.count;
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    lineChartTypeChange(i) {
-      this.lineChartType = i;
-      if (i == 0) {
-        this.dateAmount();
-      } else {
-        this.datePayType();
-      }
-    },
-    // 初始化支付笔数柱状图
-    initCardPayChart(time = [], data = []) {
-      this.cardPayChart = echarts.init(this.$refs.cardPayChart);
-      this.cardPayChart.setOption({
-        tooltip: {
-          trigger: "axis",
-        },
-        grid: {
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 0,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: time,
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        color: "#409eff",
-        yAxis: [
-          {
-            type: "value",
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        series: [
-          {
-            data: data,
-            type: "bar",
-            barWidth: "30%",
-          },
-        ],
-      });
-    },
-    // 初始化访问量柱状图
-    initCardCountChart(time = [], data = []) {
-      this.cardCountChart = echarts.init(this.$refs.cardCountChart);
-      this.cardCountChart.setOption({
-        tooltip: {
-          trigger: "axis",
-        },
-        grid: {
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 0,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: time,
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        color: "#409eff",
-        yAxis: [
-          {
-            type: "value",
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        series: [
-          {
-            data: data,
-            type: "bar",
-            barWidth: "30%",
-          },
-        ],
-      });
-    },
-    // 初始化用户数折线图
-    initCardUserChart(time = [], data = []) {
-      this.cardUserChart = echarts.init(this.$refs.cardUserChart);
-      this.cardUserChart.setOption({
-        tooltip: {
-          trigger: "axis",
-        },
-        grid: {
-          x: 0,
-          y: 10,
-          x2: 0,
-          y2: 2,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: time,
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        color: "#409eff",
-        yAxis: [
-          {
-            type: "value",
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        series: [
-          {
-            data: data,
-            type: "line",
-            symbol: "none",
-          },
-        ],
-      });
-    },
-    // 初始化销售额图标
-    initSaleChart(time, data) {
-      this.saleChart = null;
-      this.saleChart = echarts.init(this.$refs.saleChart);
-      this.saleChart.setOption({
-        title: {
-          text: "销售趋势",
-          x: "center",
-        },
-        tooltip: {
-          trigger: "axis",
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: time,
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              lineStyle: {
-                color: "#999",
-              },
-            },
-            axisLabel: {
-              rotate: time.length <= 7 ? 0 : 45,
-              interval: 0,
-              fontSize: "9",
-            },
-          },
-        ],
-        color: ["#409eff", "#FFC83A", "#F98B26"],
-        yAxis: [
-          {
-            type: "value",
-            axisLine: {
-              lineStyle: {
-                color: "#999",
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                type: "dashed",
-                color: "#ececec",
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            name: "订单金额",
-            type: "bar",
-            barWidth: time.length <= 7 ? "50%" : "30%",
-            data: data.map((item) => item.orderAmount),
-          },
-          // {
-          //   name: '实收金额',
-          //   type: "bar",
-          //   barWidth: time.length <= 7 ? "30%" : "20%",
-          //   data: data.map(item => item.actualAmount),
-          // },
-          // {
-          //   name: '优惠金额',
-          //   type: "bar",
-          //   barWidth: time.length <= 7 ? "30%" : "20%",
-          //   data: data.map(item => item.discountAmount),
-          // }
-        ],
-      });
-    },
-    // 初始化销售额图表
-    initPayChart(data) {
-      this.payChart = echarts.init(this.$refs.payChart);
-      this.payChart.setOption({
-        tooltip: {
-          trigger: "item",
-          formatter: (params) => {
-            return `${params.name}：${params.value}笔`;
-          },
-        },
-        legend: {
-          top: "5%",
-          left: "center",
-        },
-        color: [
-          "#409eff",
-          "#91cc75",
-          "#fac858",
-          "#ee6666",
-          "#73c0de",
-          "#3ba272",
-          "#fc8452",
-          "#9a60b4",
-          "#ea7ccc",
-        ],
-        series: [
-          {
-            type: "pie",
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: "center",
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 20,
-              },
-            },
-            labelLine: {
-              show: false,
-            },
-            data: data,
-          },
-        ],
-      });
-    },
-    // 获取销售额柱状图数据
-    async dateAmount() {
-      try {
-        this.saleLoading = true;
-        const res = await dateAmount(this.saleActive);
-        const data = res.total.map((item) => {
-          return {
-            orderAmount: item.orderAmount,
-            // actualAmount: item.actualAmount,
-            // discountAmount: item.discountAmount
-          };
-        });
-        const time = res.total.map((item) => item.tradeDay);
-        this.initSaleChart(time, data);
-        setTimeout(() => {
-          this.saleLoading = false;
-        }, 300);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    paginationChange(e) {
-      this.saleTablePage = e - 1;
-      this.dateProduct();
-    },
-    // 获取销售额排行表格数据
-    async dateProduct() {
-      try {
-        this.saleTableLoading = true;
-        const res = await dateProduct(this.saleTableActive, this.saleTablePage, this.saleTableSize);
-        this.saleTable = res.productList.content;
-        this.saleTableTotal = res.productList.totalElements;
-        this.productCount = res.productCount.payAmount;
-        this.productSum = res.productSum.payAmount;
-
-        this.summaryDateGet(res.countList);
-        setTimeout(() => {
-          this.saleTableLoading = false;
-        }, 300);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    // 支付类型占比 饼图
-    async datePayType() {
-      try {
-        this.payChartLoading = true;
-        const res = await datePayType(this.saleActive);
-        const data = res.countPayType.map((item) => {
-          return {
-            value: item.count,
-            name: item.payType,
-          };
-        });
-        setTimeout(() => {
-          this.payChartLoading = false;
-        }, 300);
-        this.initPayChart(data);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    // 汇总数据
-    async summaryGet() {
-      try {
-        const res1 = await summaryGet();
-        const res2 = await summaryTodayGet();
-        this.topData = {
-          ...res1,
-          ...res2,
-        };
-        let payTime = res1.countDateList.map((item) => item.tradeDay);
-        let payData = res1.countDateList.map((item) => item.count);
-
-        let countTime = res1.visitsCountList.map((item) => item.tradeDay);
-        let countData = res1.visitsCountList.map((item) => item.count);
-
-        this.initCardPayChart(payTime, payData);
-        this.initCardCountChart(countTime, countData);
-        console.log(this.topData);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    rankChange() {
-      this.dateProduct();
-      // this.summaryDateGet();
-    },
-    // 初始化销售图标
-    initProduceChart(p1, p2) {
-      this.productCountChart = echarts.init(this.$refs.productCountChart);
-      // this.productSumChart = echarts.init(this.$refs.productSumChart);
-
-      this.productCountChart.setOption({
-        tooltip: {
-          trigger: "axis",
-        },
-        grid: {
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 0,
-        },
-        xAxis: [
-          {
-            boundaryGap: false,
-            type: "category",
-            data: p1[0],
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        color: "#409eff",
-        yAxis: [
-          {
-            type: "value",
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        series: [
-          {
-            data: p1[1],
-            type: "line",
-            symbol: "none",
-            smooth: true,
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "#409eff", // 渐变颜色
-                },
-                {
-                  offset: 1,
-                  color: "#409eff", // 渐变颜色
-                },
-              ]),
-            },
-          },
-        ],
-      });
-
-      // this.productSumChart.setOption({
-      //   tooltip: {
-      //     trigger: "axis"
-      //   },
-      //   grid: {
-      //     x: 0,
-      //     y: 0,
-      //     x2: 0,
-      //     y2: 0
-      //   },
-      //   xAxis: [
-      //     {
-      //       boundaryGap: false,
-      //       type: "category",
-      //       data: p2[0],
-      //       show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-      //       axisTick: {
-      //         show: false // 不显示坐标轴刻度线
-      //       },
-      //       axisLine: {
-      //         show: false // 不显示坐标轴线
-      //       },
-      //       axisLabel: {
-      //         show: false // 不显示坐标轴上的文字
-      //       },
-      //       splitLine: {
-      //         show: false // 不显示网格线
-      //       }
-      //     }
-      //   ],
-      //   color: "#409eff",
-      //   yAxis: [
-      //     {
-      //       type: "value",
-      //       show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-      //       axisTick: {
-      //         show: false // 不显示坐标轴刻度线
-      //       },
-      //       axisLine: {
-      //         show: false // 不显示坐标轴线
-      //       },
-      //       axisLabel: {
-      //         show: false // 不显示坐标轴上的文字
-      //       },
-      //       splitLine: {
-      //         show: false // 不显示网格线
-      //       }
-      //     }
-      //   ],
-      //   series: [
-      //     {
-      //       data: p2[1],
-      //       type: "line",
-      //       symbol: "none",
-      //       smooth: true,
-      //       areaStyle: {
-      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      //           {
-      //             offset: 0,
-      //             color: "#409eff" // 渐变颜色
-      //           },
-      //           {
-      //             offset: 1,
-      //             color: "#409eff" // 渐变颜色
-      //           }
-      //         ])
-      //       }
-      //     }
-      //   ]
-      // });
-    },
-    // 日期汇总数据
-    async summaryDateGet(res) {
-      try {
-        console.log(res);
-
-        // const res = await summaryDateGet(this.saleTableActive);
-        let p1 = [res.map((item) => item.tradeDay), res.map((item) => item.saleNum)];
-        let p2 = [res.map((item) => item.tradeDay), res.map((item) => item.saleAmount)];
-
-        // console.log(p1);
-        // console.log(p2);
-
-        // this.initProduceChart(p1, p2);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-  },
-};
-</script>
-
-<style>
-.popper {
-  border: 1px solid #d9d9d9 !important;
-}
-</style>
-<style scoped lang="scss">
-.tips_row {
-  width: 300px;
-  padding: 0 10px;
-
-  .item {
-    height: 40px;
-    display: flex;
-    align-items: center;
-    color: #666;
-    justify-content: space-between;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid #d9d9d9;
-    }
-
-    .left {
-      display: flex;
-      align-items: center;
-
-      .icon {
-        font-size: 20px;
-        margin-right: 10px;
-      }
-    }
-
-    .num {
-      color: #1890ff;
-    }
-  }
-}
-
-.app-container {
-  padding: 20px;
-  background-color: #f5f5f5;
-}
-
-.h_card_wrap {
-  .status_wrap {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .left {
-      display: flex;
-      align-items: center;
-
-      .dot {
-        $size: 6px;
-        width: $size;
-        height: $size;
-        border-radius: 50%;
-        background-color: #1890ff;
-        margin-right: 10px;
-      }
-    }
-
-    .time {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .content {
-    background-color: #fff;
-    margin-top: 15px;
-    padding: 20px;
-
-    .top {
-      display: flex;
-
-      .item {
-        flex: 1;
-
-        &.earnings {
-          display: flex;
-        }
-
-        &.data {
-          margin-left: 40px;
-          background: url("../../assets/images/data_home_bg1.png") no-repeat center center / cover;
-          display: flex;
-          align-items: center;
-        }
-
-        .data_item {
-          flex: 1;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .data_item_right {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-
-          .t {
-            width: 200px;
-            color: #333;
-            display: flex;
-
-            &:not(:first-child) {
-              margin-top: 20px;
-            }
-          }
-
-          .n {
-            color: #1890ff;
-            margin-left: 20px;
-          }
-        }
-
-        .num_wrap {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-
-          .num {
-            font-size: 30px;
-            color: #1890ff;
-          }
-
-          .tips {
-            font-size: 12px;
-            margin-top: 10px;
-          }
-        }
-
-        .line_wrap {
-          flex: 1;
-          padding-left: 20px;
-
-          .line_item {
-            &:not(:first-child) {
-              margin-top: 20px;
-            }
-
-            .line_item_top {
-              display: flex;
-              justify-content: space-between;
-              font-size: 12px;
-
-              .t {
-                color: #999;
-              }
-            }
-
-            .line_gropress {
-              display: flex;
-              margin-top: 6px;
-              background-color: #f6f6f6;
-
-              .gropress {
-                height: 5px;
-
-                &.l {
-                  background-color: #1890ff;
-                }
-
-                &.r {
-                  background-color: #ff3f3f;
-                }
-              }
-            }
-
-            .line_btm {
-              display: flex;
-              justify-content: space-between;
-              margin-top: 5px;
-
-              .icon {
-                color: #a2a2a2;
-                position: relative;
-                left: -5px;
-                font-size: 12px;
-              }
-
-              .info {
-                font-size: 12px;
-
-                .l_t {
-                  color: #1890ff;
-                }
-
-                .l_r {
-                  color: #ff3f3f;
-                  margin-left: 10px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .btm {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 20px;
-
-      .item {
-        width: 200px;
-        height: 83px;
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-size: 100% 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding-left: 18px;
-
-        &.item1 {
-          background-image: url("../../assets/images/data_home_item1.png");
-        }
-
-        &.item2 {
-          background-image: url("../../assets/images/data_home_item2.png");
-        }
-
-        &.item3 {
-          background-image: url("../../assets/images/data_home_item3.png");
-        }
-
-        &.item4 {
-          background-image: url("../../assets/images/data_home_item4.png");
-        }
-
-        .title {
-          display: flex;
-          align-items: center;
-          color: #333;
-          font-size: 14px;
-
-          .icon {
-            font-size: 12px;
-            color: #999;
-            margin-left: 6px;
-          }
-        }
-
-        .icon_wrap {
-          display: flex;
-          align-items: center;
-          margin-top: 10px;
-
-          .img {
-            width: 36px;
-            height: 36px;
-          }
-
-          .t {
-            font-size: 24px;
-            margin-left: 10px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.card_wrap {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-
-  .card {
-    flex: 1;
-    background-color: #fff;
-    border-radius: 2px;
-    padding: 0 20px;
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-      color: #999;
-      padding-top: 20px;
-
-      .card_title {
-        font-size: 14px;
-        flex: 1;
-      }
-    }
-
-    .number {
-      padding: 20px 0 10px 0;
-      font-size: 24px;
-      height: 60px;
-    }
-
-    .row {
-      height: 50px;
-      color: #555;
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #ececec;
-      }
-
-      .icon {
-        color: rgb(255, 85, 85);
-        margin-left: 4px;
-      }
-
-      .dot {
-        $size: 6px;
-        width: $size;
-        height: $size;
-        border-radius: 50%;
-        background-color: #1890ff;
-        margin-right: 6px;
-      }
-    }
-  }
-}
-
-.chart_wrap {
-  margin-top: 20px;
-
-  .sale_data {
-    display: flex;
-
-    .card {
-      flex: 1;
-      background-color: #fff;
-      border-radius: 2px;
-      padding: 0 20px;
-
-      .sale_data_header {
-        display: flex;
-        justify-content: space-between;
-        color: #999;
-        padding-top: 20px;
-
-        .card_title {
-          font-size: 14px;
-          flex: 1;
-        }
-      }
-
-      .number {
-        padding-top: 10px;
-        font-size: 24px;
-        height: 60px;
-      }
-
-      .product_chart_wrap {
-        height: 50px;
-      }
-    }
-  }
-
-  .item {
-    flex: 1;
-    background-color: #fff;
-    border-radius: 2px;
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid #ececec;
-      padding: 0 20px;
-
-      .tab_wrap {
-        display: flex;
-        $color: #1890ff;
-
-        .item {
-          padding: 0 10px;
-          height: 60px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 14px;
-          margin-right: 20px;
-
-          &.active {
-            position: relative;
-            color: $color;
-
-            &::after {
-              content: "";
-              width: 100%;
-              border-bottom: 2px solid $color;
-              position: absolute;
-              bottom: 0;
-              left: 0;
-            }
-          }
-        }
-      }
-    }
-
-    .chart {
-      padding: 20px 0;
-      height: 300px;
-    }
-
-    .table {
-      padding: 20px;
-    }
-  }
-}
-</style>
+<template></template>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 89b71b5..3c33e78 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -15,7 +15,7 @@
           <el-radio-button :value="1">员工</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item prop="merchantName" v-if="state.loginForm.loginType == 'staff'">
+      <el-form-item prop="merchantName" v-if="state.loginForm.loginType == 1">
         <el-input
           v-model="state.loginForm.merchantName"
           type="text"
@@ -145,7 +145,7 @@ function getCookie() {
     rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
     code: "",
     merchantName: "",
-    loginType: "merchant",
+    loginType: 0,
   };
 }
 
diff --git a/src/views/shop/list/components/detailModal.vue b/src/views/shop/list/components/detailModal.vue
index 42e69d0..c7011aa 100644
--- a/src/views/shop/list/components/detailModal.vue
+++ b/src/views/shop/list/components/detailModal.vue
@@ -144,7 +144,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep(.el-dialog__header) {
+:deep(.el-dialog__header) {
   padding: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/shop/staff/components/select-permission.vue b/src/views/shop/staff/components/select-permission.vue
index 3a0794d..63bed0f 100644
--- a/src/views/shop/staff/components/select-permission.vue
+++ b/src/views/shop/staff/components/select-permission.vue
@@ -1 +1,52 @@
-<template>11</template>
\ No newline at end of file
+<template>
+  <div v-for="(item, index) in list" :key="index">
+    <h4 class="title">
+      {{ item.label }}
+    </h4>
+    <div v-if="item.children" class="flex gap-10">
+      <el-checkbox-group v-model="model[index]">
+        <el-checkbox
+          v-for="(child, childIndex) in item.children"
+          :key="childIndex"
+          :value="child.id"
+          :label="child.label"
+          :style="returnStyle(child)"
+        ></el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const model = defineModel({ type: Array, default: () => [] });
+
+const importantPer = ["允许收款", "允许打折", "允许修改会员余额", "允许沽清"];
+function returnStyle(child) {
+  if (importantPer.includes(child.label)) {
+    return "color:red";
+  }
+}
+for (const item in props.list) {
+  console.log(item);
+  model[item] = [];
+}
+function getFormData() {
+  return formData;
+}
+defineExpose({
+  getFormData,
+});
+</script>
+
+<style scoped >
+.title {
+  text-align: left;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/shop/staff/config/add.ts b/src/views/shop/staff/config/add.ts
index cff3b73..5cdcbd9 100644
--- a/src/views/shop/staff/config/add.ts
+++ b/src/views/shop/staff/config/add.ts
@@ -144,12 +144,7 @@ const modalConfig: IModalConfig<addRequest> = {
         sm: 12,
       },
     },
-    {
-      label: "员工权限设置",
-      prop: "",
-      type: "title",
-      slotName: "title",
-    },
+
     {
       label: "是否允许管理端登录",
       prop: "isManage",
@@ -170,6 +165,20 @@ const modalConfig: IModalConfig<addRequest> = {
       ],
       initialValue: 1,
     },
+    {
+      label: "员工权限设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
+    {
+      type: 'custom',
+      prop: 'permission',
+      slotName: 'permission',
+      label: '',
+      hidden: true
+    }
+
   ],
 };
 
diff --git a/src/views/shop/staff/config/edit.ts b/src/views/shop/staff/config/edit.ts
index 126f0e2..b168e17 100644
--- a/src/views/shop/staff/config/edit.ts
+++ b/src/views/shop/staff/config/edit.ts
@@ -27,7 +27,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "角色",
       prop: "roleId",
-      rules: [{ required: true, message: "请选择角色", trigger: "blur" }],
+      rules: [{ required: false, message: "请选择角色", trigger: "blur" }],
       type: "select",
       attrs: {
         placeholder: "请选择角色",
@@ -54,7 +54,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "员工编号",
       prop: "code",
-      rules: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
+      rules: [{ required: false, message: "请输入员工编号", trigger: "blur" }],
       type: "input",
       attrs: {
         placeholder: "请输入员工编号",
@@ -68,7 +68,7 @@ const modalConfig: IModalConfig<editRequest> = {
       label: "手机号",
       prop: "phone",
       rules: [{
-        required: true,
+        required: false,
         pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
         message: "请输入正确的手机号码",
         trigger: "blur",
@@ -85,7 +85,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "登录账号",
       prop: "accountName",
-      rules: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
+      rules: [{ required: false, message: "请输入登录账号", trigger: "blur" }],
       type: "input",
       attrs: {
         placeholder: "请输入登录账号",
@@ -98,7 +98,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "登录密码",
       prop: "accountPwd",
-      rules: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
+      rules: [{ required: false, message: "请输入登录密码", trigger: "blur" }],
       type: "input",
       attrs: {
         placeholder: "请输入登录密码",
@@ -144,12 +144,6 @@ const modalConfig: IModalConfig<editRequest> = {
         sm: 12,
       },
     },
-    {
-      label: "员工权限设置",
-      prop: "",
-      type: "title",
-      slotName: "title",
-    },
     {
       label: "是否允许管理端登录",
       prop: "isManage",
@@ -170,6 +164,12 @@ const modalConfig: IModalConfig<editRequest> = {
       ],
       initialValue: 1,
     },
+    {
+      label: "员工权限设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
   ],
 };
 
diff --git a/src/views/shop/staff/index.vue b/src/views/shop/staff/index.vue
index ad70a37..eb2dada 100644
--- a/src/views/shop/staff/index.vue
+++ b/src/views/shop/staff/index.vue
@@ -43,8 +43,12 @@
 
     <!-- 新增 -->
     <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
-      <template #permission="scope">
-        <selectPermission></selectPermission>
+      <template #formFooter>
+        <selectPermission
+          v-model="selPermissionList"
+          :list="permissionList"
+          ref="refSelectPermission"
+        ></selectPermission>
       </template>
     </page-modal>
 
@@ -54,8 +58,12 @@
       :modal-config="editModalConfig"
       @submit-click="handleSubmitClick"
     >
-      <template #permission="scope">
-        <selectPermission></selectPermission>
+      <template #formFooter>
+        <selectPermission
+          v-model="selPermissionList"
+          :list="permissionList"
+          ref="refSelectPermission"
+        ></selectPermission>
       </template>
     </page-modal>
   </div>
@@ -71,9 +79,10 @@ import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
 import RoleApi, { type SysRole } from "@/api/account/role";
 import ShopStaffApi from "@/api/account/shopStaff";
-import permissionApi from "@/api/account/permission";
+import permissionApi, { type ShopPermission } from "@/api/account/permission";
 import selectPermission from "./components/select-permission.vue";
-permissionApi.getshopPermission();
+const refSelectPermission = ref();
+
 const {
   searchRef,
   contentRef,
@@ -89,9 +98,36 @@ const {
   handleFilterChange,
 } = usePage();
 
+//店铺权限列表
+let permissionList = ref<ShopPermission[]>([]);
+//选中的权限列表
+let selPermissionList = ref<string[]>([]);
 // 数据初始化
 async function init() {
+  // 覆写添加确定方法
+  const oldAddSubmitFunc = addModalConfig.formAction;
+  addModalConfig.formAction = (data) => {
+    return oldAddSubmitFunc({
+      ...data,
+      shopPermissionIds: selPermissionList.value.reduce((pre: string[], cur: string) => {
+        return pre.concat(cur);
+      }, [] as string[]),
+    });
+  };
+  // 覆写编辑确定方法
+  const oldeditSubmitFunc = editModalConfig.formAction;
+  editModalConfig.formAction = (data) => {
+    return oldeditSubmitFunc({
+      ...data,
+      shopPermissionIds: selPermissionList.value.reduce((pre: string[], cur: string) => {
+        return pre.concat(cur);
+      }, [] as string[]),
+    });
+  };
+
   const res = await RoleApi.getList({ page: 1, size: 100 });
+  const permission = await permissionApi.getshopPermission();
+  permissionList.value = Array.isArray(permission) ? permission : [];
   const roleArr = res.records.map((item: SysRole) => {
     return {
       ...item,
@@ -106,12 +142,33 @@ init();
 
 // 新增
 async function handleAddClick() {
+  selPermissionList.value = [];
   addModalRef.value?.setModalVisible();
 }
 // 编辑
 async function handleEditClick(row: IObject) {
+  selPermissionList.value = [];
   editModalRef.value?.handleDisabled(false);
   editModalRef.value?.setModalVisible();
+  // 设置权限选中
+  const perselArr = await permissionApi.getPermission(row.id);
+  for (let id of perselArr) {
+    for (let index in permissionList.value) {
+      const item = permissionList.value[index];
+      if (item.children) {
+        for (let child of item.children) {
+          if (child.id != null && child.id == id) {
+            if (selPermissionList.value[index]) {
+              selPermissionList.value[index].push(id);
+            } else {
+              selPermissionList.value[index] = [id];
+            }
+          }
+        }
+      }
+    }
+  }
+  console.log(selPermissionList.value);
   // 根据id获取数据进行填充
   await ShopStaffApi.get(row.id).then((res) => {
     console.log(res);
diff --git a/src/views/tool/Instead/components/carts/item.vue b/src/views/tool/Instead/components/carts/item.vue
new file mode 100644
index 0000000..801a7b8
--- /dev/null
+++ b/src/views/tool/Instead/components/carts/item.vue
@@ -0,0 +1,465 @@
+<template>
+  <div class="flex order-item u-m-b-14 relative" :class="[isActive]" @click="itemClick">
+    <div class="absolute status-box">
+      <span class="pack" v-if="item.pack_number * 1 > 0">
+        包
+        <span class="number">{{ item.pack_number * 1 }}</span>
+      </span>
+      <span class="da" v-if="item.is_print || item.is_print === null">打</span>
+      <span class="isWaitCall" v-if="item.is_wait_call">等</span>
+      <span class="tui" v-if="item.status === 'return'">退</span>
+    </div>
+    <div class="flex u-col-top">
+      <div class="img">
+        <div class="isSeatFee img u-line-1 u-flex u-col-center u-row-center" v-if="isSeatFee">
+          <span>{{ item.name }}</span>
+        </div>
+        <div
+          class="isSeatFee img u-line-1 u-flex u-col-center u-row-center"
+          v-else-if="!item.product_id"
+        >
+          <span>临时菜</span>
+        </div>
+        <img v-else :src="item.coverImg" class="" alt="" />
+      </div>
+      <div class="good-info u-p-t-6">
+        <div class="flex lh-16">
+          <div class="name" :class="{ 'free-price': item.status === 'return' }">
+            {{ item.name }}
+          </div>
+          <span class="good_info_discount" v-if="item.is_gift">赠</span>
+        </div>
+        <div v-if="item.typeEnum == 'weight'" class="specSnap">
+          ￥{{ currentPrice }}/{{ item.unit }}
+        </div>
+        <div v-if="item.specSnap" class="specSnap">
+          {{ item.specSnap }}
+        </div>
+        <div v-if="item.proGroupInfo" class="specSnapss">
+          <span>{{ item.groupType == 0 ? "固定套餐" : "可选套餐" }}:</span>
+          <span v-for="(a, b) in proGroupInfo" :key="a.proId">
+            {{ b == 0 ? "" : "," }}{{ a.proName }}
+          </span>
+        </div>
+
+        <div class="" v-if="placeNum == 0">
+          <div class="note" v-if="item.remark">备注:{{ item.remark }}</div>
+          <div class="note flex" v-else>
+            <span>备注:</span>
+            <el-icon @click="editNote" color="#999"><EditPen /></el-icon>
+          </div>
+        </div>
+        <div class="note" v-if="placeNum != 0 && item.note">备注:{{ item.remark || "" }}</div>
+      </div>
+    </div>
+    <div style="width: 10px"></div>
+    <div class="flex u-p-t-6">
+      <div class="order-number-box u-font-12">
+        <div class="" v-if="isSeatFee">X{{ item.totalNumber }}</div>
+        <div class="" v-else>X{{ item.number }}</div>
+        <div class="absolute" v-if="canChangeNumber">
+          <div class="order-input-number">
+            <el-icon color="#d8d8d8" size="22" @click="changeOrderNumber(-1)"><Remove /></el-icon>
+
+            <div style="width: 60px; margin: 0 4px" class="number-box">
+              <el-input
+                :min="0"
+                type="number"
+                @input="cartGoodsNumberInput"
+                @change="cartGoodsNumberChange"
+                v-model="number"
+                placeholder="0"
+              ></el-input>
+            </div>
+            <el-icon color="#22bf64" size="22" @click="changeOrderNumber(1)">
+              <CirclePlusFilled />
+            </el-icon>
+          </div>
+        </div>
+      </div>
+
+      <div class="color-333 total-price">
+        <template v-if="item.is_gift || item.status == 'return'">
+          <div>￥0</div>
+          <div class="free-price">
+            <span v-if="isSeatFee">￥{{ item.totalAmount }}</span>
+            <span v-else>￥{{ isShowVipPrice ? vipAllPrice : allPrice }}</span>
+          </div>
+        </template>
+        <template v-else-if="item.discountSaleAmount">
+          <div>￥{{ discountNewPrice }}</div>
+          <div class="free-price">
+            <span>￥{{ isShowVipPrice ? vipAllPrice : allPrice }}</span>
+          </div>
+        </template>
+        <template v-else>
+          <div v-if="isSeatFee">￥{{ item.totalAmount }}</div>
+          <div v-else>
+            <div v-if="isShowVipPrice && vipAllPrice != allPrice">￥{{ vipAllPrice }}</div>
+            <div
+              :class="{
+                'free-price': isShowVipPrice && vipAllPrice != allPrice,
+              }"
+            >
+              <span>￥{{ allPrice }}</span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  isShowVipPrice: {
+    type: Boolean,
+    default: false,
+  },
+  //是否是餐位费
+  isSeatFee: {
+    type: Boolean,
+    default: false,
+  },
+  //是否是历史订单商品
+  isOld: {
+    type: Boolean,
+    default: false,
+  },
+  //第几次下单 1以及以上为历史订单  0为当前购物车
+  placeNum: {
+    type: [String, Number],
+    default: 0,
+  },
+  selPlaceNum: {
+    type: [String, Number],
+    default: -1,
+  },
+  //是否允许改变数量
+  canChangeNumber: {
+    type: Boolean,
+    default: true,
+  },
+  item: {
+    type: Object,
+    default: () => {
+      return {
+        number: 0,
+      };
+    },
+  },
+  selCart: {
+    type: Object,
+    default: () => {
+      return {
+        id: "",
+      };
+    },
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+});
+
+let number = ref(0);
+
+const currentPrice = computed(() => {
+  return 0;
+});
+const proGroupInfo = computed(() => {
+  return JSON.parse(props.item.proGroupInfo);
+});
+const discountNewPrice = computed(() => {
+  return 0;
+});
+const vipAllPrice = computed(() => {
+  return 0;
+});
+const allPrice = computed(() => {
+  return props.item.number * props.item.salePrice;
+});
+
+const isActive = computed(() => {
+  return props.item.id == props.selCart.id ? "active" : "";
+});
+watch(
+  () => props.item.number,
+  (newval) => {
+    console.log(newval);
+    number.value = newval;
+  }
+);
+
+const emits = defineEmits([
+  "editNote",
+  "cartGoodsNumberChange",
+  "cartGoodsNumberInput",
+  "changeNumber",
+  "itemClick",
+]);
+function editNote() {
+  emits("editNote", props.index);
+}
+//购物车商品输入框数量改变
+function cartGoodsNumberChange(newval) {
+  if (newval <= 0) {
+    item.number = 1;
+  }
+  newval = `${newval}`.split(".")[0] * 1;
+  number.value = newval;
+  changeOrderNumber(newval - props.item.number);
+}
+//购物车商品输入框数量输入
+function cartGoodsNumberInput(newval) {
+  if (newval <= 0) {
+    return (number.value = 1);
+  }
+  newval = `${newval}`.split(".")[0] * 1;
+  number.value = newval;
+}
+function changeOrderNumber(step) {
+  emits("changeNumber", step, props.item);
+}
+function itemClick() {
+  emits("itemClick");
+}
+onMounted(() => {
+  number.value = props.item.number;
+});
+</script>
+<style lang="scss" scoped>
+::v-deep .number-box .el-input__inner {
+  border: none;
+}
+
+::v-deep .el-button--text {
+  color: #000;
+}
+
+::v-deep .number-box .el-input__inner {
+  border: none;
+  padding: 0 4px;
+  text-align: center;
+}
+
+.isSeatFee {
+  background: #3f9eff;
+  color: #fff;
+  font-size: 12px;
+}
+
+.icon-remove {
+  border: 1px solid #d8d8d8;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 1px;
+    background: #999;
+  }
+}
+
+.icon-add {
+  color: rgb(34, 191, 100);
+  font-size: 22px;
+  cursor: pointer;
+}
+
+.flex.order-item {
+  padding: 4px;
+  border-radius: 2px;
+  display: flex;
+  overflow: visible;
+  cursor: pointer;
+  align-items: flex-start;
+  justify-content: space-between;
+  background-color: rgba(0, 0, 0, 0);
+  transition: all 0.3s;
+
+  .status-box {
+    width: 18px;
+    position: absolute;
+    top: 4px;
+    right: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    > span {
+      display: block;
+      width: 18px;
+      height: 18px;
+      border-radius: 4px 0 4px 0;
+      font-size: 12px;
+      line-height: 17px;
+      text-align: center;
+      color: #fff;
+    }
+  }
+
+  .isWaitCall {
+    background: #d3adf7;
+  }
+
+  .pack {
+    background: #35ac6a;
+    .number {
+      background: #f56c6c;
+      color: #fff;
+      position: absolute;
+      left: -7px;
+      top: -7px;
+      width: 14px;
+      height: 14px;
+      text-align: center;
+      border-radius: 50%;
+    }
+  }
+
+  .da {
+    background: #35ac6a;
+  }
+
+  .tui {
+    background: #ac4735;
+  }
+
+  &.active {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  .total-price {
+    width: 94px;
+    font-size: 16px;
+    text-align: right;
+  }
+
+  .good-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 70px;
+
+    .specSnap {
+      color: #999;
+      font-size: 12px;
+      margin-top: 3px;
+    }
+
+    .specSnapss {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
+      color: #999;
+      font-size: 12px;
+      margin-top: 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+
+      .specSnap {
+        color: #999;
+        font-size: 12px;
+        margin-top: 3px;
+      }
+    }
+  }
+
+  .name {
+    font-size: 13px;
+    text-align: left;
+    color: #212121;
+    overflow: hidden;
+    line-height: 1;
+  }
+
+  .img {
+    width: 59px;
+    height: 59px;
+    position: relative;
+    margin-right: 10px;
+
+    img {
+      width: 59px;
+      height: 59px;
+    }
+  }
+}
+
+.note {
+  max-width: 70%;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: left;
+  color: #999;
+  margin-top: 5px;
+  word-break: break-all;
+}
+
+.order-number-box {
+  position: relative;
+
+  .absolute {
+    width: 60px;
+    height: 40px;
+    right: -38px;
+    top: -14px;
+    position: absolute;
+
+    .order-input-number {
+      position: absolute;
+      right: -6px;
+      top: 0;
+      justify-content: center;
+      align-items: center;
+      display: none;
+      background-color: #fff;
+      border: 1px solid #e4e7ed;
+      border-radius: 4px;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+      padding: 9px 6px;
+      background-color: #fff;
+      height: 40px;
+    }
+
+    &:hover .order-input-number {
+      display: flex;
+    }
+  }
+}
+
+.good_info_discount {
+  height: 16px;
+  padding: 0 3px;
+  color: #ff3f3f;
+  background-color: rgba(255, 63, 63, 0.1);
+  border-radius: 2px;
+  margin-left: 6px;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+::v-deep .order-input-number .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+::v-deep .order-input-number .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/components/carts/list.vue b/src/views/tool/Instead/components/carts/list.vue
new file mode 100644
index 0000000..ce1cd2e
--- /dev/null
+++ b/src/views/tool/Instead/components/carts/list.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="list">
+    <div class="carts">
+      <!-- 当前购物车 -->
+      <div v-for="(item, index) in carts.list" :key="index">
+        <carts-item
+          :item="item"
+          @changeNumber="changeNumber"
+          :selCart="carts.selCart"
+          @itemClick="itemClick(item)"
+        ></carts-item>
+      </div>
+      <!-- 赠菜 -->
+      <div class="cart-title"><span>以下是优惠菜品</span></div>
+      <div v-for="(item, index) in carts.giftList" :key="index">
+        <carts-item
+          :item="item"
+          @changeNumber="changeNumber"
+          :selCart="carts.selCart"
+          @itemClick="itemClick(item)"
+        ></carts-item>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="yiyouhui">{{ carts.yiyouhui }}</div>
+      <div class="u-flex u-row-between">
+        <el-link type="primary">打印制作单</el-link>
+        <div>
+          <span class="totalNumber">共{{ carts.totalNumber }}件</span>
+          <span class="totalPrice">￥{{ carts.payMoney }}</span>
+        </div>
+      </div>
+      <div class="btn-group">
+        <el-button type="primary">微信/支付宝</el-button>
+        <el-button type="primary">现金</el-button>
+        <el-button type="primary">更多支付</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import cartsItem from "./item.vue";
+import { useCartsStore } from "@/store/modules/carts";
+
+const props = defineProps({
+  goodsList: {
+    type: Array,
+    default: () => [],
+  },
+  goodsMapisFinish: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const selCartId = ref(null);
+
+const carts = useCartsStore();
+const goodsMap = {};
+watch(
+  () => props.goodsMapisFinish,
+  (newval) => {
+    if (newval) {
+      for (let goods of props.goodsList) {
+        goodsMap[goods.id] = goods;
+      }
+      carts.init({}, goodsMap);
+    }
+  }
+);
+
+function itemClick(item) {
+  carts.changeSelCart(item);
+}
+
+function changeNumber(step, item) {
+  carts.changeNumber(step * 1, item);
+}
+
+defineExpose({
+  carts,
+});
+</script>
+<style scoped lang="scss">
+.list {
+  height: 100%;
+  overflow: hidden;
+}
+.totalNumber {
+  color: #666;
+  font-size: 14px;
+}
+.totalPrice {
+  font-size: 18px;
+  color: #000;
+}
+.bottom {
+  position: relative;
+  padding-top: 14px;
+  border-top: 1px solid #ebebeb;
+  .yiyouhui {
+    text-align: right;
+    color: #c12a2a;
+    font-size: 13px;
+    line-height: 16px;
+    top: 14px;
+  }
+}
+:deep(.btn-group) {
+  display: flex;
+  margin-top: 20px;
+  .el-button {
+    flex: 1;
+  }
+}
+.carts {
+  height: calc(100% - 120px);
+  overflow-y: scroll;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+/* 修改垂直滚动条 */
+.carts::-webkit-scrollbar {
+  width: 0; /* 修改宽度 */
+}
+
+/* 修改滚动条轨道背景色 */
+.carts::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+.cart-title {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.4);
+  &::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background-color: #ebebeb;
+    margin-left: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/components/control.vue b/src/views/tool/Instead/components/control.vue
new file mode 100644
index 0000000..c595053
--- /dev/null
+++ b/src/views/tool/Instead/components/control.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="controls">
+    <div class="input-number">
+      <div class="reduce">
+        <el-icon @click="carts.changeNumber(-1, carts.selCart)"><Minus /></el-icon>
+      </div>
+      <span class="text">{{ carts.selCart.number || 1 }}</span>
+      <div class="add">
+        <el-icon @click="carts.changeNumber(1, carts.selCart)"><Plus /></el-icon>
+      </div>
+    </div>
+    <el-button
+      v-for="(item, index) in controls"
+      :key="index"
+      v-bund="item"
+      :disabled="btnDisabled(item)"
+      @click="controlsClick(item)"
+    >
+      {{ returnLabel(item) }}
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+const number = ref(1);
+import { useCartsStore } from "@/store/modules/carts";
+const carts = useCartsStore();
+
+const controls = ref([
+  { label: "规格", key: "", disabled: false, per: "sku" },
+  { label: "赠送", key: "is_gift", disabled: false, per: "cart" },
+  { label: "打包", key: "is_pack", disabled: false, per: "cart" },
+  { label: "删除", key: "del", disabled: false, per: "cart" },
+  { label: "存单", key: "", disabled: false, per: "save" },
+  { label: "取单", key: "", disabled: false },
+  { label: "单品备注", key: "one-note", disabled: false, per: "one-note" },
+  { label: "整单备注", key: "all-note", disabled: false, per: "all-note" },
+  { label: "退菜", key: "", disabled: false, per: "order" },
+  { label: "免厨打", key: "is_print", disabled: false, per: "cart" },
+  { label: "单品改价", key: "", disabled: false, per: "cart" },
+  { label: "等叫", key: "", disabled: false, per: "cart" },
+  { label: "整单等叫", key: "", disabled: false, per: "all-wating" },
+]);
+
+const emits = defineEmits(["noteClick"]);
+function controlsClick(item) {
+  switch (item.key) {
+    case "is_gift":
+      carts.updateTag("is_gift", carts.selCart.is_gift ? 0 : 1);
+      break;
+    case "is_pack":
+      emits("packClick", carts.selCart.pack_number, carts.selCart.number);
+      break;
+    case "is_print":
+      carts.updateTag("is_print", carts.selCart.is_print ? 0 : 1);
+      break;
+    case "del":
+      carts.del(carts.selCart);
+      break;
+    case "save":
+      carts.saveCart();
+      break;
+    case "one-note":
+      emits("noteClick", true);
+      break;
+    case "all-note":
+      emits("noteClick", false);
+      break;
+    case "order":
+      carts.order();
+      break;
+    case "all-wating":
+      carts.allWating();
+      break;
+  }
+}
+const perList = computed(() => {
+  if (!carts.selCart.id) {
+    return ["all-wating", "all-note"];
+  }
+  if (carts.selCart.id) {
+    return ["cart", "save", "one-note", "all-note", "all-wating"];
+  }
+});
+
+function btnDisabled(item) {
+  return !perList.value.includes(item.per);
+}
+function returnLabel(item) {
+  if (item.key == "is_gift") {
+    return carts.selCart.is_gift ? "取消赠送" : "赠送";
+  }
+  if (item.key == "is_pack") {
+    return carts.selCart.is_pack ? "取消打包" : "打包";
+  }
+  if (item.key == "is_print") {
+    return carts.selCart.is_print ? "免厨打" : "打印";
+  }
+  return item.label;
+}
+</script>
+
+<style scoped lang="scss">
+$gap: 10px;
+.controls {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 106px;
+  padding: 14px 10px;
+  background-color: #f7f7fa;
+}
+.el-button + .el-button {
+  margin-top: $gap;
+  margin-left: 0;
+}
+.input-number {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  margin-bottom: $gap;
+  cursor: pointer;
+  .reduce,
+  .text,
+  .add {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 38px;
+  }
+  .text {
+    height: 48px;
+    font-size: 30px;
+    border-top: 1px solid #dcdfe6;
+    border-bottom: 1px solid #dcdfe6;
+  }
+  .reduce {
+  }
+  .add {
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/components/dialog-goods-sel.vue b/src/views/tool/Instead/components/dialog-goods-sel.vue
new file mode 100644
index 0000000..06d6674
--- /dev/null
+++ b/src/views/tool/Instead/components/dialog-goods-sel.vue
@@ -0,0 +1,147 @@
+<template>
+  <!-- 选择规格 -->
+  <el-dialog width="410px" :title="goods.name" v-model="show" @close="close">
+    <div class="tag-group">
+      <div class="tag-item" v-for="(item, key) in goods.selectSpecInfo" :key="key">
+        <div class="tag-name">{{ key }}</div>
+        <div>
+          <span style="margin: 0 10px 10px 0" v-for="(val, valIndex) in item.list" :key="valIndex">
+            <el-button
+              plain
+              :type="val === item.sel ? 'primary' : ''"
+              :disabled="val.disabled"
+              @click="changeSkuSel(key, val)"
+            >
+              {{ val }}
+            </el-button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <template v-if="skuData">
+        <div class="u-flex u-row-between">
+          <div>
+            <div class="price">￥ {{ skuData.salePrice }}</div>
+            <div class="sku-group-text">
+              <span>{{ skuName }}</span>
+              <span>库存：{{ 0 }}</span>
+            </div>
+          </div>
+          <div class="u-flex">
+            <el-input-number v-model="number" :min="skuData.suitNum"></el-input-number>
+          </div>
+        </div>
+        <div class="u-flex" style="margin-top: 14px">
+          <el-button v-if="!skuData.isGrounding" disabled style="width: 100%">已下架</el-button>
+          <template v-else>
+            <el-button type="primary" style="width: 100%">确 定</el-button>
+          </template>
+        </div>
+      </template>
+      <div v-else>
+        <el-button type="primary" style="width: 100%" disabled>确 定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup >
+let show = ref(false);
+// const props = defineProps({
+//   goods: {
+//     type: Object,
+//     default: () => ({}),
+//   },
+// });
+
+let number = ref(1);
+
+const defaultGoods = { selectSpecInfo: {}, skuList: [] };
+let goods = ref({ ...defaultGoods });
+
+function resetData() {
+  goods.value = { ...defaultGoods };
+}
+
+function changeSkuSel(key, val) {
+  console.log(key, val);
+  goods.value.selectSpecInfo[key].sel = val;
+}
+
+function open(data) {
+  show.value = true;
+  if (data) {
+    let selectSpecInfo = {};
+    for (let i in data.selectSpecInfo) {
+      if (data.selectSpecInfo[i].length > 0) {
+        selectSpecInfo[i] = {
+          list: data.selectSpecInfo[i],
+          sel: "",
+          disabled: false,
+        };
+      }
+    }
+    goods.value = { ...data, selectSpecInfo };
+    console.log(goods.value);
+  }
+}
+function close() {
+  show.value = false;
+  resetData();
+}
+const skuName = computed(() => {
+  if (goods.value.selectSpecInfo) {
+    let sku = [];
+    for (let i in goods.value.selectSpecInfo) {
+      sku.push(goods.value.selectSpecInfo[i].sel);
+    }
+    return sku.join(",");
+  } else {
+    return "";
+  }
+});
+
+const skuData = computed(() => {
+  if (goods.value.skuList.length <= 0) {
+    return undefined;
+  }
+  return goods.value.skuList.find((item) => {
+    return item.specInfo === skuName.value;
+  });
+});
+
+defineExpose({ open, close });
+</script>
+
+<style scoped lang="scss">
+.tag-group {
+  margin-top: 10px;
+
+  .tag-item {
+    margin-bottom: 20px;
+
+    .tag-name {
+      margin-bottom: 10px;
+      font-size: 12px;
+      color: #999;
+    }
+  }
+}
+.price {
+  font-size: 18px;
+  text-align: left;
+  color: #ff5152;
+  font-weight: 600;
+}
+.sku-group-text {
+  text-align: left;
+  color: #666;
+  font-size: 11px;
+  margin-top: 2px;
+}
+::v-deep .number-box .el-input__inner {
+  border: none;
+  padding: 0 4px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/components/goods-item.vue b/src/views/tool/Instead/components/goods-item.vue
new file mode 100644
index 0000000..9007ce9
--- /dev/null
+++ b/src/views/tool/Instead/components/goods-item.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="goods-item">
+    <el-image v-if="item.coverImg" class="goods-image" :src="item.coverImg" fit="cover"></el-image>
+    <div class="info">
+      <div class="name u-flex u-flex-wrap">
+        <span class="weight" v-if="item.type == 'weigh'">称重</span>
+        <span>{{ item.name }}</span>
+      </div>
+      <div class="">￥{{ item.lowPrice }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => ({}),
+  },
+  index: Number,
+  active: Boolean,
+  select: Function,
+});
+</script>
+<style scoped lang="scss">
+.goods-item {
+  width: 100px;
+  height: 100px;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  .goods-image {
+    width: 100%;
+    height: 100%;
+  }
+  .info {
+    position: absolute;
+    box-sizing: border-box;
+    padding: 8px;
+    font-size: 14px;
+    color: #fff;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: rgba(46, 46, 46, 0.38);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/components/note.vue b/src/views/tool/Instead/components/note.vue
new file mode 100644
index 0000000..da775bb
--- /dev/null
+++ b/src/views/tool/Instead/components/note.vue
@@ -0,0 +1,96 @@
+<template>
+  <el-dialog :title="title" width="410px" v-model="show" @close="reset">
+    <el-input :rows="6" type="textarea" v-model="note" placeholder="请输入备注"></el-input>
+    <div>
+      <el-tag
+        v-for="(tag, index) in tags"
+        @click="addNote(tag)"
+        size="medium"
+        :key="index"
+        closable
+        @close="delTag(index)"
+        type="primary"
+      >
+        {{ tag }}
+      </el-tag>
+    </div>
+    <template #footer>
+      <el-button size="medium" @click="close">取消</el-button>
+      <el-button size="medium" type="primary" @click="confirm">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+let show = ref(false);
+let tags = ref([]);
+let note = ref("");
+let title = ref("整单备注(提交订单时生效)");
+let isOne = ref(false);
+watch(
+  () => tags.length,
+  () => {
+    localStorage.setItem("tags", JSON.stringify(tags.value));
+  }
+);
+
+function reset() {
+  note.value = "";
+}
+function delTag(index) {
+  this.tags.splice(index, 1);
+}
+function addNote(tag) {
+  if (!note.value) {
+    return (note.value = tag);
+  }
+  note.value = tag + "," + note.value;
+}
+function open(remark, isOneNote) {
+  isOne.value = isOneNote;
+  title.value = isOneNote ? "整单备注(提交订单时生效)" : "单品备注(提交订单时生效)";
+  show.value = true;
+  note.value = remark ? remark : "";
+  const tags = localStorage.getItem("tags");
+  console.log(tags);
+  this.tags = tags ? JSON.parse(tags) : ["免香菜", "不要辣", "不要葱"];
+}
+function close() {
+  show.value = false;
+}
+const emits = defineEmits(["confirm"]);
+function confirm() {
+  const originTags = [...tags.value];
+  if (note.value) {
+    if (originTags >= 10) {
+      originTags.shift();
+    }
+    if (note.value.length <= 16) {
+      const newTags = new Set([note.value, ...originTags]);
+      localStorage.setItem("tags", JSON.stringify([...newTags]));
+    }
+  }
+  emits("confirm", note.value, isOne.value);
+  close();
+}
+
+defineExpose({
+  open,
+  close,
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  margin-bottom: 14px;
+  margin-top: 14px;
+}
+::v-deep .el-tag {
+  margin-top: 10px;
+  margin-right: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 35px;
+  height: 35px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/components/pack.vue b/src/views/tool/Instead/components/pack.vue
new file mode 100644
index 0000000..c6048c3
--- /dev/null
+++ b/src/views/tool/Instead/components/pack.vue
@@ -0,0 +1,60 @@
+<template>
+  <el-dialog title="修改打包数量" width="410px" v-model="show" @close="reset">
+    <el-input-number
+      :min="0"
+      :max="max"
+      type="number"
+      v-model="number"
+      placeholder="请输入打包数量"
+    ></el-input-number>
+    <template #footer>
+      <el-button size="medium" @click="close">取消</el-button>
+      <el-button size="medium" type="primary" @click="confirm">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+let show = ref(false);
+let number = ref(0);
+const max = ref(0);
+function reset() {
+  max.value = 0;
+  number.value = 0;
+}
+
+function open(packNumber, maxNumber) {
+  show.value = true;
+  max.value = maxNumber || 0;
+  number.value = packNumber || 0;
+}
+function close() {
+  show.value = false;
+  reset();
+}
+const emits = defineEmits(["confirm"]);
+function confirm() {
+  emits("confirm", number.value);
+  close();
+}
+
+defineExpose({
+  open,
+  close,
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  margin-bottom: 14px;
+  margin-top: 14px;
+}
+::v-deep .el-tag {
+  margin-top: 10px;
+  margin-right: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 35px;
+  height: 35px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/index.vue b/src/views/tool/Instead/index.vue
new file mode 100644
index 0000000..1036c6a
--- /dev/null
+++ b/src/views/tool/Instead/index.vue
@@ -0,0 +1,403 @@
+<template>
+  <div class="box">
+    <div class="content">
+      <div class="top">
+        <div class="left u-flex u-col-center">
+          <span class="title">代客下单</span>
+          <div class="u-m-l-20 flex">
+            <el-button type="primary">选择用户</el-button>
+            <el-button>选择桌号</el-button>
+            <el-button type="warning">扫码验券</el-button>
+          </div>
+        </div>
+        <div class="right">
+          <el-input placeholder="请输入商品名称" v-model="keywords" clearable>
+            <template #suffix>
+              <el-icon class="el-input__icon"><search /></el-icon>
+            </template>
+          </el-input>
+        </div>
+      </div>
+      <div class="diancan">
+        <div class="left">
+          <div class="diners">
+            <el-button-group v-model="diners.sel" style="width: 100%; display: flex">
+              <el-button
+                :class="{ active: index == diners.sel }"
+                v-for="(item, index) in diners.list"
+                :key="index"
+              >
+                {{ item.label }}
+              </el-button>
+            </el-button-group>
+          </div>
+
+          <div class="u-flex u-font-14 clear u-m-t-10 perpoles">
+            <div
+              class="u-flex u-p-r-14 u-m-r-14"
+              style="border-right: 1px solid #ebebeb; line-height: 1"
+            >
+              <span>就餐人数：-位</span>
+              <el-icon><ArrowRight /></el-icon>
+            </div>
+            <a @click="clearCarts" style="color: #1890ff">清空</a>
+          </div>
+          <cartsList
+            :goodsMapisFinish="goodsMapisFinish"
+            :goodsList="goods.list"
+            ref="refCart"
+          ></cartsList>
+        </div>
+        <div class="center">
+          <Controls @noteClick="showNote" @packClick="showPack" />
+        </div>
+        <div class="right">
+          <div class="flex categoty u-col-center">
+            <div
+              class="show_more_btn"
+              :class="{ showAll: category.showAll }"
+              @click="toggleShowAll"
+            >
+              <div class="flex">
+                <div class="flex showmore">
+                  <el-icon color="#fff"><ArrowDown /></el-icon>
+                </div>
+                <span>{{ category.showAll ? "收起" : "展开" }}</span>
+              </div>
+            </div>
+            <div class="flex categorys" :class="{ 'flex-wrap': category.showAll }">
+              <div
+                v-for="(item, index) in category.list"
+                :key="index"
+                @click="changeCategoryId(item)"
+              >
+                <el-tag
+                  size="large"
+                  type="primary"
+                  effect="dark"
+                  v-if="goods.query.categoryId === item.id"
+                >
+                  {{ item.name }}
+                </el-tag>
+                <el-tag size="large" type="info" v-else effect="plain">{{ item.name }}</el-tag>
+              </div>
+            </div>
+          </div>
+          <div class="goods-list">
+            <GoodsItem
+              :item="item"
+              @click="goodsClick(item)"
+              v-for="item in goods.list"
+              :key="item.id"
+            ></GoodsItem>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <dialogGoodsSel ref="refSelSku"></dialogGoodsSel>
+    <note ref="refNote" @confirm="noteConfirm"></note>
+    <pack ref="refPack" @confirm="packConfirm"></pack>
+  </div>
+</template>
+<script setup>
+import Controls from "./components/control.vue";
+import note from "./components/note.vue";
+import pack from "./components/pack.vue";
+import GoodsItem from "./components/goods-item.vue";
+import dialogGoodsSel from "./components/dialog-goods-sel.vue";
+import cartsList from "./components/carts/list.vue";
+import categoryApi from "@/api/product/productclassification";
+import productApi from "@/api/product/index";
+//打包
+const refPack = ref();
+function showPack(packNumber, max) {
+  refPack.value.open(packNumber * 1, max * 1);
+}
+function packConfirm(packNumber) {
+  refCart.value.carts.updateTag("pack_number", packNumber);
+}
+
+//备注
+const refNote = ref(null);
+function showNote(isOneNote) {
+  const remark = isOneNote ? refCart.value.carts.selCart.remark : "";
+  console.log(remark);
+  refNote.value.open(remark, isOneNote);
+}
+function noteConfirm(note, isOneNote) {
+  if (isOneNote) {
+    refCart.value.carts.updateTag("remark", note);
+    return;
+  }
+}
+
+// 搜索
+const keywords = ref("");
+
+// 就餐类型
+const diners = reactive({
+  list: [
+    { label: "堂食", value: 1 },
+    { label: "自取", value: 2 },
+  ],
+  sel: 0,
+});
+// 商品分类
+const category = reactive({
+  list: [],
+  showAll: false,
+});
+function toggleShowAll() {
+  category.showAll = !category.showAll;
+}
+function changeCategoryId() {}
+
+function getCategoryList() {
+  categoryApi
+    .getList({
+      page: 1,
+      size: 200,
+    })
+    .then((res) => {
+      category.list = res;
+    });
+}
+
+//商品
+const refSelSku = ref(null);
+
+const goods = reactive({
+  list: [],
+  query: {
+    categoryId: "",
+    keywords: "",
+  },
+});
+
+let goodsMapisFinish = ref(false);
+
+function getGoods() {
+  productApi
+    .getPage({
+      page: 1,
+      size: 200,
+      ...goods.query,
+    })
+    .then((res) => {
+      goods.list = res.records;
+      goodsMapisFinish.value = true;
+    });
+}
+
+function goodsClick(item) {
+  //单规格
+  if (item.type == "single") {
+    addCarts({
+      product_id: item.id,
+      sku_id: item.skuList[0].id,
+      number: 1,
+      is_pack: 0,
+      is_gift: 0,
+      is_temporary: 0,
+      discount_sale_amount: 0,
+      discount_sale_note: "",
+      is_print: 0,
+      is_wait_call: 0,
+      product_name: "",
+      remark: "",
+    });
+  }
+  // 多规格
+  if (item.type == "sku") {
+    refSelSku.value.open(item);
+  }
+}
+//购物车
+const refCart = ref(null);
+function clearCarts() {
+  ElMessageBox.alert("确定要清空点餐列表吗?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    refCart.value.carts.clear();
+  });
+}
+function addCarts(item) {
+  const hasCart = refCart.value.carts.list.find((cartItem) => {
+    return cartItem.product_id == item.product_id && cartItem.sku_id == item.sku_id;
+  });
+  console.log(hasCart);
+  if (hasCart) {
+    refCart.value.carts.update({ ...item, id: hasCart.id });
+  } else {
+    refCart.value.carts.add(item);
+  }
+}
+
+function init() {
+  getCategoryList();
+  getGoods();
+}
+init();
+</script>
+
+<style lang="scss" scoped>
+$pl: 30px;
+.box {
+  padding: 20px 20px 10px 20px;
+  height: 100%;
+  .content {
+    background-color: #fff;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 20px 20px 0;
+    .top {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #ebebeb;
+      margin-left: $pl;
+      .left {
+        flex: 1;
+
+        .title {
+          font-size: 16px;
+          color: #333;
+          font-weight: 700;
+          white-space: nowrap;
+        }
+      }
+      .right {
+        flex: 1;
+      }
+    }
+    .diancan {
+      padding-top: 10px;
+      display: flex;
+      max-height: calc(100vh - 256px);
+      .left {
+        width: 350px;
+        padding-right: 14px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        .diners {
+          padding-left: $pl;
+        }
+        .perpoles {
+          padding-left: $pl;
+        }
+      }
+      .right {
+        flex: 1;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+          width: 4px;
+        }
+      }
+      .center {
+        overflow-x: hidden;
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+          width: 4px;
+        }
+      }
+    }
+  }
+}
+
+:deep(.diners .el-button-group .active) {
+  border: 1px solid #409eff !important;
+  color: #409eff !important;
+  background: rgba(24, 144, 255, 0.1) !important;
+  z-index: 10;
+}
+:deep(.diners .el-button-group) {
+  width: 100%;
+  display: flex;
+}
+:deep(.diners .el-button-group .el-button) {
+  flex: 1;
+}
+:deep(.categorys .el-tag--plain.el-tag--info) {
+  border: 1px solid #dcdfe6;
+  color: #000;
+  font-weight: 600;
+}
+:deep(.categorys .el-tag) {
+  min-width: 80px;
+  height: 38px;
+  line-height: 38px;
+  text-align: center;
+  box-sizing: border-box;
+  text-align: center;
+  padding: 0 14px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 2px;
+  user-select: none;
+  margin: 0 10px 10px 0;
+  cursor: pointer;
+}
+.categoty {
+  position: sticky;
+  top: 0;
+  background-color: #f7f7fa;
+  z-index: 1;
+  padding-top: 14px;
+
+  .show_more_btn {
+    padding: 0 10px;
+    color: #333;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    min-width: 80px;
+    background: #f7f7fa;
+    position: absolute;
+    right: 0;
+    top: 14px;
+    height: 38px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .showmore {
+      transition: all 0.2s;
+      margin-right: 8px;
+      width: 21px;
+      height: 21px;
+      border-radius: 50%;
+      background: #3f9eff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &.showAll {
+      .showmore {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+.goods-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  flex: 1;
+}
+:deep(.carts) {
+  padding-left: $pl;
+}
+:deep(.left) {
+  .bottom {
+    padding-left: $pl;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/quan_util.js b/src/views/tool/Instead/quan_util.js
new file mode 100644
index 0000000..14b4747
--- /dev/null
+++ b/src/views/tool/Instead/quan_util.js
@@ -0,0 +1,250 @@
+export function isTui(item) {
+	return item.status == 'return' || item.status == 'refund' || item.status == 'refunding'
+}
+//是否使用会员价
+export function isUseVipPrice(vipUser,goods){
+	return vipUser.id&&vipUser.isVip&&goods.isMember
+}
+
+//计算商品券优惠价格
+export function returnProductCouponPrice(coup, goodsArr, vipUser) {
+	const item = goodsArr.find(v => v.productId == coup.proId);
+	if (!item) {
+		return 0
+	}
+	const memberPrice = item.memberPrice ? item.memberPrice : item.price;
+	const price = item ? (isUseVipPrice(vipUser,item) ? memberPrice : item.price) : 0;
+	return price * coup.num
+
+}
+//返回新的商品列表，过滤掉退菜的，退单的商品
+export function returnNewGoodsList(arr) {
+	let goodsMap = {}
+	return arr.filter(v => !isTui(v))
+}
+//根据当前购物车商品以及数量,已选券对应商品数量，判断该商品券是否可用
+export function returnCoupCanUse(goodsArr = [], coup, selCoupArr = []) {
+	// if(!coup.use){
+	// 	return false
+	// }
+	const findGoods = goodsArr.filter(v => v.productId == coup.proId)
+	if (!findGoods.length) {
+		return false
+	}
+	const findGoodsTotalNumber = findGoods.reduce((prve, cur) => {
+		return prve + cur.num * 1
+	}, 0)
+	const selCoupNumber = selCoupArr.filter(v => v.proId == coup.proId).reduce((prve, cur) => {
+		return prve + cur.num * 1
+	}, 0)
+	if (selCoupNumber >= findGoodsTotalNumber) {
+		return false
+	}
+	console.log(selCoupNumber,findGoodsTotalNumber);
+	return findGoodsTotalNumber < selCoupNumber ? false : true
+}
+//查找购物车商品根据购物车商品数据返回商品券信息（抵扣价格以及是否满足可用需求）
+export function returnProductCoupon(coup, goodsArr, vipUser, selCoupArr = []) {
+	const newGoodsArr = returnNewGoodsList(goodsArr)
+	const item = newGoodsArr.find(v => v.productId == coup.proId);
+	if (!item) {
+		return {
+			...coup,
+			discountAmount: 0,
+			use: false
+		}
+	}
+	const memberPrice = item.memberPrice ? item.memberPrice : item.price;
+	const price = item ? (isUseVipPrice(vipUser,item) ? memberPrice : item.price) : 0;
+	const discountAmount = (price * coup.num).toFixed(2)
+	console.log(discountAmount);
+
+	// const canUse = !coup.use ? false : (discountAmount > 0 && returnCoupCanUse(goodsArr, coup, selCoupArr))
+	// const canUse=discountAmount>0
+	const canUse=coup.use
+	return {
+		...coup,
+		discountAmount: discountAmount,
+		use: canUse
+	}
+
+}
+/**
+ * 根据购物车商品计算商品券抵扣价格以及是否满足可用需求
+ * 1.商品券对应商品数量大于购物车对应商品数量不可用
+ * 2.未在购物车找到相关商品不可用
+ * @param {*} coupArr 
+ * @param {*} goodsArr 
+ * @param {*} vipUser 
+ * @returns 
+ */
+export function returnProductAllCoup(coupArr, goodsArr, vipUser) {
+	return coupArr.map((v) => {
+		return returnProductCoupon(v, goodsArr, vipUser)
+	})
+
+}
+//返回商品实际支付价格
+export function returnProductPayPrice(goods,vipUser){
+	const memberPrice = goods.memberPrice ? goods.memberPrice : goods.price;
+	const price =  isUseVipPrice(vipUser,goods) ? memberPrice : goods.price;
+	return price
+}
+//返回商品券抵扣的商品价格
+export function returnProductCoupAllPrice(productPriceArr,startIndex,num,isMember=true){
+	console.log(productPriceArr);
+	return productPriceArr.slice(startIndex,startIndex+num).reduce((prve,cur)=>{
+		let curPrice=0
+		if(typeof cur==='object'){
+			curPrice=isMember?cur.memberPrice*1:cur.price
+		}else{
+			curPrice=cur*1
+		}
+		return prve+curPrice
+	},0)
+}
+
+//返回商品券可抵扣的商品数量
+export function returnProductCanUseNum(productPriceArr,startIndex,num){
+	console.log(productPriceArr);
+	console.log(num);
+	let n=0;
+	for(let i=0;i<num;i++){
+		if(productPriceArr[startIndex*1+i]){
+			n+=1
+			console.log(n);
+		}else{
+			break
+		}
+	}
+	return  n 
+}
+
+//返回同类商品券在同类商品价格数组里的开始位置
+export function returnProCoupStartIndex(coupArr,index){
+	return  coupArr.slice(0,index).reduce((prve,cur)=>{
+		return prve+cur.num*1 
+	},0)
+}
+//返回商品数量从0到n每一个对应的价格对照表
+export function returnGoodsPayPriceMap(goodsArr){
+	return goodsArr.reduce((prve,cur)=>{
+		if(!prve.hasOwnProperty(cur.productId)){
+			prve[cur.productId]=[]
+		}
+		const arr=new Array(cur.num).fill(cur).map(v=>{
+			return {
+				memberPrice:v.memberPrice?v.memberPrice:v.price,
+				price:v.price
+			}
+		})
+		prve[cur.productId].push(...arr)
+		return prve
+	},{})
+}
+//计算商品券总优惠价格
+export function returnProductCouponAllPrice(coupArr, goodsArr, vipUser) {
+	if (coupArr.length == 0) {
+		return 0;
+	}
+	//商品分组
+	const goodsMap={}
+	//商品数量从0到n每一个对应的价格
+	const goodsPayPriceMap={}
+	//商品券分组
+	let coupMap={}
+	for(let i in coupArr){
+		const coup=coupArr[i]
+		if(coupMap.hasOwnProperty(coup.proId)){
+			coupMap[coup.proId].push(coup)
+		}else{
+			coupMap[coup.proId]=[coup]
+		}
+	}
+	let total=0
+	for(let key in coupMap){
+		const arr=coupMap[key]
+		for(let i in arr){
+			const coup=arr[i]
+			if(!goodsMap.hasOwnProperty(coup.proId)){
+				goodsMap[coup.proId]=goodsArr.filter(v=>v.productId==coup.proId).map(v=>{
+					return {
+						...v,
+						payPrice:returnProductPayPrice(v,vipUser)
+					}
+				}).sort((a,b)=>{
+					const aPrice=a.payPrice
+					const bPrice=b.payPrice
+					return aPrice-bPrice
+				})
+				goodsPayPriceMap[coup.proId]=goodsMap[coup.proId].reduce((prve,cur)=>{
+					const arr=new Array(cur.num).fill(cur.payPrice)
+					console.log(arr);
+					 prve.push(...arr)
+					 return prve
+				},[])
+			}
+			const proCoupStartIndex=returnProCoupStartIndex(arr,i)
+			console.log(proCoupStartIndex);
+			const coupNum=Math.min(goodsPayPriceMap[coup.proId].length,coup.num)
+			console.log(coupNum);
+			total+=returnProductCoupAllPrice(goodsPayPriceMap[coup.proId],proCoupStartIndex,coupNum) 
+		}
+	}
+	
+	return total.toFixed(2);
+
+}
+//计算满减券总优惠价格
+export function returnFullReductionCouponAllPrice(coupArr) {
+	if (coupArr.length == 0) {
+		return 0;
+	}
+	return coupArr.filter(v => v.type == 1).reduce((a, b) => {
+		const price = b.discountAmount
+		return a + price;
+	}, 0).toFixed(2);
+
+}
+//计算优惠券总价格
+export function returnCouponAllPrice(coupArr, goodsArr, vipUser) {
+	const poductAllprice = returnProductCouponAllPrice(coupArr, goodsArr, vipUser)
+	const pointAllPrice = returnFullReductionCouponAllPrice(coupArr)
+	return (poductAllprice * 1 + pointAllPrice * 1).toFixed(2);
+}
+
+//返回当前满减券列表可用状态
+export function returnCanUseFullReductionCoupon(coupArr, payPrice, selCoup) {
+	return coupArr.map(v => {
+		if (v.id == selCoup.id) {
+			return {...v,use:true}
+		}
+		const isfullAmount = payPrice*1 >= v.fullAmount * 1
+		if(payPrice<=0){
+			return {
+				...v,
+				use: false
+			}
+		}
+		return {
+			...v,
+			use: v.use && isfullAmount
+		}
+	}).filter(v => v.use)
+}
+
+//根据商品数量还有商品券数量返回优惠券可以使用的数量数组
+export function  returnCanUseNumProductCoup(coupArr,){
+	let productCoup = coupArr.filter(v => v.type == 2)
+	//商品券分组
+	let coupMap={}
+	for(let i in productCoup){
+		const coup=productCoup[i]
+		if(coupMap.hasOwnProperty(coup.proId)){
+			coupMap[coup.proId].push(coup)
+		}else{
+			coupMap[coup.proId]=[coup]
+		}
+	}
+	return arr
+}
\ No newline at end of file
diff --git a/src/views/tool/Instead/util.js b/src/views/tool/Instead/util.js
new file mode 100644
index 0000000..3c49399
--- /dev/null
+++ b/src/views/tool/Instead/util.js
@@ -0,0 +1,231 @@
+import {isTui} from '../../order_manage/order_goods_util.js'
+//计算打包费 
+export function returnPackFee(arr, isOld = true) {
+    if (isOld) {
+        return arr.reduce((a, b) => {
+            const bTotal = b.info
+                .filter((v) => v.isGift !== "true" && v.status !== "return")
+                .reduce((prve, cur) => {
+                    return prve + (cur.packFee || cur.packAmount || 0);
+                }, 0);
+            return a + bTotal;
+        }, 0);
+    } else {
+        return arr.filter(v => v.status !== 'return' && v.isGift !== 'true').reduce((a, b) => {
+            return a + (b.packFee || b.packAmount || 0);
+        }, 0);
+    }
+
+}
+//判断商品是否可以下单
+export function isCanBuy(skuGoods, goods) {
+    if (goods.typeEnum == 'normal') {
+        //单规格
+        return goods.isGrounding && goods.isPauseSale == 0 && (goods.isStock ? goods.stockNumber > 0 : true);
+    } else {
+        //多规格
+        return goods.isGrounding && goods.isPauseSale == 0 && skuGoods.isGrounding && skuGoods.isPauseSale == 0 && (goods.isStock ? goods.stockNumber > 0 : true);
+
+    }
+}
+//字符匹配
+export function $strMatch(matchStr, str) {
+    return matchStr.toLowerCase().includes(str.toLowerCase())
+}
+
+// 一个数组是否包含另外一个数组全部元素
+export function arrayContainsAll(arr1, arr2) {
+    for (let i = 0; i < arr2.length; i++) {
+        if (!arr1.includes(arr2[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+//n项 n-1项组合，生成全部结果
+export function generateCombinations(arr, k) {
+    console.log(arr)
+    console.log(k)
+    let result = [];
+
+    function helper(index, current) {
+        if (current.length === k) {
+            result.push(current.slice()); // 使用slice()来避免直接修改原始数组
+        } else {
+            for (let i = index; i < arr.length; i++) {
+                current.push(arr[i]); // 将当前元素添加到组合中
+                helper(i + 1, current); // 递归调用，索引增加以避免重复选择相同的元素
+                current.pop(); // 回溯，移除当前元素以便尝试其他组合
+            }
+        }
+    }
+
+    helper(0, []); // 从索引0开始，初始空数组作为起点
+    return result;
+}
+
+export function returnReverseVal(val, isReturnString = true) {
+    const isBol = typeof val === "boolean";
+    const isString = typeof val === "string";
+    let reverseNewval = "";
+    if (isBol) {
+        reverseNewval = !val;
+    }
+    if (isString) {
+        reverseNewval = val === "true" ? "false" : "true";
+    }
+    return reverseNewval;
+}
+
+export function returnGiftArr(arr) {
+    let result = []
+    for (let i = 0; i < arr.length; i++) {
+        const info = arr[i].info
+        for (let j = 0; j < info.length; j++) {
+            if (info[j].isGift === 'true') {
+                result.push(info[j])
+            }
+        }
+    }
+    return result
+}
+
+export function formatOrderGoodsList(arr) {
+    const goodsMap = {}
+    for (let i in arr) {
+        const goods = arr[i]
+        if (goods.productName != '客座费') {
+            if (goodsMap.hasOwnProperty(goods.placeNum)) {
+                goodsMap[goods.placeNum || 1].push(goods)
+            } else {
+                goodsMap[goods.placeNum || 1] = [goods]
+            }
+        }
+
+    }
+    return Object.entries(goodsMap).map(([key, value]) => ({
+        info: value,
+        placeNum: key || 1
+    }))
+}
+
+export function returnIsSeatFee(item) {
+    if (!item) {
+        return false
+    }
+    return item.productId == "-999"?true:false;
+}
+/**
+ * 计算购物车会员优惠价格
+ */
+export function returnVipDiscountPrice() {
+
+}
+
+//计算商品券优惠价格
+export function returnProductCouponPrice(coup, goodsArr, vipUser) {
+    const item = goodsArr.find(v => v.productId == coup.proId);
+    if(!item){
+        return 0
+    }
+    const memberPrice = item.memberPrice ? item.memberPrice : item.price;
+    const price = item ? (vipUser.isVip ? memberPrice : item.price) : 0;
+    return price*coup.num
+
+}
+//返回新的商品列表，过滤掉退菜的，退单的商品
+export function returnNewGoodsList(arr) {
+    let goodsMap={}
+    return arr.filter(v => !isTui(v))
+}
+//根据当前购物车商品以及数量,已选券对应商品数量，判断该商品券是否可用
+export function returnCoupCanUse(goodsArr=[],coup,selCoupArr=[]) {
+	if(!coup.use){
+		return false
+	}
+	const findGoods=goodsArr.filter(v=>v.productId==coup.proId)
+	if(!findGoods.length){
+		return false
+	}
+	const findGoodsTotalNumber=findGoods.reduce((prve,cur)=>{
+		return prve+cur.num*1
+	},0)
+	const selCoupNumber=selCoupArr.filter(v=>v.proId==coup.proId).reduce((prve,cur)=>{
+		return prve+cur.num*1
+	},0)
+	if(selCoupNumber>=findGoodsTotalNumber){
+		return false
+	}
+	return findGoodsTotalNumber<(coup.num+selCoupNumber)?false:true
+}
+//查找购物车商品根据购物车商品数据返回商品券信息（抵扣价格以及是否满足可用需求）
+export function returnProductCoupon(coup, goodsArr, vipUser,selCoupArr=[]) {
+    const newGoodsArr = returnNewGoodsList(goodsArr)
+    const item = newGoodsArr.find(v => v.productId == coup.proId);
+    if(!item){
+        return {...coup, discountAmount: 0,use:false}
+    }
+    const memberPrice = item.memberPrice ? item.memberPrice : item.price;
+    const price = item ? (vipUser.isVip ? memberPrice : item.price) : 0;
+	const discountAmount=(price*coup.num).toFixed(2)
+	console.log(discountAmount);
+    const canUse=!coup.use?false:(discountAmount>0&&returnCoupCanUse(goodsArr,coup,selCoupArr))
+    // const canUse=discountAmount>0
+    return { ...coup, discountAmount: discountAmount,use:canUse}
+
+}
+/**
+ * 根据购物车商品计算商品券抵扣价格以及是否满足可用需求
+ * 1.商品券对应商品数量大于购物车对应商品数量不可用
+ * 2.未在购物车找到相关商品不可用
+ * @param {*} coupArr 
+ * @param {*} goodsArr 
+ * @param {*} vipUser 
+ * @returns 
+ */
+export function returnProductAllCoup(coupArr, goodsArr, vipUser){
+    return coupArr.map((v) => {
+        return returnProductCoupon(v, goodsArr, vipUser)
+      })
+
+}
+
+//计算商品券总优惠价格
+export function returnProductCouponAllPrice(coupArr, goodsArr, vipUser) {
+    if(coupArr.length == 0){
+        return 0;
+    }
+    return coupArr.reduce((a, b) => {
+        const price = returnProductCouponPrice(b, goodsArr, vipUser)
+        return a + price;
+    }, 0).toFixed(2);
+
+}
+//计算满减券总优惠价格
+export function returnFullReductionCouponAllPrice(coupArr) {
+    if(coupArr.length == 0){
+        return 0;
+    }
+    return coupArr.filter(v => v.type == 1).reduce((a, b) => {
+        const price = b.discountAmount
+        return a + price;
+    }, 0).toFixed(2);
+
+}
+//计算优惠券总价格
+export function returnCouponAllPrice(coupArr, goodsArr, vipUser) {
+    const poductAllprice=returnProductCouponAllPrice(coupArr, goodsArr, vipUser)
+    const pointAllPrice=returnFullReductionCouponAllPrice(coupArr)
+    return (poductAllprice*1+pointAllPrice*1).toFixed(2);
+}
+
+//返回购物车商品价格
+export function returnCartPrice(goods, vipUser) {
+    const price=goods.price||goods.salePrice
+    if(!vipUser||!vipUser.id ||!vipUser.isVip){
+        return price
+    }
+    const memberPrice = goods.memberPrice ? goods.memberPrice :price;
+    return memberPrice
+}
\ No newline at end of file
diff --git a/src/views/tool/table/components/addEara.vue b/src/views/tool/table/components/addEara.vue
index 58a9afc..b8902e4 100644
--- a/src/views/tool/table/components/addEara.vue
+++ b/src/views/tool/table/components/addEara.vue
@@ -1,73 +1,82 @@
 <template>
-    <el-dialog :title="form.id ? '编辑区域' : '添加区域'" :visible.sync="dialogVisible" @close="reset">
-        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
-            <el-form-item label="区域名称" prop="name">
-                <el-input v-model="form.name" placeholder="请输入区域名称"></el-input>
-            </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
-        </span>
-    </el-dialog>
+  <el-dialog :title="form.id ? '编辑区域' : '添加区域'" v-model="dialogVisible" @close="reset">
+    <el-form ref="refForm" :model="form" :rules="rules" label-width="120px" label-position="left">
+      <el-form-item label="区域名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入区域名称"></el-input>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="form.sort" placeholder="请输入排序"></el-input-number>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
-<script>
-import { tbShopArea } from '@/api/table'
-export default {
-    data() {
-        return {
-            dialogVisible: false,
-            form: {
-                id: '',
-                name: ''
-            },
-            rules: {
-                name: [
-                    {
-                        required: true,
-                        message: '请输入区域名称',
-                        trigger: 'blur'
-                    }
-                ]
-            }
-        }
+<script setup>
+import APi from "@/api/account/shopArea";
+
+let dialogVisible = ref(false);
+const form = reactive({
+  name: "",
+});
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: "请输入区域名称",
+      trigger: "blur",
     },
-    methods: {
-        onSubmitHandle() {
-            this.$refs.form.validate(async valid => {
-                if (valid) {
-                    try {
-                        let res = await tbShopArea({
-                            ...this.form,
-                            shopId: localStorage.getItem('shopId')
-                        }, this.form.id ? 'put' : 'post')
-                        this.$emit('success', res)
-                        this.close()
-                        this.$notify({
-                            title: '成功',
-                            message: `${this.form.id ? '编辑' : '添加'}成功`,
-                            type: 'success'
-                        });
-                    } catch (error) {
-                        console.log(error)
-                    }
-                }
-            })
-        },
-        show(obj) {
-            this.dialogVisible = true
-            if (obj && obj.id) {
-                this.form = JSON.parse(JSON.stringify(obj))
-            }
-        },
-        close() {
-            this.dialogVisible = false
-        },
-        reset() {
-            this.form.id = ''
-            this.form.name = ''
-        }
+  ],
+  sort: [
+    {
+      required: true,
+      message: "请输入排序",
+      trigger: "blur",
+    },
+  ],
+});
+
+const emits = defineEmits(["success"]);
+const refForm = ref(null);
+function onSubmitHandle() {
+  refForm.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        let res = !form.id ? await APi.add(form) : await APi.edit(form);
+        emits("success", res);
+        close();
+        ElNotification({
+          title: "成功",
+          message: `${form.id ? "编辑" : "添加"}成功`,
+          type: "success",
+        });
+      } catch (error) {
+        console.log(error);
+      }
     }
+  });
 }
+function show(obj) {
+  dialogVisible.value = true;
+  if (obj && obj.id) {
+    Object.assign(form, obj);
+  }
+}
+function close() {
+  dialogVisible.value = false;
+}
+function reset() {
+  form.id = "";
+  form.name = "";
+  form.sort = "";
+}
+defineExpose({
+  show,
+  close,
+});
 </script>
\ No newline at end of file
diff --git a/src/views/tool/table/components/addTable.vue b/src/views/tool/table/components/addTable.vue
index feb542f..719066e 100644
--- a/src/views/tool/table/components/addTable.vue
+++ b/src/views/tool/table/components/addTable.vue
@@ -1,21 +1,13 @@
 <template>
   <el-dialog
     :title="form.id ? '编辑台桌' : '添加台桌'"
-    :visible.sync="dialogVisible"
+    v-model="dialogVisible"
     @open="tbShopAreaGet"
     @close="reset"
   >
-    <el-form
-      ref="form"
-      :model="form"
-      :rules="rules"
-      label-width="120px"
-      label-position="left"
-    >
+    <el-form ref="refForm" :model="form" :rules="rules" label-width="120px" label-position="left">
       <el-form-item label="选择区域" prop="areaId">
-        <el-select v-model="form.areaId" placeholder="请选择区域"
-        @change="selectChange($event, 'form' , 'areaId')"
-        >
+        <el-select v-model="form.areaId" placeholder="请选择区域">
           <el-option
             :label="item.name"
             :value="item.id"
@@ -34,202 +26,172 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="台桌标识"  prop="sign">
+      <el-form-item label="台桌标识" prop="sign" v-if="!form.id">
         <div class="u-flex">
-            <div class="u-flex" style="width: 57px;">
-                  <el-input
-              v-model="form.sign"
-              placeholder="A"
-            ></el-input>
-            </div>
-      
-          <div class="u-flex u-m-l-30" >
-            <div class="u-flex">
-                <div class="u-m-r-4">起始</div>
-                <el-input v-model="form.start" style="width: 57px;" placeholder="请输入起始值" >
-          </el-input>
+          <div class="u-flex" style="width: 57px">
+            <el-input v-model="form.sign" placeholder="A"></el-input>
+          </div>
 
+          <div class="u-flex u-m-l-30">
+            <div class="u-flex">
+              <div class="u-m-r-4">起始</div>
+              <el-input
+                v-model="form.start"
+                style="width: 57px"
+                placeholder="请输入起始值"
+              ></el-input>
+            </div>
+
+            <div
+              style="background-color: #d9d9d9; height: 1px; width: 32px; border-radius: 1px"
+              class="u-m-l-16 u-m-r-16"
+            ></div>
+            <div class="u-flex">
+              <span class="u-m-r-4">结束</span>
+              <el-input
+                v-model="form.end"
+                style="width: 57px"
+                placeholder="请输入结束值"
+              ></el-input>
             </div>
-           
-          <div
-            style="
-              background-color: #D9D9D9;
-              height: 1px;
-              width: 32px;
-              border-radius: 1px;
-            "
-            class="u-m-l-16 u-m-r-16"
-          ></div>
-          <div class="u-flex">
-            <span class="u-m-r-4">结束</span>
-            <el-input v-model="form.end" style="width: 57px;" placeholder="请输入结束值">
-                
-          </el-input>
           </div>
-       
-          </div>
-       
         </div>
       </el-form-item>
+      <el-form-item label="台桌名称" prop="name" v-if="form.id">
+        <el-input v-model="form.name" placeholder="请输入台桌名称"></el-input>
+      </el-form-item>
       <el-form-item label="客座数">
         <el-input-number
-          v-model="form.capacity"
+          v-model="form.maxCapacity"
           :min="0"
           controls-position="right"
         ></el-input-number>
       </el-form-item>
       <el-form-item label="清台管理">
         <el-radio-group v-model="form.autoClear">
-          <el-radio-button :label="0">手动清台</el-radio-button>
-          <el-radio-button :label="1">自动清台</el-radio-button>
+          <el-radio-button :value="0">手动清台</el-radio-button>
+          <el-radio-button :value="1">自动清台</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="网络预定开关">
-        <el-switch
-          v-model="form.isPredate"
-          :active-value="1"
-          :inactive-value="2"
-        ></el-switch>
+      <el-form-item v-if="form.id" label="网络预定开关">
+        <el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
       </el-form-item>
-      <el-form-item label="类型">
-        <el-radio-group v-model="form.type">
-          <el-radio-button :label="0">低消</el-radio-button>
-          <el-radio-button :label="2">计时</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="最低消费" v-if="form.type == 0">
+      <el-form-item v-if="form.id" label="网络预定台桌支付金额">
         <el-input-number
-          v-model="form.amount"
-          :min="0"
-          controls-position="right"
-        ></el-input-number>
-      </el-form-item>
-      <el-form-item label="每小时收费" v-if="form.type == 2">
-        <el-input-number
-          v-model="form.perhour"
+          v-model="form.predateAmount"
           :min="0"
           controls-position="right"
         ></el-input-number>
       </el-form-item>
     </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" :loading="loading" @click="onSubmitHandle"
-        >确 定</el-button
-      >
-    </span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+      </span>
+    </template>
   </el-dialog>
 </template>
 
-<script>
-import { tbShopTable, tbShopAreaGet ,$fastCreateTable} from "@/api/table";
-export default {
-  data() {
-    return {
-      dialogVisible: false,
-      resetForm: "",
-      loading: false,
-      status: [
-        { value: "pending", name: "挂单中" },
-        { value: "using", name: "开台中" },
-        { value: "paying", name: "结算中" },
-        { value: "idle", name: "空闲" },
-        { value: "subscribe", name: "预定" },
-        { value: "closed", name: "关台" },
-        // {value:'opening',name:'开台中'},
-        { value: "cleaning", name: "台桌清理中" },
-      ],
-      form: {
-        id: "",
-        areaId: "",
-        sign:'',
-        start:1,
-        end:10,
-        capacity: 0,
-        isPredate: 1,
-        type: 2,
-        perhour: 0,
-        amount: 0,
-        autoClear: 1,
-      },
-      rules: {
-        areaId: [
-          {
-            required: true,
-            message: "请选择区域",
-            trigger: ["blur","change"],
-          },
-        ],
-        sign: [
-          {
-            required: true,
-            message: "请输入台桌标识",
-            trigger: ["blur","change"],
-          },
-        ],
-      },
-      areaList: [],
-    };
-  },
-  mounted() {
-    this.resetForm = { ...this.form };
-  },
-  methods: {
-    //解决selectc值改变后未验证问题
-    selectChange($event, ref, type) {
-      this.$refs[ref][0].validateField(type)
+<script setup>
+import shopAreaApi from "@/api/account/shopArea";
+import tableApi from "@/api/account/table";
+let dialogVisible = ref(false);
+let resetForm = {};
+let loading = ref(false);
+let status = [
+  { value: "pending", name: "挂单中" },
+  { value: "using", name: "开台中" },
+  { value: "paying", name: "结算中" },
+  { value: "idle", name: "空闲" },
+  { value: "subscribe", name: "预定" },
+  { value: "closed", name: "关台" },
+  // {value:'opening',name:'开台中'},
+  { value: "cleaning", name: "台桌清理中" },
+];
+
+const form = reactive({
+  areaId: "",
+  sign: "",
+  start: 1,
+  end: 10,
+  maxCapacity: 0,
+  autoClear: 1,
+  isPredate: "",
+  predateAmount: "",
+});
+const rules = {
+  areaId: [
+    {
+      required: true,
+      message: "请选择区域",
+      trigger: ["blur", "change"],
     },
-    onSubmitHandle() {
-      this.$refs.form.validate(async (valid) => {
-        if (valid) {
-          this.loading = true;
-          try {
-            let res = await $fastCreateTable(
-              {
-                ...this.form,
-                qrcode: this.form.tableId,
-                shopId: localStorage.getItem("shopId"),
-              },
-              this.form.id ? "put" : "post"
-            );
-            this.$emit("success", res);
-            this.close();
-            this.$notify({
-              title: "成功",
-              message: `${this.form.id ? "编辑" : "添加"}成功`,
-              type: "success",
-            });
-            this.loading = false;
-          } catch (error) {
-            this.loading = false;
-            console.log(error);
-          }
-        }
-      });
+  ],
+  sign: [
+    {
+      required: true,
+      message: "请输入台桌标识",
+      trigger: ["blur", "change"],
     },
-    show(obj) {
-      this.dialogVisible = true;
-      if (obj && obj.id) {
-        this.form = JSON.parse(JSON.stringify(obj));
-      }
-    },
-    close() {
-      this.dialogVisible = false;
-    },
-    reset() {
-      this.form = { ...this.resetForm };
-    },
-    // 获取区域
-    async tbShopAreaGet() {
+  ],
+};
+let areaList = ref([]);
+onMounted(() => {
+  resetForm = { ...form };
+});
+
+//解决selectc值改变后未验证问题
+const refForm = ref(null);
+const emits = defineEmits(["success"]);
+function onSubmitHandle() {
+  refForm.value.validate(async (valid) => {
+    if (valid) {
+      loading.value = true;
       try {
-        const { content } = await tbShopAreaGet({
-          shopId: localStorage.getItem("shopId"),
+        let res = form.id ? await tableApi.edit(form) : await tableApi.add(form);
+        console.log(res);
+        emits("success", res);
+        close();
+        ElNotification({
+          title: "成功",
+          message: `${form.id ? "编辑" : "添加"}成功`,
+          type: "success",
         });
-        this.areaList = content;
+        loading.value = false;
       } catch (error) {
+        loading.value = false;
         console.log(error);
       }
-    },
-  },
-};
+    }
+  });
+}
+function show(obj) {
+  dialogVisible.value = true;
+  if (obj && obj.id) {
+    Object.assign(form, obj);
+  }
+}
+function close() {
+  dialogVisible.value = false;
+}
+function reset() {
+  delete form.id;
+  Object.assign(form, resetForm);
+  console.log(form);
+}
+// 获取区域
+async function tbShopAreaGet() {
+  try {
+    const data = await shopAreaApi.getList({});
+    areaList.value = data.records;
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+defineExpose({
+  show,
+  close,
+});
 </script>
\ No newline at end of file
diff --git a/src/views/tool/table/index.vue b/src/views/tool/table/index.vue
index 41a40c8..f1c28a6 100644
--- a/src/views/tool/table/index.vue
+++ b/src/views/tool/table/index.vue
@@ -1 +1,497 @@
-<template></template>
\ No newline at end of file
+<template>
+  <div class="app-container">
+    <el-tabs v-model="tableArea.tabsSel" type="card" @tab-click="tabClick">
+      <el-tab-pane label="全部" name="" />
+      <el-tab-pane
+        v-for="item in tableArea.tabs"
+        :key="item.id"
+        :label="item.name"
+        :name="`${item.id}`"
+      >
+        <template #label>
+          <div class="">
+            <span>
+              {{ item.name }}
+            </span>
+            <el-icon style="margin: 0 10px" @click="addEaraShow(item)"><EditPen /></el-icon>
+            <el-popconfirm title="确定删除吗？" @confirm="delArea(item.id)">
+              <template #reference>
+                <el-icon><Delete /></el-icon>
+              </template>
+            </el-popconfirm>
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+
+    <div class="">
+      <el-button icon="plus" @click="addEaraShow()">添加区域</el-button>
+      <el-button type="primary" icon="plus" @click="addTableShow()">添加台桌</el-button>
+      <el-button type="primary" icon="download" @click="downloadTableCpde">下载桌台码</el-button>
+      <el-button type="primary" icon="download" @click="downloadShopCpde">下载店铺码</el-button>
+    </div>
+
+    <div class="u-flex u-p-b-15 u-font-14 u-m-t-16">
+      <div v-for="(item, key) in status" :key="key" class="state u-m-r-24">
+        <span
+          class="dot"
+          :style="{
+            backgroundColor: status[key] ? status[key].type : '',
+          }"
+        />
+        {{ item.label }}
+      </div>
+    </div>
+
+    <!-- 列表 -->
+    <div class="head-container">
+      <div v-loading="loading" class="table_list">
+        <div
+          v-for="item in tableList"
+          :key="item.id"
+          class="item"
+          :style="{ 'background-color': status[item.status].type }"
+        >
+          <div class="new-top flex u-row-between">
+            <div class="u-flex u-flex-1 u-p-r-10">
+              <span class="name u-line-1" style="max-width: 50px">
+                {{ item.name }}
+              </span>
+              <span class="u-font-14 u-line-1">丨{{ areaMap[item.areaId] || "" }}</span>
+            </div>
+            <el-dropdown trigger="click" @command="tableComman($event, item)">
+              <el-icon color="#fff" class="cur-pointer"><More /></el-icon>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="edit">
+                    <i class="i el-icon-edit" />
+                    <span>编辑</span>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="del">
+                    <i class="i el-icon-delete" />
+                    <span>删除</span>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+          <div class="box">
+            <div class="top">
+              <div v-if="item.status == 'subscribe'">
+                <div class="row row1" style="align-items: flex-start">
+                  <span style="font-size: 14px; color: #333">
+                    {{ item.bookingInfo.createUserName }}订{{ item.bookingInfo.bookingPerson }}「{{
+                      item.bookingInfo.gender == 1 ? "先生" : "女士"
+                    }}」
+                  </span>
+                  <div
+                    class="state"
+                    style="font-size: 12px; color: #666; display: flex; align-items: center"
+                  >
+                    <img
+                      style="width: 16px; height: 16px; filter: contrast(0.5)"
+                      src="@/assets/images/perpole.png"
+                      alt=""
+                    />
+
+                    {{ item.bookingInfo.bookingTime.substring(11, 19) }}
+                  </div>
+                </div>
+                <div class="row">
+                  <span style="font-size: 14px; color: #333; margin-top: 5px">
+                    {{ item.bookingInfo.phoneNumber }}
+                  </span>
+                </div>
+              </div>
+
+              <div v-else class="u-font-18 font-600 total-price">
+                <span
+                  v-if="item.status == 'using'"
+                  class="cur-pointer"
+                  @click="diancanShow(item, 'isAddGoods')"
+                >
+                  ¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
+                </span>
+                <!-- <span v-else class="color-fff">|</span> -->
+              </div>
+              <div class="row btn-group" style="margin-top: 10px">
+                <template v-if="item.status == 'subscribe'">
+                  <el-button
+                    type="success"
+                    :disabled="!item.tableId || item.status === 'closed'"
+                    @click="markStatus(item, -1)"
+                  >
+                    取消预约
+                  </el-button>
+                </template>
+                <template v-if="item.status == 'subscribe' && item.bookingInfo.status == 20">
+                  <el-button
+                    type="success"
+                    :disabled="!item.tableId || item.status === 'closed'"
+                    @click="markStatus(item, 10)"
+                  >
+                    到店
+                  </el-button>
+                </template>
+                <template
+                  v-if="
+                    item.status == 'idle' ||
+                    (item.status == 'subscribe' && item.bookingInfo.status == 10)
+                  "
+                >
+                  <el-button
+                    type="primary"
+                    :disabled="!item.tableId || item.status === 'closed'"
+                    @click="diancanShow(item)"
+                  >
+                    点餐
+                  </el-button>
+                </template>
+                <template v-else-if="item.status != 'idle' && item.status != 'subscribe'">
+                  <template v-if="item.status == 'using'">
+                    <el-button
+                      :disabled="!item.tableId || item.status === 'closed'"
+                      @click="diancanShow(item, 'isAddGoods')"
+                    >
+                      加菜
+                    </el-button>
+                    <el-button
+                      type="danger"
+                      :disabled="!item.tableId || item.status === 'closed'"
+                      @click="diancanShow(item, 'isPayOrder')"
+                    >
+                      结账
+                    </el-button>
+                  </template>
+                  <template v-else-if="item.status == 'closed'">
+                    <el-button type="info" disabled>已关台</el-button>
+                  </template>
+                  <template v-else-if="item.status == 'cleaning'">
+                    <el-button
+                      type="info"
+                      :style="{
+                        backgroundColor: status[item.status].type,
+                        borderColor: status[item.status].type,
+                      }"
+                      @click="cleanTableHandle(item)"
+                    >
+                      清台
+                    </el-button>
+                  </template>
+                  <template v-else>
+                    <el-button type="info" disabled>点餐</el-button>
+                  </template>
+                </template>
+              </div>
+            </div>
+            <div
+              class="u-flex u-col-bottom bottom u-row-between color-666"
+              :class="{ 'opacity-0': item.status == 'closed' }"
+            >
+              <div class="u-flex u-col-center">
+                <img
+                  style="width: 16px; height: 16px; filter: contrast(0.5)"
+                  src="@/assets/images/perpole.png"
+                  alt=""
+                />
+                <span class="u-m-t-4 u-font-12 u-m-l-2">
+                  {{ item.useNum || 0 }}/{{ item.maxCapacity }}
+                </span>
+              </div>
+              <div v-if="item.status == 'using'" class="u-flex">
+                <img
+                  style="width: 16px; height: 16px; filter: contrast(0.5)"
+                  src="@/assets/images/shalou.png"
+                  alt=""
+                />
+                <span class="u-m-t-4 u-font-12">{{ formatTime(item.durationTime) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="empty_wrap">
+          <el-empty v-if="!tableList.length" description="空空如也~" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <addEara ref="refAddEara" @success="areainit" />
+    <addTable ref="refAddTable" @success="tableinit" />
+  </div>
+</template>
+
+<script setup>
+import status from "./status.js";
+
+import shopAreaApi from "@/api/account/shopArea";
+import tableApi from "@/api/account/table";
+import addEara from "./components/addEara.vue";
+import addTable from "./components/addTable.vue";
+
+let loading = ref(false);
+//工具方法
+function formatTime(milliseconds) {
+  console.log(milliseconds);
+  if (!milliseconds) {
+    return "";
+  }
+  const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
+  return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"}`;
+}
+
+function downloadTableCpde() {}
+function downloadShopCpde() {}
+
+// 台桌
+
+/**
+ * 编辑/删除
+ * @param command
+ * @param item
+ */
+function tableComman(command, item) {
+  if (command === "edit") {
+    return refAddTable.value.show(item);
+  }
+  if (command === "del") {
+    ElMessageBox.confirm("是否删除" + item.name + "台桌", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    })
+      .then(async () => {
+        await tableApi.delete(item.id);
+        ElMessage.success("删除成功");
+        tableInit();
+      })
+      .catch(() => {});
+    return;
+  }
+}
+
+const refAddTable = ref(null);
+function addTableShow(item) {
+  refAddTable.value.show(item);
+}
+
+const tableList = ref([]);
+const tablequery = reactive({
+  page: 1,
+  size: 100,
+});
+
+async function tableInit() {
+  const res = await tableApi.getList({ ...tablequery, areaId: tableArea.tabsSel });
+  tableList.value = res.records;
+}
+
+// 区域
+let areaMap = ref({});
+const refAddEara = ref(null);
+function addEaraShow(item) {
+  refAddEara.value.show(item);
+}
+const tabVlaue = ref("");
+const tabs = ref([]);
+const tableArea = reactive({
+  tabs: [],
+  tabsSel: "",
+});
+watch(
+  () => tableArea.tabsSel,
+  () => {
+    tableInit();
+  }
+);
+//区域删除
+function delArea(id) {
+  shopAreaApi.delete(id).then((res) => {
+    ElMessage.success("删除成功");
+    areainit();
+  });
+}
+//区域列表初始化
+async function areainit() {
+  const res = await shopAreaApi.getList();
+  console.log(res);
+  tableArea.tabs = res.records;
+  areaMap.value = res.records.reduce((prve, cur) => {
+    prve[cur.id] = cur.name;
+    return prve;
+  }, {});
+}
+
+const tabClick = (tab) => {
+  console.log(tab);
+};
+init();
+function init() {
+  areainit();
+  tableInit();
+}
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.el-tabs {
+  margin-bottom: 0;
+}
+</style>
+<style scoped lang="scss">
+.cur-pointer {
+  cursor: pointer;
+}
+.opacity-0 {
+  opacity: 0;
+}
+.icon {
+  margin-left: 10px;
+}
+::v-deep .btn-group .el-button {
+  width: 100%;
+}
+::v-deep .el-dropdown-menu__item {
+  line-height: 36px;
+  padding: 0 20px;
+  min-width: 60px;
+  text-align: center;
+}
+.state {
+  display: flex;
+  align-items: center;
+
+  .dot {
+    $size: 8px;
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    margin-right: $size;
+  }
+}
+.table_list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  min-height: 150px;
+
+  .empty_wrap {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
+  .btn-group {
+    display: flex;
+    gap: 10px;
+  }
+
+  .item {
+    padding: 1px;
+    overflow: hidden;
+    border: 1px solid #ddd;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border-radius: 6px;
+    background-color: #1890ff;
+    max-width: 210px;
+    min-width: 190px;
+    &.using {
+      background-color: rgb(250, 85, 85);
+    }
+    &.closed {
+      background-color: rgb(221, 221, 221);
+      filter: grayscale(1);
+    }
+    .total-price {
+      line-height: 35px;
+      height: 35px;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    .new-top {
+      height: 30px;
+      color: #fff;
+      padding: 0 12px;
+    }
+    .name {
+      font-size: 16px;
+      line-height: 30px;
+      margin-right: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .box {
+      height: 100%;
+      background-color: #fff;
+      border-radius: 3px 3px 6px 6px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+    .bottom {
+      border-top: 1px solid #f7f7fa;
+      padding: 6px 15px;
+    }
+    .top {
+      padding: 10px;
+      background-color: #fff;
+      flex: 1;
+      border-radius: 3px 3px 0 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      .row {
+        display: flex;
+        gap: 10px;
+
+        .tips {
+          font-size: 12px;
+        }
+
+        &.row1 {
+          justify-content: space-between;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .btm {
+      border-top: 1px solid #ddd;
+      background-color: #efefef;
+      display: flex;
+      border-radius: 0 0 6px 6px;
+      .btm_item {
+        flex: 1;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &:nth-child(1) {
+          &::before {
+            content: "";
+            height: 50%;
+            border-right: 1px solid #ddd;
+            position: absolute;
+            top: 25%;
+            right: 0;
+          }
+        }
+
+        .i {
+          color: #666;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/user/active/components/addActive.vue b/src/views/user/active/components/addActive.vue
new file mode 100644
index 0000000..742b947
--- /dev/null
+++ b/src/views/user/active/components/addActive.vue
@@ -0,0 +1,327 @@
+<template>
+  <div>
+    <el-dialog :title="form.id ? '编辑活动' : '添加活动'" v-model="dialogVisible" @close="reset">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+        <el-form-item label="充值">
+          <el-input
+            style="width: 220px"
+            placeholder="请输入金额"
+            v-model="form.amount"
+            @input="(v) => (form.amount = v.replace(/^(0+)|[^\d]+/g, ''))"
+          >
+            <template #prepend>满</template>
+            <template #append>元</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="赠送">
+          <div style="display: flex">
+            <el-input
+              style="width: 220px"
+              placeholder="请输入金额"
+              v-model="form.giftAmount"
+              @input="(v) => (form.giftAmount = v.replace(/^(0+)|[^\d]+/g, ''))"
+            >
+              <template #prepend>赠</template>
+              <template #append>元</template>
+            </el-input>
+            <el-input
+              style="margin-left: 20px; width: 220px"
+              placeholder="请输入金额"
+              v-model="form.giftPoints"
+              @input="(v) => (form.giftPoints = v.replace(/^(0+)|[^\d]+/g, ''))"
+            >
+              <template #prepend>赠</template>
+              <template #append>积分</template>
+            </el-input>
+          </div>
+        </el-form-item>
+        <el-form-item label="是否使用优惠券">
+          <el-switch v-model="form.isGiftCoupon" :active-value="1" :inactive-value="0"></el-switch>
+        </el-form-item>
+        <el-form-item label="数量">
+          <el-input-number v-model="form.num" controls-position="right" :min="1"></el-input-number>
+        </el-form-item>
+        <el-form-item label="选择优惠劵" v-if="form.isGiftCoupon == 1">
+          <div>
+            <el-button
+              type="primary"
+              icon="el-icon-plus"
+              @click="$refs.coupon.show([...productIds])"
+            >
+              添加优惠劵
+            </el-button>
+          </div>
+          <div class="shop_list">
+            <div
+              class="item_wrap"
+              style="display: flex; align-items: center; margin-top: 6px"
+              v-for="(item, index) in productIds"
+              :key="index"
+            >
+              <div class="name">{{ item.title }}</div>
+
+              <el-button type="text" @click="productIds = []" style="margin-left: 20px">
+                删除
+              </el-button>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <coupon ref="coupon" @success="slectShop" />
+  </div>
+</template>
+
+<script>
+import handselTypes from "../handselTypes";
+// import { activate, storageupActivate } from '@/api/shop'
+import coupon from "@/components/coupon/index.vue";
+import activeApi from "@/api/account/activate";
+import { ElNotification } from "element-plus";
+export default {
+  components: { coupon },
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      handselTypes: handselTypes,
+      form: {
+        id: "",
+        amount: "",
+        giftAmount: "",
+        giftPoints: "",
+        isGiftCoupon: 0,
+        couponId: "",
+        num: 1,
+      },
+      productIds: [],
+      resetForm: "",
+      rules: {
+        minNum: [
+          {
+            required: true,
+            message: " ",
+            trigger: "blur",
+          },
+        ],
+        maxNum: [
+          {
+            required: true,
+            message: " ",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.resetForm = { ...this.form };
+  },
+  methods: {
+    slectShop(res) {
+      console.log(res, 11);
+      // if (this.productIds.length) {
+      //     res.map(async item => {
+      //         if (!await this.checkShop(item.id)) {
+      //             this.productIds.push({ ...item })
+      //         }
+      //     })
+      // } else {
+      this.productIds = res;
+      // }
+    },
+    // 判断是否存在重复商品
+    checkShop(id) {
+      let falg = false;
+      this.productIds.map((item) => {
+        if (item.id == id) {
+          falg = true;
+        }
+      });
+      return falg;
+    },
+    checkIfNum(item) {
+      item.num = item.num.toString().replace(/\D/g, "");
+    },
+    // 确认选择商品分类
+    classifySuccess(e) {
+      this.form.config.categoryList = e;
+    },
+    onSubmitHandle() {
+      console.log(this.form);
+      if (this.form.amount == "") {
+        this.$message({
+          message: "充值金额不能为空",
+          type: "warning",
+        });
+        return false;
+      }
+      if (this.form.isGiftCoupon == 1) {
+        if (this.productIds.length == 0) {
+          this.$message({
+            message: "请选择优惠劵",
+            type: "warning",
+          });
+          return false;
+        }
+        this.form.couponId = this.productIds[0].id;
+      } else {
+        this.form.couponId = "";
+        this.form.couponName = "";
+        this.productIds = [];
+      }
+      // let arr = []
+      // this.productIds.forEach(ele => {
+      //     arr.push({
+      //         productId: ele.id,
+      //         num: ele.num
+      //     })
+      // })
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          try {
+            this.loading = true;
+            let res = this.form.id
+              ? await activeApi.edit(this.form)
+              : await activeApi.add(this.form);
+            this.$emit("success", res);
+            this.close();
+            ElNotification({
+              title: "成功",
+              message: `${this.form.id ? "编辑" : "添加"}成功`,
+              type: "success",
+            });
+            this.loading = false;
+          } catch (error) {
+            this.loading = false;
+            console.log(error);
+          }
+        }
+      });
+    },
+    async show(obj) {
+      this.productIds = [];
+      this.dialogVisible = true;
+      if (obj && obj.id) {
+        this.form = { ...obj };
+        // 留着以后说不定多个优惠劵
+        // let res = await activate(obj.id)
+        // this.productIds = res
+        if (obj.couponId) {
+          this.productIds = [{ title: obj.couponName, id: obj.couponId }];
+        }
+        console.log(obj, "调试1");
+      }
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+    reset() {
+      this.form = { ...this.resetForm };
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.labelbox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 12px;
+  color: #666666;
+  width: 130px;
+  background: #f7f7fa;
+  border-radius: 2px 2px 2px 2px;
+  border: 1px solid #dddfe6;
+  padding: 0 10px;
+
+  input {
+    border: none !important;
+  }
+}
+
+.labelboxss {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 14px;
+  color: #666666;
+}
+
+.shop_list {
+  // display: flex;/
+  // flex-wrap: wrap;
+
+  .item_wrap {
+    $size: 80px;
+
+    .item {
+      $radius: 4px;
+      width: $size;
+      height: $size;
+      border-radius: $radius;
+      overflow: hidden;
+      position: relative;
+      margin-right: 10px;
+      margin-top: 10px;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &::after {
+        content: attr(data-index);
+        font-size: 12px;
+        height: 20px;
+        display: flex;
+        padding: 0 10px;
+        border-radius: 0 0 $radius 0;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(10px);
+        color: #fff;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+      }
+
+      &::before {
+        content: "删除";
+        font-size: 12px;
+        width: 100%;
+        height: 20px;
+        display: flex;
+        padding: 0 10px;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(10px);
+        color: #fff;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        transition: all 0.1s ease-in-out;
+      }
+    }
+
+    .name {
+      width: $size;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/user/active/components/downloadQR.vue b/src/views/user/active/components/downloadQR.vue
new file mode 100644
index 0000000..6101b7d
--- /dev/null
+++ b/src/views/user/active/components/downloadQR.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="downloadQR" v-show="isshow">
+    <div class="box">
+      <img :src="imgUrl" style="width: 300px; height: 300px" alt="" />
+      <div class="btnStyle">
+        <el-button type="primary" @click="isshow = false">取消</el-button>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <a :href="imgUrl"><el-button type="primary" @click="downImg">下载</el-button></a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import { getwxacode } from '@/api/shop'
+
+export default {
+  data() {
+    return {
+      isshow: false,
+      imgUrl: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    show() {
+      this.getlist();
+    },
+    async getlist() {
+      let res = await getwxacode({
+        shopId: localStorage.getItem("shopId"),
+      });
+      this.isshow = true;
+
+      this.imgUrl = res;
+    },
+    downImg() {
+      // window.location.href()
+      window.URL.revokeObjectURL(this.imgUrl);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.downloadQR {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba($color: #000000, $alpha: 0.6);
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 9999;
+
+  .box {
+    padding: 20px;
+    border-radius: 3px;
+    height: 400px;
+    width: 340px;
+    background-color: #fff;
+    display: flex;
+    // align-items: center;
+    // justify-content: center;
+    flex-direction: column;
+  }
+
+  .btnStyle {
+    margin-top: 20px;
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/user/active/handselTypes.js b/src/views/user/active/handselTypes.js
new file mode 100644
index 0000000..427354b
--- /dev/null
+++ b/src/views/user/active/handselTypes.js
@@ -0,0 +1,10 @@
+export default [
+  {
+    label: "固定金额",
+    value: "GD"
+  },
+  {
+    label: "比例",
+    value: "RATIO"
+  }
+];
diff --git a/src/views/user/active/index.vue b/src/views/user/active/index.vue
index 30653d4..145338f 100644
--- a/src/views/user/active/index.vue
+++ b/src/views/user/active/index.vue
@@ -1,155 +1,147 @@
 <template>
   <div class="app-container">
-    <!-- 列表 -->
-    <!-- 搜索 -->
-    <page-search
-      ref="searchRef"
-      :search-config="searchConfig"
-      @query-click="handleQueryClick"
-      @reset-click="handleResetClick"
-    />
-    <!-- 列表 -->
-    <page-content
-      ref="contentRef"
-      :content-config="contentConfig"
-      @add-click="handleAddClick"
-      @edit-click="handleEditClick"
-      @export-click="handleExportClick"
-      @search-click="handleSearchClick"
-      @toolbar-click="handleToolbarClick"
-      @operat-click="handleOperatClick"
-      @filter-change="handleFilterChange"
-    >
-      <template #status="scope">
-        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
-          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
-        </el-tag>
-      </template>
-      <template #options="scope">
-        {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
-      </template>
-      <template #bol="scope">
-        {{ scope.row[scope.prop] ? "是" : "否" }}
-      </template>
-      <template #gender="scope">
-        <el-tag
-          :type="
-            scope.row[scope.prop] == null
-              ? 'info'
-              : scope.row[scope.prop] == 1
-              ? 'success'
-              : 'warning'
-          "
-        >
-          {{ scope.row[scope.prop] === null ? "未知" : scope.row[scope.prop] == 1 ? "男" : "女" }}
-        </el-tag>
-      </template>
-      <template #user="scope">
-        <div class="flex align-center">
-          <el-avatar :src="scope.row.headImg" />
-          <el-tag>{{ scope.row.nickName }}</el-tag>
-        </div>
-      </template>
-      <template #link="scope">
-        <el-link>{{ scope.row[scope.prop] }}</el-link>
-      </template>
-      <template #mobile="scope">
-        <el-text>{{ scope.row[scope.prop] }}</el-text>
-        <copy-button
-          v-if="scope.row[scope.prop]"
-          :text="scope.row[scope.prop]"
-          style="margin-left: 2px"
-        />
-      </template>
-    </page-content>
-
-    <!-- 新增 -->
-    <page-modal
-      ref="addModalRef"
-      :modal-config="addModalConfig"
-      @submit-click="handleSubmitClick"
-      @formDataChange="formDataChange"
-    ></page-modal>
-
-    <!-- 编辑 -->
-    <page-modal
-      ref="editModalRef"
-      :modal-config="editModalConfig"
-      @submit-click="handleSubmitClick"
-      @formDataChange="formDataChange"
-    ></page-modal>
+    <div class="head-container">
+      <el-button type="primary" icon="plus" @click="$refs.addActive.show()">添加活动</el-button>
+      <el-button type="primary" icon="download" @click="$refs.downloadQR.show()">
+        下载会员充值二维码
+      </el-button>
+      <div style="margin-top: 35px; font-size: 16px; color: #333">
+        允许充值自定义金额：
+        <el-switch
+          v-model="shopInfo.isCustom"
+          active-value="1"
+          inactive-value="0"
+          size="large"
+          @change="customStatusChange"
+        ></el-switch>
+      </div>
+    </div>
+    <div class="head-container">
+      <el-table :data="tableData.data" v-loading="tableData.loading">
+        <el-table-column label="店铺ID" prop="shopId"></el-table-column>
+        <el-table-column label="充值金额" prop="amount"></el-table-column>
+        <el-table-column label="赠送金额" prop="giftAmount"></el-table-column>
+        <el-table-column label="赠送积分" prop="giftPoints"></el-table-column>
+        <el-table-column label="是否使用优惠券" prop="isUseCoupon">
+          <template v-slot="scope">
+            {{ scope.row.isUseCoupon == 1 ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120">
+          <template v-slot="scope">
+            <el-button type="text" icon="edit" @click="$refs.addActive.show(scope.row)">
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="head-container">
+      <el-pagination
+        :total="tableData.total"
+        :current-page="tableData.page + 1"
+        :page-size="tableData.size"
+        @current-change="paginationChange"
+        layout="total"
+      ></el-pagination>
+    </div>
+    <addActive ref="addActive" @success="getTableData" />
+    <QR ref="downloadQR"></QR>
   </div>
 </template>
 
-<script setup >
-import usePage from "@/components/CURD/usePage";
-import addModalConfig from "./config/add";
-import contentConfig from "./config/content";
-import editModalConfig from "./config/edit";
-import searchConfig from "./config/search";
-import { returnOptionsLabel } from "./config/config";
-const editMoneyModalRef = ref(null);
-const {
-  searchRef,
-  contentRef,
-  addModalRef,
-  editModalRef,
-  handleQueryClick,
-  handleResetClick,
-  // handleAddClick,
-  // handleEditClick,
-  handleSubmitClick,
-  handleExportClick,
-  handleSearchClick,
-  handleFilterChange,
-} = usePage();
-
-// 修改金额表单类型
-function formDataChange(type, val) {
-  console.log(type, val);
-}
-
-// 新增
-async function handleAddClick() {
-  addModalRef.value?.setModalVisible();
-}
-// 获取优惠券
-async function getCouponList() {}
-// 编辑
-async function handleEditClick(row) {
-  editModalRef.value?.handleDisabled(false);
-  editModalRef.value?.setModalVisible();
-  // 根据id获取数据进行填充
-  // const data = await VersionApi.getFormData(row.id);
-  editModalRef.value?.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
-}
-
-// 其他工具栏
-function handleToolbarClick(name) {
-  console.log(name);
-  if (name === "custom1") {
-    ElMessage.success("点击了自定义1按钮");
-  }
-}
-
-// 其他操作列
-async function handleOperatClick(data) {
-  const row = data.row;
-  if (data.name == "more") {
-    if (data.command === "change-money") {
-      editMoneyModalRef.value.setModalVisible();
-      editMoneyModalRef.value.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
-      return;
-    }
-    return;
-  }
-}
-
-// 切换示例
-const isA = ref(true);
+<script>
+import handselTypes from "./handselTypes";
+import addActive from "./components/addActive.vue";
+import QR from "./components/downloadQR.vue";
+import activeApi from "@/api/account/activate";
+import dayjs from "dayjs";
+export default {
+  components: {
+    addActive,
+    QR,
+  },
+  data() {
+    return {
+      query: {
+        shopId: "",
+      },
+      tableData: {
+        data: [],
+        page: 0,
+        size: 10,
+        loading: false,
+        total: 0,
+      },
+      shopInfo: {
+        isCustom: "0",
+      },
+    };
+  },
+  filters: {
+    handselTypeFilter(value) {
+      return handselTypes.find((item) => item.value == value).label;
+    },
+    timeFilter(s) {
+      return dayjs(s).format("YYYY-MM-DD HH:mm:ss");
+    },
+  },
+  mounted() {
+    this.getTableData();
+  },
+  methods: {
+    // 切换状态
+    async statusChange(e, row) {
+      if (row.couponName) {
+        try {
+          this.tableData.loading = true;
+          const data = { ...row };
+          data.isUseCoupon = e;
+          console.log(data.isUseCoupon);
+          await storageupActivate(data);
+          this.getTableData();
+        } catch (error) {
+          console.log(error);
+          this.tableData.loading = false;
+        }
+      } else {
+        console.log(22);
+        this.$message({
+          message: "请选择优惠劵",
+          type: "warning",
+        });
+        return false;
+      }
+    },
+    // 重置查询
+    resetHandle() {
+      this.query.name = "";
+      this.query.type = "";
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e - 1;
+      this.getTableData();
+    },
+    // 获取商品列表
+    async getTableData() {
+      this.tableData.loading = true;
+      try {
+        const res = await activeApi.getList({});
+        this.tableData.loading = false;
+        this.tableData.data = res;
+        this.tableData.total = res.length;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    customStatusChange() {
+      this.updateShopInfo();
+    },
+    async updateShopInfo() {
+      await tbShopInfoPut(this.shopInfo);
+    },
+  },
+};
 </script>
-<style scoped>
-.align-center {
-  align-items: center;
-}
-</style>