src/components/DatePickerOrder.vue

@@ -6,6 +6,14 @@
 
 <script>
 export default {
+  props: {
+    startDate: {
+      type: Number
+    },
+    endDate: {
+      type: Number
+    }
+  },
   data () {
     return {
       pickerOptions: {
@@ -79,37 +87,22 @@ export default {
           }
         ]
       },
-      value: []
+      value: [new Date(this.startDate * 1000), new Date(this.endDate * 1000)]
-    }
-  },
-  created () {
-    const startTime = this.$store.getters['app/getOrderSerch'].start_time
-    const endTime = this.$store.getters['app/getOrderSerch'].end_time
-
-    if (startTime === '' && endTime === '') {
-      this.value = [
-        new Date(new Date().setHours(0, 0, 0, 0)).getTime(),
-        new Date(new Date().setHours(23, 59, 59, 999)).getTime()
-      ]
-      this.$store.commit('app/setOrderSerch', { start_time: startTime, end_time: endTime })
-    } else {
-      this.value = [
-        new Date(startTime * 1000),
-        new Date(endTime * 1000)
-      ]
     }
   },
   watch: {
     value (newVal) {
       if (newVal && newVal.length === 2) {
-        const start = new Date(newVal[0])
+        const end = newVal[1]
-        const end = new Date(newVal[1])
         end.setHours(23, 59, 59, 999) // 设置结束日期为当天的23:59:59
-        const startTimestamp = Math.floor(start.getTime() / 1000) // 转换毫秒为秒
+        const startTimestamp = Math.floor(newVal[0].getTime() / 1000) // 转换毫秒为秒
         const endTimestamp = Math.floor(end.getTime() / 1000) // 转换毫秒为秒
-        this.$store.commit('app/setOrderSerch', { start_time: startTimestamp, end_time: endTimestamp })
+        this.$store.commit('app/setOrderSerch', { start_time: startTimestamp })
-      } else if (newVal === null) {
+        this.$store.commit('app/setOrderSerch', { end_time: endTimestamp })
-        this.$store.commit('app/setOrderSerch', { start_time: '', end_time: '' })
+      }
+      if (newVal === null) {
+        this.$store.commit('app/setOrderSerch', { start_time: '' })
+        this.$store.commit('app/setOrderSerch', { end_time: '' })
       }
     }
   }

src/components/QuestTabs.vue

@@ -149,23 +149,17 @@ export default {
   },
   methods: {
     questAss, // 修改订单
-    /**
-     * @description: 封装退款函数 同步后续操作
-     * @param {*} refundOrderSn 订单编号
-     * @param {*} refundShopId 商铺id
-     * @param {*} refundPrice 退款金额
-     * @param {*} refundType 退款类型 'buyer'买家申请 'seller'卖家主动
-     */
     refund (refundOrderSn, refundShopId, refundPrice, refundType) {
       refund(refundOrderSn, refundShopId, refundPrice, refundType).then(res => {
-        if (res.data.status === 1) { // 退款申请成功时
+        if (res.data.status === 1) {
-          this.dialogVisible = false // 退款弹出框 关闭
+          this.dialogVisible = false
-          this.refundIndex = this.tempRefundIndex // 标记退款订单 的索引 方便做ui样式
+          this.refundIndex = this.tempRefundIndex
         }
       })
     }, // 退款接口
     parseTime, // 时间戳格式化
     setRefundItem (item, index, refundType) {
+      console.log(item)
       this.tempRefundIndex = index
       this.refundTotal_price = item.total_price
       this.refundApply_price = item.apply_price

src/components/SelectionMainStatus.vue

@@ -1,36 +0,0 @@
-<template>
-  <el-select class="w-100" v-model="value" multiple placeholder="订单状态：可多选，空显示全部">
-    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-    </el-option>
-  </el-select>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      options: [{
-        value: '未付款',
-        label: '未付款'
-      }, {
-        value: '已付款',
-        label: '已付款'
-      }, {
-        value: '已退款',
-        label: '已退款'
-      }, {
-        value: '已完成',
-        label: '已完成'
-      }],
-      value: this.$store.getters['app/getOrderSerch'].main_status
-    }
-  },
-  watch: {
-    value (val) {
-      this.$store.commit('app/setOrderSerch', { main_status: val })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>

src/components/SelectionOrderBack.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-select class="w-100" v-model="value" multiple placeholder="退款状态过滤：可多选过滤条件（空置显示全部状态订单）">
+    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        value: 'normal',
+        label: '从未申请'
+      }, {
+        value: 'requested',
+        label: '申请退款中'
+      }, {
+        value: 'refunded',
+        label: '已退款'
+      }, {
+        value: 'rejected',
+        label: '拒绝退款'
+      }, {
+        value: 'actively',
+        label: '商家发起退款'
+      }],
+      value: this.$store.getters['app/getOrderSerch'].back
+    }
+  },
+  watch: {
+    value (val) {
+      this.$store.commit('app/setOrderSerch', { back: val })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/SelectionOrderStatus.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-select class="w-100" v-model="value" multiple placeholder="订单状态过滤：可多选过滤条件（空置显示全部状态订单）">
+    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        value: 'unpaid',
+        label: '未付款'
+      }, {
+        value: 'pending',
+        label: '待处理'
+      }, {
+        value: 'processing',
+        label: '备货处理中'
+      }, {
+        value: 'shipped',
+        label: '已发货'
+      }, {
+        value: 'completed',
+        label: '已送达'
+      }, {
+        value: 'closed',
+        label: '交易关闭'
+      }],
+      value: this.$store.getters['app/getOrderSerch'].status
+    }
+  },
+  watch: {
+    value (val) {
+      this.$store.commit('app/setOrderSerch', { status: val })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/SelectionRefundStatus.vue

@@ -1,40 +0,0 @@
-<template>
-  <el-select class="w-100" v-model="value" multiple placeholder="退款状态：可多选，空显示全部">
-    <template slot="prepend">Http://</template>
-    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-    </el-option>
-  </el-select>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      options: [{
-        value: '未申请',
-        label: '未申请'
-      }, {
-        value: '申请中',
-        label: '申请中'
-      }, {
-        value: '已同意',
-        label: '同意买家申请'
-      }, {
-        value: '主动退',
-        label: '卖家主动退款'
-      }, {
-        value: '拒绝退',
-        label: '拒绝退款'
-      }],
-      value: this.$store.getters['app/getOrderSerch'].refund_status
-    }
-  },
-  watch: {
-    value (val) {
-      this.$store.commit('app/setOrderSerch', { refund_status: val })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>

src/components/SelectionShipmentStatus.vue

@@ -1,36 +0,0 @@
-<template>
-  <el-select class="w-100" v-model="value" multiple placeholder="执行状态：可多选，空显示全部">
-    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-    </el-option>
-  </el-select>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      options: [{
-        value: '未接单',
-        label: '未接单'
-      }, {
-        value: '已接单',
-        label: '已接单'
-      }, {
-        value: '已发货',
-        label: '已发货'
-      }, {
-        value: '已送达',
-        label: '已送达'
-      }],
-      value: this.$store.getters['app/getOrderSerch'].shipment_status
-    }
-  },
-  watch: {
-    value (val) {
-      this.$store.commit('app/setOrderSerch', { shipment_status: val })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>

src/store/modules/app.js

@@ -66,12 +66,10 @@ const getters = {
   // 获取订单页面搜索条件
   getOrderSerch (state) {
     const defaultValues = {
-      shop_id: '', // 搜索条件 商铺id
+      start_time: '', // 搜索条件 起始时间
-      start_time: Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000), // 搜索条件 起始时间 默认为今天凌晨0点
+      end_time: '', // 搜索条件 结束时间
-      end_time: Math.floor(new Date(new Date().setHours(23, 59, 59, 999)).getTime() / 1000), // 搜索条件 结束时间 默认为今天23点59分59秒
+      status: [], // 搜索条件 订单状态
-      main_status: [], // 搜索条件 主状态
+      back: [], // 搜索条件 退款状态
-      shipment_status: [], // 搜索条件 执行状态
-      refund_status: [], // 搜索条件 退款状态
       search: ['orderId', '']// 搜索条件 搜索
     }
     // 深层合并 state.orderSerch 和默认值 取值得时候对象里面如果有得属性 会被保留 没有得会用defaultValues的属性进行填充

src/utils/api/table.js

@@ -26,11 +26,11 @@ export async function apiCrosFrequency (params) {
  * @param {*} val 修改字段的值
  */
 export function questAss (id, state, val) {
-  const params = new URLSearchParams()// post对象参数 转成 字符串连接
+  const data = new URLSearchParams()// post对象参数 转成 字符串连接
-  params.append('id', id)
+  data.append('id', id)
-  params.append('state', state)
+  data.append('state', state)
-  params.append('val', val)
+  data.append('val', val)
-  api.post('questAss', params).then(res => {
+  api.post('questAss', data).then(res => {
     if (res.data.status === 1) {
       Message.success(res.data.msg)
       store.dispatch('fetchPaidOrderList')// 更新订单列表
@@ -40,28 +40,6 @@ export function questAss (id, state, val) {
     }
   })
 }
-/**
- * @description: 获取订单列表
- * @param {*} orderSerch 搜索条件
- */
-export async function getOrderList (orderSerch) {
-  const params = new URLSearchParams()// post对象参数 转成 字符串连接
-  params.append('shop_id', orderSerch.shop_id)
-  params.append('start_time', orderSerch.start_time)
-  params.append('end_time', orderSerch.end_time)
-  params.append('main_status', orderSerch.main_status)
-  params.append('shipment_status', orderSerch.shipment_status)
-  params.append('refund_status', orderSerch.refund_status)
-  params.append('search', orderSerch.search)
-  // 发送退款请求
-  const res = await api.post('getOrderList', params, 'Admin')
-  if (res.data.status === 1) {
-    Message.success('成功获取订单列表')
-  } else {
-    Message.error('获取订单列表失败')
-  }
-  return res
-}
 
 /**
  * @description: 退款函数

src/views/layout/components/main/order/index.vue

@@ -6,26 +6,23 @@
         <SelectionShopId class="w-100" v-model="shop_id" :allSel="true" />
       </el-col>
       <el-col :span="8">
-        <DatePickerOrder class="w-100" />
+        <DatePickerOrder class="w-100" :startDate="startDate" :endDate="endDate" />
       </el-col>
       <el-col :span="12">
         <SearchOrder class="w-100" />
       </el-col>
     </el-row>
     <el-row :gutter="15">
-      <el-col :span="8">
+      <el-col :span="12">
-        <SelectionMainStatus />
+        <SelectionOrderStatus />
       </el-col>
-      <el-col :span="8">
+      <el-col :span="12">
-        <SelectionShipmentStatus />
+        <SelectionOrderBack />
-      </el-col>
-      <el-col :span="8">
-        <SelectionRefundStatus />
       </el-col>
     </el-row>
     <!-- 订单列表 -->
     <!-- <el-table class="m-t-20 w-100" ref="myTable"
-      :data="orderList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
+      :data="orderListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
       <el-table-column align="center" type="selection" width="40">
       </el-table-column>
       <el-table-column align="center" prop="id" label="id" width="50">
@@ -52,7 +49,7 @@
 </el-table> -->
     <!-- 分页 -->
     <!-- <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
-      :total="orderList.length">
+      :total="orderListArr.length">
     </el-pagination> -->
   </div>
 </template>
@@ -60,11 +57,9 @@
 <script>
 
 import { countSelIdArr, parseTime } from '@/utils'
-import { getOrderList } from '@/utils/api/table'
 import SelectionShopId from '@/components/SelectionShopId'
-import SelectionMainStatus from '@/components/SelectionMainStatus'
+import SelectionOrderStatus from '@/components/SelectionOrderStatus'
-import SelectionShipmentStatus from '@/components/SelectionShipmentStatus'
+import SelectionOrderBack from '@/components/SelectionOrderBack'
-import SelectionRefundStatus from '@/components/SelectionRefundStatus'
 import DatePickerOrder from '@/components/DatePickerOrder'
 import SearchOrder from '@/components/SearchOrder'
 
@@ -79,46 +74,85 @@ export default {
   },
   components: {
     SelectionShopId,
-    SelectionMainStatus,
+    SelectionOrderStatus,
-    SelectionShipmentStatus,
+    SelectionOrderBack,
-    SelectionRefundStatus,
     DatePickerOrder,
     SearchOrder
   },
   computed: {
-    /**
+    startDate () {
-     * @description: 订单列表
+      return Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000)
-     */
-    orderList () {
-      return []
     },
-    /**
+    endDate () {
-     * @description: 搜索条件 集合
+      return Math.floor(new Date(new Date().setHours(23, 59, 59, 999)).getTime() / 1000)
-     */
-    orderSerch () {
-      return this.$store.getters['app/getOrderSerch']
     }
+    // 获取订单列表
+    // orderList () {
+    //   return this.$store.state.orderList
+    // },
+    // // 获取搜索条件 对象(从缓存拿 缓存没有从本地拿 也没有 给对象的所有搜索属性空值)
+    // orderSerch () {
+    //   return this.$store.getters['app/getOrderSerch']
+    // },
+    // // 过滤订单列表组
+    // orderListArr () {
+    //   if (this.orderList.length > 0) {
+    //     let filteredList = this.orderList
+    //     // 过滤shop_id
+    //     if (this.shop_id !== '') {
+    //       filteredList = filteredList.filter(order => order.shop_id === this.shop_id)
+    //     }
+    //     // 过滤时间
+    //     if (this.orderSerch.start_time !== '' && this.orderSerch.end_time !== '') {
+    //       const startTime = parseInt(this.orderSerch.start_time)
+    //       const endTime = parseInt(this.orderSerch.end_time)
+    //       filteredList = filteredList.filter(order => {
+    //         const orderTime = parseInt(order.addtime)
+    //         return startTime < orderTime && orderTime < endTime
+    //       })
+    //     }
+    //     // 过滤订单状态
+    //     if (this.orderSerch.status.length > 0) {
+    //       filteredList = filteredList.filter(order => {
+    //         // 检查订单状态是否在this.status数组中
+    //         return this.orderSerch.status.includes(order.status)
+    //       })
+    //     }
+    //     // 过滤订单状态
+    //     if (this.orderSerch.back.length > 0) {
+    //       filteredList = filteredList.filter(order => {
+    //         // 检查订单状态是否在this.status数组中
+    //         return this.orderSerch.back.includes(order.back)
+    //       })
+    //     }
+    //     // 搜索条件过滤
+    //     if (this.orderSerch.search[1] !== '') {
+    //       filteredList = filteredList.filter(order => {
+    //         if (this.orderSerch.search[0] === 'orderId') {
+    //           return order.order_sn.indexOf(this.orderSerch.search[1]) >= 0
+    //         } else if (this.orderSerch.search[0] === 'name') {
+    //           return order.receiver.indexOf(this.orderSerch.search[1]) >= 0
+    //         } else if (this.orderSerch.search[0] === 'tel') {
+    //           return order.tel.indexOf(this.orderSerch.search[1]) >= 0
+    //         } else if (this.orderSerch.search[0] === 'remark') {
+    //           return order.remark.indexOf(this.orderSerch.search[1]) >= 0
+    //         } else if (this.orderSerch.search[0] === 'desc') {
+    //           return order.describe.indexOf(this.orderSerch.search[1]) >= 0
+    //         }
+    //       })
+    //     }
+    //     return filteredList
+    //   } else {
+    //     return []
+    //   }
+    // }
   },
   methods: {
-    countSelIdArr,
+    countSelIdArr
-    /**
-     * @description: 根据 缓存的搜索条件 获取订单列表
-     */
-    async getOrderList (orderSerch) {
-      const res = await getOrderList(orderSerch)
-      console.log(res)
-    }
   },
   watch: {
-    // shop_id (val) {
-    //   this.$store.commit('app/setOrderSerch', { shop_id: val })
-    // },
-    orderSerch (val) {
-      this.getOrderList(val)
-    }
   },
   created () {
-
   },
   filters: {
     countSelIdArr,