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

<template>
  <div class="app-container">
    <!-- 用户select选项 -->
    <el-row :gutter="15" class="m-t-0">
      <el-col :span="4">
        <SelectionShopId class="w-100" v-model="shop_id" :allSel="true" />
      </el-col>
      <el-col :span="8">
        <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="12">
        <SelectionOrderStatus />
      </el-col>
      <el-col :span="12">
        <SelectionOrderBack />
      </el-col>
    </el-row>
    <!-- 订单列表 -->
    <!-- <el-table class="m-t-20 w-100" ref="myTable"
      :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">
      </el-table-column>
      <el-table-column prop="order_sn" label="订单号" width="150" min-width="150">
      </el-table-column>
      <el-table-column prop="tel" label="客户电话" min-width="150">
      </el-table-column>
      <el-table-column label="下单时间" width="140" min-width="140">
        <template slot-scope="scope">
          {{ scope.row.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
</el-table-column>
<el-table-column prop="controler" label="操作" width="380" min-width="380">
  <template slot-scope="scope">
          <el-button-group>
            <el-button type="warning" icon="el-icon-edit">同意退款</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([scope.row.id])">拒绝退款</el-button>
            <el-button type="primary" icon="el-icon-search"
              @click="$router.replace(`/order/show/${scope.row.id}`)">查看</el-button>
          </el-button-group>
        </template>
</el-table-column>
</el-table> -->
    <!-- 分页 -->
    <!-- <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
      :total="orderListArr.length">
    </el-pagination> -->
  </div>
</template>

<script>

import { countSelIdArr, parseTime } from '@/utils'
import SelectionShopId from '@/components/SelectionShopId'
import SelectionOrderStatus from '@/components/SelectionOrderStatus'
import SelectionOrderBack from '@/components/SelectionOrderBack'
import DatePickerOrder from '@/components/DatePickerOrder'
import SearchOrder from '@/components/SearchOrder'

export default {
  name: 'Order',
  data () {
    return {
      pageSize: 50, // 每页显示记录条数
      currentPage: 1, // 当前页
      shop_id: '' // 搜索条件 商铺id
    }
  },
  components: {
    SelectionShopId,
    SelectionOrderStatus,
    SelectionOrderBack,
    DatePickerOrder,
    SearchOrder
  },
  computed: {
    startDate () {
      return Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000)
    },
    endDate () {
      return Math.floor(new Date(new Date().setHours(23, 59, 59, 999)).getTime() / 1000)
    }
    // 获取订单列表
    // 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
  },
  watch: {
  },
  created () {
  },
  filters: {
    countSelIdArr,
    parseTime
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

i {
  font-size: 18px !important;
  margin-right: 12px;
  vertical-align: middle;
}
</style>