program/src/pages/agent/customer/index.vue

<template>
  <div id="agent_customer_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">
      <van-row>
        <van-col span="8" v-for="(type,index) in customer_types" :key="index"
                 @click="toggle_type(type.id)"
        >
          <div class="bg " :class="[type.id == customer_type_action?'bg_action':'bg_normal']">
            <view class="padding-top-lg">
              <text>{{ type.name }}</text>
            </view>
          </div>
        </van-col>
      </van-row>
      <view>


      </view>
    </div>

    <!--    小title-->
    <div class="line_container padding">
      <div>
        <text class="text-sm text-gray">共{{ customer_count }}个客户</text>
        <van-divider customStyle="border:.1px solid;margin:0px;"/>
      </div>
    </div>
    <!--  列表-->
    <view class="solid-bottom padding-lr-sm" v-for="(user,index) in user_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-sm">{{ user.user_name }}</text>
          </view>
          <view>
            <text class="text-normal">最后下单时间&emsp;</text>
            <text class="text-gray text-sm">2018/09/24 10:44</text>
          </view>
        </view>

        <view slot="num" class="flex justify-end">
          <view>
            <text class="text-normal text-sm margin-right-lg">成交额</text>
            <text class="text-xxl">{{ user.price_total }}</text>
          </view>
        </view>
        <view slot="price">
          <view>
            <text class="text-normal text-sm">订单数 {{ user.count }}</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 {agentUserList} from "../../../requests/agent";

var $this
export default {
  name: "agent_customer_container",
  components: {},
  data() {
    return {
      //筛选列表
      filter_list: [
        {
          id: 1,
          name: "全部"
        },
        {
          id: 2,
          name: "今日"
        },
        {
          id: 3,
          name: "昨日"
        },
        {
          id: 4,
          name: "近七日"
        }
      ],
      // 筛选选中项
      filter_action: 1,
      userinfo: {
        //累计收益
        profit: 16824.50,
        //含待结算
        unsettle_account: 65.00,
      },
      //客户数量
      customer_count: 3,
      calendar_show: false,
      start_time: "",
      end_time: "",
      filter_date: "",
      //最小日期应该为用户使用的第一个月开始
      min_date: false,
      //客户类型
      customer_types: [
        {
          id: 1,
          name: "全部客户"
        },
        {
          id: 2,
          name: "一级客户"
        },
        {
          id: 3,
          name: "二级客户"
        },
      ],
      user_list: [],
      customer_type_action: 1
    }
  },
  methods: {
    //修改筛选时间
    change_filter($id) {
      $this.filter_date = ""
      $this.filter_action = $id
    },
    //  自定义筛选时间
    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.calendar_show = false
    },
    //  切换客户类型筛选
    toggle_type($id) {
      $this.customer_type_action = $id
      //根据类型获取用户列表
      $this.get_user_list($id - 1)
    },
    get_user_list($type) {
      let $params = {}
      if ($type) {
        $params['type'] = $type
      }
      agentUserList($params).then((res) => {
        let $data = res.data;
        $this.user_list = $data.data
        $this.customer_count = $this.user_list.length
      })
    }
  },
  mounted() {
    $this.min_date = new Date(2020, 1, 1).getTime()
  },
  created() {
    $this = this
  }
}
</script>

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