Merge branch 'master' of https://e.coding.net/g-cphe0354/cashier/cashier-web into dwb

.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

.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

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)

src/api/account/bwc.ts

@@ -0,0 +1,60 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/freeDing";
+const API = {
+  getList() {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "get",
+    });
+  },
+
+  edit(data: editRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "put",
+      data: data,
+    });
+  },
+}
+export default API;
+/**
+ * 修改信息
+ *
+ * FreeDineConfigEditDTO
+ */
+export interface editRequest {
+  /**
+   * 是否启用
+   */
+  enable?: boolean | null;
+  /**
+   * 主键id
+   */
+  id: number | null;
+  /**
+   * 充值说明
+   */
+  rechargeDesc?: null | string;
+  /**
+   * 满多少可用
+   */
+  rechargeThreshold?: number | null;
+  /**
+   * 充值倍数
+   */
+  rechargeTimes?: number | null;
+  /**
+   * 使用类型 dine-in店内 takeout 自取 post快递，takeaway外卖
+   */
+  useType?: string[] | null;
+  /**
+   * 与优惠券同享
+   */
+  withCoupon?: boolean | null;
+  /**
+   * 积分同享
+   */
+  withPoints?: boolean | null;
+  [property: string]: any;
+}

src/api/account/callTable.ts

@@ -0,0 +1,277 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/callTable";
+const API = {
+  // 获取叫号配置
+  getConfig() {
+    return request<any>({
+      url: `${baseURL}/config`,
+      method: "get",
+    });
+  },
+  // 修改叫号配置
+  editConfig(data: editConfigRequest) {
+    return request<any>({
+      url: `${baseURL}/config`,
+      method: "put",
+      data: data
+    });
+  },
+  // 叫号桌型获取
+  getTable(params: getTableRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "get",
+      params
+    });
+  },
+  addTable(data: addTableRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "post",
+      data
+    });
+  },
+  editTable(data: editTableRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "put",
+      data
+    });
+  },
+  deleteTable(data: deleteTableRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "delete",
+      data
+    });
+  },
+  // 获取叫号号码
+  getTakeNumber(data: getTableNumberRequest) {
+    return request<any>({
+      url: `${baseURL}/takeNumber`,
+      method: "post",
+      data
+    });
+  },
+  //获取叫号队列
+  getTableNumberList(params: getTableNumberListRequest) {
+    return request<any>({
+      url: `${baseURL}/queue`,
+      method: "get",
+      params
+    });
+  },
+  //执行号码
+  callTableCall(data: callTableCallRequest) {
+    return request<any>({
+      url: `${baseURL}/call`,
+      method: "post",
+      data
+    });
+  },
+  //获取叫号页面二维码
+  callTableCode(params: callTableCodeRequest) {
+    return request<any>({
+      url: `${baseURL}/takeNumberCode`,
+      method: "get",
+      params
+    });
+  },
+  //修改叫号队列状态
+  updateTableState(data: updateTableStateRequest) {
+    return request<any>({
+      url: `${baseURL}/updateState`,
+      method: "put",
+      data
+    });
+  },
+  // 获取叫号记录列表
+
+  getCallRecord(params: getCallRecordRequest) {
+    return request<any>({
+      url: `${baseURL}/callRecord`,
+      method: "get",
+      params
+    });
+  },
+}
+export default API;
+
+/**
+ * UpdateConfigDTO
+ */
+export interface editConfigRequest {
+  /**
+   * 背景图
+   */
+  bgCover?: null | string;
+  /**
+   * 是否线上取号
+   */
+  isOnline?: number | null;
+  /**
+   * 临近几桌提醒
+   */
+  nearNum?: number | null;
+  [property: string]: any;
+}
+
+export interface getTableRequest {
+  /**
+   * 叫号桌型id
+   */
+  callTableId?: number;
+  page?: string;
+  size?: string;
+  /**
+   * 0禁用 1使用
+   */
+  state?: number;
+  [property: string]: any;
+}
+
+/**
+ * 新增数据
+ *
+ * CallTableDTO
+ */
+export interface addTableRequest {
+  /**
+   * 是否顺延
+   */
+  isPostpone?: number | null;
+  /**
+   * 台桌名称
+   */
+  name: null | string;
+  /**
+   * 临近几桌提醒
+   */
+  nearNum: number | null;
+  /**
+   * 备注
+   */
+  note?: null | string;
+  /**
+   * 顺延数量
+   */
+  postponeNum?: number | null;
+  /**
+   * 前缀
+   */
+  prefix: null | string;
+  /**
+   * 起始号码
+   */
+  start: number | null;
+  /**
+   * 等待时间
+   */
+  waitTime: number | null;
+  [property: string]: any;
+}
+
+/**
+ * UpdateCallTableDTO
+ */
+export interface editTableRequest {
+  callTableId: number | null;
+  name?: null | string;
+  nearNum?: number | null;
+  note?: null | string;
+  prefix?: null | string;
+  start?: number | null;
+  waitTime?: number | null;
+  [property: string]: any;
+}
+
+/**
+ * BaseCallTableDTO
+ */
+export interface deleteTableRequest {
+  /**
+   * 叫号桌型id
+   */
+  callTableId: number | null;
+  [property: string]: any;
+}
+
+/**
+ * TakeNumberDTO
+ */
+export interface getTableNumberRequest {
+  /**
+   * 叫号桌型id
+   */
+  callTableId: number | null;
+  /**
+   * 姓名
+   */
+  name?: null | string;
+  /**
+   * 备注
+   */
+  note?: null | string;
+  /**
+   * 手机号
+   */
+  phone: null | string;
+  /**
+   * 对应小程序用户id
+   */
+  userId?: number | null;
+  [property: string]: any;
+}
+export interface Request {
+  /**
+   * 桌型id
+   */
+  callTableId?: number;
+  /**
+   * 状态 -1已取消 0排队中 1叫号中 2已入座 3 已过号
+   */
+  state?: number;
+  [property: string]: any;
+}
+export interface getTableNumberListRequest {
+  /**
+   * 桌型id
+   */
+  callTableId?: number;
+  /**
+   * 状态 -1已取消 0排队中 1叫号中 2已入座 3 已过号
+   */
+  state?: number;
+  [property: string]: any;
+}
+/**
+ * CallQueueDTO
+ */
+export interface callTableCallRequest {
+  callQueueId: number | null;
+  [property: string]: any;
+}
+
+export interface callTableCodeRequest {
+  /**
+   * 叫号桌型id
+   */
+  callTableId: number;
+  [property: string]: any;
+}
+/**
+ * UpdateCallQueueDTO
+ */
+export interface updateTableStateRequest {
+  callQueueId: number | null;
+  state: number | null;
+  [property: string]: any;
+}
+export interface getCallRecordRequest {
+  /**
+   * 桌型id
+   */
+  callTableId?: number;
+  [property: string]: any;
+}

src/api/account/coupon.ts

@@ -0,0 +1,130 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/coupon";
+const API = {
+  getList(params: getListRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "get",
+      params
+    });
+  },
+  add(data: addRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "post",
+      data: data,
+    });
+  },
+
+  edit(data: editRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "put",
+      data: data,
+    });
+  },
+}
+export default API;
+export interface getListRequest {
+  status?: number;
+  type?: number;
+  [property: string]: any;
+}
+/**
+ * ShopCouponDTO
+ */
+export interface addRequest {
+  createTime?: string;
+  /**
+   * 隔多少天生效
+   */
+  daysToTakeEffect?: number;
+  /**
+   * 描述
+   */
+  description?: string;
+  /**
+   * 减多少金额
+   */
+  discountAmount?: number;
+  /**
+   * 发放人
+   */
+  editor?: string;
+  /**
+   * 满多少金额
+   */
+  fullAmount?: number;
+  /**
+   * 自增
+   */
+  id?: number;
+  /**
+   * 剩余数量
+   */
+  leftNumber?: number;
+  /**
+   * 发放数量
+   */
+  number?: number;
+  shopId?: number;
+  /**
+   * 状态0-关闭 1 正常
+   */
+  status?: number;
+  /**
+   * 名称(无意义)
+   */
+  title?: string;
+  /**
+   * 1-满减  2-商品
+   */
+  type?: number;
+  updateTime?: string;
+  /**
+   * 可用结束时间
+   */
+  useEndTime?: string;
+  /**
+   * 已使用数量
+   */
+  useNumber?: number;
+  /**
+   * 周 数组["周一","周二"]
+   */
+  userDays?: string;
+  /**
+   * 可用开始时间
+   */
+  useStartTime?: string;
+  /**
+   * all-全时段 custom-指定时段
+   */
+  useTimeType?: string;
+  /**
+   * 有效天数
+   */
+  validDays?: number;
+  /**
+   * 有效结束时间
+   */
+  validEndTime?: string;
+  /**
+   * 有效期类型，可选值为 fixed（固定时间）/custom（自定义时间）
+   */
+  validityType?: string;
+  /**
+   * 有效开始时间
+   */
+  validStartTime?: string;
+  [property: string]: any;
+}
+
+export interface editRequest extends addRequest {
+  /**
+   * 主键id
+   */
+  id: number;
+  [property: string]: any;
+}

src/api/account/padProd.ts

@@ -0,0 +1,102 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/padProd";
+const API = {
+  getList(data: getListRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "get",
+      params: data
+    });
+  },
+
+  get(params: getRequest) {
+    return request<any>({
+      url: `${baseURL}/detail`,
+      method: "get",
+      params
+    });
+  },
+  edit(data: editRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "put",
+      data: data,
+    });
+  },
+  add(data: addRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "post",
+      data: data,
+    });
+  },
+  delete(data: delteRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "delete",
+      data: data,
+    });
+  }
+}
+export default API;
+
+export type delteRequest = number | string | [number | string];
+
+/**
+ * PadDetailAddDTO
+ */
+export interface addRequest {
+  /**
+   * 布局id
+   */
+  padLayoutId: number | null;
+  /**
+   * 商品分类id
+   */
+  productCategoryId: number | null;
+  /**
+   * 商品id集合
+   */
+  productIdList: number[] | null;
+  [property: string]: any;
+}
+export interface getRequest {
+  /**
+   * tb_pad_product_category Id
+   */
+  id?: number;
+  [property: string]: any;
+}
+export interface getListRequest {
+  page?: string;
+  /**
+   * 分类id
+   */
+  productCategoryId?: number;
+  size?: string;
+  [property: string]: any;
+}
+
+/**
+ * PadDetailEditDTO
+ */
+export interface editRequest {
+  /**
+   * 列表id
+   */
+  id: number | null;
+  /**
+   * 布局id
+   */
+  padLayoutId?: number | null;
+  /**
+   * 商品列表id
+   */
+  productIdList?: number[] | null;
+  /**
+   * 排序值
+   */
+  sort: string;
+  [property: string]: any;
+}

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;
+}

src/api/account/printer.ts

@@ -0,0 +1,118 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/printer";
+const API = {
+  getList(data: getListRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "get",
+      params: data
+    });
+  },
+  add(data: addRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "post",
+      data: data,
+    });
+  },
+  delete(id: number | string) {
+    return request({
+      url: `${baseURL}`,
+      method: "delete",
+      data: { id },
+    });
+  },
+  edit(data: editRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "put",
+      data: data,
+    });
+  },
+  get(id: number | string) {
+    return request<any>({
+      url: `${baseURL}/detail`,
+      method: "get",
+      params: { id }
+    });
+  },
+}
+export default API;
+export interface getListRequest {
+  /**
+   * 类型 USB 网络 蓝牙
+   */
+  connectionType?: string;
+  /**
+   * 名称
+   */
+  name?: string;
+  [property: string]: any;
+}
+/**
+ * PrinterAddDTO
+ */
+export interface addRequest {
+  /**
+   * ip地址
+   */
+  address?: null | string;
+  /**
+   * 打印分类Id
+   */
+  categoryIds?: null | string;
+  /**
+   * 分类
+   */
+  categoryList?: null | string;
+  /**
+   * 分类打印 0-所有 1-部分分类 2-部分商品
+   */
+  classifyPrint: null | string;
+  /**
+   * 现在打印机支持USB 和 网络、蓝牙
+   */
+  connectionType: null | string;
+  /**
+   * 打印机品牌
+   */
+  contentType: null | string;
+  /**
+   * 设备名称
+   */
+  name: null | string;
+  /**
+   * 端口
+   */
+  port?: null | string;
+  /**
+   * 打印方式 all-全部打印 normal-仅打印结账单「前台」one-仅打印制作单「厨房」
+   */
+  printMethod: null | string;
+  /**
+   * 打印数量 c1m1^2=顾客+商家[2张] m1^1=商家[1张] c1^1顾客[1张] c2m1^3顾客2+商家1[3张]
+   */
+  printQty: null | string;
+  /**
+   * 打印类型，JSON数组 refund-确认退款单 handover-交班单 queue-排队取号
+   */
+  printType: null | string;
+  /**
+   * 小票尺寸 58mm 80mm
+   */
+  receiptSize?: null | string;
+  /**
+   * 排序
+   */
+  sort?: number | null;
+  /**
+   * 打印类型（分类）label标签cash小票kitchen出品
+   */
+  subType?: null | string;
+  [property: string]: any;
+}
+
+export interface editRequest extends addRequest {
+  id: number | string
+}

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;
+}

src/api/account/shopExtend.ts

@@ -0,0 +1,86 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/shopExtend";
+const API = {
+  get(data: getRequest) {
+    return request<any, ShopExtend>({
+      url: `${baseURL}`,
+      method: "get",
+      params: data
+    });
+  },
+  edit(data: editRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "put",
+      data: data,
+    });
+  }
+}
+export default API;
+
+export interface getRequest {
+  /**
+   * key名称
+   */
+  autoKey?: string;
+  [property: string]: any;
+}
+
+/**
+ * ShopExtendDTO
+ */
+export interface editRequest {
+  /**
+   * 自增id
+   */
+  autokey: null | string;
+  /**
+   * 值
+   */
+  value: null | string;
+  [property: string]: any;
+}
+
+
+/**
+* 店铺扩展信息 实体类。
+*
+* ShopExtend
+*/
+export interface ShopExtend {
+  /**
+   * 自定义key
+   */
+  autoKey?: null | string;
+  /**
+   * 创建时间
+   */
+  createTime?: null | string;
+  detail?: null | string;
+  /**
+   * 自增id
+   */
+  id?: number | null;
+  /**
+   * 描述
+   */
+  name?: null | string;
+  /**
+   * 商户Id
+   */
+  shopId?: number | null;
+  /**
+   * img:图片；text:文本；
+   */
+  type?: null | string;
+  /**
+   * 更新时间
+   */
+  updateTime?: null | string;
+  /**
+   * 值
+   */
+  value?: null | string;
+  [property: string]: any;
+}

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 },
     });
   }

src/api/product/index.ts

@@ -62,4 +62,306 @@ export interface Responseres {
   [property: string]: any;
 }
 
-export default AuthAPI;
+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;
+}

src/assets/icons/Coffee.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740188619494" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10600" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M867.360957 146.270357h16.015883c9.141486 0 16.893466 2.925275 23.402204 8.629562a36.565944 36.565944 0 0 1 11.99363 22.232094l25.157369 146.263775a35.980889 35.980889 0 0 1-8.556431 29.179623 34.664515 34.664515 0 0 1-28.009513 13.090608h-55.945894l-44.610451 623.961263a36.346548 36.346548 0 0 1-36.565943 34.298855H253.638158a36.346548 36.346548 0 0 1-36.565943-34.298855L172.461763 365.666019H116.589001a34.664515 34.664515 0 0 1-28.009513-13.16374 35.980889 35.980889 0 0 1-8.55643-29.106491l25.157369-146.263775a36.858471 36.858471 0 0 1 11.993629-22.232094A34.152591 34.152591 0 0 1 140.57626 146.270357h16.015884L148.547636 38.766482c0-10.604124 3.656594-19.74561 10.896651-27.351326A34.445119 34.445119 0 0 1 185.186712 0.006582h652.482699c10.677256 0 19.599346 3.802858 26.839402 11.481706 7.166925 7.605716 10.45786 16.747202 9.726541 27.424458L867.360957 146.270357zM793.058959 146.270357l5.704288-73.131888H225.116722l4.607309 73.131888h563.334928zM166.90374 292.534131h697.020018l-11.408574-73.131887H171.437917L160.029342 292.534131h6.874398z m78.836174 73.131888l42.270231 585.055099h447.93281l42.270231-585.055099H245.593651z" p-id="10601" fill="#000000"></path></svg>

src/assets/icons/postcard.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740188417254" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8262" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M160 224a32 32 0 0 0-32 32v512a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V256a32 32 0 0 0-32-32z m0-64h704a96 96 0 0 1 96 96v512a96 96 0 0 1-96 96H160a96 96 0 0 1-96-96V256a96 96 0 0 1 96-96" p-id="8263" fill="#000000"></path><path d="M704 320a64 64 0 1 1 0 128 64 64 0 0 1 0-128M288 448h256q32 0 32 32t-32 32H288q-32 0-32-32t32-32m0 128h256q32 0 32 32t-32 32H288q-32 0-32-32t32-32" p-id="8264" fill="#000000"></path></svg>

src/assets/icons/wallet.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740188698469" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11697" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M640 288h-64V128H128v704h384v32c0 9.344 2.986667 17.024 8.96 23.04 6.016 5.973333 13.696 8.96 23.04 8.96H96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04v-768a31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h512a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04v192zM128 320v512h768v-512H128zM96 256h832a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04v576a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04V288a31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96z m608 384a64.512 64.512 0 0 1-45.013333-18.986667 61.226667 61.226667 0 0 1-18.005334-45.013333c0-17.962667 5.973333-32.981333 18.005334-45.013333a61.098667 61.098667 0 0 1 45.013333-18.005334c17.962667 0 32.981333 6.016 45.013333 18.005334 12.032 12.032 18.005333 27.008 18.005334 45.013333 0 17.962667-6.058667 32.981333-18.005334 45.013333-12.032 11.989333-27.008 18.346667-45.013333 18.986667z" fill="#000000" fill-opacity=".96" p-id="11698"></path></svg>

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>

src/components/GoodsSelect/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <el-dialog title="选择商品" top="5vh" v-model="dialogVisible">
+    <el-form :model="searhForm" inline>
+      <el-form-item>
+        <el-input v-model="searhForm.name" placeholder="商品名称"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="searhForm.category" placeholder="商品分类" :disabled="disableCategory">
+          <el-option
+            :label="item.name"
+            :value="item.id"
+            v-for="item in categoryList"
+            :key="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getTableData">查询</el-button>
+        <el-button @click="resetHandle">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <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="商品信息">
+          <template v-slot="scope">
+            <div class="shop_info">
+              <el-image :src="scope.row.coverImg" style="width: 30px; height: 30px">
+                <template #error>
+                  <div class="img_error">
+                    <i class="icon el-icon-document-delete"></i>
+                  </div>
+                </template>
+              </el-image>
+              <span>{{ scope.row.name }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="规格">
+          <template v-slot="scope">
+            {{ scope.row.typeEnum }}
+          </template>
+        </el-table-column>
+        <el-table-column label="是否售罄">
+          <template v-slot="scope">
+            {{ scope.row.isPauseSale == 1 ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="是否分销">
+          <template v-slot="scope">
+            {{ scope.row.isDistribute == 1 ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="售价">
+          <template v-slot="scope">￥{{ scope.row.lowPrice }}</template>
+        </el-table-column>
+        <el-table-column label="销量/库存">
+          <template v-slot="scope">
+            {{ scope.row.realSalesNumber }}/{{ scope.row.stockNumber }}
+          </template>
+        </el-table-column>
+        <el-table-column label="分类名称" prop="categoryName"></el-table-column>
+        <el-table-column label="操作" v-if="radio">
+          <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>
+    <template #footer>
+      <span class="dialog-footer" v-if="!radio">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmHandle">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import productApi from "@/api/product/index";
+import paoductCategoryApi from "@/api/product/productclassification";
+
+export default {
+  props: {
+    // 是否禁用分类
+    disableCategory: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否为单选
+    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 productApi.getPage({
+          page: this.tableData.page,
+          size: this.tableData.size,
+          name: this.searhForm.name,
+          categoryId: this.searhForm.category,
+        });
+        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 paoductCategoryApi.getPage({
+          page: 0,
+          size: 100,
+        });
+        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);
+
+      await this.tbShopCategoryGet();
+      await this.getTableData();
+    },
+    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>

src/components/Upload/SingleImageUpload.vue

@@ -1,8 +1,17 @@
 <!-- 单图上传组件 -->
 <template>
-  <el-upload v-model="modelValue" class="single-upload" list-type="picture-card" :show-file-list="false"
-    :accept="props.accept" :before-upload="handleBeforeUpload" :http-request="handleUpload" :on-success="onSuccess"
-    :on-error="onError" multiple>
+  <el-upload
+    v-model="modelValue"
+    class="single-upload"
+    list-type="picture-card"
+    :show-file-list="false"
+    :accept="props.accept"
+    :before-upload="handleBeforeUpload"
+    :http-request="handleUpload"
+    :on-success="onSuccess"
+    :on-error="onError"
+    multiple
+  >
     <template #default>
       <el-image v-if="modelValue" :src="modelValue" />
       <el-icon v-if="modelValue" class="single-upload__delete-btn" @click.stop="handleDelete">
@@ -138,6 +147,7 @@ function handleDelete() {
   modelValue.value = "";
 }
 
+const emits = defineEmits(["onSuccess"]);
 /**
  * 上传成功回调
  *
@@ -146,6 +156,7 @@ function handleDelete() {
 const onSuccess = (fileInfo: string) => {
   ElMessage.success("上传成功");
   modelValue.value = fileInfo;
+  emits("onSuccess", fileInfo);
 };
 
 /**

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>

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",
+  //     });
+  //   }
+  // });
 });
 
 // 阅读通知公告

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";

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: "代客下单",
@@ -342,7 +342,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "marketing",
-        component: () => import("@/views/application/marketing.vue"),
+        component: () => import("@/views/application/marketing/index.vue"),
         name: "applicationMarketing",
         meta: {
           title: "营销中心",
@@ -352,14 +352,75 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "index",
-        component: () => import("@/views/application/index.vue"),
+        component: () => import("@/views/application/list/index.vue"),
         name: "applicationIndex",
         meta: {
           title: "列表管理",
           affix: false,
-          keepAlive: true,
+          keepAlive: false,
+        },
+
+      },
+      /**
+       * 营销中心 start
+       */
+      {
+        path: "coupon",
+        component: () => import("@/views/application/marketing/coupon/list.vue"),
+        name: "coupon",
+        meta: {
+          title: "优惠券",
+          affix: false,
+          hidden: true
         },
       },
+      {
+        path: "bwc",
+        component: () => import("@/views/application/marketing/bwc.vue"),
+        name: "bwc",
+        meta: {
+          title: "霸王餐",
+          affix: false,
+          hidden: true
+        },
+      },
+      {
+        path: "ad",
+        component: () => import("@/views/application/list/ad/index.vue"),
+        name: "ad",
+        meta: {
+          title: "广告",
+          affix: false,
+          hidden: true
+        },
+      },
+      /** 营销中心end */
+
+      /**列表start */
+
+      {
+        path: "lineUplist",
+        component: () => import("@/views/application/list/lineUplist/index.vue"),
+        name: "lineUplist",
+        meta: {
+          title: "叫号",
+          affix: false,
+          hidden: true
+        },
+      },
+      {
+        path: "lineUpRecord",
+        component: () => import("@/views/application/list/lineUplist/record.vue"),
+        name: "lineUpRecord",
+        meta: {
+          title: "叫号记录",
+          affix: false,
+          hidden: true
+        },
+      },
+      /**列表end */
+
+
     ],
   },
   {

src/store/modules/carts.ts

@@ -0,0 +1,249 @@
+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", () => {
+  //台桌id
+  const table_code = ref('');
+
+  //当前购物车数据
+  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 isEmpty = computed(() => {
+    return list.value.length === 0 && giftList.value.length === 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) => {
+      if (cur.is_temporary) {
+        //临时菜
+        return acc + cur.number * (cur.discount_sale_amount)
+      } else {
+        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
+  })
+
+
+  function changeNumber(step: number, item: CartsState) {
+    if (item.number * 1 + step <= 0) {
+      del(item);
+      return;
+    }
+    const newNumber = item.number * 1 + step * 1;
+    update({ ...item, number: step * 1, pack_number: newNumber < item.pack_number ? (item.pack_number * 1 + step * 1) : item.pack_number });
+  }
+
+  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, cart: CartsState) {
+    sendMessage('edit', { ...cart || 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 && msg.data && msg.data[0]) {
+        table_code.value = table_code.value ? table_code.value : msg.data[0].table_code
+      }
+      // 初始化
+      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 }
+          }
+          ElMessage.success(msg.message || '修改成功')
+          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 }
+          }
+          ElMessage.success(msg.message || '修改成功')
+          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 || '删除成功')
+          }
+        }
+      }
+      if (msg.operate_type === "manage_cleanup") {
+        list.value = []
+        giftList.value = []
+        table_code.value = ''
+      }
+      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, isEmpty,
+    selCart, totalNumber,
+    changeSelCart, payMoney,
+    clear, yiyouhui, giftList
+  };
+});
+
+export function useDictStoreHook() {
+  return useCartsStore(store);
+}

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[]>([]);
   // 路由是否加载完成

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

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;
+}

src/utils/request.ts

@@ -8,7 +8,7 @@ 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),
 });
 

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,43 +52,87 @@ 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')
+      ElNotification.success('WebSocket 连接已建立')
+      this.sendMessage(this.initParams)
     };
     this.client.onclose = () => {
+      if (!this.connected) {
+        ElMessageBox.alert('WebSocket 连接已断开', 'Title', {
+          // if you want to disable its autofocus
+          // autofocus: false,
+          confirmButtonText: '立即重连',
+          callback: () => {
+            this.sendMessage(this.initParams)
+          },
+        })
+      }
       this.connected = false;
       console.log("WebSocket 连接已断开");
+
     };
     this.client.onerror = (error) => {
       console.error("WebSocket 发生错误:", error);
+      ElNotification({
+        title: "提示",
+        message: "WebSocket 发生错误",
+        type: "error",
+      });
+      ElMessageBox.alert('WebSocket 发生错误', 'Title', {
+        // if you want to disable its autofocus
+        // autofocus: false,
+        confirmButtonText: '立即重连',
+        callback: () => {
+          this.sendMessage(this.initParams)
+        },
+      })
     };
     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) {

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,
+    }
   ],
 };
 

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;
   }
 }
 

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: "操作",

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);

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: '',
+    }
   ],
 };
 

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;
 // 其他工具栏

src/views/application/list/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="app-container">
+    <div class="title">应用中心</div>
+    <div class="list">
+      <div class="item" v-for="item in list" :key="item.id" @click="to(item)">
+        <img :src="item.icon" class="icon" />
+        <div class="info">
+          <div class="name">{{ item.name }}</div>
+          <div class="intro">
+            {{ item.desc }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bear from "@/assets/images/application/bear.png";
+import song from "@/assets/images/application/song.png";
+import ad from "@/assets/images/application/ad.png";
+import call from "@/assets/images/application/call.png";
+
+const list = ref([
+  { name: "存酒", icon: bear, path: "", desc: "用户未喝完的酒可暂存在店里" },
+  { name: "点歌", icon: song, path: "", desc: "用户可以付费点歌" },
+  { name: "广告", icon: ad, path: "", desc: "添加弹窗广告" },
+  { name: "叫号", icon: call, path: "lineUplist", desc: "" },
+]);
+
+const router = useRouter();
+
+const to = (item) => {
+  router.push("/application/" + item.path);
+};
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  padding-top: 10px;
+}
+
+.list {
+  padding: 20px 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+
+  .item {
+    width: 400px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 14px;
+
+    &:hover {
+      cursor: pointer;
+
+      .info {
+        .name {
+          color: #39d47a;
+        }
+
+        .intro {
+          color: #39d47a;
+        }
+      }
+    }
+
+    .icon {
+      width: 40px;
+      height: 40px;
+      object-fit: cover;
+    }
+
+    .info {
+      flex: 1;
+      padding-left: 10px;
+
+      .name {
+        font-weight: bold;
+      }
+
+      .intro {
+        color: #999;
+        margin-top: 4px;
+      }
+    }
+  }
+}
+</style>

src/views/application/list/lineUplist/components/basic.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="basicStyle">
+    <div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
+        <el-form-item label="排队页地址">
+          <span style="color: #999999">{{ form.pageAddress }}</span>
+          <span @click="copydata">复制</span>
+        </el-form-item>
+        <el-form-item label="线上取号">
+          <el-switch v-model="form.isOnline" :active-value="1" :inactive-value="0"></el-switch>
+        </el-form-item>
+        <el-form-item label="背景图片">
+          <single-image-upload v-model="form.bgCover" @change="uploadChange"></single-image-upload>
+        </el-form-item>
+        <el-form-item label="桌型">
+          <div style="width: 100%">
+            <div>
+              <el-button
+                type="primary"
+                @click="
+                  showLocation = true;
+                  title = '新增';
+                "
+              >
+                添加
+              </el-button>
+            </div>
+            <el-table :data="formtable.records" border style="width: 60%; margin-top: 20px">
+              <el-table-column prop="name" label="名称"></el-table-column>
+              <el-table-column prop="note" label="描述"></el-table-column>
+              <el-table-column prop="waitTime" label="等待时间「桌」"></el-table-column>
+              <el-table-column prop="prefix" label="号码前缀"></el-table-column>
+              <el-table-column prop="start" label="开始号码"></el-table-column>
+              <el-table-column prop="name" label="操作">
+                <template v-slot="scope">
+                  <div style="display: flex; gap: 10px">
+                    <el-button type="text" @click="editPop(scope.row)">编辑</el-button>
+                    <el-button type="text" style="color: #ff4d4f" @click="deleteevnt(scope.row)">
+                      删除
+                    </el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-form-item>
+      </el-form>
+      <h2>通知模板</h2>
+      <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
+        <el-form-item label="排队成功提醒">
+          <el-input
+            v-model="form.successMsg"
+            placeholder="请输入排队成功提醒"
+            disabled
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="排队即将排到通知">
+          <div>
+            <el-input
+              v-model="form.nearMsg"
+              placeholder="请输入排队成功提醒"
+              disabled
+              style="width: 500px"
+            ></el-input>
+            <div class="duoshaozhuo">
+              <div>前面等待</div>
+              <el-input v-model="form.nearNum" placeholder="" disabled></el-input>
+              <div>桌时提醒</div>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="排队到号提醒">
+          <el-input
+            v-model="form.callingMsg"
+            placeholder="请输入排队到号提醒"
+            disabled
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="submitHandle" :loading="formLoading">
+            <span v-if="!formLoading">保存</span>
+            <span v-else>保存中...</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-dialog :title="title" v-model="showLocation" width="500px">
+      <el-form :model="forms" label-width="140px" label-position="left">
+        <el-form-item label="名称">
+          <el-input v-model="forms.name" placeholder="请输入名称"></el-input>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="forms.note" placeholder="如：1-2人"></el-input>
+        </el-form-item>
+        <el-form-item label="等待时间">
+          <el-input v-model="forms.waitTime" placeholder="0">
+            <template #append>分钟/1桌</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="号码前缀">
+          <el-input v-model="forms.prefix" placeholder="请输入英文字母「不支持中文」"></el-input>
+        </el-form-item>
+        <el-form-item label="开始号码">
+          <el-input v-model="forms.start" placeholder="请输入开始号码"></el-input>
+        </el-form-item>
+        <el-form-item label="临近几桌提醒">
+          <el-input-number
+            step-strictly
+            v-model="forms.nearNum"
+            placeholder="请输入临近几桌提醒"
+          ></el-input-number>
+        </el-form-item>
+        <el-form-item label="过号保留">
+          <el-input
+            v-model="forms.postponeNum"
+            :disabled="!forms.isPostpone"
+            placeholder="请输入名称"
+          >
+            <template #prepend>
+              <div>
+                <span><el-checkbox v-model="forms.isPostpone">开启顺延</el-checkbox></span>
+              </div>
+            </template>
+
+            <template #append>桌</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="" width="120">
+          <template v-slot="scope">
+            <div style="display: flex; gap: 10px">
+              <el-button
+                plain
+                @click="
+                  showLocation = false;
+                  forms = {};
+                "
+              >
+                取消
+              </el-button>
+              <el-button type="primary" @click="submitE">确定</el-button>
+            </div>
+          </template>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import callTableApi from "@/api/account/callTable";
+import { ElMessage, ElMessageBox, ElSubMenu } from "element-plus";
+import uploadImg from "@/assets/images/upload.png";
+export default {
+  data() {
+    return {
+      uploadImg,
+      showLocation: false,
+      showUpload: false,
+      uploadIndex: 1,
+      startTime: "",
+      endTime: "",
+      formLoading: false,
+      form: {
+        nearNum: 1,
+      },
+      forms: {},
+      formtable: "",
+      rules: {
+        shopName: [
+          {
+            required: true,
+            message: " ",
+            trigger: "blur",
+          },
+        ],
+        phone: [
+          {
+            required: true,
+            message: " ",
+            trigger: "blur",
+          },
+        ],
+        settleTime: [
+          {
+            required: true,
+            message: " ",
+            trigger: "blur",
+          },
+        ],
+      },
+      fileList: [],
+      files: [],
+      headers: {
+        Authorization: "",
+      },
+      title: "",
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    async editPop(item) {
+      this.forms = item;
+      this.showLocation = true;
+      this.title = "编辑";
+    },
+    async deleteevnt(item) {
+      ElMessageBox.confirm("是否要删除" + item.name, {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          const res = await callTableApi.deleteTable({
+            callTableId: item.id,
+          });
+          ElSubMenu.success("删除成功");
+          this.init();
+        })
+        .catch(() => {});
+    },
+    async submitE() {
+      if (this.title == "新增") {
+        const res = await callTableApi.addTable({
+          ...this.forms,
+        });
+        if (res) {
+          ElMessage.success("新增成功");
+          this.showLocation = false;
+          this.init();
+        }
+      } else {
+        const res = await callTableApi.editTable({
+          ...this.forms,
+          callTableId: this.forms.id,
+        });
+        if (res) {
+          ElMessage.success("修改成功");
+          this.showLocation = false;
+          this.init();
+        }
+      }
+      this.forms = {};
+    },
+    async init() {
+      try {
+        const res = await callTableApi.getConfig();
+        this.form = res;
+        const data = await callTableApi.getTable({
+          page: 1,
+          size: 10,
+        });
+        this.formtable = data;
+      } catch (error) {}
+    },
+    // 保存
+    submitHandle() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          this.formLoading = true;
+          try {
+            // if (this.startTime && this.endTime) {
+            //     this.form.businessTime = `${this.startTime}-${this.endTime}`;
+            // }
+            const res = await callTableApi.editConfig(this.form);
+            this.formLoading = false;
+            this.forms = {};
+            ElMessage({
+              title: "成功",
+              message: "提交成功",
+              type: "success",
+            });
+          } catch (error) {}
+        }
+      });
+    },
+    handleSuccess(response, file, fileList) {
+      // const uid = file.uid
+      // const id = response.id
+      // this.files.push({ uid, id })
+      console.log("上传成功", response);
+      this.files = response.data;
+      this.form.bgCover = response.data[0];
+    },
+    handleBeforeRemove(file, fileList) {
+      for (let i = 0; i < this.files.length; i++) {
+        if (this.files[i].uid === file.uid) {
+          crudQiNiu.del([this.files[i].id]).then((res) => {});
+          return true;
+        }
+      }
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message);
+      this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR);
+    },
+    async copydata(content) {
+      let copyResult = true;
+      // 设置想要复制的文本内容
+      const text = this.form.pageAddress || "复制内容为空哦~";
+      // 判断是否支持clipboard方式
+      if (!!window.navigator.clipboard) {
+        // 利用clipboard将文本写入剪贴板（这是一个异步promise）
+        await window.navigator.clipboard
+          .writeText(text)
+          .then((res) => {
+            console.log("复制成功");
+          })
+          .catch((err) => {
+            console.log("复制失败--采取第二种复制方案", err);
+            // clipboard方式复制失败 则采用document.execCommand()方式进行尝试
+            copyResult = copyContent2(text);
+          });
+      } else {
+        // 不支持clipboard方式 则采用document.execCommand()方式
+        copyResult = copyContent2(text);
+      }
+      // 返回复制操作的最终结果
+      // return copyResult;
+    },
+    // 刷新列表数据
+    doSubmit() {
+      this.fileList = [];
+      this.showUpload = false;
+      switch (this.uploadIndex) {
+        case 1:
+          this.form.bgCover = this.files[0];
+          break;
+        case 2:
+          this.form.coverImg = this.files[0];
+          break;
+        case 3:
+          this.form.shopQrcode = this.files[0];
+          break;
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.basicStyle {
+  padding: 20px;
+}
+
+.map_box {
+  width: 100%;
+  position: relative;
+
+  .map {
+    height: 300px;
+  }
+
+  .search_box {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+
+  .search_wrap {
+    padding: 6px 0;
+
+    .item {
+      display: flex;
+      padding: 12px 0;
+
+      .left {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding-right: 20px;
+
+        .location {
+          color: #999;
+          padding-top: 4px;
+        }
+      }
+    }
+  }
+}
+
+.duoshaozhuo {
+  display: flex;
+  align-items: center;
+
+  > input {
+    width: 120px;
+    border: none !important;
+  }
+
+  > div {
+    color: #999;
+    width: 118px;
+    height: 33px;
+    line-height: 33px;
+    text-align: center;
+    border: 1px solid #dddfe6;
+    background-color: #f5f7fa;
+    margin-top: 9px;
+  }
+}
+</style>

src/views/application/list/lineUplist/components/index.vue

@@ -0,0 +1,533 @@
+<template>
+  <div class="lineUpBox">
+    <div class="lineUpBoxTop">
+      <ul class="lineUpBoxUl">
+        <li :class="[[selecttopType == '' ? 'active' : '']]" @click="gettypeevent('')">
+          <div>全部</div>
+          <div>{{ tableData.totalCount || 0 }}桌</div>
+          <div class="postionStyle" v-if="selecttopType == ''">
+            <el-icon style="transform: translateY(-4px)" color="#fff"><Check /></el-icon>
+          </div>
+        </li>
+        <li
+          v-for="item in tableData.records"
+          :key="item.id"
+          @click="gettypeevent(item.id)"
+          :class="[[selecttopType == item.id ? 'active' : '']]"
+        >
+          <div>{{ item.name }}</div>
+          <div>{{ item.totalCount || 0 }}桌</div>
+          <div class="postionStyle" v-if="selecttopType == item.id">
+            <el-icon style="transform: translateY(-4px)" color="#fff"><Check /></el-icon>
+          </div>
+        </li>
+      </ul>
+      <div class="buttonstyle">
+        <el-button
+          type="primary"
+          @click="
+            dialogVisibles = true;
+            phone = '';
+          "
+        >
+          取号
+        </el-button>
+        <el-button plain type="primary" @click="toUrl">叫号记录</el-button>
+      </div>
+    </div>
+    <div style="display: flex; align-items: center; flex-wrap: wrap">
+      <div class="lineUpBoxList" v-for="item in list" style="margin-right: 20px" :key="item.id">
+        <ul>
+          <li>
+            <div>用户</div>
+            <div>{{ item.phone }}</div>
+          </li>
+          <li>
+            <div>号码</div>
+            <div>{{ item.callNum }}</div>
+          </li>
+          <li>
+            <div>桌型</div>
+            <div>{{ item.name }}{{ item.note }}</div>
+          </li>
+          <li>
+            <div>等待</div>
+            <div>{{ item.waitingCount }}桌</div>
+          </li>
+        </ul>
+        <div>
+          <el-button type="primary" @click="dialogConfirm(1, item)">取消</el-button>
+          <el-button type="primary" @click="profilepicture(item)">播报</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 播报弹窗 -->
+    <el-dialog title="提示" v-model="dialogVisible" center width="30%">
+      <div style="text-align: center">
+        <div style="font-size: 16px">正在叫号，请稍等</div>
+        <div
+          v-if="profilepicturedata.state == 1"
+          style="color: #52c41a; font-size: 16px; margin-top: 17px"
+        >
+          已发送至用户
+          <i class="el-icon-circle-check" style="color: #52c41a"></i>
+        </div>
+        <div v-else style="color: #ff4d4f; font-size: 16px; margin-top: 17px">
+          用户未订阅消息
+          <i style="color: #ff4d4f" class="el-icon-circle-close"></i>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button
+            style="
+              width: 176px;
+              height: 48px;
+              background: #f7f7fa;
+              box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
+              border-radius: 2px 2px 2px 2px;
+              border: 1px solid rgba(255, 255, 255, 0);
+            "
+            @click="dialogConfirm(2)"
+          >
+            完成
+          </el-button>
+          <el-button
+            type="primary"
+            style="
+              width: 189px;
+              height: 45px;
+              background: #ff4d4f;
+              box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
+              border-radius: 2px 2px 2px 2px;
+              border: 1px solid rgba(255, 255, 255, 0.28);
+            "
+            @click="dialogConfirm(3)"
+          >
+            过号
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 取号 -->
+    <el-dialog title="取号" v-model="dialogVisibles" width="30%">
+      <div>
+        <div style="color: #000">选择桌型</div>
+        <ul
+          class="lineUpBoxUl"
+          :class="[tableData.records.length > 2 ? 'dfs' : 'dfas']"
+          style="margin-top: 10px"
+        >
+          <li
+            v-for="item in tableData.records"
+            :key="item.id"
+            @click="selectTabletype = item"
+            :class="[[selectTabletype.id == item.id ? 'active' : '']]"
+          >
+            <div>{{ item.name }}</div>
+            <div>{{ item.totalCount }}桌</div>
+            <div class="postionStyle" v-if="selectTabletype.id == item.id">
+              <el-icon style="transform: translateY(-4px)" color="#fff"><Check /></el-icon>
+            </div>
+          </li>
+        </ul>
+        <div style="margin-top: 20px; color: #000">手机号码</div>
+        <div style="margin-top: 10px">
+          <input v-model="phone" style="height: 30px" type="text" placeholder="填写号码" />
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="callTabletakeNumberEvent">确认取号</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+const synth = window.speechSynthesis;
+const msg = new SpeechSynthesisUtterance();
+import callTableApi from "@/api/account/callTable";
+export default {
+  data() {
+    return {
+      query: {
+        productId: "",
+        name: "",
+        categoryId: "",
+        typeEnum: "",
+      },
+      tableData: {
+        data: [],
+        page: 0,
+        size: 30,
+        loading: false,
+        total: 0,
+      },
+      selecttopType: "",
+      list: [],
+      dialogVisible: false,
+      dialogVisibles: false,
+      profilepictureInfo: "",
+      phone: "",
+      selectTabletype: "",
+      // 播报弹窗显示是否订阅
+      profilepicturedata: "",
+    };
+  },
+  async mounted() {
+    await this.getlist();
+    await this.getTableData();
+  },
+  methods: {
+    async callTabletakeNumberEvent() {
+      const res = await callTableApi.getTakeNumber({
+        callTableId: this.selectTabletype.id,
+        phone: this.phone,
+        note: this.selectTabletype.note,
+        name: this.selectTabletype.name,
+      });
+      if (res.callNum) {
+        this.getTableData();
+        this.getlist();
+        this.dialogVisibles = false;
+      }
+    },
+
+    handleSpeak(text) {
+      msg.text = text; // 文字内容: 小朋友，你是否有很多问号
+      msg.lang = "zh-CN"; // 使用的语言:中文
+      msg.volume = 3; // 声音音量：1
+      msg.rate = 1; // 语速：1
+      msg.pitch = 1; // 音高：1
+      synth.speak(msg); // 播放
+    },
+    // // 语音停止
+    // handleStop(e) {
+    //     msg.text = e;
+    //     msg.lang = "zh-CN";
+    //     synth.cancel(msg);
+    // },
+
+    async profilepicture(d) {
+      this.handleSpeak("请" + d.callNum + "用餐");
+      let res = await callTablecall({
+        shopId: localStorage.getItem("shopId"),
+        callQueueId: d.id,
+      });
+      if (res) {
+        this.dialogVisible = true;
+        this.profilepicturedata = res;
+        this.profilepictureInfo = d;
+      }
+    },
+    gettypeevent(d) {
+      this.selecttopType = d;
+      this.getTableData();
+      this.getlist();
+    },
+    async dialogConfirm(value, item) {
+      if (value == 1) {
+        const res = await callTableput({
+          shopId: localStorage.getItem("shopId"),
+          state: -1,
+          callQueueId: item.id,
+        });
+        if (res) {
+          this.getTableData();
+          this.getlist();
+        }
+      } else if (value == 2) {
+        const res = await callTableput({
+          shopId: localStorage.getItem("shopId"),
+          state: 2,
+          callQueueId: this.profilepictureInfo.id,
+        });
+        if (res) {
+          this.getTableData();
+          this.getlist();
+          this.dialogVisible = false;
+        }
+      } else if (value == 3) {
+        const res = await callTableput({
+          shopId: localStorage.getItem("shopId"),
+
+          state: 3,
+          callQueueId: this.profilepictureInfo.id,
+        });
+        if (res) {
+          this.getTableData();
+          this.getlist();
+          this.dialogVisible = false;
+        }
+      }
+    },
+    toUrl() {
+      this.$router.push({ path: "/application/lineUpRecord" });
+    },
+    // 获取商品列表
+    async getTableData() {
+      try {
+        const res = await callTableApi.getTableNumberList({
+          page: 1,
+          size: 10,
+        });
+        // this.tableData.loading = false
+        this.tableData = res;
+        this.selectTabletype = res.records[0];
+        // this.tableData.total = res.totalElements
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getlist() {
+      const res = await callTableApi.getTableNumberList({
+        page: 1,
+        size: 9999,
+        callTableId: this.selecttopType,
+        state: 0,
+      });
+      this.list = res.records;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+* {
+  margin: 0;
+  text-decoration: none;
+  outline: none;
+}
+
+ul,
+li {
+  list-style: none;
+}
+
+.show {
+  display: none !important;
+}
+
+.hidden {
+  display: block !important;
+}
+
+.lineUpBox {
+}
+
+.lineUpBoxTop {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .lineUpBoxUl {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    > li {
+      border-radius: 4px 4px 4px 4px;
+      border: 1px solid #dddfe6;
+      width: 112px;
+      text-align: center;
+      margin-right: 20px;
+      position: relative;
+
+      > div {
+        margin-top: 8px;
+        color: #999;
+      }
+
+      > div:first-child {
+        color: #333333;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        text-align: center;
+      }
+
+      .postionStyle {
+        position: absolute;
+        right: 0px;
+        top: -9px;
+        width: 0;
+        height: 0;
+        border: 14px solid;
+        border-color: #318afe #318afe #fff #fff;
+      }
+
+      .postionStyleI {
+        position: absolute;
+        right: -13px;
+        top: -13px;
+        color: #fff;
+        font-size: 14px;
+        width: 0;
+        height: 0;
+      }
+    }
+
+    .active {
+      border: 2px solid #318afe;
+
+      > view:first-child {
+        color: #318afe;
+      }
+    }
+  }
+
+  .buttonstyle {
+    > button {
+      height: 31px;
+
+      padding: 5px 16px;
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
+}
+
+.lineUpBoxList {
+  width: 507px;
+  height: 148px;
+  background: #ffffff;
+  border-radius: 6px 6px 6px 6px;
+  border: 1px solid #dddfe6;
+  margin-top: 30px;
+
+  > ul {
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    > li {
+      > div:nth-child(2) {
+        margin-top: 15px;
+      }
+    }
+  }
+
+  > div {
+    display: flex;
+    justify-content: space-around;
+
+    > button {
+      width: 169px;
+      height: 32px;
+      box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
+      border-radius: 1px 1px 1px 1px;
+      border: 1px solid #d9d9d9;
+    }
+
+    > button:first-child {
+      background: #ffffff;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      color: #666666;
+      text-align: center;
+    }
+  }
+}
+
+.dfs {
+  justify-content: space-between;
+}
+
+.dfas {
+  > li {
+    margin-right: 52px;
+  }
+}
+
+.lineUpBoxUl {
+  display: flex;
+  align-items: center;
+  padding: 0;
+
+  > li {
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid #dddfe6;
+    text-align: center;
+    position: relative;
+    min-width: 110px;
+    cursor: pointer;
+    > div {
+      margin-top: 8px;
+      color: #999;
+    }
+
+    > div:first-child {
+      color: #333333;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 16px;
+      text-align: center;
+    }
+
+    .postionStyle {
+      position: absolute;
+      right: 0px;
+      top: -9px;
+      border: 14px solid;
+      border-color: #318afe #318afe #fff #fff;
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      flex-direction: column;
+      width: 0;
+      height: 0;
+    }
+
+    .postionStyleI {
+      width: 0;
+      height: 0;
+      position: absolute;
+      right: -13px;
+      top: -13px;
+      color: #fff;
+      font-size: 14px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-content: center;
+    }
+  }
+
+  .active {
+    border: 2px solid #318afe;
+
+    > view:first-child {
+      color: #318afe;
+    }
+  }
+}
+
+.handle {
+  font-size: 18px;
+  color: #999;
+
+  &:hover {
+    cursor: grab;
+  }
+}
+
+.shop_info {
+  display: flex;
+
+  .info {
+    flex: 1;
+    padding-left: 8px;
+    display: flex;
+    flex-direction: column;
+
+    .tag_wrap {
+      display: flex;
+    }
+  }
+}
+</style>

src/views/application/list/lineUplist/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeName" type="card">
+      <el-tab-pane label="排队列表" name="1"></el-tab-pane>
+      <el-tab-pane label="基本设置" name="2"></el-tab-pane>
+    </el-tabs>
+    <index v-if="activeName == 1" />
+    <basic v-if="activeName == 2" />
+  </div>
+</template>
+
+<script>
+import index from "./components/index.vue";
+import basic from "./components/basic.vue";
+
+export default {
+  components: {
+    index,
+    basic,
+  },
+  data() {
+    return {
+      activeName: "1",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  background-color: #fff;
+  min-height: 100%;
+}
+</style>

src/views/application/list/lineUplist/record.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">叫号记录</div>
+    <div class="head-container" id="table_drag">
+      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
+        <el-table-column label="桌号" prop="callNum"></el-table-column>
+        <el-table-column label="桌型" prop="typeEnum">
+          <template v-slot="scope">{{ scope.row.name }}({{ scope.row.note }})</template>
+        </el-table-column>
+        <el-table-column label="手机号" prop="phone"></el-table-column>
+        <el-table-column label="状态">
+          <template v-slot="scope">
+            <span
+              style="font-weight: 400; font-size: 14px"
+              :style="{ color: scope.row.state == 2 ? '#3F9EFF' : '' }"
+            >
+              {{ stateFilter(scope.row.state) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="时间" prop="callTime"></el-table-column>
+      </el-table>
+    </div>
+    <!-- <div class="head-container">
+          <el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page + 1"
+              :page-size="tableData.size" @current-change="paginationChange"
+              layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      </div> -->
+  </div>
+</template>
+
+<script>
+import callTableApi from "@/api/account/callTable";
+
+export default {
+  data() {
+    return {
+      query: {
+        productId: "",
+        name: "",
+        categoryId: "",
+        typeEnum: "",
+      },
+      tableData: {
+        data: [],
+        page: 0,
+        size: 30,
+        loading: false,
+        total: 0,
+      },
+    };
+  },
+  async mounted() {
+    await this.getTableData();
+  },
+  methods: {
+    stateFilter(i) {
+      if (i == -1) {
+        return "已取消";
+      } else if (i == 0) {
+        return "排队中";
+      } else if (i == 1) {
+        return "叫号中";
+      } else if (i == 2) {
+        return "已入座";
+      } else if (i == 3) {
+        return "已过号 ";
+      }
+    },
+    // 分页回调
+    // paginationChange(e) {
+    //     this.tableData.page = e - 1
+    //     this.getTableData()
+    // },
+    // 获取商品列表
+    async getTableData() {
+      try {
+        const res = await callTableApi.getCallRecord({
+          page: 1,
+          size: 9999,
+        });
+        this.tableData.data = res.records;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // handleSizeChange(val) {
+    //     this.tableData.size = val
+    //     this.getTableData()
+    // },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.handle {
+  font-size: 18px;
+  color: #999;
+
+  &:hover {
+    cursor: grab;
+  }
+}
+
+.shop_info {
+  display: flex;
+
+  .info {
+    flex: 1;
+    padding-left: 8px;
+    display: flex;
+    flex-direction: column;
+
+    .tag_wrap {
+      display: flex;
+    }
+  }
+}
+</style>

src/views/application/marketing.vue

@@ -1 +0,0 @@
-<template></template>

src/views/application/marketing/bwc.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="app-container">
+    <div class="container">
+      <el-form ref="form" :model="form" label-width="140px" label-position="left">
+        <el-form-item label="功能启用">
+          <el-switch v-model="form.enable"></el-switch>
+        </el-form-item>
+        <el-form-item label="充值设置">
+          <div class="labelbox">
+            用户消费结账时，成功充值消费
+            <el-input style="width: 80px; margin: 0 15px" v-model="form.rechargeTimes"></el-input>
+            倍的金额，本单即可享受免单
+          </div>
+        </el-form-item>
+        <el-form-item label="充值门槛">
+          <div class="labelbox">
+            订单支付金额需满
+            <el-input
+              style="width: 80px; margin: 0 15px"
+              v-model="form.rechargeThreshold"
+            ></el-input>
+            元才能使用
+          </div>
+        </el-form-item>
+        <el-form-item label="充值说明">
+          <el-input type="textarea" v-model="form.rechargeDesc"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="editlist">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import bwcApi from "@/api/account/bwc";
+import { ElMessage } from "element-plus";
+export default {
+  name: "bwc",
+  data() {
+    return {
+      form: {
+        id: "",
+        enable: "",
+        rechargeTimes: "",
+        rechargeThreshold: "",
+        withCoupon: "",
+        withPoints: "",
+        rechargeDesc: "",
+        useTypeList: [],
+        childShopIdList: "",
+      },
+    };
+  },
+  created() {
+    this.getlist();
+  },
+  methods: {
+    async getlist() {
+      let res = await bwcApi.getList();
+      this.form = res;
+    },
+    async editlist() {
+      let res = await bwcApi.edit(this.form);
+      ElMessage({
+        message: "保存成功",
+        type: "success",
+      });
+      this.getlist();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 12px 20px;
+  height: auto;
+  background-color: #f4f9ff;
+
+  .container {
+    padding: 30px;
+    width: 100%;
+    height: 100%;
+    background: #ffffff;
+
+    .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: 16px;
+      color: #666666;
+    }
+  }
+}
+</style>

src/views/application/marketing/coupon/components/coupon_details.vue

@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <el-dialog title="领取详情" :visible.sync="dialogVisible" width="70%" @close="reset">
+      <div class="search">
+        <el-form :model="query" inline label-position="left">
+          <el-form-item>
+            <el-input
+              v-model="query.value"
+              placeholder="用户ID/用户昵称/用户手机"
+              style="width: 180px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="query.status" placeholder="选择状态" style="width: 154px">
+              <el-option
+                v-for="item in stateList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item />
+          <el-form-item label="领取时间">
+            <el-date-picker
+              v-model="queryTime"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="['00:00:00', '23:59:59']"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              @change="queryTimeChange"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="getTableData">查询</el-button>
+            <!-- <el-button v-loading="downloadLoading" icon="el-icon-download" @click="downloadHandle">
+              <span v-if="!downloadLoading">导出</span>
+              <span v-else>下载中...</span>
+            </el-button> -->
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="head-container">
+        <el-table v-loading="loading" :data="tableData.data">
+          <el-table-column label="用户ID" prop="id" />
+          <el-table-column label="用户名" prpo="name">
+            <template v-slot="scope">
+              <div>{{ scope.row.name ? scope.row.name : "-" }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="领取时间" prop="receiveTime" />
+          <el-table-column label="使用时间" prpo="useTime">
+            <template v-slot="scope">
+              <div>{{ scope.row.useTime ? scope.row.useTime : "-" }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="获得来源" prpo="source">
+            <template v-slot="scope">
+              <div>
+                {{
+                  scope.row.source == "activate"
+                    ? "充值活动"
+                    : scope.row.source == "invited"
+                    ? "好友分享"
+                    : ""
+                }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="status">
+            <template v-slot="scope">
+              <div style="display: flex; align-items: center">
+                <div v-if="scope.row.overNum == scope.row.num" style="color: #faad14">未使用</div>
+                <div v-if="scope.row.num != 0 && scope.row.overNum != scope.row.num">
+                  {{ scope.row.overNum }}/{{ scope.row.num }}
+                </div>
+                <div v-if="scope.row.overNum == 0" style="color: #52c41a">已使用</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="使用门店" prpo="useTime">
+            <template v-slot="scope">
+              <div>{{ scope.row.tableName ? scope.row.tableName : "-" }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="150">
+            <template v-slot="scope">
+              <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
+                <el-button
+                  slot="reference"
+                  type="text"
+                  icon="el-icon-delete"
+                  style="color: #ff4d4f"
+                >
+                  删除
+                </el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="head-container">
+        <el-pagination
+          :total="tableData.total"
+          :current-page="tableData.page"
+          :page-size="tableData.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="paginationChange"
+          @size-change="sizeChange"
+        />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import couponApi from "@/api/account/coupon";
+
+export default {
+  // eslint-disable-next-line vue/require-prop-types
+  props: ["couponId"],
+  data() {
+    return {
+      dialogVisible: false,
+      downloadLoading: false,
+      loading: false,
+      stateList: [
+        { label: "未使用", value: 0 },
+        { label: "已使用", value: 1 },
+      ],
+      queryTime: [],
+      query: {
+        couponId: "",
+        value: "",
+        status: 0,
+        startTime: "",
+        endTime: "",
+        page: 1,
+        size: 10,
+      },
+      resetQuery: null,
+      tableData: {
+        data: [],
+        page: 1,
+        size: 10,
+        loading: false,
+        total: 0,
+      },
+    };
+  },
+  mounted() {
+    this.resetQuery = { ...this.query };
+  },
+  methods: {
+    /**
+     * 查询
+     */
+    async getTableData() {
+      // eslint-disable-next-line no-unused-vars, prefer-const
+      // console.log(this.couponId)
+
+      // eslint-disable-next-line no-unused-vars, prefer-const
+      let res = await queryReceive({
+        shopId: localStorage.getItem("shopId"),
+        couponId: this.query.couponId,
+        value: this.query.value,
+        status: this.query.status,
+        startTime: this.query.startTime,
+        endTime: this.query.endTime,
+        page: this.query.page,
+        size: this.query.size,
+      });
+      this.tableData.loading = false;
+      this.tableData.data = res.content;
+      this.tableData.total = res.totalElements;
+    },
+
+    /**
+     * 时间选择监听
+     */
+    queryTimeChange(e) {
+      if (e) {
+        this.query.startTime = e[0];
+        this.query.endTime = e[1];
+      } else {
+        this.query.startTime = "";
+        this.query.endTime = "";
+      }
+    },
+
+    /**
+     * 删除优惠券
+     * @param id
+     */
+    async delTableHandle(id) {
+      // eslint-disable-next-line no-undef
+      const delRes = await delReceive(id);
+      console.log(delRes);
+      this.getTableData();
+    },
+
+    /**
+     * 打开详情
+     * @param obj
+     */
+    show(obj) {
+      console.log(obj);
+      this.dialogVisible = true;
+      this.query.couponId = obj.id;
+      this.getTableData();
+    },
+    // 分页大小改变
+    sizeChange(e) {
+      this.tableData.size = e;
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e;
+      this.query.page = e;
+      this.getTableData();
+    },
+    /**
+     * 关闭详情
+     */
+    close() {
+      this.dialogVisible = false;
+    },
+
+    /**
+     * 导出Excel
+     */
+    async downloadHandle() {
+      try {
+        this.downloadLoading = true;
+        // eslint-disable-next-line no-undef
+        const file = await summaryTableDownload({
+          startTime: this.query.createdAt[0],
+          endTime: this.query.createdAt[1],
+        });
+        // eslint-disable-next-line no-undef
+        downloadFile(file, "数据", "xlsx");
+        this.downloadLoading = false;
+      } catch (error) {
+        this.downloadLoading = false;
+        console.log(error);
+      }
+    },
+    reset() {
+      this.query = { ...this.resetQuery };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.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>

src/views/application/marketing/coupon/couponEnum.js

@@ -0,0 +1,51 @@
+export default {
+  classType: [
+    {
+      value: "product",
+      label: "商品券"
+    },
+    {
+      value: "common",
+      label: "通用券"
+    }
+  ],
+  type: [
+    {
+      value: "0",
+      label: "满减"
+    },
+    {
+      value: "1",
+      label: "折扣"
+    }
+  ],
+  cycle: [
+    { label: "周一", value: "Monday" },
+    { label: "周二", value: "Tuesday" },
+    { label: "周三", value: "Wednesday" },
+    { label: "周四", value: "Thursday" },
+    { label: "周五", value: "Friday" },
+    { label: "周六", value: "Saturday" },
+    { label: "周七", value: "Sunday" }
+  ],
+  validityType: [
+    {
+      value: "fixed",
+      label: "领券后有效期内可用"
+    },
+    {
+      value: "custom",
+      label: "固定有效期范围内可用"
+    }
+  ],
+  useTimeType: [
+    {
+      value: "all",
+      label: "全时段可用"
+    },
+    {
+      value: "custom",
+      label: "指定时间段"
+    }
+  ]
+};

src/views/application/marketing/coupon/list.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <!-- <el-button type="primary" icon="el-icon-plus" @click="$refs.addCoupon.show()">
+        添加优惠券
+      </el-button> -->
+      <el-button
+        type="primary"
+        icon="plus"
+        @click="$router.push({ name: 'add_coupon', query: { type: 1 } })"
+      >
+        添加优惠券
+      </el-button>
+    </div>
+    <div class="head-container">
+      <el-table v-loading="tableData.loading" :data="tableData.data">
+        <el-table-column label="ID" prop="id" />
+        <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="有效期">
+          <template v-slot="scope">
+            {{ `领券后${scope.row.validDays}天过期` }}
+          </template>
+        </el-table-column> -->
+        <!-- <el-table-column label="用户领取方式" prpo="source">
+          <template v-slot="scope">
+            <div>{{ scope.row.source == 'activate' ? '充值活动' :
+              scope.row.source == 'invited' ? '好友分享' : '' }}</div>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="总发放数量" prop="number" />
+        <el-table-column label="已领取" align="center">
+          <template v-slot="scope">
+            <div style="display: flex; align-items: center; justify-content: center">
+              <div style="width: 30px">{{ scope.row.number - scope.row.leftNumber }}</div>
+              <div style="margin: 0 10px">|</div>
+              <div
+                style="color: #3f9eff; cursor: pointer; flex-shrink: 0"
+                @click="couponDetailsOpen(scope.row)"
+              >
+                详情
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="已使用" prop="useNumber" />
+        <el-table-column label="剩余" prop="leftNumber" />
+        <el-table-column label="操作" width="150">
+          <template v-slot="scope">
+            <el-button
+              type="text"
+              icon="el-icon-edit"
+              @click="
+                $router.push({
+                  name: 'add_coupon',
+                  query: { type: scope.row.type, id: scope.row.id },
+                })
+              "
+            >
+              编辑
+            </el-button>
+            <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
+              <template #reference>
+                <el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important">
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="head-container">
+      <el-pagination
+        :total="tableData.total"
+        :current-page="tableData.page"
+        :page-size="tableData.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="paginationChange"
+        @size-change="sizeChange"
+      />
+    </div>
+    <couponDetails ref="couponDetails" @success="resetHandle" />
+  </div>
+</template>
+
+<script>
+import couponEnum from "./couponEnum";
+import couponDetails from "./components/coupon_details.vue";
+import couponApi from "@/api/account/coupon";
+
+export default {
+  // eslint-disable-next-line vue/no-unused-components
+  components: { couponDetails },
+
+  data() {
+    return {
+      tableData: {
+        data: [],
+        page: 1,
+        size: 10,
+        loading: false,
+        total: 0,
+      },
+      couponId: null,
+    };
+  },
+  mounted() {
+    this.getTableData();
+  },
+  methods: {
+    typeFilter(value) {
+      // eslint-disable-next-line eqeqeq
+      return couponEnum.type.find((item) => item.value == value).label;
+    },
+    effectTypeFilter(value) {
+      // eslint-disable-next-line eqeqeq
+      return couponEnum.effectType.find((item) => item.value == value).label;
+    },
+    // 是否允许修改商品
+    toPath(path, row) {
+      this.$router.push({ path: path, query: row });
+    },
+    // 重置查询
+    resetHandle() {
+      this.page = 1;
+      this.getTableData();
+    },
+    // 分页大小改变
+    sizeChange(e) {
+      this.tableData.size = e;
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      console.log(e);
+      this.tableData.page = e;
+      this.getTableData();
+    },
+    // 获取优惠券列表
+    async getTableData() {
+      this.tableData.loading = true;
+      try {
+        const res = await couponApi.getList({
+          page: this.tableData.page,
+          size: this.tableData.size,
+        });
+        this.tableData.loading = false;
+        this.tableData.data = res;
+        this.tableData.total = res.length;
+        console.log(this.tableData);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+
+    /**
+     * 查看领取详情
+     */
+    couponDetailsOpen(row) {
+      this.$refs.couponDetails.show(row);
+      this.couponId = row.id;
+    },
+
+    /**
+     * 删除优惠券
+     * @param id
+     */
+    async delTableHandle(id) {
+      console.log(delRes);
+      this.getTableData();
+    },
+  },
+};
+</script>

src/views/application/marketing/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="app-container">
+    <div class="title">营销中心</div>
+    <div class="list">
+      <div class="item" v-for="item in list" :key="item.id" @click="to(item)">
+        <img :src="item.icon" class="icon" />
+        <div class="info">
+          <div class="name">{{ item.name }}</div>
+          <div class="intro">
+            {{ item.value }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import card from "@/assets/images/marketing/card.png";
+import charge from "@/assets/images/marketing/charge.png";
+import invite from "@/assets/images/marketing/invite.png";
+import score from "@/assets/images/marketing/score.png";
+const router = useRouter();
+const to = (item) => {
+  router.push("/application/" + item.path);
+};
+const list = ref([
+  { name: "优惠券", icon: card, path: "coupon" },
+  { name: "霸王餐", icon: charge, path: "bwc" },
+  { name: "邀请裂变", icon: invite, path: "" },
+  { name: "积分锁客", icon: score, path: "" },
+]);
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  padding-top: 10px;
+}
+
+.list {
+  padding: 20px 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+
+  .item {
+    width: 400px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 14px;
+
+    &:hover {
+      cursor: pointer;
+
+      .info {
+        .name {
+          color: #39d47a;
+        }
+
+        .intro {
+          color: #39d47a;
+        }
+      }
+    }
+
+    .icon {
+      width: 40px;
+      height: 40px;
+      object-fit: cover;
+    }
+
+    .info {
+      flex: 1;
+      padding-left: 10px;
+
+      .name {
+        font-weight: bold;
+      }
+
+      .intro {
+        color: #999;
+        margin-top: 4px;
+      }
+    }
+  }
+}
+</style>

src/views/devices/config/add.ts

@@ -1,28 +1,32 @@
-import UserAPI, { type UserForm } from "@/api/system/user";
+import printerApi, { type addRequest } from "@/api/account/printer";
+import { options } from './config'
+
 import type { IModalConfig } from "@/components/CURD/types";
 
-const modalConfig: IModalConfig<UserForm> = {
+const modalConfig: IModalConfig<addRequest> = {
   pageName: "sys:user",
   dialog: {
-    title: "新增用户",
+    title: "新增打印机",
     width: 800,
     draggable: true,
   },
   form: {
     labelWidth: 100,
   },
-  formAction: UserAPI.add,
+  formAction: function (data) {
+    return printerApi.add(data);
+  },
   beforeSubmit(data) {
     console.log("提交之前处理", data);
   },
   formItems: [
     {
-      label: "用户名",
-      prop: "username",
-      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+      label: "设备名称",
+      prop: "name",
+      rules: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
       type: "input",
       attrs: {
-        placeholder: "请输入用户名",
+        placeholder: "请输入设备名称",
       },
       col: {
         xs: 24,
@@ -30,90 +34,127 @@ const modalConfig: IModalConfig<UserForm> = {
       },
     },
     {
-      label: "用户昵称",
-      prop: "nickname",
-      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-      type: "input",
-      attrs: {
-        placeholder: "请输入用户昵称",
-      },
-      col: {
-        xs: 24,
-        sm: 12,
-      },
-    },
-    {
-      label: "所属部门",
-      prop: "deptId",
-      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-      type: "tree-select",
-      attrs: {
-        placeholder: "请选择所属部门",
-        data: [],
-        filterable: true,
-        "check-strictly": true,
-        "render-after-expand": false,
-      },
-    },
-    {
-      type: "custom",
-      label: "性别",
-      prop: "gender",
-      initialValue: 1,
-    },
-    {
-      label: "角色",
-      prop: "roleIds",
-      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
       type: "select",
+      label: "类型",
+      prop: "connectionType",
+      rules: [{ required: true, message: "请选择设备类型", trigger: "blur" }],
       attrs: {
-        placeholder: "请选择",
-        multiple: true,
-      },
-      options: [],
-      initialValue: [],
-    },
-    {
-      type: "input",
-      label: "手机号码",
-      prop: "mobile",
-      rules: [
-        {
-          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-          message: "请输入正确的手机号码",
-          trigger: "blur",
+        placeholder: "请选择设备类型",
+        clearable: true,
+        style: {
+          width: "200px",
         },
-      ],
-      attrs: {
-        placeholder: "请输入手机号码",
-        maxlength: 11,
+      },
+      options: options.connectionType,
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "邮箱",
-      prop: "email",
-      rules: [
-        {
-          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-          message: "请输入正确的邮箱地址",
-          trigger: "blur",
-        },
-      ],
+      label: "ip地址",
+      prop: "address",
       type: "input",
       attrs: {
-        placeholder: "请输入邮箱",
-        maxlength: 50,
+        placeholder: "请输入ip地址",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "状态",
-      prop: "status",
+      label: "端口",
+      prop: "port",
+      type: "input",
+      attrs: {
+        placeholder: "请输入端口",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "select",
+      label: "打印类型",
+      prop: "subType",
+      rules: [{ required: false, message: "请选择打印类型", trigger: "blur" }],
+      attrs: {
+        placeholder: "请选择打印类型",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: options.subType,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "select",
+      label: "打印机品牌",
+      prop: "contentType",
+      rules: [{ required: true, message: "请选择打印机品牌", trigger: "blur" }],
+      attrs: {
+        placeholder: "请选择打印机品牌",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: options.contentType,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "radio-button",
+      label: "小票尺寸",
+      prop: "receiptSize",
+      options: options.receiptSize,
+      initialValue: options.receiptSize[0].value
+    },
+    {
+      type: "radio-button",
+      label: "分类打印",
+      prop: "classifyPrint",
+      options: options.classifyPrint,
+      initialValue: options.classifyPrint[0].value
+    },
+    {
       type: "radio",
-      options: [
-        { label: "正常", value: 1 },
-        { label: "禁用", value: 0 },
-      ],
+      label: "打印数量",
+      prop: "printQty",
+      options: options.printQty,
+      initialValue: options.printQty[0].value
+    },
+    {
+      type: "radio",
+      label: "打印方式",
+      prop: "printMethod",
+      options: options.printMethod,
+      initialValue: options.printMethod[0].value
+    },
+    {
+      type: "checkbox",
+      label: "打印类型",
+      prop: "printType",
+      options: options.printType,
+      initialValue: options.printType.map(v => v.value)
+    },
+    {
+      label: "打印机状态",
+      prop: "status",
+      type: "switch",
       initialValue: 1,
+      attrs: {
+        activeValue: 1,
+        inactiveValue: 0,
+      }
     },
   ],
 };

src/views/devices/config/config.ts

@@ -0,0 +1,65 @@
+export const options: optionObject = {
+  connectionType: [
+    { label: "USB", value: 'USB' },
+    { label: "网络", value: '网络' },
+    { label: "蓝牙", value: '蓝牙' },
+  ],
+  subType: [
+    { label: "标签", value: 'label' },
+    { label: "小票", value: 'cash' },
+    { label: "出品", value: 'kitchen' },
+  ],
+  contentType: [
+    { label: "云想印", value: '云想印' },
+    { label: "飞鹅", value: '飞鹅' },
+  ],
+  receiptSize: [
+    { label: "58mm", value: '58mm' },
+    { label: "80mm", value: '80mm' },
+  ],
+  classifyPrint: [
+    { label: "所有", value: 0 },
+    { label: "部分分类", value: 1 },
+    { label: "部分商品", value: 2 },
+  ],
+  printQty: [
+    { label: "顾客+商家[2张] ", value: 'c1m1^2' },
+    { label: "商家[1张]", value: 'm1^1' },
+    { label: "顾客[1张]", value: 'c1^1' },
+    { label: "顾客2+商家1[3张]", value: 'c2m1^3' },
+  ],
+  printMethod: [
+    { value: "all", label: '全部打印' },
+    { value: "normal", label: '仅打印结账单「前台」' },
+    { value: "one", label: '仅打印制作单「厨房」' },
+  ],
+  printType: [
+    { label: "确认退款单", value: 'refund' },
+    { label: "交班单", value: 'handover' },
+    { label: "排队取号", value: 'queue' },
+  ]
+}
+
+export type optionsType = string;
+
+export function returnOptions(type: optionsType) {
+  return options[type]
+}
+
+export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
+  const options = returnOptions(optionsType);
+  if (!options) {
+    return "";
+  }
+  const option = options.find((item) => item.value === value);
+  return option ? option.label : "";
+}
+
+export interface options {
+  label: string;
+  value: string | number;
+  [property: string]: any;
+}
+export interface optionObject {
+  [property: string]: options[];
+}

src/views/devices/config/content.ts

@@ -1,14 +1,17 @@
-import UserAPI from "@/api/system/user";
-import RoleAPI from "@/api/system/role";
-import type { UserPageQuery } from "@/api/system/user";
+import printerApi, { type getListRequest } from "@/api/account/printer";
 import type { IContentConfig } from "@/components/CURD/types";
 
-const contentConfig: IContentConfig<UserPageQuery> = {
+
+const contentConfig: IContentConfig<getListRequest> = {
   pageName: "sys:user",
   table: {
     border: true,
     highlightCurrentRow: true,
   },
+  indexActionData: function (data: any) {
+    // Add your implementation here
+    return Promise.resolve(data);
+  },
   pagination: {
     background: true,
     layout: "prev,pager,next,jumper,total,sizes",
@@ -16,14 +19,11 @@ const contentConfig: IContentConfig<UserPageQuery> = {
     pageSizes: [10, 20, 30, 50],
   },
   indexAction: function (params) {
-    return UserAPI.getPage(params);
+    return printerApi.getList(params);
   },
-  deleteAction: UserAPI.deleteByIds,
-  importAction(file) {
-    return UserAPI.import(1, file);
+  deleteAction: function (id) {
+    return printerApi.delete(id)
   },
-  exportAction: UserAPI.export,
-  importTemplate: UserAPI.downloadTemplate,
   importsAction(data) {
     // 模拟导入数据
     console.log("importsAction", data);
@@ -31,7 +31,7 @@ const contentConfig: IContentConfig<UserPageQuery> = {
   },
   exportsAction: async function (params) {
     // 模拟获取到的是全量数据
-    const res = await UserAPI.getPage(params);
+    const res = await printerApi.getPage(params);
     console.log("exportsAction", res.list);
     return res.list;
   },

src/views/devices/config/content2.ts

@@ -1,133 +0,0 @@
-import type { IContentConfig } from "@/components/CURD/types";
-
-const contentConfig: IContentConfig = {
-  pageName: "sys:user",
-  table: {
-    showOverflowTooltip: true,
-  },
-  toolbar: [],
-  indexAction: function (params) {
-    // 模拟发起网络请求获取列表数据
-    console.log("indexAction:", params);
-    return Promise.resolve({
-      total: 2,
-      list: [
-        {
-          id: 1,
-          username: "tom",
-          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
-          percent: 99,
-          price: 10,
-          url: "https://www.baidu.com",
-          icon: "el-icon-setting",
-          gender: 1,
-          status: 1,
-          status2: 1,
-          sort: 99,
-          createTime: 1715647982437,
-        },
-        {
-          id: 2,
-          username: "jerry",
-          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
-          percent: 88,
-          price: 999,
-          url: "https://www.google.com",
-          icon: "el-icon-user",
-          gender: 0,
-          status: 0,
-          status2: 0,
-          sort: 0,
-          createTime: 1715648977426,
-        },
-      ],
-    });
-  },
-  modifyAction(data) {
-    // 模拟发起网络请求修改字段
-    // console.log("modifyAction:", data);
-    ElMessage.success(JSON.stringify(data));
-    return Promise.resolve(null);
-  },
-  cols: [
-    { type: "index", width: 50, align: "center" },
-    { label: "ID", align: "center", prop: "id", show: false },
-    { label: "文本", align: "center", prop: "username" },
-    { label: "图片", align: "center", prop: "avatar", templet: "image" },
-    {
-      label: "百分比",
-      align: "center",
-      prop: "percent",
-      templet: "percent",
-    },
-    {
-      label: "货币符",
-      align: "center",
-      prop: "price",
-      templet: "price",
-      priceFormat: "$",
-    },
-    { label: "链接", align: "center", prop: "url", width: 180, templet: "url" },
-    { label: "图标", align: "center", prop: "icon", templet: "icon" },
-    {
-      label: "列表值",
-      align: "center",
-      prop: "gender",
-      templet: "list",
-      selectList: { "0": "女", "1": "男" },
-    },
-    {
-      label: "自定义",
-      align: "center",
-      prop: "status",
-      templet: "custom",
-      slotName: "status",
-    },
-    {
-      label: "Switch",
-      align: "center",
-      prop: "status2",
-      templet: "switch",
-      activeValue: 1,
-      inactiveValue: 0,
-      activeText: "启用",
-      inactiveText: "禁用",
-    },
-    {
-      label: "输入框",
-      align: "center",
-      prop: "sort",
-      templet: "input",
-      inputType: "number",
-    },
-    {
-      label: "日期格式化",
-      align: "center",
-      prop: "createTime",
-      minWidth: 120,
-      templet: "date",
-      dateFormat: "YYYY/MM/DD HH:mm:ss",
-    },
-    {
-      label: "操作栏",
-      align: "center",
-      fixed: "right",
-      width: 220,
-      templet: "tool",
-      operat: [
-        {
-          name: "reset_pwd",
-          auth: "password:reset",
-          icon: "refresh-left",
-          text: "重置密码",
-          type: "primary",
-          render(row) {
-            return row.id === 1;
-          },
-        },
-      ],
-    },
-  ],
-};
-
-export default contentConfig;

src/views/devices/config/edit.ts

@@ -1,117 +1,163 @@
-import UserAPI, { type UserForm } from "@/api/system/user";
-import type { IModalConfig } from "@/components/CURD/types";
-import { DeviceEnum } from "@/enums/DeviceEnum";
-import { useAppStore } from "@/store";
+import printerApi, { type editRequest } from "@/api/account/printer";
+import { options } from './config'
 
-const modalConfig: IModalConfig<UserForm> = {
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<editRequest> = {
   pageName: "sys:user",
-  component: "drawer",
-  drawer: {
-    title: "修改用户",
-    size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
+  dialog: {
+    title: "修改打印机",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 100,
   },
-  pk: "id",
   formAction: function (data) {
-    return UserAPI.update(data.id as number, data);
+    return printerApi.edit(data);
   },
   beforeSubmit(data) {
     console.log("提交之前处理", data);
   },
   formItems: [
     {
-      label: "用户名",
-      prop: "username",
-      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+      label: "设备名称",
+      prop: "name",
+      rules: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
       type: "input",
       attrs: {
-        placeholder: "请输入用户名",
-        readonly: true,
+        placeholder: "请输入设备名称",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "用户昵称",
-      prop: "nickname",
-      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-      type: "input",
-      attrs: {
-        placeholder: "请输入用户昵称",
-      },
-    },
-    {
-      label: "所属部门",
-      prop: "deptId",
-      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-      type: "tree-select",
-      attrs: {
-        placeholder: "请选择所属部门",
-        data: [],
-        filterable: true,
-        "check-strictly": true,
-        "render-after-expand": false,
-      },
-    },
-    {
-      type: "custom",
-      label: "性别",
-      prop: "gender",
-      initialValue: 1,
-    },
-    {
-      label: "角色",
-      prop: "roleIds",
-      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
       type: "select",
+      label: "类型",
+      prop: "connectionType",
+      rules: [{ required: true, message: "请选择设备类型", trigger: "blur" }],
       attrs: {
-        placeholder: "请选择",
-        multiple: true,
-      },
-      options: [],
-      initialValue: [],
-    },
-    {
-      type: "input",
-      label: "手机号码",
-      prop: "mobile",
-      rules: [
-        {
-          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-          message: "请输入正确的手机号码",
-          trigger: "blur",
+        placeholder: "请选择设备类型",
+        clearable: true,
+        style: {
+          width: "200px",
         },
-      ],
-      attrs: {
-        placeholder: "请输入手机号码",
-        maxlength: 11,
+      },
+      options: options.connectionType,
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "邮箱",
-      prop: "email",
-      rules: [
-        {
-          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-          message: "请输入正确的邮箱地址",
-          trigger: "blur",
-        },
-      ],
+      label: "ip地址",
+      prop: "address",
       type: "input",
       attrs: {
-        placeholder: "请输入邮箱",
-        maxlength: 50,
+        placeholder: "请输入ip地址",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "状态",
+      label: "端口",
+      prop: "port",
+      type: "input",
+      attrs: {
+        placeholder: "请输入端口",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "select",
+      label: "打印类型",
+      prop: "subType",
+      rules: [{ required: false, message: "请选择打印类型", trigger: "blur" }],
+      attrs: {
+        placeholder: "请选择打印类型",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: options.subType,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "select",
+      label: "打印机品牌",
+      prop: "contentType",
+      rules: [{ required: true, message: "请选择打印机品牌", trigger: "blur" }],
+      attrs: {
+        placeholder: "请选择打印机品牌",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: options.contentType,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "radio-button",
+      label: "小票尺寸",
+      prop: "receiptSize",
+      options: options.receiptSize,
+      initialValue: options.receiptSize[0].value
+    },
+    {
+      type: "radio-button",
+      label: "分类打印",
+      prop: "classifyPrint",
+      options: options.classifyPrint,
+      initialValue: options.classifyPrint[0].value
+    },
+    {
+      type: "radio",
+      label: "打印数量",
+      prop: "printQty",
+      options: options.printQty,
+      initialValue: options.printQty[0].value
+    },
+    {
+      type: "radio",
+      label: "打印方式",
+      prop: "printMethod",
+      options: options.printMethod,
+      initialValue: options.printMethod[0].value
+    },
+    {
+      type: "checkbox",
+      label: "打印类型",
+      prop: "printType",
+      options: options.printType,
+      initialValue: options.printType.map(v => v.value)
+    },
+    {
+      label: "打印机状态",
       prop: "status",
       type: "switch",
+      initialValue: 1,
       attrs: {
-        activeText: "正常",
-        inactiveText: "禁用",
         activeValue: 1,
         inactiveValue: 0,
-      },
+      }
     },
   ],
 };
 
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
 export default reactive(modalConfig);

src/views/devices/config/search.ts

@@ -1,13 +1,12 @@
-import DeptAPI from "@/api/system/dept";
 import type { ISearchConfig } from "@/components/CURD/types";
-
+import { options } from './config'
 const searchConfig: ISearchConfig = {
   pageName: "sys:user",
   formItems: [
     {
       type: "input",
       label: "设备名称",
-      prop: "keywords",
+      prop: "name",
       attrs: {
         placeholder: "请输入设备名称",
         clearable: true,
@@ -18,19 +17,16 @@ const searchConfig: ISearchConfig = {
     },
     {
       type: "select",
-      label: "状态",
-      prop: "status",
+      label: "类型",
+      prop: "connectionType",
       attrs: {
-        placeholder: "全部",
+        placeholder: "请选择设备类型",
         clearable: true,
         style: {
-          width: "100px",
+          width: "200px",
         },
       },
-      options: [
-        { label: "启用", value: 1 },
-        { label: "禁用", value: 0 },
-      ],
+      options: options.connectionType,
     },
 
   ],

src/views/devices/printer.vue

@@ -1,64 +1,70 @@
 <template>
   <div class="app-container">
     <!-- 列表 -->
-    <template v-if="isA">
-      <!-- 搜索 -->
-      <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
-        @reset-click="handleResetClick" />
+    <!-- 搜索 -->
+    <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 #gender="scope">
-          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
-        </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-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 #gender="scope">
+        <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+      </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">
-        <template #gender="scope">
-          <Dict v-model="scope.formData[scope.prop]" code="gender" />
-        </template>
-      </page-modal>
+    <!-- 新增 -->
+    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+      <template #gender="scope">
+        <Dict v-model="scope.formData[scope.prop]" code="gender" />
+      </template>
+    </page-modal>
 
-      <!-- 编辑 -->
-      <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
-        <template #gender="scope">
-          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
-        </template>
-      </page-modal>
-    </template>
-    <template v-else>
-      <page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
-        <template #status="scope">
-          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
-            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
-          </el-tag>
-        </template>
-      </page-content>
-    </template>
+    <!-- 编辑 -->
+    <page-modal
+      ref="editModalRef"
+      :modal-config="editModalConfig"
+      @submit-click="handleSubmitClick"
+    >
+      <template #gender="scope">
+        <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+      </template>
+    </page-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import UserAPI from "@/api/system/user";
-import DeptAPI from "@/api/system/dept";
-import RoleAPI from "@/api/system/role";
 import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 import addModalConfig from "./config/add";
 import contentConfig from "./config/content";
-import contentConfig2 from "./config/content2";
 import editModalConfig from "./config/edit";
 import searchConfig from "./config/search";
 
@@ -80,19 +86,11 @@ const {
 // 新增
 async function handleAddClick() {
   addModalRef.value?.setModalVisible();
-  // 加载部门下拉数据源
-  addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-  // 加载角色下拉数据源
-  addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
 }
 // 编辑
 async function handleEditClick(row: IObject) {
   editModalRef.value?.handleDisabled(false);
   editModalRef.value?.setModalVisible();
-  // 加载部门下拉数据源
-  editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-  // 加载角色下拉数据源
-  editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
   // 根据id获取数据进行填充
   const data = await UserAPI.getFormData(row.id);
   editModalRef.value?.setFormData(data);
@@ -107,31 +105,11 @@ function handleToolbarClick(name: string) {
 // 其他操作列
 async function handleOperatClick(data: IOperatData) {
   console.log(data);
-  // 重置密码
-  if (data.name === "reset_pwd") {
-    ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-    }).then(({ value }) => {
-      if (!value || value.length < 6) {
-        ElMessage.warning("密码至少需要6位字符，请重新输入");
-        return false;
-      }
-      UserAPI.resetPassword(data.row.id, value).then(() => {
-        ElMessage.success("密码重置成功，新密码是：" + value);
-      });
-    });
-  } else if (data.name === "detail") {
+  if (data.name === "detail") {
     // 禁用表单编辑
     editModalRef.value?.handleDisabled(true);
     // 打开抽屉
     editModalRef.value?.setModalVisible();
-    // 修改抽屉标题
-    editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
-    // 加载部门下拉数据源
-    editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-    // 加载角色下拉数据源
-    editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
     // 根据id获取数据进行填充
     const formData = await UserAPI.getFormData(data.row.id);
     // 设置表单数据

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,
   };
 }
 

src/views/online-shop/components/addPadPage.vue

@@ -0,0 +1,543 @@
+<!-- 新增pad选菜页 -->
+<template>
+  <div>
+    <el-dialog
+      :title="`${preview ? '预览' : form.id ? '编辑' : '添加'}平板菜谱`"
+      top="5vh"
+      width="1000px"
+      v-model="dialogVisible"
+      :show-close="preview"
+    >
+      <div class="content" v-loading="pageLoading">
+        <div class="editor_wrap" :class="[`type${typeListActive}`]">
+          <template v-if="typeListActive != 6">
+            <div
+              class="btn_wrap"
+              :class="[`div${index + 1}`]"
+              v-for="(item, index) in form.list"
+              :key="index"
+              @click="showSelectGoods(index)"
+            >
+              <div class="btn" v-if="!item.id">
+                <el-icon size="40" color="#dddfe6"><Plus /></el-icon>
+              </div>
+              <div class="cover" v-else>
+                <img class="img" :src="item.coverImg" />
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="btn_wrap" v-if="!form.list.length">
+              <div class="btn">
+                <el-button @click="oneClick">一键生成菜单</el-button>
+              </div>
+            </div>
+            <div class="goods_list" v-else>
+              <div
+                class="btn_wrap"
+                :class="[`div${index + 1}`]"
+                v-for="(item, index) in form.list"
+                :key="index"
+                @click="selectGoods(item)"
+              >
+                <div class="info" :class="{ active: item.active }">
+                  <span class="t1">{{ item.name }}</span>
+                  <span class="t1">￥{{ item.lowPrice }}</span>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="tab" v-if="!preview">
+          <el-radio-group v-model="typeListActive" @change="tabChange">
+            <el-radio-button :label="item.id" v-for="item in typeList" :key="item.id">
+              {{ item.name }}
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="dialog_footer" v-if="!preview">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="loading" @click="submitHandle">保 存</el-button>
+      </div>
+    </el-dialog>
+    <GoodsSelect ref="refSelGoods"></GoodsSelect>
+    <!-- <shopList ref="shopList" disableCategory radio @success="selectConfirmGoods" /> -->
+  </div>
+</template>
+
+<script>
+import { layoutList } from "./layout.js";
+// import shopList from "@/components/shopList/index.vue";
+// import { tbProduct } from "@/api/shop.js";
+// import { layoutlist, productGroup, productCategoryDetail, productGroupPut } from "@/api/pad.js";
+export default {
+  props: {
+    category: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      pageLoading: false,
+      loading: false,
+      activeItem: 0,
+      form: {
+        id: "",
+        list: [],
+      },
+      typeListActive: 1,
+      typeList: [],
+      preview: false,
+    };
+  },
+  mounted() {
+    this.layoutlist();
+  },
+  methods: {
+    // 选中菜品
+    selectGoods(item) {
+      item.active = !item.active;
+    },
+    // 一键生成菜单
+    async oneClick() {
+      try {
+        const res = await tbProduct({
+          categoryId: this.category,
+          page: 0,
+          size: 20,
+          sort: "id",
+          shopId: localStorage.getItem("shopId"),
+        });
+        this.form.list = res.content.map((item, index) => {
+          if (index == 0 || index == 12) {
+            item.active = true;
+          } else {
+            item.active = false;
+          }
+          return item;
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 提交
+    async submitHandle() {
+      try {
+        if (this.typeList.find((item) => item.id == this.typeListActive).code == "text-menu") {
+          if (!this.form.list.length) {
+            this.$notify.error({
+              title: "错误",
+              message: "请生成菜单",
+            });
+            return;
+          }
+        }
+
+        let isEmpty = true;
+        this.form.list.map((item) => {
+          if (!item.id) isEmpty = false;
+        });
+
+        if (!isEmpty) {
+          this.$notify.error({
+            title: "错误",
+            message: "请添加商品",
+          });
+          return;
+        }
+
+        this.loading = true;
+        let res = null;
+        if (this.form.id) {
+          await productGroupPut({
+            id: this.form.id,
+            padLayoutId: this.typeListActive,
+            customName: "",
+            productCategoryId: this.category || this.form.list[0].categoryId,
+            shopId: localStorage.getItem("shopId"),
+            sort: 1,
+            remark: "",
+            productIdList: this.form.list.map((item) => item.id),
+          });
+        } else {
+          res = await productGroup({
+            padLayoutId: this.typeListActive,
+            customName: "",
+            productCategoryId: this.category,
+            shopId: localStorage.getItem("shopId"),
+            sort: 1,
+            remark: "",
+            productIdList: this.form.list.map((item) => item.id),
+          });
+        }
+        this.loading = false;
+        if (this.form.id) {
+          this.$notify.success({
+            title: "提示",
+            message: "编辑成功",
+          });
+        } else {
+          this.$notify.success({
+            title: "提示",
+            message: "添加成功",
+          });
+        }
+        this.dialogVisible = false;
+        this.$emit("success");
+      } catch (error) {
+        this.loading = false;
+        console.log(error);
+      }
+    },
+    // 获取
+    async layoutlist() {
+      this.typeList = layoutList;
+      return;
+      try {
+        const res = await layoutlist();
+        this.typeList = res;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 显示选择商品
+    showSelectGoods(index) {
+      this.activeItem = index;
+      this.$refs.refSelGoods.show([], this.category);
+    },
+    // 确认选择商品
+    selectConfirmGoods(res) {
+      // this.form.list = res
+      const flag = this.form.list.filter((item) => item.id == res[0].id);
+
+      if (flag.length) {
+        this.$notify({
+          title: "注意",
+          message: "请勿重复添加",
+          type: "error",
+        });
+      } else {
+        this.$set(this.form.list, this.activeItem, { ...res[0] });
+      }
+    },
+    // 切换tab
+    tabChange() {
+      this.form.list = [];
+      if (this.typeListActive != 6) {
+        this.init();
+      }
+    },
+    // 初始化
+    init() {
+      let num = this.typeList.find((item) => item.id == this.typeListActive).maximum;
+      for (let i = 0; i < num; i++) {
+        this.form.list.push({});
+      }
+    },
+    // 获取详情
+    async productCategoryDetail(id) {
+      try {
+        this.pageLoading = true;
+        const res = await productCategoryDetail(id);
+        this.pageLoading = false;
+        this.typeListActive = res.padLayoutId;
+        this.form.id = res.id;
+
+        this.form.list = [];
+        this.form.list = res.productList;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    reset() {
+      this.form.id = "";
+      this.form.list = [];
+    },
+    // 显示 type=1 编辑 type=2预览
+    async show(id = "", type = 1) {
+      this.reset();
+      this.typeListActive = 1;
+      this.dialogVisible = true;
+      this.tabChange();
+      if (id) {
+        await this.productCategoryDetail(id);
+      }
+      if (type == 2) {
+        this.preview = true;
+      } else {
+        this.preview = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.content {
+  .editor_wrap {
+    width: 100%;
+    height: 560px;
+
+    &.type2 {
+      display: flex;
+      gap: 10px;
+    }
+
+    &.type3 {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      grid-column-gap: 10px;
+      grid-row-gap: 10px;
+
+      .div1 {
+        grid-area: 1 / 1 / 3 / 2;
+      }
+
+      .div2 {
+        grid-area: 1 / 2 / 2 / 3;
+      }
+
+      .div3 {
+        grid-area: 2 / 2 / 3 / 3;
+      }
+    }
+
+    &.type4 {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      grid-column-gap: 10px;
+      grid-row-gap: 10px;
+
+      .div1 {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      .div2 {
+        grid-area: 1 / 2 / 2 / 3;
+      }
+
+      .div3 {
+        grid-area: 2 / 1 / 3 / 2;
+      }
+
+      .div4 {
+        grid-area: 2 / 2 / 3 / 3;
+      }
+    }
+
+    &.type5 {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      grid-column-gap: 10px;
+      grid-row-gap: 10px;
+
+      .div1 {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      .div2 {
+        grid-area: 1 / 2 / 2 / 3;
+      }
+
+      .div3 {
+        grid-area: 1 / 3 / 2 / 4;
+      }
+
+      .div4 {
+        grid-area: 2 / 1 / 3 / 2;
+      }
+
+      .div5 {
+        grid-area: 2 / 2 / 3 / 3;
+      }
+
+      .div6 {
+        grid-area: 2 / 3 / 3 / 4;
+      }
+    }
+
+    &.type6 {
+      .goods_list {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(10, 1fr);
+        grid-column-gap: 20px;
+        grid-row-gap: 0px;
+
+        .div1 {
+          grid-area: 1 / 1 / 2 / 2;
+        }
+
+        .div2 {
+          grid-area: 2 / 1 / 3 / 2;
+        }
+
+        .div3 {
+          grid-area: 3 / 1 / 4 / 2;
+        }
+
+        .div4 {
+          grid-area: 4 / 1 / 5 / 2;
+        }
+
+        .div5 {
+          grid-area: 5 / 1 / 6 / 2;
+        }
+
+        .div6 {
+          grid-area: 6 / 1 / 7 / 2;
+        }
+
+        .div7 {
+          grid-area: 7 / 1 / 8 / 2;
+        }
+
+        .div8 {
+          grid-area: 8 / 1 / 9 / 2;
+        }
+
+        .div9 {
+          grid-area: 9 / 1 / 10 / 2;
+        }
+
+        .div10 {
+          grid-area: 10 / 1 / 11 / 2;
+        }
+
+        .div11 {
+          grid-area: 1 / 2 / 2 / 3;
+        }
+
+        .div12 {
+          grid-area: 2 / 2 / 3 / 3;
+        }
+
+        .div13 {
+          grid-area: 3 / 2 / 4 / 3;
+        }
+
+        .div14 {
+          grid-area: 4 / 2 / 5 / 3;
+        }
+
+        .div15 {
+          grid-area: 5 / 2 / 6 / 3;
+        }
+
+        .div16 {
+          grid-area: 6 / 2 / 7 / 3;
+        }
+
+        .div17 {
+          grid-area: 7 / 2 / 8 / 3;
+        }
+
+        .div18 {
+          grid-area: 8 / 2 / 9 / 3;
+        }
+
+        .div19 {
+          grid-area: 9 / 2 / 10 / 3;
+        }
+
+        .div20 {
+          grid-area: 10 / 2 / 11 / 3;
+        }
+      }
+    }
+
+    .goods_list {
+      height: 100%;
+    }
+
+    .btn_wrap {
+      flex: 1;
+      height: 100%;
+      position: relative;
+
+      .info {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #ececec;
+        padding: 0 20px;
+        font-size: 16px;
+        font-weight: bold;
+        overflow: hidden;
+
+        &.active {
+          background-color: #bc1414;
+          color: #fff;
+
+          &::after {
+            content: "";
+            width: 120px;
+            height: 60px;
+            border: 22px solid #fff;
+            border-top: none;
+            border-right: none;
+            opacity: 0.3;
+            position: absolute;
+            top: -20px;
+            right: 10%;
+            transform: rotate(-45deg);
+          }
+        }
+      }
+
+      .btn {
+        height: 100%;
+        border: 1px solid #dddfe6;
+        background: #f7f7fa;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .icon {
+          font-size: 40px;
+          color: #dddfe6;
+        }
+      }
+
+      .cover {
+        height: 100%;
+        background: #f7f7fa;
+        position: relative;
+
+        .img {
+          width: 100%;
+          height: 100%;
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+
+  .tab {
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+  }
+}
+
+.dialog_footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 20px;
+}
+</style>

src/views/online-shop/components/layout.js

@@ -0,0 +1,52 @@
+export const layoutList = [
+  {
+    code: "single",
+    createTime: "2024-10-22 15:50:05",
+    delFlag: 0,
+    id: 1,
+    maximum: 1,
+    name: "单图",
+    remark: null,
+    sort: 0,
+  },
+  {
+    code: "double",
+    createTime: "2024-10-22 15:50:34",
+    delFlag: 0,
+    id: 2,
+    maximum: 2,
+    name: "双图",
+    remark: null,
+    sort: 1,
+  },
+  {
+    code: "L1-R2",
+    createTime: "2024-10-22 15:51:20",
+    delFlag: 0,
+    id: 3,
+    maximum: 3,
+    name: "左一右二",
+    remark: null,
+    sort: 2,
+  },
+  {
+    code: "4-gird",
+    createTime: "2024-10-22 15:52:22",
+    delFlag: 0,
+    id: 4,
+    maximum: 4,
+    name: "四图",
+    remark: "四宫格",
+    sort: 3,
+  },
+  {
+    code: "6-grid",
+    createTime: "2024-10-22 15:53:21",
+    delFlag: 0,
+    id: 5,
+    maximum: 6,
+    name: "六图",
+    remark: "六宫格",
+    sort: 4,
+  },
+];

src/views/online-shop/index.vue

@@ -1 +1,727 @@
-<template></template>
+<template>
+  <div class="app-container">
+    <div class="btn_wraps">
+      <div
+        class="btn"
+        :class="{ active: tableActive == item.autoKey }"
+        v-for="item in tableData"
+        :key="item.autoKey"
+        @click="selectItemChange(item.autoKey)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="form">
+      <div class="preview_wrap">
+        <div class="phone_wrap">
+          <div class="index_bg" v-if="tableActive == 'home'">
+            <img class="bg" :src="selectItem.value" />
+            <div class="menu_wrap">
+              <div class="menu_wrap_div">
+                <div class="left">
+                  <div class="icon_wrap">
+                    <SvgIcon
+                      style="margin-right: 0"
+                      color="rgb(0,0,0)"
+                      size="30"
+                      iconClass="Coffee"
+                    ></SvgIcon>
+                  </div>
+                  <div class="info">
+                    <div class="t1">点餐</div>
+                    <div class="t2">在线点不排队</div>
+                  </div>
+                </div>
+                <div class="right">
+                  <div class="btn">
+                    <SvgIcon
+                      style="margin-right: 0"
+                      size="30"
+                      color="rgb(0,0,0)"
+                      iconClass="postcard"
+                    ></SvgIcon>
+                    <div class="info">
+                      <div class="t1">会员</div>
+                      <div class="t2">入会享权益</div>
+                    </div>
+                  </div>
+                  <div class="btn">
+                    <SvgIcon
+                      style="margin-right: 0"
+                      color="rgb(0,0,0)"
+                      size="30"
+                      iconClass="wallet"
+                    ></SvgIcon>
+                    <div class="info">
+                      <div class="t1">充值</div>
+                      <div class="t2">充值享更多优惠</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="my_bg" v-if="tableActive == 'my_bg'">
+            <img class="bg" :src="selectItem.value" />
+            <div class="content">
+              <div class="item" style="display: flex">
+                <div class="left">
+                  <div class="avatar">
+                    <i class="icon el-icon-s-custom"></i>
+                  </div>
+                  <span>微信用户</span>
+                </div>
+                <div class="ewm">
+                  <i class="icon el-icon-menu"></i>
+                </div>
+              </div>
+              <div class="item">
+                <div class="title" style="padding-bottom: 10px">我的资产</div>
+                <div class="flex">
+                  <div class="btn">
+                    <i class="icon el-icon-s-finance"></i>
+                    <span class="name">储值</span>
+                    <span class="num">**</span>
+                  </div>
+                  <div class="btn">
+                    <i class="icon el-icon-s-ticket"></i>
+                    <span class="name">优惠券</span>
+                    <span class="num">**</span>
+                  </div>
+                </div>
+              </div>
+              <div class="item">
+                <div class="title" style="padding-bottom: 10px">我的功能</div>
+                <div class="row">
+                  <div class="left">
+                    <i class="icon el-icon-s-ticket"></i>
+                    <div class="label">我的优惠券</div>
+                  </div>
+                  <i class="arrow el-icon-arrow-right"></i>
+                </div>
+                <div class="row">
+                  <div class="left">
+                    <i class="icon el-icon-s-order"></i>
+                    <div class="label">我的订单</div>
+                  </div>
+                  <i class="arrow el-icon-arrow-right"></i>
+                </div>
+                <div class="row">
+                  <div class="left">
+                    <i class="icon el-icon-user-solid"></i>
+                    <div class="label">个人资料</div>
+                  </div>
+                  <i class="arrow el-icon-arrow-right"></i>
+                </div>
+                <div class="row">
+                  <div class="left">
+                    <i class="icon el-icon-s-management"></i>
+                    <div class="label">我的会员卡</div>
+                  </div>
+                  <i class="arrow el-icon-arrow-right"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="member_bg" v-if="tableActive == 'member_bg'">
+            <div class="card_wrap">
+              <div class="card">
+                <img class="bg" :src="selectItem.value" />
+                <div class="content">
+                  <div class="ewm">
+                    <i class="icon el-icon-menu"></i>
+                  </div>
+                  <div class="title">{{ shopName }}会员卡 Lv.1</div>
+                  <div class="tips">
+                    <span>欢迎加入本店会员</span>
+                    <span>查看特权</span>
+                  </div>
+                  <div class="btm">
+                    <div class="item">
+                      <span>0.00</span>
+                      <span>储值</span>
+                    </div>
+                    <div class="item">
+                      <span>0</span>
+                      <span>积分</span>
+                    </div>
+                    <div class="item">
+                      <span>0</span>
+                      <span>优惠券</span>
+                    </div>
+                    <div class="item">
+                      <span>0</span>
+                      <span>权益卡</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="info_wrap">
+                <div class="avatar">
+                  <i class="icon el-icon-user"></i>
+                </div>
+                <div class="info">
+                  <div class="t1">感谢你2天陪伴</div>
+                  <div class="t2">
+                    您今天的幸运词：
+                    <span>林波微步</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="shopinfo_bg" v-if="tableActive == 'shopinfo_bg'">
+            <img class="bg" :src="selectItem.value" />
+            <div class="shop_name">{{ shopName }}</div>
+            <img class="content" src="@/assets/images/shop_editor_bg.png" alt="" />
+          </div>
+          <div class="ticket_wrap" v-if="tableActive == 'ticket_logo'">
+            <img class="logo" :src="selectItem.value" />
+            <img class="ewm" src="@/assets/images/1024.png" />
+            <div class="row">
+              <span class="num">123</span>
+              <span>座位号：#A9</span>
+            </div>
+            <div class="row">甜橙马黛茶</div>
+            <div class="row">
+              <span class="sku">加珍珠、加糖</span>
+            </div>
+            <div class="row">
+              <span class="b">2020-10-24 13:14:52</span>
+            </div>
+            <div class="row">
+              <span class="sku">建议尽快享用，风味更佳</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="editor_wrap">
+        <div class="header" style="padding-bottom: 20px">
+          <div class="t1">
+            {{ selectItem.name }}
+          </div>
+          <div class="t2">注：点击图片更换</div>
+        </div>
+        <div class="form_item">
+          <SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess">
+            <img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </SingleImageUpload>
+          <!-- <el-upload
+            :headers="headers"
+            class="avatar-uploader"
+            :action="qiNiuUploadApi"
+            :show-file-list="false"
+            :on-success="handleSuccess"
+            style="width: 200px; height: 200px"
+          >
+            <img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload> -->
+          <!-- <div class="title" style="padding-left: 20px;">跳转路径</div>
+                  <el-input style="width: 300px;margin-left: 20px;" />
+                  <el-button type="primary" style="margin-left: 20px;">修改</el-button> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import shopExtendApi from "@/api/account/shopExtend";
+export default {
+  data() {
+    return {
+      tableActive: "home",
+      tableData: [],
+      selectItem: {},
+      imageUrl: "",
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    // 刷新列表数据
+    async doSubmit() {
+      await shopExtendApi.edit({
+        ...this.selectItem,
+        autokey: this.selectItem.autoKey,
+      });
+      this.$message({
+        message: "编辑成功",
+        type: "success",
+      });
+      this.getList();
+    },
+    onSuccess(response) {
+      this.doSubmit();
+    },
+    // 切换类型
+    selectItemChange(key) {
+      this.tableActive = key;
+      const { autoKey, id, name, value } = this.tableData.find((item) => item.autoKey == key);
+      this.selectItem = { autoKey, id, name, value };
+      console.log(this.selectItem);
+    },
+    // 获取装修数据
+    async getList() {
+      try {
+        let res = await shopExtendApi.get({});
+        this.tableData = res;
+        console.log(this.tableData[0]);
+        this.selectItemChange(this.tableActive);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.btn_wraps {
+  display: flex;
+  $color: #40a9ff;
+  gap: 30px;
+
+  .btn {
+    width: 100px;
+    height: 40px;
+    border: 1px solid $color;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 0 4px #40a9ff29;
+    color: $color;
+    cursor: pointer;
+
+    &.active {
+      background-color: $color;
+      color: #fff;
+    }
+  }
+}
+
+.form {
+  display: flex;
+  padding-top: 30px;
+
+  .preview_wrap {
+    width: 317px;
+
+    .phone_wrap {
+      width: 100%;
+      background-color: #fff;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+      .index_bg {
+        padding-bottom: 50px;
+        .bg {
+          width: 100%;
+          height: 500px;
+          object-fit: cover;
+          position: relative;
+        }
+
+        .info {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding-top: 10px;
+
+          .t1 {
+            font-size: 14px;
+          }
+
+          .t2 {
+            font-size: 10px;
+            color: #999;
+          }
+        }
+
+        .menu_wrap {
+          padding: 0 20px;
+          margin-top: -50px;
+          position: relative;
+
+          .menu_wrap_div {
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            display: flex;
+            padding: 20px 10px;
+            border-radius: 10px;
+            background-color: #fff;
+
+            .left {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+
+              .icon_wrap {
+                display: flex;
+                justify-content: center;
+
+                .icon {
+                  font-size: 34px;
+                }
+              }
+            }
+
+            .right {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              border-left: 1px solid #ddd;
+              padding-left: 20px;
+
+              .btn {
+                flex: 1;
+                display: flex;
+                align-items: center;
+
+                &:last-child {
+                  margin-top: 6px;
+                }
+
+                .icon {
+                  font-size: 30px;
+                }
+
+                .info {
+                  flex: 1;
+                  padding-top: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .my_bg {
+        background-color: #f5f5f5;
+        height: 100%;
+        padding-bottom: 50px;
+
+        .bg {
+          width: 100%;
+          height: 180px;
+          object-fit: cover;
+          position: relative;
+        }
+
+        .content {
+          padding: 0 10px;
+          margin-top: -40px;
+          position: relative;
+
+          .item {
+            padding: 10px;
+            align-items: center;
+            justify-content: space-between;
+            background-color: #fff;
+            border-radius: 10px;
+            margin-bottom: 10px;
+
+            .left {
+              display: flex;
+              align-items: center;
+
+              .avatar {
+                width: 50px;
+                height: 50px;
+                background-color: #efefef;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+
+                .icon {
+                  font-size: 24px;
+                  color: #ddd;
+                }
+              }
+
+              span {
+                margin-left: 10px;
+              }
+            }
+
+            .ewm {
+              width: 30px;
+              height: 30px;
+              border-radius: 50%;
+              background-color: #e3ad7f;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .icon {
+                font-size: 20px;
+                color: #fff;
+              }
+            }
+
+            .flex {
+              display: flex;
+
+              .btn {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 5px;
+
+                .icon {
+                  font-size: 28px;
+                }
+
+                .name {
+                  font-size: 14px;
+                }
+
+                .num {
+                  color: #e3ad7f;
+                }
+              }
+            }
+
+            .row {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding: 10px 0;
+
+              .left {
+                display: flex;
+                align-items: center;
+
+                .icon {
+                  font-size: 20px;
+                }
+
+                .label {
+                  font-size: 14px;
+                  margin-left: 10px;
+                }
+              }
+
+              .arrow {
+                font-size: 14px;
+                color: #999;
+              }
+            }
+          }
+        }
+      }
+
+      .member_bg {
+        height: 100%;
+        background-color: #f5f5f5;
+        padding: 10px;
+        padding-bottom: 400px;
+
+        .card_wrap {
+          background-color: #fff;
+          border-radius: 10px;
+          overflow: hidden;
+
+          .card {
+            height: 144px;
+            position: relative;
+
+            .bg {
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              top: 0;
+              left: 0;
+              object-fit: cover;
+              border-radius: 0 0 10px 10px;
+            }
+
+            .content {
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              top: 0;
+              left: 0;
+              background-color: rgba(0, 0, 0, 0.3);
+              border-radius: 0 0 10px 10px;
+              color: #fff;
+              padding: 20px;
+              font-size: 14px;
+
+              .ewm {
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                background-color: #000;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                top: 15px;
+                right: 20px;
+
+                .icon {
+                  font-size: 16px;
+                  color: #fff;
+                }
+              }
+
+              .title {
+                font-size: 16px;
+              }
+
+              .tips {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 10px;
+                color: inherit;
+              }
+
+              .btm {
+                width: 100%;
+                display: flex;
+                position: absolute;
+                bottom: 20px;
+                left: 0;
+
+                .item {
+                  flex: 1;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  justify-content: center;
+                }
+              }
+            }
+          }
+
+          .info_wrap {
+            padding: 20px 10px;
+            display: flex;
+            align-items: center;
+
+            .avatar {
+              width: 40px;
+              height: 40px;
+              border-radius: 50%;
+              background-color: #efefef;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .icon {
+                color: #555;
+                font-size: 24px;
+              }
+            }
+
+            .info {
+              flex: 1;
+
+              .t1 {
+                font-size: 14px;
+              }
+
+              .t2 {
+                font-size: 10px;
+                color: #999;
+              }
+            }
+          }
+        }
+      }
+
+      .shopinfo_bg {
+        .bg {
+          width: 100%;
+          height: 120px;
+          object-fit: cover;
+        }
+
+        .shop_name {
+          padding: 10px 10px 0 10px;
+        }
+
+        .content {
+          width: 100%;
+          height: auto;
+          display: block;
+        }
+      }
+
+      .ticket_wrap {
+        padding: 15px;
+        position: relative;
+
+        .ewm {
+          width: 80px;
+          height: 80px;
+          position: absolute;
+          top: 10px;
+          right: 15px;
+        }
+
+        .logo {
+          width: 90px;
+          height: 30px;
+          object-fit: cover;
+        }
+
+        .row {
+          margin-top: 5px;
+          display: flex;
+          align-items: center;
+
+          .sku {
+            font-size: 12px;
+            color: #666;
+          }
+
+          .b {
+            font-weight: bold;
+          }
+
+          .num {
+            font-size: 18px;
+            font-weight: bold;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+
+  .editor_wrap {
+    padding-left: 20px;
+
+    .header {
+      .t2 {
+        color: #999;
+        font-size: 12px;
+      }
+    }
+
+    .form_item {
+      display: flex;
+      align-items: center;
+
+      .avatar {
+        display: block;
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+      }
+
+      .title {
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+</style>

src/views/online-shop/pad-setting.vue

@@ -1 +1,305 @@
-<template></template>
+<template>
+  <div class="app-container">
+    <div class="left_menu">
+      <div class="search_wrap">
+        <el-input placeholder="名称/代码" v-model="query.name" @change="searchCateory">
+          <template #append>
+            <el-button icon="el-icon-search" @click="searchCateory"></el-button>
+          </template>
+        </el-input>
+      </div>
+      <div class="tree_wrap">
+        <!-- <el-tree :data="treeData" node-key="id" highlight-current :props="{ label: 'name' }" default-expand-all
+                  @node-click="treeItemClick"></el-tree> -->
+        <div
+          class="item"
+          :class="{ active: selectCatoryIndex == index }"
+          v-for="(item, index) in treeData"
+          :key="item.id"
+          @click="treeItemClick(item, index)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+    <div class="table_wrap">
+      <div class="header_wrap">
+        <el-button type="primary" @click="addHandle">新建</el-button>
+      </div>
+      <div class="table" id="table_drag">
+        <el-table
+          ref="table"
+          :data="tableData.list"
+          border
+          height="100%"
+          v-loading="tableData.loading"
+          row-key="id"
+        >
+          <el-table-column label="序号" type="index" width="80"></el-table-column>
+          <el-table-column label="ID" prop="id" width="80"></el-table-column>
+          <el-table-column label="菜品名称" prop="productNames"></el-table-column>
+          <el-table-column label="类型" prop="padLayoutName"></el-table-column>
+          <el-table-column label="所属小类" prop="productCategoryName"></el-table-column>
+          <el-table-column label="自定义分类" prop="customName"></el-table-column>
+          <el-table-column label="操作" width="200">
+            <template v-slot="scope">
+              <el-button type="text" v-if="isPcBowser">拖动排序</el-button>
+              <el-button type="text" @click="editorHandle(scope.row, 1)">编辑</el-button>
+              <el-popconfirm title="确定删除吗？" @confirm="delTableHandle(scope.row.id)">
+                <template #reference>
+                  <el-button type="text">删除</el-button>
+                </template>
+              </el-popconfirm>
+              <el-button type="text" @click="editorHandle(scope.row, 2)">预览</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="head-container">
+        <el-pagination
+          @size-change="paginationSizeChange"
+          :total="tableData.total"
+          :current-page="tableData.page"
+          :page-size="tableData.size"
+          @current-change="paginationChange"
+          layout="total, sizes, prev, pager, next, jumper"
+        ></el-pagination>
+      </div>
+    </div>
+    <AddPadPage ref="AddPadPage" :category="selectCatory.id" @success="addSuccess" />
+  </div>
+</template>
+
+<script>
+import Sortable from "sortablejs";
+import AddPadPage from "./components/addPadPage.vue";
+import paoductCategoryApi from "@/api/product/productclassification";
+import padProdApi from "@/api/account/padProd";
+import { swapArrayEle } from "@/utils/tools.js";
+
+export default {
+  components: {
+    AddPadPage,
+  },
+  data() {
+    return {
+      query: {
+        name: "",
+      },
+      selectCatoryIndex: 0,
+      selectCatory: "",
+      treeDataOrgin: [],
+      treeData: [],
+      tableData: {
+        loading: false,
+        page: 1,
+        size: 10,
+        total: 0,
+        list: [],
+      },
+    };
+  },
+  mounted() {
+    this.tbShopCategoryGet();
+    if (this.isPcBowser) {
+      this.$nextTick(() => {
+        this.tableDrag();
+      });
+    }
+  },
+  methods: {
+    // 搜索分类
+    searchCateory() {
+      this.treeData = this.treeDataOrgin.filter((item) => {
+        return item.name.includes(this.query.name);
+      });
+
+      if (this.treeData.length) {
+        this.selectCatoryIndex = 0;
+        this.selectCatory = this.treeData[this.selectCatoryIndex];
+        this.getTableData();
+      }
+    },
+    //表格拖拽
+    tableDrag() {
+      const el = document.querySelector("#table_drag .el-table__body-wrapper tbody");
+      new Sortable(el, {
+        animation: 150,
+        onEnd: async (e) => {
+          // console.log('拖拽结束===', e);
+          if (e.oldIndex == e.newIndex) return;
+
+          let arr = swapArrayEle(this.tableData.list, e.oldIndex, e.newIndex);
+          console.log(arr);
+          let data = arr.map((item, index) => {
+            return {
+              id: item.id,
+              sort: index,
+            };
+          });
+
+          try {
+            await productCategorySort(data);
+            this.getTableData();
+          } catch (error) {
+            console.log(error);
+          }
+        },
+      });
+    },
+    // 删除
+    async delTableHandle(id) {
+      try {
+        await padProdApi.delete(id);
+        this.$message.success("已删除");
+        this.getTableData();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 编辑 预览
+    editorHandle(row, type) {
+      this.$refs.AddPadPage.show(row.id, type);
+    },
+    // 新建成功
+    addSuccess() {
+      this.tableData.page = 1;
+      this.getTableData();
+    },
+    // 新建
+    addHandle() {
+      if (this.selectCatory.id) {
+        this.$refs.AddPadPage.show();
+      } else {
+        this.$notify.error({
+          title: "错误",
+          message: "请选择分类",
+        });
+      }
+    },
+    // 分类被点击
+    treeItemClick(data, index) {
+      this.selectCatoryIndex = index;
+      this.selectCatory = data;
+      this.tableData.page = 1;
+      this.getTableData();
+    },
+    // 获取商品分类
+    async tbShopCategoryGet() {
+      this.tableData.loading = true;
+      try {
+        const res = await paoductCategoryApi.getList({
+          page: 0,
+          size: 100,
+        });
+        this.treeDataOrgin = res;
+        this.treeData = res;
+        this.selectCatory = res[this.selectCatoryIndex];
+        this.getTableData();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 重置查询
+    resetHandle() {
+      this.tableData.page = 1;
+      this.tableData.size = 10;
+      this.tableData.list = [];
+      this.getTableData();
+    },
+    // 每页条数改变是回调
+    paginationSizeChange(e) {
+      this.tableData.size = e;
+      this.tableData.page = 1;
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e;
+      this.tableData.list = [];
+      this.getTableData();
+    },
+    // Pad点餐列表
+    async getTableData() {
+      try {
+        this.tableData.loading = true;
+        const res = await padProdApi.getList({
+          page: this.tableData.page,
+          size: this.tableData.size,
+          customName: "",
+          productCategoryId: this.selectCatory.id,
+          padLayoutId: "",
+          id: "",
+        });
+        this.tableData.loading = false;
+        this.tableData.list = res.records;
+        this.tableData.total = res.totalRow;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+  background-color: #1890ff;
+  color: #fff;
+}
+
+.app-container {
+  display: flex;
+}
+
+.left_menu {
+  width: 164px;
+  height: calc(100vh - 210px);
+  border: 1px solid #ddd;
+
+  .search_wrap {
+    padding: 14px;
+  }
+
+  .tree_wrap {
+    width: 100%;
+    height: calc(100% - 70px);
+    overflow-y: auto;
+
+    .item {
+      padding: 10px 15px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &.active {
+        background-color: #1890ff;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.table_wrap {
+  flex: 1;
+  padding-left: 14px;
+
+  .header_wrap {
+    display: flex;
+  }
+
+  .table {
+    padding-top: 15px;
+    width: 100%;
+    height: calc(100vh - 310px);
+  }
+}
+
+.head-container {
+  padding-top: 20px;
+}
+</style>

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>

src/views/shop/staff/components/select-permission.vue

@@ -1 +1,52 @@
-<template>11</template>
+<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>

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
+    }
+
   ],
 };
 

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",
+    },
   ],
 };
 

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);

src/views/tool/Instead/components/carts/item.vue

@@ -0,0 +1,468 @@
+<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.is_temporary"
+        >
+          <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 || item.product_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(() => {
+  if (props.item.discount_sale_amount * 1 != 0) {
+    return props.item.number * props.item.discount_sale_amount;
+  }
+  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");
+}
+//购物车商品输入框数量改变
+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>

src/views/tool/Instead/components/carts/list.vue

@@ -0,0 +1,155 @@
+<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)"
+          @editNote="editNote"
+        ></carts-item>
+      </div>
+      <!-- 赠菜 -->
+      <div class="cart-title" v-if="carts.giftList.length > 0"><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)"
+          @editNote="editNote"
+        ></carts-item>
+      </div>
+
+      <el-empty image-size="60" v-if="carts.isEmpty" description="点餐列表为空" />
+    </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 emits = defineEmits(["editNote"]);
+function editNote() {
+  emits("editNote");
+}
+
+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>

src/views/tool/Instead/components/control.vue

@@ -0,0 +1,146 @@
+<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: "changePriceClick", disabled: false, per: "cart" },
+  { label: "等叫", key: "is_wait_call", disabled: false, per: "cart" },
+  { label: "整单等叫", key: "", disabled: false, per: "all-wating" },
+]);
+
+const emits = defineEmits(["noteClick", "changePriceClick", "packClick"]);
+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 "changePriceClick":
+      emits("changePriceClick", carts.selCart);
+      break;
+    case "one-note":
+      emits("noteClick", true);
+      break;
+    case "all-note":
+      emits("noteClick", false);
+      break;
+    case "is_wait_call":
+      carts.updateTag("is_wait_call", carts.selCart.is_wait_call ? 0 : 1);
+      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 ? "免厨打" : "打印";
+  }
+  if (item.key == "is_wait_call") {
+    return carts.selCart.is_wait_call ? "取消等叫" : "等叫";
+  }
+  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>

src/views/tool/Instead/components/dialog-goods-sel.vue

@@ -0,0 +1,169 @@
+<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%" @click="confirm">确 定</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;
+  number.value = 1;
+  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;
+  });
+});
+
+watch(
+  () => skuData.value,
+  (newval) => {
+    if (newval) {
+      number.value = newval.suitNum;
+    }
+  }
+);
+
+const emits = defineEmits(["confirm"]);
+function confirm() {
+  if (skuData.value) {
+    emits("confirm", {
+      sku_id: skuData.value.id,
+      product_id: goods.value.id,
+      number: number.value,
+    });
+    close();
+  }
+}
+
+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>

src/views/tool/Instead/components/goods-item.vue

@@ -0,0 +1,60 @@
+<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 == 'weight'">称重</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);
+  }
+}
+.weight {
+  height: 15px;
+  background: linear-gradient(124deg, rgb(115, 201, 105) 6%, rgb(39, 146, 27) 93%);
+  border-radius: 2px;
+  font-size: 12px;
+  text-align: center;
+  line-height: 15px;
+  padding: 0px 2px;
+  margin-right: 2px;
+}
+</style>

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>

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>

src/views/tool/Instead/components/popup-cart-changePrice.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-dialog title="单品改价" width="410px" v-model="show" @close="reset" :modal="modal">
+    <div class="u-m-t-30 u-flex">
+      <div class="no-wrap u-m-r-20">价格更改为</div>
+      <el-input
+        :min="min"
+        placeholder="请输入更改后的价格"
+        v-model="price"
+        @blur="checkPrice"
+        type="number"
+      >
+        <template #append>元</template>
+      </el-input>
+    </div>
+    <div class="u-m-t-16">
+      <span class="color-red">*</span>
+      <span>当前单品单价：{{ originPrice }}元</span>
+    </div>
+
+    <template #footer>
+      <div>
+        <el-button size="medium" @click="close">取消</el-button>
+        <el-button size="medium" type="primary" @click="confirm">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+    <script>
+import { ElMessage } from "element-plus";
+export default {
+  props: {
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+    vipUser: {
+      type: Object,
+      default: () => {
+        return {
+          isVip: false,
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      min: 0,
+      originPrice: "",
+      price: "",
+      show: false,
+      goods: {
+        productId: -999,
+      },
+    };
+  },
+  computed: {
+    isSeatFee() {
+      return returnIsSeatFee(this.goods);
+    },
+  },
+  methods: {
+    checkPrice() {
+      if (this.price < 0) {
+        this.price = 0;
+      }
+    },
+    changeSel(item) {
+      item.checked = !item.checked;
+    },
+    reset() {
+      this.price = "";
+    },
+    open(item) {
+      console.log(item);
+      this.show = true;
+      const price = item.discount_sale_amount * 1 || item.salePrice * 1;
+      this.price = price;
+      this.originPrice = price;
+    },
+    close() {
+      this.show = false;
+      this.price = "";
+      this.originPrice = "";
+    },
+    async confirm() {
+      if (this.price < 0) {
+        return ElMessage.error("价格不能小于0");
+      }
+      this.$emit("confirm", this.price);
+      this.close();
+      // this.$emit("confirm", { note: note, num: this.number });
+    },
+  },
+  mounted() {},
+};
+</script>
+    
+    <style lang="scss" scoped>
+:deep(.el-dialog__body) {
+  margin-bottom: 14px;
+  margin-top: 14px;
+  padding: 0 20px;
+}
+:deep(.el-tag) {
+  margin-top: 10px;
+  margin-right: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 35px;
+  height: 35px;
+}
+.tags {
+  .tag {
+    margin: 10px 10px 0 0;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 10px 13px;
+    font-size: 14px;
+    color: #666;
+    cursor: pointer;
+    &.active {
+      color: #1890ff;
+      background: #e8f4ff;
+      border-color: #a3d3ff;
+    }
+  }
+}
+:deep(.el-dialog__body) {
+  color: #333;
+}
+:deep(input::-webkit-outer-spin-button) {
+  -webkit-appearance: none !important;
+}
+:deep(input::-webkit-inner-spin-button) {
+  -webkit-appearance: none !important;
+}
+</style>

src/views/tool/Instead/components/popup-linshiCai.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-dialog title="添加临时菜" width="410px" v-model="show" @close="reset">
+    <div>
+      <div>将临时菜添加至购物车，不会影响总商品库</div>
+      <div class="u-m-t-16">
+        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+          <el-form-item label="菜品名称" prop="product_name">
+            <el-input v-model="form.product_name" placeholder="请输入菜品名称"></el-input>
+          </el-form-item>
+          <el-form-item label="价格" prop="discount_sale_amount">
+            <el-input v-model="form.discount_sale_amount" placeholder="请输入价格" type="number">
+              <template #append>元</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="下单数量" prop="number">
+            <el-input v-model="form.number" placeholder="请输入下单数量" type="number"></el-input>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <template #footer>
+      <div>
+        <el-button size="medium" @click="close">取消</el-button>
+        <el-button size="medium" type="primary" @click="confirm">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+  <script>
+import { ElMessage } from "element-plus";
+export default {
+  data() {
+    return {
+      show: false,
+      rules: {
+        product_name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
+        discount_sale_amount: [{ required: true, message: "请输入菜品价格", trigger: "blur" }],
+        number: [{ required: true, message: "请输入下单数量", trigger: "blur" }],
+      },
+      form: {
+        product_name: "",
+        discount_sale_amount: "",
+        number: 1,
+        remark: "",
+      },
+      category: [],
+      units: [],
+      option: {},
+    };
+  },
+
+  methods: {
+    reset() {
+      this.$refs.form.resetFields();
+    },
+
+    open(opt) {
+      this.show = true;
+      this.option = opt;
+    },
+    close() {
+      this.show = false;
+    },
+    async submit() {
+      this.$emit("confirm", this.form);
+      this.close();
+    },
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          console.log(valid);
+          if (this.form.discount_sale_amount * 1 <= 0 || this.form.discount_sale_amount * 1 <= 0) {
+            return ElMessage.error("价格和数量必须大于0");
+          }
+          this.submit();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  mounted() {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  margin-bottom: 14px;
+  margin-top: 14px;
+}
+::v-deep .el-form-item__label {
+  text-align: left;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>

src/views/tool/Instead/index.vue

@@ -0,0 +1,566 @@
+<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-popover placement="right" width="333" trigger="click" v-model="tableShow">
+              <el-input
+                placeholder="请输入内容"
+                prefix-icon="search"
+                v-model="tableSearchText"
+                @input="tablesearchInput"
+              ></el-input>
+              <div style="max-height: 398px; overflow-y: scroll" class="u-m-t-12">
+                <div
+                  class="u-flex u-row-between u-p-t-8 table-item u-p-b-8 u-p-r-30"
+                  v-for="(item, index) in tableList"
+                  :key="index"
+                  @click="tableClick(item, index)"
+                >
+                  <span>{{ item.name }}</span>
+                  <span :style="{ color: returnTableColor(item.status) }">
+                    {{ returnTableLabel(item.status) }}
+                  </span>
+                </div>
+                <div class="color-999 u-p-30 u-text-center" v-if="!tableList.length">
+                  无可用桌台
+                </div>
+              </div>
+              <template #reference>
+                <el-button>选择桌号</el-button>
+              </template>
+            </el-popover>
+            <el-button type="warning">扫码验券</el-button>
+          </div>
+        </div>
+        <div class="right">
+          <el-input
+            placeholder="请输入商品名称"
+            v-model="goods.query.name"
+            clearable
+            @change="getGoods"
+          >
+            <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
+            @editNote="showNote(true)"
+            :goodsMapisFinish="goodsMapisFinish"
+            :goodsList="goods.list"
+            ref="refCart"
+          ></cartsList>
+        </div>
+        <div class="center">
+          <Controls
+            @noteClick="showNote"
+            @packClick="showPack"
+            @changePriceClick="showChangePrice"
+          />
+        </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="goods.query.categoryId === item.id ? 'primary' : 'info'"
+                  effect="dark"
+                >
+                  {{ item.name }}
+                </el-tag>
+              </div>
+            </div>
+          </div>
+          <div v-if="goods.list.length <= 0" class="no-goods">未找到相关商品</div>
+          <div class="goods-list">
+            <div class="lingshicai" @click="showaddLingShiCai">
+              <el-icon size="26"><Plus /></el-icon>
+              <div class="u-m-t-10">临时菜</div>
+            </div>
+            <GoodsItem
+              :item="item"
+              @click="goodsClick(item)"
+              v-for="item in goods.list"
+              :key="item.id"
+            ></GoodsItem>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <dialogGoodsSel ref="refSelSku" @confirm="skuSelConfirm"></dialogGoodsSel>
+    <note ref="refNote" @confirm="noteConfirm"></note>
+    <pack ref="refPack" @confirm="packConfirm"></pack>
+    <addLingShiCai ref="refAddLingShiCai" @confirm="addLingShiCaiConfirm"></addLingShiCai>
+    <changePrice ref="refChangePrice" @confirm="changePriceConfirm"></changePrice>
+  </div>
+</template>
+<script setup>
+import Controls from "./components/control.vue";
+import note from "./components/note.vue";
+import pack from "./components/pack.vue";
+import changePrice from "./components/popup-cart-changePrice.vue";
+import addLingShiCai from "./components/popup-linshiCai.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";
+import tableApi from "@/api/account/table";
+import $status from "@/views/tool/table/status.js";
+
+//桌台
+const tableSearchText = ref("");
+const tableList = ref([]);
+function getTableList() {
+  tableApi.getList({ page: 1, size: 999 }).then((res) => {
+    tableList.value = res.records;
+  });
+}
+//返回台桌状态颜色
+function returnTableColor(key) {
+  const item = $status[key];
+  return item ? item.type : "";
+}
+//返回台桌状态
+function returnTableLabel(key) {
+  const item = $status[key];
+  return item ? item.label : "";
+}
+function tableClick(item) {
+  console.log(item);
+}
+
+//临时菜
+const refAddLingShiCai = ref();
+function showaddLingShiCai() {
+  refAddLingShiCai.value.open();
+}
+function addLingShiCaiConfirm(data) {
+  refCart.value.carts.add({
+    sku_id: "-999",
+    product_id: "-999",
+    is_temporary: 1,
+    sku_name: 1,
+    number: 1,
+    is_pack: 0,
+    is_gift: 0,
+    discount_sale_amount: 0,
+    discount_sale_note: "",
+    is_print: 0,
+    is_wait_call: 0,
+    product_name: "",
+    remark: "",
+    ...data,
+  });
+}
+//单品改价
+const refChangePrice = ref();
+function showChangePrice(cart) {
+  refChangePrice.value.open(cart);
+}
+function changePriceConfirm(discount_sale_amount) {
+  refCart.value.carts.updateTag("discount_sale_amount", discount_sale_amount);
+}
+
+//打包
+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(category) {
+  goods.query.categoryId = category.id;
+}
+
+function getCategoryList() {
+  categoryApi
+    .getList({
+      page: 1,
+      size: 200,
+    })
+    .then((res) => {
+      res.unshift({ name: "全部", id: "" });
+      category.list = res;
+    });
+}
+
+//商品
+const refSelSku = ref(null);
+
+const goods = reactive({
+  list: [],
+  query: {
+    categoryId: "",
+    name: "",
+  },
+});
+
+let goodsMapisFinish = ref(false);
+
+async function getGoods() {
+  const res = await productApi.getPage({
+    page: 1,
+    size: 200,
+    ...goods.query,
+  });
+  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);
+  }
+}
+
+// 多规格选择确认
+function skuSelConfirm(item) {
+  console.log(item);
+  const listItem = refCart.value.carts.list.find(
+    (v) => v.product_id == item.product_id && v.sku_id == item.sku_id
+  );
+  if (listItem) {
+    refCart.value.carts.update({ ...listItem, ...item });
+  } else {
+    refCart.value.carts.add({
+      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: "",
+      ...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);
+  }
+}
+
+watch(
+  () => goods.query.categoryId,
+  (newval) => {
+    getGoods();
+  }
+);
+function init() {
+  getTableList();
+  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;
+  padding-right: 81px;
+
+  .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;
+  }
+}
+.lingshicai {
+  width: 100px;
+  height: 100px;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #dddfe6;
+  color: #999;
+}
+:deep(.el-tag--dark.el-tag--info) {
+  background-color: #fff;
+  color: #000;
+  border: 1px solid #dcdfe6;
+}
+.table-item {
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+
+  &:hover {
+    background: #f4f9ff;
+  }
+}
+.no-goods {
+  color: #999;
+}
+</style>

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
+}

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
+}

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>

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>

src/views/tool/table/index.vue

@@ -1 +1,497 @@
-<template></template>
+<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>

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>

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>

src/views/user/active/handselTypes.js

@@ -0,0 +1,10 @@
+export default [
+  {
+    label: "固定金额",
+    value: "GD"
+  },
+  {
+    label: "比例",
+    value: "RATIO"
+  }
+];

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>