yunyubang-web/src/views/reports/userOrder.vue

<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="会员订单统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div class="selector">
            <div class="selector-item">
              <div class="selector-item__label">关键词：</div>
              <Input v-model="select.keywords" clearable style="width: 200px;" placeholder="关键字搜索" />
            </div>
            <div class="selector-item">
              <div class="selector-item__label">区域：</div>
              <Select clearable v-model="select.area" style="width: 130px;" placeholder="选择区域搜索">
                <Option v-for="item in areas" :value="item">{{item}}</Option>
              </Select>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">建卡医院：</div>
              <Input clearable v-model="select.hospital" style="width: 200px;" placeholder="建卡医院搜索" />
            </div>
            <div class="selector-item">
              <el-checkbox v-model="select.is_phone">存在手机号</el-checkbox>
            </div>
            <div class="selector-item">
              <Button type="primary" @click="doSearch">查询</Button>
            </div>
            <div class="selector-item">
              <Button type="primary" @click="exportExel">导出</Button>
            </div>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :total="total" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange" :list="list"
      :table-item="table">
      <template slot="btns">
        <div></div>
      </template>

      </xy-table>

  </div>
</template>

<script>
  import {
    index,
    destroy
  } from '@/api/member'
  import {
    parseTime
  } from "@/utils"
  import {
    download
  } from '@/utils/downloadRequest'
  import {
    Message
  } from 'element-ui'
  export default {
    components: {
    },
    data() {
      return {
        select: {
          pageSize: 10,
          pageIndex: 1,
          keywords: "",
          area: "",
          hospital: "",
          is_phone: true
        },
        areas: ["吴中区", "吴江区", "姑苏区", "工业园区", "高新区", "相城区", "昆山", "常熟", "张家港", "太仓"],

        total: 0,
        list: [],
        table: [{
            prop: 'name',
            label: '姓名',
            width: 180,
            sortable: false,
            fixed: 'left'
          },
          {
            prop: 'phone',
            label: '电话',
            width: 220
          },
          {
            prop: 'order_count',
            label: '累计下单数',
            width: 180,
            customFn: (row) => {
              return ( <span
              style={
                {
                  cursor: 'pointer',
                  color: "blue",
                  textDecoration: "underline"
                }
              }
              on = {
                {
                  ['click']: (e) => {
                    if(row.order_count<1){
                      return
                    }
                    this.$router.push({
                        path:  `/order/orderList?user_id=${row.id}`,
                    })
                  }
                }
              }
              > {
                  row.order_count
                } </span>)
              }
          },
          {
            prop: 'order_sum',
            label: '累计下单金额',
            width: 180,
            align:"right",
            customFn:(row)=>{
              return(
                <span>{row.order_sum?row.order_sum:'0.00'}</span>
              )
            }
          },
          {
            prop: 'due_date',
            label: '预产期',
            width: 200
          },
          {
            prop: 'area',
            label: '所属区域',
            width: 160,
          },
          {
            prop: 'address',
            label: '住址',
            align: 'left',
            minWidth: 300
          },
          {
            prop: 'hospital',
            label: '建卡医院',
            width: 200
          },
          {
            prop: 'promotion',
            label: '推广人员',
            width: 140,
            customFn: (row) => {
              return ( < Tag color = {
                  row.promotion == 1 ? 'success' : 'error'
                } > {
                  row.promotion == 1 ? '是' : '否'
                } </Tag>)
              }
            },
            {
              prop: 'created_at',
              label: '注册日期',
              width: 200,
              fixed:'right',
              formatter: (cell, data, value) => {
                return parseTime(new Date(value), '{y}-{m}-{d}')
              }
            }
          ]
        }
      },
      methods: {
          pageSizeChange(e) {

            this.select.pageSize = e
            this.doSearch();
          },
          doSearch() {
            this.select.pageIndex = 1
            this.getMembers()
          },
          pageChange(e) {
            this.select.pageIndex = e
            this.getMembers()
          },

          async getMembers() {
            const res = await index({
              page_size: this.select.pageSize,
              page: this.select.pageIndex,
              keyword: this.select.keywords,
              hospital: this.select.hospital,
              area: this.select.area,
              is_phone: this.select.is_phone ? 1 : ""
            })
            this.total = res.total
            this.list = res.data
          },

          exportExel() {
            download('/api/admin/member/index', 'get', {
              is_export: 1,
              keyword: this.select.keywords,
              hospital: this.select.hospital,
              area: this.select.area,
              is_phone: this.select.is_phone ? 1 : ""
            }, '用户列表.xlsx')
          }
        },
        mounted() {
          this.getMembers()
        }

    }
</script>

<style scoped lang="scss">
  .selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;

    &-item {
      display: flex;
      align-items: center;
      align-content: center;

      margin-top: 6px;
      margin-right: 10px;

      &__label {
        word-break: keep-all;
      }
    }
  }
</style>