program/src/pages/agent/extend/orders/index.vue

<template>
  <div id="agent_income_container">
    <!--    筛选模块-->
    <div class="filter_container margin-xs flex">
      <view class='cu-tag round padding' v-for="(filter,index) in filter_list" :key="index"
            :class="{'bg-orange':filter_action==filter.id,'bg-white':filter_action != filter.id}"
            @click="change_filter(filter.id)"
      >
        {{ filter.name }}
      </view>

      <button class="cu-btn" @click="show_datetime_picker">自定义时间
        <text class="cuIcon-unfold"></text>
      </button>
    </div>


    <!--      全部累计订单模块-->
    <div class="profit_container text-center">
      <view>
        <text class="text-normal margin-xl">
          <template v-if="filter_date">{{ filter_date }}</template>
          <template v-else>{{ filter_list[filter_action - 1].name }}</template>
          累计订单
        </text>
      </view>
      <view>
        <text class="text-bold text-sl text-price">{{ userinfo.order_counts }}</text>
      </view>
    </div>

    <!--    小title-->
    <div class="line_container padding">
      <div>
        <text class="text-sm text-gray">订单记录</text>
        <van-divider customStyle="border:.1px solid;margin:0px;"/>
      </div>
    </div>
    <!--  列表-->
    <view class="solid-bottom padding-lr-sm" v-for="(item,index) in order_list" :key="index">
      <van-card>
        <view slot="thumb" class="cu-avatar lg round margin-left"
              style="background-image:url(https://img.shuimuai.com/web/icon_dingdan.png);"></view>
        <view slot="title" class="flex justify-between">
          <view>
            <text class="text-normal">消费产品 &emsp;</text>
            <text>{{ item.goods_name }}</text>
          </view>
          <view>
            <text class="text-normal text-sm under_line" @click="to_detail(item.sn)">订单详情</text>
          </view>
        </view>

        <view slot="num" class="flex justify-between align-end">
          <view>
            <view>
              <text class="text-sm text-normal">买家&emsp;</text>
              <text class="text-sm text-normal">{{ item.user_name }}</text>
            </view>
            <text class="text-gray text-sm">{{ item.create_time }}</text>
          </view>
          <view>
            <text class="text-normal text-sm margin-right">订单总价</text>
            <text class="text-xxl">{{ item.price }}</text>
          </view>


        </view>
      </van-card>
    </view>

    <van-calendar
      :show="calendar_show"
      type="range"
      @close="do_calendar_close"
      @confirm="do_calendar_confirm"
    ></van-calendar>


  </div>
</template>

<script>

import {agentOrderList} from "../../../../requests/agent";
import util from '@/utils/index'

var $this
export default {
  name: "agent_income_container",
  components: {},
  data() {
    return {
      filter_list: [
        {
          id: 1,
          name: "全部"
        },
        {
          id: 2,
          name: "今日",
          start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime() / 1000),
          end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime() / 1000)
        },
        {
          id: 3,
          name: "昨日",
          start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000).getTime() / 1000),
          end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 1000).getTime() / 1000)
        },
        {
          id: 4,
          name: "近七日",
          start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 60 * 60 * 1000).getTime() / 1000),
          end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime() / 1000)
        }
      ],
      filter_action: 1,
      order_counts: 0,
      order_list: [],
      calendar_show: false,
      start_time: "",
      end_time: "",
      filter_date: "",
      //最小日期应该为用户使用的第一个月开始
      min_date: false,
    }
  },
  methods: {
    //修改筛选时间
    change_filter($id) {
      $this.filter_date = ""
      $this.filter_action = $id
      $this.filter_date.forEach(($val, $index) => {
        if ($val['id'] == $id) {
          $this.get_order_list($val['start_time'], $val['end_time'])
        }
      })
    },
    //  自定义筛选时间
    show_datetime_picker() {
      $this.filter_action = 0
      $this.calendar_show = true
    },
    //  关闭日历选择
    do_calendar_close() {
      $this.calendar_show = false
    },
    formatDate(date) {
      date = new Date(date);
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    //  选择日历后
    do_calendar_confirm($event) {
      let [start, end] = $event.mp.detail;
      $this.filter_date = $this.formatDate(start) + '-' + $this.formatDate(end)
      $this.start_time = Math.round(new Date(start).getTime() / 1000)
      $this.end_time = Math.round(new Date(end).getTime() / 1000)
      $this.get_order_list($this.start_time, $this.end_time)
      $this.calendar_show = false
    },
    //  跳转订单详情
    to_detail($id) {
      mpvue.navigateTo({
        url: "/pages/agent/extend/detail/main?sn=" + $id
      })
    },
    //获取订单列表
    get_order_list($start_time, $end_time) {
      let $params = {}
      if ($start_time && $end_time) {
        $params['start_time'] = $start_time
        $params['end_time'] = $end_time
      }
      agentOrderList($params).then((res) => {
        let $data = res.data
        let $result = $data.data;
        $this.order_counts = $result.count;
        let $list = $result.list;
        $list.forEach(($val, $index) => {
          $list[$index]['create_time'] = util.formatTime($val['create_time'])
        })
        $this.order_list = $list
      })
    }
  },
  mounted() {
    $this.min_date = new Date(2020, 1, 1).getTime()
  },
  created() {
    $this = this
  }
}
</script>

<style scoped>
@import "index.css";
</style>