完成商城下单功能

2024-05-27 01:24:02 +08:00
parent dea6ae1c23
commit 4bae8599e1
26 changed files with 803 additions and 129 deletions
--- a/src/views/shop/goods/add/index.vue
+++ b/src/views/shop/goods/add/index.vue
@@ -70,15 +70,15 @@
                  />
                  <div class="ele-text-placeholder">上传视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。</div>
                </a-form-item>
-                <a-form-item label="商品标题" name="title">
+                <a-form-item label="商品名称" name="goodsName">
                  <a-space style="margin-bottom: 20px">
                    <a-input
                      allow-clear
                      show-count
                      :maxlength="60"
                      style="width: 558px"
-                      placeholder="请输入商品标题"
-                      v-model:value="form.title"
+                      placeholder="请输入商品名称"
+                      v-model:value="form.goodsName"
                    />
                  </a-space>
                </a-form-item>
@@ -291,15 +291,14 @@
  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
  import { Form, message } from 'ant-design-vue';
-  import {getDictionaryOptions, openUrl} from '@/utils/common';
+  import { getDictionaryOptions, getMerchantId, openUrl } from "@/utils/common";
  import { addGoods, updateGoods } from '@/api/shop/goods';
  import { useRouter } from 'vue-router';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import { BathSet, Goods } from '@/api/shop/goods/model';
-  import {PlusCircleOutlined, PlusOutlined} from '@ant-design/icons-vue';
+  import {PlusCircleOutlined} from '@ant-design/icons-vue';
  import { getGoods } from '@/api/shop/goods';
-  import CategorySelect from '@/views/cms/article/components/category-select.vue';
  import { listGoodsCategory } from '@/api/shop/goodsCategory';
  import { FileRecord } from '@/api/system/file/model';
  import {toTreeData, uuid} from 'ele-admin-pro';
@@ -309,6 +308,7 @@
  import {ColumnItem} from "ele-admin-pro/es/ele-pro-table/types";
  import {listSpec} from '@/api/shop/spec';
  import {Spec} from "@/api/shop/spec/model";
+  import { getMerchantName } from "@/utils/merchant";

  const { currentRoute } = useRouter();
  // 是否开启响应式布局
@@ -346,7 +346,7 @@
  const { form, assignFields } = useFormData<Goods>({
    goodsId: undefined,
    type: 1,
-    title: '',
+    goodsName: '',
    image: '',
    content: '',
    code: '',
@@ -367,7 +367,8 @@
    comments: '',
    recommend: 0,
    sortNumber: undefined,
-    status: undefined
+    status: undefined,
+    merchantId: getMerchantId()
  });
  const skuColumns = ref<ColumnItem[]>([
    {
@@ -463,10 +464,10 @@
        }
      }
    ],
-    title: [
+    goodsName: [
      {
        required: true,
-        message: '请选择商品标题',
+        message: '请选择商品名称',
        type: 'string',
        trigger: 'blur'
      }
@@ -681,7 +682,6 @@
  };

  const chooseGoodsCategory = (item,value) => {
-    console.log(value);
    form.categoryId = value[1].value;
    form.categoryParent = value[0].label;
    form.categoryChildren = value[1].label;
@@ -881,6 +881,8 @@
        const formData = {
          ...form,
          content: content.value,
+          merchantId: getMerchantId(),
+          merchantName: getMerchantName(),
          image: JSON.stringify(imgList.value),
          files: JSON.stringify(fileList.value),
          goodsSpecs: specList.value,
@@ -890,6 +892,10 @@
        saveOrUpdate(formData)
          .then((msg) => {
            loading.value = false;
+            imgList.value = []
+            fileList.value = []
+            category.value = []
+            resetFields();
            message.success(msg);
          })
          .catch((e) => {
@@ -911,6 +917,8 @@
        reload();
      } else {
        isUpdate.value = false;
+        imgList.value = []
+        fileList.value = []
        // images.value = [];
        // skuList.value = [];
        // specList.value = [];
--- a/src/views/shop/goods/index.vue
+++ b/src/views/shop/goods/index.vue
@@ -21,8 +21,8 @@
            />
          </template>
          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'title'">
-              <a @click="openPreview(`/goods/detail/${record.goodsId}`)">{{ record.title }}</a>
+            <template v-if="column.key === 'goodsName'">
+              <span>{{ record.goodsName }}</span>
            </template>
            <template v-if="column.key === 'image'">
              <template
@@ -71,7 +71,7 @@
  import GoodsEdit from './components/goodsEdit.vue';
  import { pageGoods, removeGoods, removeBatchGoods } from '@/api/shop/goods';
  import type { Goods, GoodsParam } from '@/api/shop/goods/model';
-  import {openPreview, openUrl} from '@/utils/common';
+  import { getMerchantId, openPreview, openUrl } from "@/utils/common";

  // 表格实例
  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -98,6 +98,7 @@
    if (filters) {
      where.status = filters.status;
    }
+    where.merchantId = getMerchantId();
    return pageGoods({
      ...where,
      ...orders,
@@ -122,8 +123,8 @@
    },
    {
      title: '商品名称',
-      dataIndex: 'title',
-      key: 'title'
+      dataIndex: 'goodsName',
+      key: 'goodsName'
    },
    {
      title: '商品售价',
--- a/src/views/shop/order/components/orderEdit.vue
+++ b/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,
--- a/src/views/shop/order/components/orderInfo.vue
+++ b/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>
--- a/src/views/shop/order/components/search.vue
+++ b/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
--- a/src/views/shop/order/index.vue
+++ b/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;