完成换场地功能

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>