完成换场地功能

.env.development

@@ -1,10 +1,10 @@
 VITE_APP_NAME=后台管理系统
 VITE_SOCKET_URL=wss://server.gxwebsoft.com
-#VITE_SERVER_URL=https://server.gxwebsoft.com/api
+VITE_SERVER_URL=https://server.gxwebsoft.com/api
 #VITE_API_URL=https://modules.gxwebsoft.com/api
 
 VITE_API_URL=http://127.0.0.1:9099/api
-VITE_SERVER_URL=http://127.0.0.1:9091/api
+#VITE_SERVER_URL=http://127.0.0.1:9091/api
 #VITE_SOCKET_URL=ws://localhost:9191
 #VITE_API_URL=https://server.gxwebsoft.com/api
 #VITE_API_URL=http://103.233.255.195:9300/api

src/api/booking/emergency/index.ts

@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { Emergency, EmergencyParam } from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询紧急联系人管理
+ */
+export async function pageEmergency(params: EmergencyParam) {
+  const res = await request.get<ApiResult<PageResult<Emergency>>>(
+    MODULES_API_URL + '/booking/emergency/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询紧急联系人管理列表
+ */
+export async function listEmergency(params?: EmergencyParam) {
+  const res = await request.get<ApiResult<Emergency[]>>(
+    MODULES_API_URL + '/booking/emergency',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加紧急联系人管理
+ */
+export async function addEmergency(data: Emergency) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/emergency',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改紧急联系人管理
+ */
+export async function updateEmergency(data: Emergency) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/emergency',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除紧急联系人管理
+ */
+export async function removeEmergency(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/emergency/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除紧急联系人管理
+ */
+export async function removeBatchEmergency(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/emergency/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询紧急联系人管理
+ */
+export async function getEmergency(id: number) {
+  const res = await request.get<ApiResult<Emergency>>(
+    MODULES_API_URL + '/booking/emergency/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/api/booking/emergency/model/index.ts

@@ -0,0 +1,35 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 紧急联系人管理
+ */
+export interface Emergency {
+  // ID
+  emergencyId?: number;
+  // 姓名
+  name?: string;
+  // 手机号
+  phone?: string;
+  // 关联用户
+  userId?: number;
+  // 商户ID
+  merchantId?: number;
+  // 备注
+  comments?: string;
+  // 状态
+  status?: number;
+  // 排序号
+  sortNumber?: number;
+  // 租户id
+  tenantId?: number;
+  // 创建时间
+  createTime?: string;
+}
+
+/**
+ * 紧急联系人管理搜索条件
+ */
+export interface EmergencyParam extends PageParam {
+  emergencyId?: number;
+  keywords?: string;
+}

src/api/booking/field/model/index.ts

@@ -1,4 +1,5 @@
 import type { PageParam } from '@/api';
+import { OrderInfo } from "@/api/shop/orderInfo/model";
 
 /**
  * 场馆场地
@@ -47,6 +48,9 @@ export interface Field {
   tenantId?: number;
   // 创建时间
   createTime?: string;
+  orderId?: number;
+  orderInfoList?: OrderInfo[];
+  orderKey?: string;
 }
 
 /**

src/api/booking/period/model/index.ts

@@ -1,4 +1,5 @@
 import type { PageParam } from '@/api';
+import { Field } from "@/api/booking/field/model";
 
 /**
  * 场地时段
@@ -40,6 +41,7 @@ export interface Period {
   tenantId?: number;
   // 创建时间
   createTime?: string;
+  fieldList?: Field[];
 }
 
 /**
@@ -48,4 +50,10 @@ export interface Period {
 export interface PeriodParam extends PageParam {
   periodId?: number;
   keywords?: string;
+  dateTime?: string;
+  isStatus?: number;
+  timePeriod?: string;
+  week?: number;
+  startTime?: string;
+  half?: number;
 }

src/api/booking/userCoupon/index.ts

@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { UserCoupon, UserCouponParam } from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询我的优惠券
+ */
+export async function pageUserCoupon(params: UserCouponParam) {
+  const res = await request.get<ApiResult<PageResult<UserCoupon>>>(
+    MODULES_API_URL + '/booking/user-coupon/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询我的优惠券列表
+ */
+export async function listUserCoupon(params?: UserCouponParam) {
+  const res = await request.get<ApiResult<UserCoupon[]>>(
+    MODULES_API_URL + '/booking/user-coupon',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加我的优惠券
+ */
+export async function addUserCoupon(data: UserCoupon) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/user-coupon',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改我的优惠券
+ */
+export async function updateUserCoupon(data: UserCoupon) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/user-coupon',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除我的优惠券
+ */
+export async function removeUserCoupon(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/user-coupon/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除我的优惠券
+ */
+export async function removeBatchUserCoupon(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/user-coupon/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询我的优惠券
+ */
+export async function getUserCoupon(id: number) {
+  const res = await request.get<ApiResult<UserCoupon>>(
+    MODULES_API_URL + '/booking/user-coupon/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/api/booking/userCoupon/model/index.ts

@@ -0,0 +1,59 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 我的优惠券
+ */
+export interface UserCoupon {
+  // id
+  id?: number;
+  // 优惠劵id
+  couponId?: number;
+  // 优惠券名称
+  name?: string;
+  // 优惠券类型(10满减券 20折扣券)
+  type?: number;
+  // 满减券-减免金额
+  reducePrice?: string;
+  // 折扣券-折扣率(0-100)
+  discount?: number;
+  // 最低消费金额
+  minPrice?: string;
+  // 到期类型(10领取后生效 20固定时间)
+  expireType?: number;
+  // 领取后生效-有效天数
+  expireDay?: number;
+  // 有效期开始时间
+  startTime?: number;
+  // 有效期结束时间
+  endTime?: number;
+  // 适用范围(10全部商品 20指定商品)
+  applyRange?: number;
+  // 适用范围配置(json格式)
+  applyRangeConfig?: string;
+  // 是否过期(0未过期 1已过期)
+  isExpire?: number;
+  // 是否已使用(0未使用 1已使用)
+  isUse?: number;
+  // 排序(数字越小越靠前)
+  sortNumber?: number;
+  // 状态, 0待使用, 1已使用, 2已失效
+  status?: number;
+  // 是否删除, 0否, 1是
+  deleted?: number;
+  // 用户ID
+  userId?: number;
+  // 租户id
+  tenantId?: number;
+  // 注册时间
+  createTime?: string;
+  // 修改时间
+  updateTime?: string;
+}
+
+/**
+ * 我的优惠券搜索条件
+ */
+export interface UserCouponParam extends PageParam {
+  id?: number;
+  keywords?: string;
+}

src/api/index.ts

@@ -44,4 +44,7 @@ export interface PageParam {
   createTimeStart?: string;
   // 结束时间
   createTimeEnd?: string;
+
+  showSoldStatus?: boolean;
+  dateTime?: string;
 }

src/api/layout/index.ts

@@ -43,6 +43,35 @@ export async function getUserInfo(): Promise<User> {
   return Promise.reject(new Error(res.data.message));
 }
 
+/**
+ * 获取服务器时间(实时)
+ * @return
+ */
+export async function getServerTime() {
+  const res = await request.get<ApiResult<any>>(
+    MODULES_API_URL + '/cms/website/getServerTime'
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取未来7天的日期
+ * @return
+ */
+export async function getNext7day() {
+  const res = await request.get<ApiResult<any>>(
+    MODULES_API_URL + '/cms/website/getNext7day'
+  );
+  console.log('res.data.code: ', res.data.code);
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
 /**
  * 向子模块传递token
  * @param url

src/api/shop/order/model/index.ts

@@ -108,7 +108,11 @@ export interface OrderParam extends PageParam {
   orderId?: number;
   keywords?: string;
   userId?: number;
+  week?: number;
+  isStatus?: number;
   merchantId?: number;
   merchantCode?: string;
   merchantName?: string;
+  startTime?: string;
+  dateTime?: string;
 }

src/api/shop/orderInfo/model/index.ts

@@ -1,53 +1,65 @@
 import type { PageParam } from '@/api';
 
 /**
- * 
+ * 场地
  */
 export interface OrderInfo {
-  // 
+  // 自增ID
   id?: number;
   // 关联订单表id
-  oid?: number;
+  orderId?: number;
-  // 关联场馆id
+  // 组合数据:日期+时间段+场馆id+场地id
-  sid?: number;
+  orderCode?: string;
+  // 关联商户ID
+  merchantId?: number;
+  // 商户名称
+  merchantName?: string;
   // 关联场地id
-  fid?: number;
+  fieldId?: number;
-  // 场馆
+  // 场地名称
-  siteName?: string;
-  // 场地
   fieldName?: string;
-  // 预约时间段
-  dateTime?: string;
   // 单价
   price?: string;
   // 儿童价
   childrenPrice?: string;
   // 成人人数
-  adultNum?: string;
+  adultNum?: number;
   // 儿童人数
-  childrenNum?: string;
+  childrenNum?: number;
-  // 1已付款，2未付款，3无需付款或占用状态
+  // 0 未付款 1已付款，2无需付款或占用状态
-  payStatus?: string;
+  payStatus?: number;
-  // 是否免费：1免费、2收费
+  // 是否免费：0收费、1免费
   isFree?: string;
-  // 是否支持儿童票：1支持，2不支持
+  // 是否支持儿童票：0不支持、1支持
   isChildren?: string;
-  // 预订类型：1全场，2半场
+  // 系统版本 0当前版本 其他版本
-  type?: string;
+  version?: number;
-  // 组合数据:日期+时间段+场馆id+场地id
+  // 预订类型：0全场，1半场
-  mergeData?: string;
+  isHalf?: string;
+  // 预约时间段
+  timePeriod?: string;
+  // 预定日期
+  dateTime?: string;
   // 开场时间
-  startTime?: number;
+  startTime?: string;
-  // 下单时间
+  // 结束时间
-  orderTime?: number;
+  endTime?: string;
   // 毫秒时间戳
   timeFlag?: string;
+  // 备注
+  comments?: string;
+  // 用户id
+  userId?: number;
   // 租户id
   tenantId?: number;
+  // 更新时间
+  updateTime?: string;
+  // 创建时间
+  createTime?: string;
 }
 
 /**
- * 搜索条件
+ * 场地搜索条件
  */
 export interface OrderInfoParam extends PageParam {
   id?: number;

src/api/user/userCoupon/index.ts

@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { UserCoupon, UserCouponParam } from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询我的优惠券
+ */
+export async function pageUserCoupon(params: UserCouponParam) {
+  const res = await request.get<ApiResult<PageResult<UserCoupon>>>(
+    MODULES_API_URL + '/booking/user-coupon/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询我的优惠券列表
+ */
+export async function listUserCoupon(params?: UserCouponParam) {
+  const res = await request.get<ApiResult<UserCoupon[]>>(
+    MODULES_API_URL + '/booking/user-coupon',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加我的优惠券
+ */
+export async function addUserCoupon(data: UserCoupon) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/user-coupon',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改我的优惠券
+ */
+export async function updateUserCoupon(data: UserCoupon) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/user-coupon',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除我的优惠券
+ */
+export async function removeUserCoupon(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/user-coupon/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除我的优惠券
+ */
+export async function removeBatchUserCoupon(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/booking/user-coupon/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询我的优惠券
+ */
+export async function getUserCoupon(id: number) {
+  const res = await request.get<ApiResult<UserCoupon>>(
+    MODULES_API_URL + '/booking/user-coupon/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/api/user/userCoupon/model/index.ts

@@ -0,0 +1,59 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 我的优惠券
+ */
+export interface UserCoupon {
+  // id
+  id?: number;
+  // 优惠劵id
+  couponId?: number;
+  // 优惠券名称
+  name?: string;
+  // 优惠券类型(10满减券 20折扣券)
+  type?: number;
+  // 满减券-减免金额
+  reducePrice?: string;
+  // 折扣券-折扣率(0-100)
+  discount?: number;
+  // 最低消费金额
+  minPrice?: string;
+  // 到期类型(10领取后生效 20固定时间)
+  expireType?: number;
+  // 领取后生效-有效天数
+  expireDay?: number;
+  // 有效期开始时间
+  startTime?: number;
+  // 有效期结束时间
+  endTime?: number;
+  // 适用范围(10全部商品 20指定商品)
+  applyRange?: number;
+  // 适用范围配置(json格式)
+  applyRangeConfig?: string;
+  // 是否过期(0未过期 1已过期)
+  isExpire?: number;
+  // 是否已使用(0未使用 1已使用)
+  isUse?: number;
+  // 排序(数字越小越靠前)
+  sortNumber?: number;
+  // 状态, 0待使用, 1已使用, 2已失效
+  status?: number;
+  // 是否删除, 0否, 1是
+  deleted?: number;
+  // 用户ID
+  userId?: number;
+  // 租户id
+  tenantId?: number;
+  // 注册时间
+  createTime?: string;
+  // 修改时间
+  updateTime?: string;
+}
+
+/**
+ * 我的优惠券搜索条件
+ */
+export interface UserCouponParam extends PageParam {
+  id?: number;
+  keywords?: string;
+}

src/components/SelectBookingField/components/select-data.vue

@@ -0,0 +1,210 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <template v-for="(item, index) in periodList" :key="index">
+      <div class="checkout-body">
+        <view class="period-item">
+          <view class="period ele-text-primary">{{ timePeriod }}</view>
+          <view class="field-list">
+            <template v-for="(field, index2) in item.fieldList" :key="index2">
+              <view
+                class="field"
+                :class="isActive(field)"
+                style="cursor: pointer"
+                @click="openEdit(field)"
+              >
+                <text class="field-name">{{ field.fieldName }}</text>
+                <text class="price">{{ item.price }}元</text>
+              </view>
+            </template>
+          </view>
+        </view>
+      </div>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { Field } from '@/api/booking/field/model';
+  import { getServerTime } from '@/api/layout';
+  import { listPeriod } from '@/api/booking/period';
+  import { Period } from '@/api/booking/period/model';
+  import { updateOrderInfo } from '@/api/shop/orderInfo';
+  import { message } from 'ant-design-vue';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 商户类型
+    shopType?: string;
+    merchantId?: number;
+    timePeriod?: string;
+    week?: string;
+    id?: number;
+    // 修改回显的数据
+    data?: Merchant | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const periodList = ref<Period[]>();
+  const selectId = ref<any>(0);
+  const fieldName = ref<string>();
+  const orderCode = ref<string>();
+
+  /* 搜索 */
+  const reload = () => {
+    getServerTime().then((res) => {
+      listPeriod({
+        merchantId: props.merchantId,
+        isStatus: 0,
+        week: Number(props.week),
+        startTime: res.hourMinute,
+        dateTime: res.today,
+        timePeriod: props.timePeriod
+      }).then((list) => {
+        console.log(list);
+        periodList.value = list;
+      });
+    });
+  };
+
+  const isActive = (item) => {
+    if (item.sold) {
+      if (item.isHalf == 1) {
+        return 'web-bg-warning';
+      }
+      return 'web-bg-info';
+    }
+    if (selectId.value == item.fieldId) {
+      return 'active web-bg-success';
+    }
+  };
+
+  const openEdit = (record: Field) => {
+    selectId.value = record.fieldId;
+    fieldName.value = record.fieldName;
+    orderCode.value = record.orderKey;
+  };
+
+  const save = () => {
+    updateOrderInfo({
+      id: props.id,
+      fieldId: selectId.value,
+      fieldName: fieldName.value,
+      orderCode: orderCode.value
+    }).then(() => {
+      message.success('操作成功');
+      updateVisible(false);
+      emit('done');
+    });
+  };
+
+  reload();
+</script>
+<style lang="less">
+  .checkout-body {
+    padding: 10px 0;
+
+    .period-item {
+      margin: 16px 0;
+
+      .period {
+        line-height: 2em;
+        padding-left: 6px;
+        font-size: 16px;
+      }
+
+      .field-list {
+        display: flex;
+        flex-wrap: wrap;
+
+        .web-bg-info {
+          background-color: #909399 !important;
+          color: #ffffff !important;
+        }
+
+        .web-bg-success {
+          color: #2ba91c !important;
+          border: 1px solid #2ba91c !important;
+        }
+
+        .web-bg-warning {
+          // background-color: #c9e294 !important;
+        }
+
+        .active {
+          &:before {
+            border-radius: 0 0 6px 0;
+            content: '';
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            border: 12px solid #2ba91c;
+            border-top-color: transparent;
+            border-left-color: transparent;
+          }
+
+          &:after {
+            content: '';
+            width: 5px;
+            height: 10px;
+            position: absolute;
+            right: 3px;
+            bottom: 4px;
+            border: 1px solid #fff;
+            border-top-color: transparent;
+            border-left-color: transparent;
+            transform: rotate(45deg);
+            border-radius: 2px;
+          }
+        }
+
+        .field {
+          width: 59px;
+          height: 59px;
+          margin: 5px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          border-radius: 8px;
+          line-height: 1.3em;
+          position: relative;
+          color: #333333;
+          background-color: #ffffff;
+          border: 1px solid #808080;
+
+          .field-name {
+            font-size: 12px;
+            text-align: center;
+          }
+
+          .price {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/SelectBookingField/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <a @click="openEdit">换场</a>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :merchantId="merchantId"
+      :timePeriod="timePeriod"
+      :week="week"
+      :id="id"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Merchant } from '@/api/shop/merchant/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      customerType?: string;
+      placeholder?: string;
+      merchantId?: number;
+      timePeriod?: string;
+      week?: string;
+      orderId?: number;
+      id?: number;
+    }>(),
+    {
+      placeholder: '请选择要更换的场地'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Merchant | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Merchant) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = () => {
+    emit('done');
+  };
+</script>

src/views/booking/data/components/SelectMerchant/index.vue

@@ -0,0 +1,62 @@
+<!-- 选择下拉框 -->
+<template>
+  <a-select
+    :allow-clear="true"
+    :show-search="true"
+    optionFilterProp="label"
+    :options="options"
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    :style="`width: 200px`"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { listMerchant } from '@/api/shop/merchant';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string, item: any): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      value?: any;
+      type?: any;
+      placeholder?: string;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: '请选择场馆'
+    }
+  );
+
+  // 字典数据
+  const options = ref<Merchant[]>([]);
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    const item = options.value?.find((d) => d.merchantName == value);
+    emit('update:value', value, item);
+  };
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+
+  const reload = () => {
+    listMerchant({}).then((list) => {
+      options.value = list.map((d) => {
+        d.label = d.merchantName;
+        d.value = d.merchantCode;
+        return d;
+      });
+    });
+  };
+
+  reload();
+</script>

src/views/booking/data/components/orderEdit.vue

@@ -0,0 +1,459 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="1000"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑订单' : '添加订单'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="订单编号" name="orderNo">
+        <a-input
+          allow-clear
+          placeholder="请输入订单编号"
+          :disabled="true"
+          v-model:value="form.orderNo"
+        />
+      </a-form-item>
+      <a-form-item label="微信支付订单号" name="transactionId">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入微信支付订单号"
+          v-model:value="form.transactionId"
+        />
+      </a-form-item>
+      <a-form-item label="微信退款订单号" name="refundOrder">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入微信退款订单号"
+          v-model:value="form.refundOrder"
+        />
+      </a-form-item>
+      <a-form-item label="商户ID" name="merchantId">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入商户ID"
+          v-model:value="form.merchantId"
+        />
+      </a-form-item>
+      <a-form-item label="使用的优惠券id" name="couponId">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入使用的优惠券id"
+          v-model:value="form.couponId"
+        />
+      </a-form-item>
+      <a-form-item label="使用的会员卡id" name="cardId">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入使用的会员卡id"
+          v-model:value="form.cardId"
+        />
+      </a-form-item>
+      <a-form-item label="IC卡号" name="icCard">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入IC卡号"
+          v-model:value="form.icCard"
+        />
+      </a-form-item>
+      <a-form-item label="真实姓名" name="realName">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入真实姓名"
+          v-model:value="form.realName"
+        />
+      </a-form-item>
+      <a-form-item label="手机号码" name="phone">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入手机号码"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="订单总额" name="totalPrice">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入订单总额"
+          v-model:value="form.totalPrice"
+        />
+      </a-form-item>
+      <a-form-item label="减少的金额" name="reducePrice">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入减少的金额，使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格"
+          v-model:value="form.reducePrice"
+        />
+      </a-form-item>
+      <a-form-item label="实际付款" name="payPrice">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入实际付款"
+          v-model:value="form.payPrice"
+        />
+      </a-form-item>
+      <!--      <a-form-item label="用于统计" name="price">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入用于统计"-->
+      <!--          v-model:value="form.price"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="价钱，用于积分赠送" name="money">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入价钱，用于积分赠送"-->
+      <!--          v-model:value="form.money"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <a-form-item label="退款金额" name="refundMoney" v-if="form.refundMoney">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入退款金额"
+          v-model:value="form.refundMoney"
+        />
+      </a-form-item>
+      <!--      <a-form-item label="教练价格" name="coachPrice">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入教练价格"-->
+      <!--          v-model:value="form.coachPrice"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="教练id" name="coachId">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入教练id"-->
+      <!--          v-model:value="form.coachId"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <a-form-item label="支付方式" name="payType">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入支付方式 0余额支付, 1微信支付，2积分，3支付宝，4现金，5POS机，6VIP月卡，7VIP年卡，8VIP次卡，9IC月卡，10IC年卡，11IC次卡，12免费，13VIP充值卡，14IC充值卡，15积分支付，16VIP季卡，17IC季卡"
+          v-model:value="form.payType"
+        />
+      </a-form-item>
+      <a-form-item label="支付状态" name="payStatus">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入0未付款，1已付款"
+          v-model:value="form.payStatus"
+        />
+      </a-form-item>
+      <a-form-item label="订单状态" name="orderStatus">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款"
+          v-model:value="form.orderStatus"
+        />
+      </a-form-item>
+      <a-form-item label="优惠类型" name="couponType">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入优惠类型：0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡，5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡"
+          v-model:value="form.couponType"
+        />
+      </a-form-item>
+      <a-form-item label="优惠说明" name="couponDesc">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入优惠说明"
+          v-model:value="form.couponDesc"
+        />
+      </a-form-item>
+      <!--      <a-form-item-->
+      <!--        label="二维码地址，保存订单号，支付成功后才生成"-->
+      <!--        name="qrcode"-->
+      <!--      >-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入二维码地址，保存订单号，支付成功后才生成"-->
+      <!--          v-model:value="form.qrcode"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="vip月卡年卡、ic月卡年卡回退次数" name="returnNum">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入vip月卡年卡、ic月卡年卡回退次数"-->
+      <!--          v-model:value="form.returnNum"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="vip充值回退金额" name="returnMoney">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入vip充值回退金额"-->
+      <!--          v-model:value="form.returnMoney"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <a-form-item label="预约详情开始时间数组" name="startTime">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入预约详情开始时间数组"
+          v-model:value="form.startTime"
+        />
+      </a-form-item>
+      <a-form-item label="是否已开具发票" name="isInvoice">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入是否已开具发票：0未开发票，1已开发票，2不能开具发票"
+          v-model:value="form.isInvoice"
+        />
+      </a-form-item>
+      <a-form-item label="支付时间" name="payTime">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入支付时间"
+          v-model:value="form.payTime"
+        />
+      </a-form-item>
+      <a-form-item label="退款时间" name="refundTime">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入退款时间"
+          v-model:value="form.refundTime"
+        />
+      </a-form-item>
+      <a-form-item label="申请退款时间" name="refundApplyTime">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入申请退款时间"
+          v-model:value="form.refundApplyTime"
+        />
+      </a-form-item>
+      <a-form-item label="对账情况" name="checkBill">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入对账情况：0=未对账；1=已对账；3=已对账，金额对不上；4=未查询到该订单"
+          v-model:value="form.checkBill"
+        />
+      </a-form-item>
+      <a-form-item label="订单是否已结算" name="isSettled">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入订单是否已结算(0未结算 1已结算)"
+          v-model:value="form.isSettled"
+        />
+      </a-form-item>
+      <a-form-item label="备注" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          :disabled="true"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addOrder, updateOrder } from '@/api/shop/order';
+  import { Order } from '@/api/shop/order/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Order | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<Order>({
+    orderId: undefined,
+    orderNo: undefined,
+    transactionId: undefined,
+    refundOrder: undefined,
+    merchantId: undefined,
+    couponId: undefined,
+    cardId: undefined,
+    adminId: undefined,
+    confirmId: undefined,
+    icCard: undefined,
+    realName: undefined,
+    phone: undefined,
+    totalPrice: undefined,
+    reducePrice: undefined,
+    payPrice: undefined,
+    price: undefined,
+    money: undefined,
+    refundMoney: undefined,
+    coachPrice: undefined,
+    coachId: undefined,
+    payType: undefined,
+    payStatus: undefined,
+    orderStatus: undefined,
+    couponType: undefined,
+    couponDesc: undefined,
+    qrcode: undefined,
+    returnNum: undefined,
+    returnMoney: undefined,
+    startTime: undefined,
+    isInvoice: undefined,
+    payTime: undefined,
+    refundTime: undefined,
+    refundApplyTime: undefined,
+    checkBill: undefined,
+    isSettled: undefined,
+    version: undefined,
+    userId: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    updateTime: undefined,
+    createTime: undefined,
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    orderName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写订单名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateOrder : addOrder;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/booking/data/components/orderInfo.vue

@@ -0,0 +1,439 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="`80%`"
+    :visible="visible"
+    :confirm-loading="loading"
+    :maxable="maxAble"
+    :title="isUpdate ? '编辑订单' : '订单详情'"
+    :body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
+    @update:visible="updateVisible"
+    :maskClosable="false"
+    :footer="null"
+    @ok="save"
+  >
+    <a-card class="order-card" :bordered="false">
+      <a-descriptions title="基本信息" :column="3">
+        <a-descriptions-item
+          label="订单号"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.orderId }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="订单编号"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.orderNo }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="订单状态"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <a-tag v-if="form.orderStatus == 0">未使用</a-tag>
+          <a-tag v-if="form.orderStatus == 1">已付款</a-tag>
+          <a-tag v-if="form.orderStatus == 2">已取消</a-tag>
+          <a-tag v-if="form.orderStatus == 3">已取消</a-tag>
+          <a-tag v-if="form.orderStatus == 4">退款申请中</a-tag>
+          <a-tag v-if="form.orderStatus == 5">退款被拒绝</a-tag>
+          <a-tag v-if="form.orderStatus == 6">退款成功</a-tag>
+          <a-tag v-if="form.orderStatus == 7">客户端申请退款</a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="买家信息"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.realName }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="手机号码"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.phone }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="交易流水号"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.transactionId }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="订单总金额"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          ￥{{ form.totalPrice }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="实付金额"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          ￥{{ form.payPrice }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="减少金额"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          ￥{{ form.reducePrice }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="支付方式"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <template v-if="form.payStatus == 1">
+            <a-tag v-if="form.payType == 1">微信支付</a-tag>
+            <a-tag v-if="form.payType == 2">积分</a-tag>
+            <a-tag v-if="form.payType == 3">支付宝</a-tag>
+            <a-tag v-if="form.payType == 4">现金</a-tag>
+            <a-tag v-if="form.payType == 5">POS机</a-tag>
+            <a-tag v-if="form.payType == 6">VIP月卡</a-tag>
+            <a-tag v-if="form.payType == 7">formVIP年卡</a-tag>
+            <a-tag v-if="form.payType == 8">formVIP次卡</a-tag>
+            <a-tag v-if="form.payType == 9">formIC月卡</a-tag>
+            <a-tag v-if="form.payType == 10">formIC年卡</a-tag>
+            <a-tag v-if="form.payType == 11">formIC次卡</a-tag>
+            <a-tag v-if="form.payType == 12">form免费</a-tag>
+            <a-tag v-if="form.payType == 13">formVIP充值卡</a-tag>
+            <a-tag v-if="form.payType == 14">formIC充值卡</a-tag>
+            <a-tag v-if="form.payType == 15">form积分支付</a-tag>
+            <a-tag v-if="form.payType == 16">formVIP季卡</a-tag>
+            <a-tag v-if="form.payType == 17">formIC季卡</a-tag>
+          </template>
+          <template v-else>
+            <span></span>
+          </template>
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="支付状态"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <a-tag v-if="form.payStatus == 1" color="green"
+            ><CheckOutlined class="tag-icon" />已付款</a-tag
+          >
+          <a-tag v-if="form.payStatus == 0" color="error"
+            ><CloseOutlined class="tag-icon" />未付款</a-tag
+          >
+          <a-tag v-if="form.payStatus == 3" color="cyan"
+            ><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
+          >
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="付款时间"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.payTime }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="下单时间"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.createTime }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="信息备注"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.comments }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+    <a-card class="order-card" :bordered="false">
+      <a-spin :spinning="loading">
+        <a-table
+          :data-source="form.orderInfoList"
+          :columns="columns"
+          :pagination="false"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <SelectBookingField
+                :merchantId="record.merchantId"
+                :timePeriod="record.timePeriod"
+                :week="week"
+                :id="record.id"
+                v-if="form.payStatus == 1 && form.orderStatus == 0"
+                @done="reload"
+              />
+            </template>
+          </template>
+        </a-table>
+      </a-spin>
+    </a-card>
+  </ele-modal>
+  <!-- 换场地 -->
+  <!--  <SelectField-->
+  <!--    v-model:visible="showField"-->
+  <!--    :orderId="form.orderId"-->
+  <!--    :data="current"-->
+  <!--    :week="week"-->
+  <!--    @done="reload"-->
+  <!--  />-->
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import { Order, OrderParam } from '@/api/shop/order/model';
+  import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
+  import {
+    CheckOutlined,
+    CloseOutlined,
+    CoffeeOutlined
+  } from '@ant-design/icons-vue';
+  import SelectField from './SelectField.vue';
+  import { Field } from '@/api/booking/field/model';
+  import useSearch from '@/utils/use-search';
+
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Order | null;
+    week?: string;
+  }>();
+
+  export interface step {
+    title?: String | undefined;
+    subTitle?: String | undefined;
+    description?: String | undefined;
+  }
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否显示最大化切换按钮
+  const maxAble = ref(true);
+  const showField = ref(false);
+  // 当前编辑数据
+  const current = ref<Field | null>(null);
+
+  // 步骤条
+  const steps = ref<step[]>([
+    {
+      title: '报餐',
+      description: undefined
+    },
+    {
+      title: '付款',
+      description: undefined
+    },
+    {
+      title: '发餐',
+      description: undefined
+    },
+    {
+      title: '取餐',
+      description: undefined
+    },
+    {
+      title: '完成',
+      description: undefined
+    }
+  ]);
+  const active = ref(2);
+
+  const emit = defineEmits<{
+    (e: 'done', where?: OrderParam): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 订单信息
+  const form = reactive<Order>({
+    orderId: undefined,
+    orderNo: undefined,
+    transactionId: undefined,
+    refundOrder: undefined,
+    merchantId: undefined,
+    couponId: undefined,
+    cardId: undefined,
+    adminId: undefined,
+    confirmId: undefined,
+    icCard: undefined,
+    realName: undefined,
+    phone: undefined,
+    totalPrice: undefined,
+    reducePrice: undefined,
+    payPrice: undefined,
+    price: undefined,
+    money: undefined,
+    refundMoney: undefined,
+    coachPrice: undefined,
+    coachId: undefined,
+    payType: undefined,
+    payStatus: undefined,
+    orderStatus: undefined,
+    couponType: undefined,
+    couponDesc: undefined,
+    qrcode: undefined,
+    returnNum: undefined,
+    returnMoney: undefined,
+    startTime: undefined,
+    isInvoice: undefined,
+    payTime: undefined,
+    refundTime: undefined,
+    refundApplyTime: undefined,
+    checkBill: undefined,
+    isSettled: undefined,
+    version: undefined,
+    userId: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    updateTime: undefined,
+    createTime: undefined,
+    status: 0,
+    comments: '',
+    sortNumber: 100,
+    orderInfoList: []
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  const { resetFields } = useForm(form);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '场馆名称',
+      dataIndex: 'merchantName',
+      key: 'merchantName'
+    },
+    {
+      title: '场地',
+      dataIndex: 'fieldName'
+    },
+    {
+      title: '预定信息',
+      dataIndex: 'comments',
+      key: 'comments'
+    },
+    {
+      title: '金额',
+      dataIndex: 'price',
+      customRender: ({ text }) => '￥' + text
+    },
+    {
+      title: '操作',
+      align: 'center',
+      dataIndex: 'action',
+      key: 'action'
+    }
+  ]);
+
+  /* 制作步骤条 */
+  const loadSteps = (order) => {
+    steps.value = [];
+    steps.value.push({
+      title: '下单'
+    });
+    steps.value.push({
+      title: '付款'
+    });
+    steps.value.push({
+      title: '发货'
+    });
+    steps.value.push({
+      title: '收货'
+    });
+    steps.value.push({
+      title: '完成'
+    });
+
+    // 下单
+    if (order.payStatus == 10) {
+      active.value = 0;
+      steps.value[0].description = order.createTime;
+    }
+    // 付款
+    if (order.payStatus == 20) {
+      active.value = 1;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+    }
+    // 发货
+    if (order.payStatus == 20 && order.deliveryStatus == 20) {
+      active.value = 2;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+      steps.value[2].description = order.deliveryTime;
+    }
+    // 收货
+    if (order.payStatus == 20 && order.receiptStatus == 20) {
+      active.value = 3;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+      steps.value[2].description = order.deliveryTime;
+      steps.value[3].description = order.receiptTime;
+    }
+    // 完成
+    if (order.payStatus == 20 && order.orderStatus == 30) {
+      active.value = 4;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+      steps.value[2].description = order.deliveryTime;
+      steps.value[3].description = order.receiptTime;
+    }
+    // 已取消
+    if (order.orderStatus == 20) {
+      active.value = 4;
+    }
+  };
+
+  const openEdit = (row?: Field) => {
+    current.value = row ?? null;
+    showField.value = true;
+  };
+  // const getOrderInfo = () => {
+  //   const orderId = props.data?.orderId;
+  //   listOrderInfo({ orderId }).then((data) => {
+  //     orderInfo.value = data.filter((d) => d.totalNum > 0);
+  //   });
+  // };
+
+  const reload = (where) => {
+    updateVisible(false);
+    emit('done', where);
+  };
+
+  /* 保存编辑 */
+  const save = () => {};
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          loading.value = false;
+          assignObject(form, props.data);
+          loadSteps(props.data);
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style lang="less" scoped>
+  .order-card {
+    margin-bottom: 20px;
+  }
+  .ant-form-item {
+    margin-bottom: 5px;
+  }
+  .order-info {
+    display: flex;
+    .info {
+      padding-left: 5px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  .tag-icon {
+    padding-right: 6px;
+  }
+</style>

src/views/booking/data/components/search.vue

@@ -0,0 +1,140 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <SelectMerchantDown
+      :placeholder="`选择场馆`"
+      class="input-item"
+      v-model:value="where.merchantCode"
+      @change="search"
+    />
+    <a-date-picker
+      placeholder="按天筛选"
+      value-format="YYYY-MM-DD"
+      v-model:value="where.dateTime"
+      @change="search"
+    />
+    <a-button @click="reset">刷新</a-button>
+    <!--    <a-radio-group v-model:value="where.keywords" @change="search">-->
+    <!--      <template v-for="(item, index) in next7day" :key="index">-->
+    <!--        <a-radio-button value="0"-->
+    <!--          >{{ item.date }} {{ getWeek(item.week) }}</a-radio-button-->
+    <!--        >-->
+    <!--      </template>-->
+    <!--    </a-radio-group>-->
+  </a-space>
+  <ele-modal
+    :width="500"
+    :visible="showQrcode"
+    :maskClosable="false"
+    title="使用微信扫一扫完成支付"
+    :body-style="{ paddingBottom: '28px' }"
+    @cancel="closeQrcode"
+    @ok="closeQrcode"
+  >
+    <div class="qrcode">
+      <ele-qr-code-svg v-if="text" :value="text" :size="200" />
+      <div class="ele-text-secondary">使用微信扫一扫完成支付</div>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import useSearch from '@/utils/use-search';
+  import { OrderParam } from '@/api/shop/order/model';
+  import { getNativeCode } from '@/api/system/payment';
+  import { getNext7day, getServerTime } from '@/api/layout';
+  import { getWeek } from '@/utils/common';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  interface serverTime {
+    today?: string;
+  }
+
+  interface dateItem {
+    date?: string;
+    week?: string;
+  }
+
+  const emit = defineEmits<{
+    (e: 'search', where?: OrderParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<OrderParam>({
+    dateTime: '',
+    isStatus: 0,
+    merchantCode: undefined,
+    week: 0,
+    merchantId: undefined
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+
+  /*  重置 */
+  const reset = () => {
+    emit('search', where);
+  };
+
+  // 二维码内容
+  const text = ref('');
+  const showQrcode = ref(false);
+  const next7day = ref<dateItem[]>([]);
+  const serverTime = ref<serverTime>({});
+
+  const closeQrcode = () => {
+    showQrcode.value = !showQrcode.value;
+  };
+
+  const getCode = () => {
+    getNativeCode({}).then((data) => {
+      text.value = String(data);
+      showQrcode.value = true;
+    });
+  };
+
+  const reload = () => {
+    getNext7day().then((res) => {
+      next7day.value = res;
+      where.week = res[0].week;
+    });
+    getServerTime().then((res) => {
+      serverTime.value = res;
+      where.dateTime = res.today;
+      where.merchantId = 3032;
+      where.merchantCode = '37';
+      where.isStatus = 0;
+      emit('search', where);
+    });
+  };
+
+  reload();
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
+
+<style lang="less" scoped>
+  .qrcode {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px 0;
+  }
+</style>

src/views/booking/data/index.vue

@@ -0,0 +1,438 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <search
+          @search="reload"
+          :selection="selection"
+          @add="openEdit"
+          @remove="removeBatch"
+          @batchMove="openMove"
+        />
+      </a-card>
+      <template v-for="(item, index) in periodList" :key="index">
+        <div class="checkout-body">
+          <view class="period-item">
+            <view class="period ele-text-primary">{{ item.timePeriod }}</view>
+            <view class="field-list">
+              <template v-for="(field, index2) in item.fieldList" :key="index2">
+                <view
+                  class="field"
+                  :class="isActive(field)"
+                  style="cursor: pointer"
+                  @click="openEdit(field)"
+                >
+                  <text class="field-name">{{ field.fieldName }}</text>
+                  <text class="price">{{ item.price }}元</text>
+                </view>
+              </template>
+            </view>
+          </view>
+        </div>
+      </template>
+      <!-- 编辑弹窗 -->
+      <OrderInfo
+        v-model:visible="showEdit"
+        :data="current"
+        :week="week"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import {
+    ExclamationCircleOutlined,
+    CheckOutlined,
+    CloseOutlined,
+    ClockCircleOutlined,
+    IdcardOutlined,
+    WechatOutlined,
+    CoffeeOutlined,
+    AlipayCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { EleProTable, messageLoading, toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import OrderInfo from './components/orderInfo.vue';
+  import {
+    pageOrder,
+    removeOrder,
+    removeBatchOrder
+  } from '@/api/booking/order';
+  import type { Order } from '@/api/booking/order/model';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { Period, PeriodParam } from '@/api/booking/period/model';
+  import { listPeriod } from '@/api/booking/period';
+  import { Field } from '@/api/booking/field/model';
+  import { getOrder } from '@/api/booking/order';
+  import { reloadPageTab } from '@/utils/page-tab-util';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Order[]>([]);
+  // 当前编辑数据
+  const current = ref<Order | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  const week = ref<any>(0);
+  // 加载状态
+  const loading = ref(true);
+  const periodList = ref<Period[]>([]);
+  const merchantId = ref(0);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    where.type = 1;
+    return pageOrder({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '订单号',
+      dataIndex: 'orderId',
+      key: 'orderId',
+      width: 90
+    },
+    {
+      title: '姓名',
+      dataIndex: 'realName',
+      key: 'realName',
+      align: 'center'
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '总额',
+      dataIndex: 'totalPrice',
+      key: 'totalPrice',
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
+    },
+    {
+      title: '减少金额',
+      dataIndex: 'reducePrice',
+      key: 'reducePrice',
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
+    },
+    {
+      title: '实付金额',
+      dataIndex: 'payPrice',
+      key: 'payPrice',
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
+    },
+    {
+      title: '支付方式',
+      dataIndex: 'payType',
+      key: 'payType',
+      align: 'center'
+    },
+    {
+      title: '付款状态',
+      dataIndex: 'payStatus',
+      key: 'payStatus',
+      align: 'center'
+    },
+    {
+      title: '付款时间',
+      dataIndex: 'payTime',
+      key: 'payTime',
+      align: 'center',
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    },
+    {
+      title: '订单状态',
+      dataIndex: 'orderStatus',
+      key: 'orderStatus',
+      align: 'center'
+    },
+    {
+      title: '优惠类型',
+      dataIndex: 'couponType',
+      key: 'couponType',
+      align: 'center'
+    },
+    {
+      title: '是否已开票',
+      dataIndex: 'isInvoice',
+      key: 'isInvoice',
+      align: 'center'
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+      customRender: ({ text }) =>
+        ['商城订单', '客户预定', '俱乐部训练场', '活动订场'][text]
+    },
+    // {
+    //   title: '申请退款时间',
+    //   dataIndex: 'refundApplyTime',
+    //   key: 'refundApplyTime',
+    //   align: 'center',
+    //   customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    // },
+    // {
+    //   title: '备注',
+    //   dataIndex: 'comments',
+    //   key: 'comments',
+    //   align: 'center'
+    // },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: PeriodParam) => {
+    const hide = messageLoading('请求中..', 0);
+    week.value = where?.week;
+    listPeriod(where)
+      .then((list) => {
+        if (list) {
+          hide();
+          periodList.value = list;
+        }
+      })
+      .catch((err) => {
+        message.error('该场馆没有添加时间段，或预约时间已过');
+        hide();
+      });
+    // selection.value = [];
+    // tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Field) => {
+    const orderId = Number(row?.orderId);
+    if (periodList.value.length == 0) {
+      console.log('sssssss');
+      return message.error('该场馆没有添加时间段，或预约时间已过');
+    }
+    if (orderId > 0) {
+      getOrder(orderId)
+        .then((res) => {
+          console.log(res);
+          current.value = res ?? null;
+          showEdit.value = true;
+        })
+        .catch((err) => {
+          message.error(err.message);
+        });
+    }
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  const isActive = (item) => {
+    if (item.sold) {
+      if (item.isHalf == 1) {
+        return 'web-bg-warning';
+      }
+      return 'web-bg-info';
+    }
+    // if (index) {
+    //
+    // }
+  };
+  const onField = (item) => {};
+
+  /* 删除单个 */
+  const remove = (row: Order) => {
+    const hide = message.loading('请求中..', 0);
+    removeOrder(row.orderId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchOrder(selection.value.map((d) => d.orderId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  // const query = (where: PeriodParam) => {
+  //   loading.value = true;
+  // };
+
+  /* 自定义行属性 */
+  const customRow = (record: Order) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  import * as MenuIcons from '@/layout/menu-icons';
+  export default {
+    name: 'Order',
+    components: MenuIcons
+  };
+</script>
+<style lang="less" scoped>
+  .tag-icon {
+    padding-right: 6px;
+  }
+  .checkout-body {
+    padding: 10px 0;
+
+    .period-item {
+      margin: 16px 0;
+
+      .period {
+        line-height: 2em;
+        padding-left: 6px;
+        font-size: 16px;
+      }
+
+      .field-list {
+        display: flex;
+        flex-wrap: wrap;
+
+        .web-bg-info {
+          background-color: #909399 !important;
+          color: #ffffff !important;
+        }
+
+        .web-bg-success {
+          color: #2ba91c !important;
+          border: 1px solid #2ba91c !important;
+        }
+
+        .web-bg-warning {
+          // background-color: #c9e294 !important;
+        }
+
+        .active {
+          &:before {
+            border-radius: 0 0 6px 0;
+            content: '';
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            border: 12px solid #2ba91c;
+            border-top-color: transparent;
+            border-left-color: transparent;
+          }
+
+          &:after {
+            content: '';
+            width: 5px;
+            height: 10px;
+            position: absolute;
+            right: 3px;
+            bottom: 4px;
+            border: 1px solid #fff;
+            border-top-color: transparent;
+            border-left-color: transparent;
+            transform: rotate(45deg);
+            border-radius: 2px;
+          }
+        }
+
+        .field {
+          width: 59px;
+          height: 59px;
+          margin: 5px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          border-radius: 8px;
+          line-height: 1.3em;
+          position: relative;
+          color: #333333;
+          background-color: #ffffff;
+          border: 1px solid #808080;
+
+          .field-name {
+            font-size: 12px;
+            text-align: center;
+          }
+
+          .price {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/booking/order/components/orderInfo.vue

@@ -141,29 +141,7 @@
           :data-source="form.orderInfoList"
           :columns="columns"
           :pagination="false"
-        >
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'goodsName'">
-              <div class="order-info">
-                <a-image
-                  v-if="record.imageUrl"
-                  :src="record.imageUrl"
-                  :preview="false"
-                  :width="50"
         />
-                <div class="info">
-                  <div>{{ record.goodsName }}</div>
-                  <div class="ele-text-placeholder" v-if="record.gear === 10">
-                    食堂档口
-                  </div>
-                  <div class="ele-text-placeholder" v-if="record.gear === 20">
-                    物品档口
-                  </div>
-                </div>
-              </div>
-            </template>
-          </template>
-        </a-table>
       </a-spin>
     </a-card>
   </ele-modal>

src/views/booking/order/components/search.vue

@@ -14,7 +14,7 @@
       @search="search"
       @pressEnter="search"
     />
-    <a-button @click="getCode">生成支付二维码</a-button>
+<!--    <a-button @click="getCode">生成支付二维码</a-button>-->
     <a-button @click="reset">重置</a-button>
   </a-space>
   <ele-modal

src/views/booking/order/index.vue

@@ -144,19 +144,30 @@
               {{ record.orderInfoList }}
             </template>
             <template v-if="column.key === 'orderStatus'">
-              <span v-if="record.orderStatus == 0"
+              <span v-if="record.orderStatus == 0" class="ele-text-primary"
-                ><ClockCircleOutlined class="tag-icon" />未使用</span
+                >未使用</span
               >
-              <span v-if="record.orderStatus == 1"
+              <span v-if="record.orderStatus == 2" class="ele-text-placeholder"
-                ><CheckOutlined class="tag-icon" />已付款</span
+                >已取消</span
               >
-              <span v-if="record.orderStatus == 3"
+              <span v-if="record.orderStatus == 1" class="ele-text-success"
-                ><CloseOutlined class="tag-icon" />已取消</span
+                >已付款</span
+              >
+              <span v-if="record.orderStatus == 3" class="ele-text-placeholder"
+                >已取消</span
+              >
+              <span v-if="record.orderStatus == 4" class="ele-text-warning"
+                >退款申请中</span
+              >
+              <span v-if="record.orderStatus == 5" class="ele-text-danger"
+                >退款被拒绝</span
+              >
+              <span v-if="record.orderStatus == 6" class="ele-text-heading"
+                >退款成功</span
+              >
+              <span v-if="record.orderStatus == 7" class="ele-text-warning"
+                >客户端申请退款</span
               >
-              <span v-if="record.orderStatus == 4">退款申请中</span>
-              <span v-if="record.orderStatus == 5">退款被拒绝</span>
-              <span v-if="record.orderStatus == 6">退款成功</span>
-              <span v-if="record.orderStatus == 7">客户端申请退款</span>
             </template>
             <template v-if="column.key === 'isInvoice'">
               <a-tag v-if="record.isInvoice == 0">未开</a-tag>
@@ -170,8 +181,8 @@
             <template v-if="column.key === 'action'">
               <a-space>
                 <a @click="openEdit(record)">详情</a>
-                <a-divider type="vertical" />
+                <!--                <a-divider type="vertical" />-->
-                <a @click="openEdit(record)">编辑</a>
+                <!--                <a @click="openEdit(record)">编辑</a>-->
               </a-space>
             </template>
           </template>
@@ -236,6 +247,7 @@
     if (filters) {
       where.status = filters.status;
     }
+    where.type = 1;
     return pageOrder({
       ...where,
       ...orders,
@@ -298,6 +310,13 @@
       key: 'payStatus',
       align: 'center'
     },
+    {
+      title: '付款时间',
+      dataIndex: 'payTime',
+      key: 'payTime',
+      align: 'center',
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    },
     {
       title: '订单状态',
       dataIndex: 'orderStatus',
@@ -317,11 +336,12 @@
       align: 'center'
     },
     {
-      title: '付款时间',
+      title: '类型',
-      dataIndex: 'payTime',
+      dataIndex: 'type',
-      key: 'payTime',
+      key: 'type',
       align: 'center',
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+      customRender: ({ text }) =>
+        ['商城订单', '客户预定', '俱乐部训练场', '活动订场'][text]
     },
     // {
     //   title: '申请退款时间',
@@ -427,15 +447,14 @@
 </script>
 
 <script lang="ts">
+  import * as MenuIcons from '@/layout/menu-icons';
   export default {
-    name: 'Order'
+    name: 'Order',
+    components: MenuIcons
   };
 </script>
-
 <style lang="less" scoped>
   .tag-icon {
     padding-right: 6px;
-    background-image: linear-gradient(#9fcdec, rgb(0, 118, 199));
-    color: rgba(21, 154, 203, 0.5);
   }
 </style>

src/views/cms/mp-weixin/home/components/simulator.vue

@@ -13,6 +13,13 @@
       <div class="phone-body" style="overflow-y: auto; overflow-x: hidden">
         <!-- 幻灯片轮播 -->
         <template v-if="form.showCarousel">
+          <div
+            class="ad-bar"
+            :style="{
+              backgroundImage: 'url(' + param.mp_user_top + ')'
+            }"
+            @click="onCarousel"
+          >
             <a-carousel arrows autoplay :dots="true">
               <template v-if="adImageList">
                 <template v-for="(img, index) in adImageList" :key="index">
@@ -27,6 +34,7 @@
                 </template>
               </template>
             </a-carousel>
+          </div>
         </template>
         <!-- 导航菜单 -->
         <template v-if="form.showMenuCard">
@@ -38,8 +46,8 @@
               class="ele-cell-content ele-text-center btn-center"
               @click="openMpMenuEdit(item)"
             >
-              <a-image :src="item.icon" :width="30" :preview="false" />
+              <a-image :src="item.icon" :width="40" :preview="false" />
-              <span>{{ item.title }}</span>
+              <span style="white-space: nowrap">{{ item.title }}</span>
             </div>
           </div>
           <!--  双排  -->
@@ -149,6 +157,7 @@
         </a>
       </div>
     </a-card>
+    <AdEdit v-model:visible="showAdEdit" :data="ad" @done="reload" />
   </div>
 </template>
 
@@ -173,6 +182,8 @@
   const { query } = unref(currentRoute);
 
   import MpMenuEdit from '@/views/cms/mp-weixin/menu/components/mpMenuEdit.vue';
+  import { Ad } from '@/api/cms/ad/model';
+  import AdEdit from '@/views/cms/ad/components/ad-edit.vue';
 
   const prpos = withDefaults(
     defineProps<{
@@ -196,6 +207,8 @@
   const param = ref<MpWeixinParam>({});
   const showUserCardEdit = ref(false);
   const showMpMenuEdit = ref(false);
+  const showAdEdit = ref(false);
+  const ad = ref<Ad>();
   // 当前编辑数据
   const current = ref<WebsiteField | null>(null);
 
@@ -245,6 +258,10 @@
 
   const onShare = () => {};
 
+  const onCarousel = (row?: Ad) => {
+    showAdEdit.value = true;
+  };
+
   const reload = () => {
     listWebsiteField({}).then((list) => {
       list.map((d) => {
@@ -329,6 +346,11 @@
         }
       }
     }
+    .ad-bar {
+      background-color: var(--grey-10);
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
     .phone-body-bg {
       padding: 0 16px;
       height: 680px;
@@ -534,6 +556,7 @@
     width: 330px;
     height: 80px;
     margin: 0 auto;
+    padding: 8px;
     background: #ffffff;
     border-radius: 5px;
     border-color: slategrey;