完成商城下单功能

src/views/shop/order/components/orderEdit.vue

@@ -327,7 +327,7 @@
   const form = reactive<Order>({
     orderId: undefined,
     orderNo: undefined,
-    wechatOrder: undefined,
+    transactionId: undefined,
     refundOrder: undefined,
     merchantId: undefined,
     couponId: undefined,

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

@@ -0,0 +1,395 @@
+<!-- 用户编辑弹窗 -->
+<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 == 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"
+        />
+      </a-spin>
+    </a-card>
+  </ele-modal>
+</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 } 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';
+
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Order | null;
+  }>();
+
+  export interface step {
+    title?: String | undefined;
+    subTitle?: String | undefined;
+    description?: String | undefined;
+  }
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否显示最大化切换按钮
+  const maxAble = ref(true);
+
+  // 步骤条
+  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'): 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
+    }
+  ]);
+
+  /* 制作步骤条 */
+  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 getOrderInfo = () => {
+  //   const orderId = props.data?.orderId;
+  //   listOrderInfo({ orderId }).then((data) => {
+  //     orderInfo.value = data.filter((d) => d.totalNum > 0);
+  //   });
+  // };
+
+  /* 保存编辑 */
+  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/shop/order/components/search.vue

@@ -4,7 +4,7 @@
     <SelectMerchantDown
       :placeholder="`选择场馆`"
       class="input-item"
-      v-model:value="where.merchantId"
+      v-model:value="where.merchantCode"
       @change="search"
     />
     <a-input-search
@@ -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/shop/order/index.vue

@@ -140,20 +140,34 @@
                 ><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
               >
             </template>
+            <template v-if="column.key === 'orderInfo'">
+              {{ record.orderInfoList }}
+            </template>
             <template v-if="column.key === 'orderStatus'">
-              <span v-if="record.orderStatus == 0"
-                ><ClockCircleOutlined class="tag-icon" />未使用</span
+              <span v-if="record.orderStatus == 0" class="ele-text-primary"
+                >未使用</span
               >
-              <span v-if="record.orderStatus == 1"
-                ><CheckOutlined class="tag-icon" />已付款</span
+              <span v-if="record.orderStatus == 2" class="ele-text-placeholder"
+                >已取消</span
               >
-              <span v-if="record.orderStatus == 3"
-                ><CloseOutlined class="tag-icon" />已取消</span
+              <span v-if="record.orderStatus == 1" class="ele-text-success"
+                >已付款</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>
@@ -167,14 +181,15 @@
             <template v-if="column.key === 'action'">
               <a-space>
                 <a @click="openEdit(record)">详情</a>
+                <!--                <a-divider type="vertical" />-->
+                <!--                <a @click="openEdit(record)">编辑</a>-->
               </a-space>
             </template>
           </template>
         </ele-pro-table>
       </a-card>
-
       <!-- 编辑弹窗 -->
-      <OrderEdit v-model:visible="showEdit" :data="current" @done="reload" />
+      <OrderInfo v-model:visible="showEdit" :data="current" @done="reload" />
     </div>
   </div>
 </template>
@@ -186,7 +201,6 @@
     ExclamationCircleOutlined,
     CheckOutlined,
     CloseOutlined,
-    RestOutlined,
     ClockCircleOutlined,
     IdcardOutlined,
     WechatOutlined,
@@ -199,7 +213,7 @@
     ColumnItem
   } from 'ele-admin-pro/es/ele-pro-table/types';
   import Search from './components/search.vue';
-  import OrderEdit from './components/orderEdit.vue';
+  import OrderInfo from './components/orderInfo.vue';
   import {
     pageOrder,
     removeOrder,
@@ -207,6 +221,7 @@
   } from '@/api/booking/order';
   import type { Order, OrderParam } from '@/api/booking/order/model';
   import { formatNumber } from 'ele-admin-pro/es';
+  import { getMerchantId } from '@/utils/common';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -233,6 +248,9 @@
     if (filters) {
       where.status = filters.status;
     }
+    where.type = 0;
+    // where.sceneType = 'showOrderGoods';
+    where.merchantId = getMerchantId();
     return pageOrder({
       ...where,
       ...orders,
@@ -295,6 +313,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',
@@ -314,11 +339,12 @@
       align: 'center'
     },
     {
-      title: '付款时间',
-      dataIndex: 'payTime',
-      key: 'payTime',
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
       align: 'center',
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+      customRender: ({ text }) =>
+        ['商城订单', '客户预定', '俱乐部训练场', '活动订场'][text]
     },
     // {
     //   title: '申请退款时间',
@@ -424,11 +450,12 @@
 </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;