liebao-website/src/views/management/order/order.vue

<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue'
import { orderList, getShopList, getDeliveryList } from '@/api'
import { message } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';
let time = reactive({
  arr: [
    dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
    dayjs().format('YYYY-MM-DD'),
  ]
})
let shopList = reactive({ arr: [{ id: 0, name: '' }] })
let deliveryList = reactive({ arr: [{ id: 0, name: '' }] })
let statusList = reactive({
  arr: [
    {
      status: 0,
      name: '新订单'
    },
    {
      status: 10,
      name: '预约单'
    },
    {
      status: 1,
      name: '待接单'
    },
    {
      status: 2,
      name: '取货中'
    },
    {
      status: 3,
      name: '配送中'
    },
    {
      status: -1,
      name: '已取消'
    },
    {
      status: -2,
      name: '异常单'
    },
    {
      status: 97,
      name: '本平台完成'
    },
    {
      status: 98,
      name: '其他平台完成'
    },
  ]
})
let searchKeyType = reactive({
  arr: [
    {
      type: 1,
      name: '订单号'
    },
    {
      type: 2,
      name: '三方订单号'
    },
    {
      type: 3,
      name: '收货人手机号'
    },
  ]
})
interface FormState {
  city?: string;
  shopId?: number;
  deliveryId?: number;
  status?: number;
  startDate?: string;
  endDate?: string;
  searchKey: string;
  pageNum: number;
  pageSize: number;
  type: Number
}
const formState = reactive<FormState>({
  city: '',
  searchKey: '',
  pageNum: 1,
  pageSize: 10,
  type: 1
});
const columns = reactive([
  {
    title: '三方订单号',
    dataIndex: 'outOrderSn',
    align: 'center',
  },
  {
    title: '城市',
    dataIndex: 'receiptCityName',
    align: 'center',
  },
  {
    title: '发件门店',
    dataIndex: 'shopName',
    align: 'center',
  },
  {
    title: '收件地址',
    dataIndex: 'receiptAddress',
    align: 'center',
  },
  {
    title: '配送平台',
    dataIndex: 'deliveryName',
    align: 'center',
  },
  {
    title: '订单状态',
    dataIndex: 'status',
    align: 'center',
  },
  {
    title: '配送费',
    dataIndex: 'payAmount',
    align: 'center',
  },
  {
    title: '优巨订单号',
    dataIndex: 'orderSn',
    align: 'center',
  }
])
const pagination = reactive({
  total: 0,
  current: formState.pageNum,
  pageSize: formState.pageSize,
})
let data = reactive({
  arr: []
})
const getOrderList = () => {
  formState.startDate = time.arr[0]
  formState.endDate = time.arr[1]
  orderList(formState).then((res: any) => {
    console.log('res', res);
    if (res.code === 200) {
      data.arr = res.data.data
      pagination.total = res.data.totalNums
    } else {
      message.error(res.msg)
    }
  })
}
getOrderList()
const handleGetShopList = () => {
  getShopList().then((res: any) => {
    if (res.code === 200) {
      shopList.arr = res.data
    } else {
      message.error(res.msg)
    }
  })
}
handleGetShopList()
const handleGetDeliveryList = () => {
  getDeliveryList().then((res: any) => {
    if (res.code === 200) {
      deliveryList.arr = res.data
    } else {
      message.error(res.msg)
    }
  })
}
handleGetDeliveryList()
const search = () => {
  pagination.current = 1
  formState.pageNum = 1
  getOrderList()
}
const handleTableChange = (e: any) => {
  pagination.current = e.current
  pagination.pageSize = e.pageSize
  formState.pageNum = e.current
  formState.pageSize = e.pageSize
  getOrderList()
}
const showOrderStatus = (status: Number) => {
  let statusObj: any = statusList.arr.find((v: any) => {
    return v.status === status
  })
  return statusObj.name
}
onMounted(() => {

})
</script>
<template>
  <div class="text-20px text-[#222222] font-bold mb-30px">订单管理</div>
  <a-form :model="formState" name="horizontal_login" layout="inline" autocomplete="off" class="mb-20px">
    <a-form-item label="城市" name="city">
      <a-input v-model:value="formState.city" placeholder="请输入要查询的城市" allowClear>
      </a-input>
    </a-form-item>
    <a-form-item label="店铺" name="shopId">
      <a-select v-model:value="formState.shopId" style="width: 200px" placeholder="请选择要查询的店铺名称" allowClear>
        <a-select-option v-for="(v, i) in shopList.arr" :key="i" :value="v.id">{{ v.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="配送平台" name="deliveryId">
      <a-select v-model:value="formState.deliveryId" style="width: 200px" placeholder="请选择要查询的配送平台" allowClear>
        <a-select-option v-for="(v, i) in deliveryList.arr" :key="i" :value="v.id">{{ v.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="订单状态" name="status">
      <a-select v-model:value="formState.status" style="width: 200px" placeholder="请选择要查询的订单状态" allowClear>
        <a-select-option v-for="(v, i) in statusList.arr" :key="i" :value="v.status">{{ v.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item-rest>
      <a-input-group compact>
        <a-select v-model:value="formState.type" style="width: 130px">
          <a-select-option v-for="(v, i) in searchKeyType.arr" :key="i" :value="v.type">{{ v.name }}</a-select-option>
        </a-select>
        <a-input style="width: 200px" v-model:value="formState.searchKey" placeholder="请输入要查询的数据" allowClear />
      </a-input-group>
    </a-form-item-rest>
    <a-form-item label="日期" name="time">
      <a-range-picker v-model:value="time.arr" valueFormat="YYYY/MM/DD" />
    </a-form-item>
    <a-form-item>
      <a-button class="ml-20px" type="primary" @click="search">查 询</a-button>
      <!-- <a-button class="ml-20px" type="primary" ghost html-type="submit">导 出</a-button> -->
    </a-form-item>
  </a-form>
  <a-table :columns="columns" rowKey="id" :data-source="data.arr" :pagination="pagination" bordered
    @change="handleTableChange">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'outOrderSn'">
        <div>{{ record.outOrderSn || '- -' }}</div>
      </template>
      <template v-if="column.dataIndex === 'deliveryName'">
        <div>{{ record.deliveryName || '- -' }}</div>
      </template>
      <template v-if="column.dataIndex === 'status'">
        <div>{{ showOrderStatus(record.status) }}</div>
      </template>
      <template v-if="column.dataIndex === 'deliveries'">
        <div class="flex justify-center">
          <img :src="v.logo" alt="" v-for="(v, i) in text" :key="i" class="w-20px h-20px mr-10px">
        </div>
      </template>
      <!-- <template v-if="column.dataIndex === 'operation'">
        <a class="text-blue-500">详情</a>
      </template> -->
    </template>
    <template #expandedRowRender="{ record }">
      <div>
        <div class="flex items-center modal">
          <div class="modal-title">订单状态：</div>
          <div class="ml-10px mr-5px text-16px text-[#05BC51]">{{ showOrderStatus(record.status) }}</div>
          <a-popover placement="right">
            <template #content>
              <p class="py-5px" v-if="record.finishTime">完成时间：{{ record.finishTime }}</p>
              <p class="py-5px" v-if="record.shipperTakeTime">骑手取件时间：{{ record.shipperTakeTime }}</p>
              <p class="py-5px" v-if="record.shipperReceiveTime">骑手接单时间：{{ record.shipperReceiveTime }}</p>
              <p class="py-5px" v-if="record.cancelTime">取消时间：{{ record.cancelTime }}</p>
              <p class="py-5px" v-if="record.sendTime">发单时间：{{ record.sendTime }}</p>
              <p class="py-5px" v-if="record.payTime">支付时间：{{ record.payTime }}</p>
            </template>
            <img class="cursor-pointer w-14px h-14px" src="@/assets/images/21.png" alt="">
          </a-popover>
        </div>
        <div class="modal">
          <div class="modal-title">收发信息</div>
          <div class="cell-list">
            <div class="cell">
              <div class="title">发件门店：</div>
              <div>{{ record.shopName }}</div>
            </div>
            <div class="cell">
              <div class="title">发件人：</div>
              <div>{{ record.sendContactName }}</div>
            </div>
            <div class="cell">
              <div class="title">发件人电话：</div>
              <div>{{ record.sendPhone }}</div>
            </div>

            <div class="cell">
              <div class="title">收件地址：</div>
              <div>{{ record.receiptAddress }}</div>
            </div>
            <div class="cell">
              <div class="title">收件人：</div>
              <div>{{ record.receiptContactName }}</div>
            </div>
            <div class="cell">
              <div class="title">收件人电话：</div>
              <div>{{ record.receiptPhone }}</div>
            </div>
          </div>
        </div>
        <div class="modal">
          <div class="modal-title">配送信息</div>
          <div class="cell-list">
            <div class="cell">
              <div class="title">骑手姓名：</div>
              <div>{{ record.shipperName || '--' }}</div>
            </div>
            <div class="cell">
              <div class="title">配送平台：</div>
              <div>{{ record.deliveryName || '--' }}</div>
            </div>
            <div class="cell">
              <div class="title">骑手电话：</div>
              <div>{{ record.shipperPhone }}</div>
            </div>
            <div class="cell">
              <div class="title">配送距离：</div>
              <div>{{ record.orderDistance || '--' }}</div>
            </div>
            <div class="cell">
              <div class="title">{{ record.deliveryName }}客服：</div>
              <div>{{ record.customerPhone }}</div>
            </div>
          </div>
        </div>
        <!-- <div class="modal">
          <div class="modal-title">支付信息</div>
          <div class="cell-list">
            <div class="cell">
              <div class="title">应付费用：</div>
              <div>{{ record.shopName }} 元</div>
            </div>
            <div class="cell">
              <div class="title">实际支付：</div>
              <div>{{ record.payAmount }} 元</div>
              <img class="w-14px h-14px ml-5px" src="@/assets/images/22.png" alt="">
            </div>
          </div>
        </div> -->
        <div class="modal">
          <div class="modal-title">物品信息</div>
          <div class="cell-list">
            <div class="cell">
              <div class="title">物品类型：</div>
              <div>{{ record.productName }}</div>
            </div>
            <div class="cell">
              <div class="title">物品重量：</div>
              <div>{{ record.weight }} kg</div>
            </div>
            <div class="cell">
              <div class="title">物品价值：</div>
              <div>{{ record.productAmount }} 元</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </a-table>

</template>
<style lang='scss' scoped>
.ant-form-inline :deep(.ant-form-item) {
  margin-bottom: 10px;
}
:deep(.ant-input-group){
  width: inherit;
  margin-right: 16px
}
.modal {
  @apply mt-20px;

  .modal-title {
    @apply text-16px text-[#333333] leading-19px font-500 ml-20px;
  }

  .cell-list {
    @apply flex ml-124px mt-10px flex-wrap;

    .cell {
      @apply flex items-center w-1/2 leading-30px text-[#666666] text-14px;

      .title {
        @apply w-100px text-right;
      }
    }
  }
}
</style>