From 3aed4c2270dc5d777294abb56005b5646194ffae Mon Sep 17 00:00:00 2001
From: Wayne <943146732@qq.com>
Date: Sun, 3 Mar 2024 22:34:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A2=84=E5=94=AE=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/market/presale/Index copy 2.vue | 437 ++++++++++++++++++++++
 src/views/market/presale/Index.vue        |  14 +-
 src/views/market/presale/Log.vue          | 126 -------
 src/views/market/presale/modules/Log.vue  | 185 +++++++++
 4 files changed, 633 insertions(+), 129 deletions(-)
 create mode 100644 src/views/market/presale/Index copy 2.vue
 delete mode 100644 src/views/market/presale/Log.vue
 create mode 100644 src/views/market/presale/modules/Log.vue

diff --git a/src/views/market/presale/Index copy 2.vue b/src/views/market/presale/Index copy 2.vue
new file mode 100644
index 0000000..412d5b1
--- /dev/null
+++ b/src/views/market/presale/Index copy 2.vue	
@@ -0,0 +1,437 @@
+<template>
+  <a-card :bordered="false">
+    <a-spin :spinning="isLoading">
+      <div class="card-title">{{ $route.meta.title }}</div>
+      <!-- 列表内容 -->
+      <div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-bordered">
+        <div class="ant-table-content">
+          <div class="ant-table-scroll">
+            <div class="ant-table-body" style="overflow-x: scroll;">
+              <table style="width: 1450px;">
+                <thead class="ant-table-thead">
+                  <tr>
+                    <th v-for="(item, index) in columns" :key="index">
+                      <span class="ant-table-header-column">
+                        <div>
+                          <span class="ant-table-column-title">{{ item.title }}</span>
+                        </div>
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="ant-table-tbody">
+                  <template v-for="(item) in orderList.data">
+                    <tr class="order-empty" :key="`order_${item.id}_1`">
+                      <td colspan="8"></td>
+                    </tr>
+                    <tr :key="`order_${item.id}_2`">
+                      <td colspan="8">
+                        <span class="mr-20">预售ID：{{ item.id }}</span>
+                        <span class="mr-20">创建时间：{{ item.ctime }}</span>
+                      </td>
+                    </tr>
+                    <tr
+                      v-for="(goodsItm, goodsIdx) of item.goods_list"
+                      :key="`orderGoods_${item.id}_${goodsIdx}`"
+                    >
+                      <td>
+                        <p>￥{{ goodsItm.goods_name }}</p>
+
+                        <!-- <GoodsItem
+                          :data="{
+                            image: goodsItm.goods_image,
+                            imageAlt: '商品图片',
+                            title: goodsItm.goods_name,
+                            goodsProps: goodsItm.goods_props
+                          }"
+                        /> -->
+                      </td>
+                      <td>
+                        <p>￥{{ goodsItm.goods_price }}</p>
+                        <p>×{{ goodsItm.total_num }}</p>
+                      </td>
+                      <!-- <template v-if="goodsIdx===0">
+                        <td :rowspan="item.goods_list.length">
+                          <p>￥{{ item.pay_price }}</p>
+                          <p class="c-muted-1">(含运费：￥{{ item.express_price }})</p>
+                        </td>
+                        <td :rowspan="item.goods_list.length">
+                          <UserItem :user="item.user" />
+                        </td>
+                        <td :rowspan="item.goods_list.length">
+                          <a-tag
+                            v-if="item.pay_method"
+                          >{{ PaymentMethodEnum[item.pay_method].name }}</a-tag>
+                          <span v-else>--</span>
+                        </td>
+                        <td :rowspan="item.goods_list.length">
+                          <a-tag>{{ DeliveryTypeEnum[item.delivery_type].name }}</a-tag>
+                        </td>
+                        <td :rowspan="item.goods_list.length">
+                          <p class="mtb-2">
+                            <span class="f-13">付款状态：</span>
+                            <a-tag
+                              :color="item.pay_status == PayStatusEnum.SUCCESS.value ? 'green' : ''"
+                            >{{ PayStatusEnum[item.pay_status].name }}</a-tag>
+                          </p>
+                          <p class="mtb-2">
+                            <span class="f-13">发货状态：</span>
+                            <a-tag
+                              :color="item.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''"
+                            >{{ DeliveryStatusEnum[item.delivery_status].name }}</a-tag>
+                          </p>
+                          <p class="mtb-2">
+                            <span class="f-13">收货状态：</span>
+                            <a-tag
+                              :color="item.receipt_status == ReceiptStatusEnum.RECEIVED.value ? 'green' : ''"
+                            >{{ ReceiptStatusEnum[item.receipt_status].name }}</a-tag>
+                          </p>
+                          <p
+                            v-if="[OrderStatusEnum.CANCELLED.value,OrderStatusEnum.APPLY_CANCEL.value].includes(item.order_status)"
+                            class="mtb-2"
+                          >
+                            <span class="f-13">订单状态：</span>
+                            <a-tag
+                              :color="renderOrderStatusColor(item.order_status)"
+                            >{{ OrderStatusEnum[item.order_status].name }}</a-tag>
+                          </p>
+                        </td>
+                        <td :rowspan="item.goods_list.length">
+                          <div class="actions">
+                            <router-link
+                              v-if="$auth('/order/detail')"
+                              :to="{ path: '/order/detail', query: { orderId: item.order_id } }"
+                              target="_blank"
+                            >详情</router-link>
+                            <a
+                              v-action:deliver
+                              v-if="(
+                                item.pay_status == PayStatusEnum.SUCCESS.value
+                                  && inArray(item.delivery_type, [ DeliveryTypeEnum.EXPRESS.value, DeliveryTypeEnum.NOTHING.value])
+                                  && item.delivery_status != DeliveryStatusEnum.DELIVERED.value
+                                  && !inArray(item.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
+                              )"
+                              @click="handleDelivery(item)"
+                            >发货</a>
+                            <a
+                              v-action:extract
+                              v-if="(
+                                item.pay_status == PayStatusEnum.SUCCESS.value
+                                  && item.delivery_type == DeliveryTypeEnum.EXTRACT.value
+                                  && item.delivery_status != DeliveryStatusEnum.DELIVERED.value
+                                  && !inArray(item.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
+                              )"
+                              @click="handleExtract(item)"
+                            >自提核销</a>
+                            <a
+                              v-action:cancel
+                              v-if="item.order_status == OrderStatusEnum.APPLY_CANCEL.value"
+                              @click="handleCancel(item)"
+                            >审核取消</a>
+                            <a v-action:delete @click="handleDelete(item)">删除</a>
+                          </div>
+                        </td>
+                      </template> -->
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
+            <!-- 空状态 -->
+            <a-empty v-if="!orderList.data.length" :image="simpleImage" />
+          </div>
+        </div>
+      </div>
+      <!-- 分页器 -->
+      <div v-if="orderList.data.length" class="pagination">
+        <a-pagination
+          :current="page"
+          :pageSize="orderList.per_page"
+          :total="orderList.total"
+          @change="onChangePage"
+        />
+      </div>
+    </a-spin>
+  </a-card>
+</template>
+
+<script>
+import { Empty } from 'ant-design-vue'
+import { inArray, assignment } from '@/utils/util'
+import * as Api from '@/api/market/presale'
+import * as EventApi from '@/api/order/event'
+import * as ShopApi from '@/api/store/shop'
+import PlatformIcon from '@/components/PlatformIcon'
+import { GoodsItem, UserItem } from '@/components/Table'
+import {
+  DeliveryStatusEnum,
+  DeliveryTypeEnum,
+  OrderSourceEnum,
+  OrderStatusEnum,
+  PayStatusEnum,
+  ReceiptStatusEnum
+} from '@/common/enum/order'
+import { PaymentMethodEnum } from '@/common/enum/payment'
+
+// 表格字段
+const columns = [
+  {
+    title: '商品信息',
+    align: 'center',
+    dataIndex: 'goods',
+    scopedSlots: { customRender: 'goods' }
+  },
+  {
+    title: '单价/数量',
+    align: 'center',
+    scopedSlots: { customRender: 'unit_price' }
+  },
+  {
+    title: '实付款',
+    align: 'center',
+    dataIndex: 'pay_price',
+    scopedSlots: { customRender: 'pay_price' }
+  },
+  {
+    title: '买家',
+    dataIndex: 'user',
+    scopedSlots: { customRender: 'user' }
+  },
+  {
+    title: '支付方式',
+    dataIndex: 'pay_method',
+    scopedSlots: { customRender: 'pay_method' }
+  },
+  {
+    title: '配送方式',
+    dataIndex: 'delivery_type',
+    scopedSlots: { customRender: 'delivery_type' }
+  },
+  {
+    title: '交易状态',
+    dataIndex: 'status',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: '180px',
+    scopedSlots: { customRender: 'action' }
+  }
+]
+
+// 搜索关键词类型枚举
+const SearchTypeEnum = [
+  { name: '订单号', value: 10 },
+  { name: '会员昵称', value: 20 },
+  { name: '会员ID', value: 30 },
+  { name: '收货人姓名', value: 40 },
+  { name: '收货人电话', value: 50 }
+]
+
+export default {
+  name: 'Index',
+  components: {
+    PlatformIcon,
+    GoodsItem,
+    UserItem
+  },
+  data () {
+    return {
+      // 订单类型
+      dataType: this.getDataType(),
+      // 当前表单元素
+      searchForm: this.$form.createForm(this),
+      // 查询参数
+      queryParam: {},
+      // 正在加载
+      isLoading: false,
+      // 表格字段
+      columns,
+      // 当前页码
+      page: 1,
+      // 列表数据
+      orderList: { data: [], total: 0, per_page: 10 },
+      // 自提门店列表
+      shopList: []
+    }
+  },
+  beforeCreate () {
+    // 批量给当前实例赋值
+    assignment(this, {
+      inArray,
+      DeliveryStatusEnum,
+      DeliveryTypeEnum,
+      OrderSourceEnum,
+      OrderStatusEnum,
+      PayStatusEnum,
+      ReceiptStatusEnum,
+      PaymentMethodEnum,
+      SearchTypeEnum,
+      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
+    })
+  },
+  watch: {
+    // 监听路由变化
+    $route () {
+      this.init()
+    }
+  },
+  created () {
+    // 初始化页面
+    this.init()
+    // 获取门店列表
+    this.getShopList()
+  },
+  methods: {
+
+    // 初始化页面
+    init () {
+      this.dataType = this.getDataType()
+      this.searchForm.resetFields()
+      this.queryParam = {}
+      this.handleRefresh(true)
+    },
+
+    // 获取门店列表
+    getShopList () {
+      ShopApi.all().then(result => this.shopList = result.data.list)
+    },
+
+    // 获取当前标签
+    getDataType () {
+      return this.$route.path.split('/')[3].replace('-', '_')
+    },
+
+    // 获取列表数据
+    getList () {
+      const { dataType, queryParam, page } = this
+      this.isLoading = true
+      return Api.list({ dataType, ...queryParam, page })
+        .then(response => {
+          this.orderList = response.data.list
+          console.log('🚀 ~ file: Index.vue:312 ~ getList ~ this.orderList:', this.orderList)
+        })
+        .finally(() => this.isLoading = false)
+    },
+
+    // 渲染订单状态标签颜色
+    renderOrderStatusColor (orderStatus) {
+      const { OrderStatusEnum } = this
+      const ColorEnum = {
+        [OrderStatusEnum.NORMAL.value]: '',
+        [OrderStatusEnum.CANCELLED.value]: 'red',
+        [OrderStatusEnum.APPLY_CANCEL.value]: 'red',
+        [OrderStatusEnum.COMPLETED.value]: 'green'
+      }
+      return ColorEnum[orderStatus]
+    },
+
+    /**
+     * 刷新列表
+     * @param Boolean bool 强制刷新到第一页
+     */
+    handleRefresh (bool = false) {
+      bool && (this.page = 1)
+      this.getList()
+    },
+
+    // 确认搜索
+    handleSearch (e) {
+      e.preventDefault()
+      this.searchForm.validateFields((error, values) => {
+        if (!error) {
+          this.queryParam = { ...this.queryParam, ...values }
+          this.handleRefresh(true)
+        }
+      })
+    },
+
+    // 重置搜索表单
+    handleReset () {
+      this.searchForm.resetFields()
+    },
+
+    // 翻页事件
+    onChangePage (current) {
+      this.page = current
+      this.handleRefresh()
+    },
+
+    // 删除记录
+    handleDelete (item) {
+      const app = this
+      const modal = app.$confirm({
+        title: '您确定要删除该订单记录吗?',
+        content: '删除后不可恢复，请谨慎操作',
+        onOk () {
+          return EventApi.deleted(item.order_id)
+            .then(result => {
+              app.$message.success(result.message, 1.5)
+              app.handleRefresh()
+            })
+            .finally(result => modal.destroy())
+        }
+      })
+    },
+
+    // 订单发货
+    handleDelivery (record) {
+      this.$refs.DeliveryForm.show(record)
+    },
+
+    // 自提核销
+    handleExtract (record) {
+      this.$refs.ExtractForm.show(record)
+    },
+
+    // 审核取消订单
+    handleCancel (record) {
+      this.$refs.CancelForm.show(record)
+    }
+
+  }
+}
+</script>
+<style lang="less" scoped>
+// 分页器
+.pagination {
+  margin-top: 16px;
+  .ant-pagination {
+    float: right;
+  }
+}
+
+.ant-table {
+  table {
+    border: none;
+    border-collapse: collapse;
+  }
+  .ant-table-thead > tr {
+    border: 1px solid #e8e8e8;
+  }
+  tr.order-empty {
+    height: 15px;
+    border: 1px solid #fff;
+    td {
+      padding: 0;
+      border-right: none;
+      border-left: none;
+      background: none !important;
+    }
+  }
+}
+
+.ant-table-thead > tr > th {
+  border-right: none;
+  border-bottom: none;
+  padding: 12px 12px;
+  font-weight: bold;
+}
+.ant-table-tbody > tr > td {
+  border-right: 1px solid #e8e8e8;
+  border-left: 1px solid #e8e8e8;
+  padding: 12px 12px;
+  // text-align: center;
+}
+</style>
diff --git a/src/views/market/presale/Index.vue b/src/views/market/presale/Index.vue
index 22a68fc..6fa1d51 100644
--- a/src/views/market/presale/Index.vue
+++ b/src/views/market/presale/Index.vue
@@ -34,17 +34,21 @@
         <a @click="handleDetail(item)">详情</a>
       </span>
     </s-table>
+
+    <Log ref="Log" />
   </a-card>
 </template>
 
 <script>
 import * as Api from '@/api/market/presale'
 import { STable } from '@/components'
+import Log from './modules/Log.vue'
 
 export default {
   name: 'Index',
   components: {
-    STable
+    STable,
+    Log
   },
   data () {
     return {
@@ -58,6 +62,10 @@ export default {
           title: '预售ID',
           dataIndex: 'id'
         },
+        {
+          title: '预售名称',
+          dataIndex: 'name'
+        },
         {
           title: '状态',
           dataIndex: 'status',
@@ -93,8 +101,8 @@ export default {
 
   },
   methods: {
-    handleDetail () {
-
+    handleDetail (item) {
+      this.$refs.Log.visibleLog(item.id)
     },
 
     /**
diff --git a/src/views/market/presale/Log.vue b/src/views/market/presale/Log.vue
deleted file mode 100644
index e48d53a..0000000
--- a/src/views/market/presale/Log.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <a-card :bordered="false">
-    <div class="card-title">{{ $route.meta.title }}</div>
-    <s-table
-      ref="table"
-      rowKey="id"
-      :loading="isLoading"
-      :columns="columns"
-      :data="loadData"
-      :pageSize="15"
-    >
-      <!-- 活动入口图片 -->
-      <span slot="index_image_url" slot-scope="text">
-        <a title="点击查看原图" :href="text" target="_blank">
-          <img height="50" :src="text" alt="活动入口图片" />
-        </a>
-      </span>
-      <!-- Banner图 -->
-      <span slot="theme_image_url" slot-scope="text">
-        <a title="点击查看原图" :href="text" target="_blank">
-          <img height="50" :src="text" alt="活动主题图" />
-        </a>
-      </span>
-      <!-- 状态 -->
-      <span slot="status" slot-scope="text">
-        <a-tag :color="text == 1 ? 'green' : ''">{{ text ? '开启' : '关闭' }}</a-tag>
-      </span>
-    </s-table>
-  </a-card>
-</template>
-
-<script>
-import * as Api from '@/api/market/presale'
-import { STable } from '@/components'
-
-export default {
-  name: 'Index',
-  components: {
-    STable
-  },
-  data () {
-    return {
-      // 查询参数
-      queryParam: {},
-      // 正在加载
-      isLoading: false,
-      // 表头
-      columns: [
-        {
-          title: '活动ID',
-          dataIndex: 'id'
-        },
-        {
-          title: '活动名称',
-          dataIndex: 'name'
-        },
-        {
-          title: '活动标题',
-          dataIndex: 'title'
-        },
-        {
-          title: '活动入口图片',
-          dataIndex: 'index_image_url',
-          scopedSlots: { customRender: 'index_image_url' }
-        },
-        {
-          title: '活动主题标题',
-          dataIndex: 'theme_title'
-        },
-        {
-          title: '活动主题图',
-          dataIndex: 'theme_image_url',
-          scopedSlots: { customRender: 'theme_image_url' }
-        },
-        {
-          title: '状态',
-          dataIndex: 'status',
-          scopedSlots: { customRender: 'status' }
-        },
-        {
-          title: '创建时间',
-          width: '180px',
-          dataIndex: 'create_time'
-        },
-        {
-          title: '更新时间',
-          width: '180px',
-          dataIndex: 'update_time'
-        },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          width: '180px',
-          scopedSlots: { customRender: 'action' }
-        }
-      ],
-      // 加载数据方法 必须为 Promise 对象
-      loadData: param => {
-        return Api.log({ ...param, ...this.queryParam })
-          .then(response => {
-            return response.data.list
-          })
-      }
-    }
-  },
-  created () {
-
-  },
-  methods: {
-
-    /**
-     * 刷新列表
-     * @param Boolean bool 强制刷新到第一页
-     */
-    handleRefresh (bool = false) {
-      this.$refs.table.refresh(bool)
-    },
-
-    // 检索查询
-    onSearch () {
-      this.handleRefresh(true)
-    }
-
-  }
-}
-</script>
diff --git a/src/views/market/presale/modules/Log.vue b/src/views/market/presale/modules/Log.vue
new file mode 100644
index 0000000..149409b
--- /dev/null
+++ b/src/views/market/presale/modules/Log.vue
@@ -0,0 +1,185 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="980"
+    :visible="visible"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    :footer="null"
+    @cancel="handleCancel"
+  >
+    <div class="table-wrapper">
+      <div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-bordered">
+        <div class="ant-table-content">
+          <div class="ant-table-scroll">
+            <div class="ant-table-body" style="overflow-x: scroll;">
+              <table style="width: 1450px;">
+                <tbody class="ant-table-tbody">
+                  <template v-for="(item) in orderList.data">
+                    <tr class="order-empty" :key="`order_${item.id}_1`">
+                      <td colspan="8"></td>
+                    </tr>
+                    <tr :key="`order_${item.id}_2`">
+                      <td colspan="8">
+                        <span class="mr-20">记录ID：{{ item.id }}</span>
+                        <span class="mr-20">创建时间：{{ item.ctime }}</span>
+                      </td>
+                    </tr>
+                    <tr
+                      v-for="(goodsItm, goodsIdx) of item.goods"
+                      :key="`orderGoods_${item.id}_${goodsIdx}`"
+                    >
+                      <td>
+                        <p>￥{{ goodsItm.goods_name }}</p>
+                      </td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
+            <a-empty v-if="!orderList.data.length" :image="simpleImage" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页器 -->
+      <div v-if="orderList.data.length" class="pagination">
+        <a-pagination
+          :current="page"
+          :pageSize="orderList.per_page"
+          :total="orderList.total"
+          @change="onChangePage"
+        />
+      </div>
+
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/market/presale'
+import { STable } from '@/components'
+import { Empty } from 'ant-design-vue'
+
+export default {
+  components: {
+    STable
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '预售记录',
+      // modal(对话框)是否可见
+      visible: false,
+      // 当前记录ID
+      activeId: null,
+      // 查询参数
+      queryParam: {},
+      // 正在加载
+      isLoading: false,
+      // 表头
+      columns: [],
+
+      preId: null,
+
+      // 当前页码
+      page: 1,
+      orderList: { data: [], total: 0, per_page: 10 },
+      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
+
+    }
+  },
+  methods: {
+    visibleLog (preId) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录ID
+      this.preId = preId
+
+      this.queryParam = { pre_id: preId }
+
+      this.getList()
+    },
+
+    // 获取列表数据
+    getList () {
+      const { queryParam, page } = this
+      this.isLoading = true
+      return Api.log({ ...queryParam, page })
+        .then(response => {
+          this.orderList = response.data.list
+        })
+        .finally(() => this.isLoading = false)
+    },
+
+    // 关闭对话框事件
+    handleCancel () {
+      this.visible = false
+    },
+
+    /**
+     * 刷新列表
+     * @param Boolean bool 强制刷新到第一页
+     */
+    handleRefresh (bool = false) {
+      bool && (this.page = 1)
+      this.getList()
+    },
+
+    // 翻页事件
+    onChangePage (current) {
+      this.page = current
+      this.handleRefresh()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  padding-bottom: 20px;
+}
+// 分页器
+.pagination {
+  margin-top: 16px;
+  .ant-pagination {
+    float: right;
+  }
+}
+
+.ant-table {
+  table {
+    border: none;
+    border-collapse: collapse;
+  }
+  .ant-table-thead > tr {
+    border: 1px solid #e8e8e8;
+  }
+  tr.order-empty {
+    height: 15px;
+    border: 1px solid #fff;
+    td {
+      padding: 0;
+      border-right: none;
+      border-left: none;
+      background: none !important;
+    }
+  }
+}
+
+.ant-table-thead > tr > th {
+  border-right: none;
+  border-bottom: none;
+  padding: 12px 12px;
+  font-weight: bold;
+}
+.ant-table-tbody > tr > td {
+  border-right: 1px solid #e8e8e8;
+  border-left: 1px solid #e8e8e8;
+  padding: 12px 12px;
+  // text-align: center;
+}
+</style>