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: 100px;" placeholder="关键字搜索" />
            </div>
            <div class="selector-item">
              <div class="selector-item__label">区域：</div>
              <Select clearable v-model="select.area" style="width: 100px;" placeholder="选择区域搜索">
                <Option v-for="item in areas" :value="item.value">{{item.value}}</Option>
              </Select>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">建卡医院：</div>
              <Select clearable v-model="select.hospital" style="width: 100px;" placeholder="选择建卡医院搜索">
                <Option v-for="item in arrHospital" :value="item.value">{{item.value}}</Option>
              </Select>
              <!-- <Input clearable v-model="select.hospital" style="width: 100px;" placeholder="建卡医院搜索" /> -->
            </div>
            <div class="selector-item">
              <el-checkbox v-model="select.is_phone">存在手机号</el-checkbox>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">支付时间：</div>
              <el-date-picker
                    v-model="dateRange"
                    @change='dateChange'
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">核销时间：</div>
              <el-date-picker
                    v-model="dateRangeCancel"
                    @change='dateChangeCancel'
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">注册时间：</div>
              <el-date-picker
                    v-model="dateRangeReg"
                    @change='dateChangeReg'
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">核销数</div>
              <Input clearable v-model="select.write_off" style="width: 50px;margin:0 3px" placeholder="" />
              <div class="selector-item__label">及以上</div>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">下单数</div>
              <Input clearable v-model="select.order_count" style="width: 50px;margin:0 3px" placeholder="" />
              <div class="selector-item__label">及以上</div>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">活动情况：</div>
              <Select clearable v-model="select.active_member" style="width: 100px;" placeholder="选择建卡医院搜索">
                <Option v-for="item in activeStatus" :value="item.id">{{item.label}}</Option>
              </Select>
            </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 {getparameteritem} from '@/api/system/dictionary.js'
  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: false,
          create_time:'',
          over_time:'',
          finish_start_date:'',
          finish_end_date:'',
          register_start_date:'',
          register_end_date:'',
          order_count:'',
          write_off:'',
          total_related_person:'',
          start_date:'',
          end_date:'',
          product_pid:'',
          product_type_list:[],
          active_member:''
        },
        arrHospital: [],
        activeStatus:[{
          id:'',
          label:'全部'
        },{
          id:1,
          label:'活动下单'
        },{
          id:2,
          label:'产品、活动下单'
        }],
        dateRange:[],
        dateRangeCancel:[],
        dateRangeReg:[],
        areas: [],
        statusNames:[{
        	id:0,
        	name:'申请取消'
        },{
        	id:1,
        	name:'待核销'
        },{
        	id:2,
        	name:'已取消'
        },{
        	id:3,
        	name:'已核销'
        }],
        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
                    }
                    let url =`/admin/#/order/orderList?user_id=${row.id}`
                    let seeBuy = window.open(url, 'seeBuy','location=0')
                    // this.$router.push({
                    //     path:  `/order/orderList?user_id=${row.id}`,
                    // })
                  }
                }
              }
              > {
                  row.order_count
                } </span>)
              }
          },
          {
            prop: 'order_finish',
            label: '核销数',
            width: 180,
            align:"center"
          },
          {
            prop: 'order_sum',
            label: '累计下单金额',
            width: 180,
            align:"right",
            customFn:(row)=>{
              return(
                <span>{row.order_sum?row.order_sum:'0.00'}</span>
              )
            }
          },
          {
            prop: 'order',
            label: '下单详情',
            width: 480,
            align:"left",
            customFn:(row)=>{
              if(row.order.length>0){
                return row.order.map((k,index)=> {
                    return (<div style={{'cursor':'pointer','padding':'1px'}}
                    on = {
                      {
                        ['click']: (e) => {
                          let url =`/admin/#/order/orderList?order_item_id=${k.items.id}`
                          let seeBuy = window.open(url, 'seeBuy','location=0')
                          // this.$router.push({
                          //     path:  `/order/orderList?order_item_id=${k.items.id}`,
                          // })
                        }
                      }
                    }>
                      <div>
                        <span style={{'color':k.state=='finished'?'red':'#000'}}>{index+1}、{k.items?.state_name}</span>-
                        <span>{k.items.updated_at}</span>-
                        <span>{ k.order_name}</span>
                      </div>
                    </div>)
                })
              }

            }
          },
          {
            prop: 'active',
            label: '活动详情',
            width: 480,
            align:"left",
            customFn:(row)=>{
              if(row.order.length>0){
                return row.active.map((k,index)=> {
                  for(let s of this.statusNames){
                    if(s.id===k.state){
                      k.state_name = s.name
                    }
                  }
                    return (<div style={{'padding':'1px'}}>
                      <div>
                        <span style={{'color':k.state==3?'red':'#000'}}>{index+1}、{k.state_name}</span>-
                        <span>{ k.active_name}</span>
                      </div>
                    </div>)
                })
              }

            }
          },
          {
            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: {

          dateChange(e){
            if(e){
              this.select.create_time = this.dateRange[0]
              this.select.over_time = this.dateRange[1]
            }else{
              this.select.create_time = ''
              this.select.over_time = ''
            }
          },
          dateChangeCancel(e){
            if(e){
              this.select.finish_start_date = this.dateRangeCancel[0]
              this.select.finish_end_date = this.dateRangeCancel[1]
            }else{
              this.select.finish_start_date = ''
              this.select.finish_end_date = ''
            }
          },
          dateChangeReg(e){
            if(e){
              this.select.register_start_date = this.dateRangeReg[0]
              this.select.register_end_date = this.dateRangeReg[1]
            }else{
              this.select.register_start_date = ''
              this.select.register_end_date = ''
            }
          },
          pageSizeChange(e) {

            this.select.pageSize = e
            this.doSearch();
          },
          doSearch() {
            this.select.pageIndex = 1
            this.getMembers()
          },
          pageChange(e) {
            this.select.pageIndex = e
            this.getMembers()
          },
          async getArea(){
            const res = await getparameteritem('area')
            this.areas = res.detail
          },
          async getHospital(){
            const res = await getparameteritem('hospital')
            this.arrHospital = res.detail
          },

          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 : "",
              create_time:this.select.create_time,
              finish_start_date:this.select.finish_start_date,
              finish_end_date:this.select.finish_end_date,
              register_start_date:this.select.register_start_date,
              register_end_date:this.select.register_end_date,
              over_time:this.select.over_time,
              write_off:this.select.write_off,
              order_count:this.select.order_count,
              total_related_person:this.select.total_related_person,
              start_date:this.select.start_date,
              end_date:this.select.end_date,
              product_pid:this.select.product_pid,
              product_type_list:this.select.product_type_list,
              active_member:this.select.active_member
            })
            this.total = res.total
            this.list = res.data
          },

          exportExel() {
            download('/api/admin/member/index', 'get', {
              is_export: 2,
              keyword: this.select.keywords,
              hospital: this.select.hospital,
              area: this.select.area,
              is_phone: this.select.is_phone ? 1 : "",
              create_time:this.select.create_time,
              over_time:this.select.over_time,
              finish_start_date:this.select.finish_start_date,
              finish_end_date:this.select.finish_end_date,
              register_start_date:this.select.register_start_date,
              register_end_date:this.select.register_end_date,
              write_off:this.select.write_off,
              order_count:this.select.order_count,
              total_related_person:this.select.total_related_person,
              start_date:this.select.start_date,
              end_date:this.select.end_date,
              product_pid:this.select.product_pid,
              product_type_list:this.select.product_type_list,
              active_member:this.select.active_member

            }, '用户列表.xlsx')
          },
          reloadUser(){
            console.log("this.$route",this.$route)
            // return
            if(this.$route.query?.total_related_person){
              this.select.total_related_person = this.$route.query.total_related_person
            }
            if(this.$route.query?.start_date){
              this.select.start_date = this.$route.query.start_date
            }
            if(this.$route.query?.end_date){
              this.select.end_date = this.$route.query.end_date
            }
            if(this.$route.query?.product_pid){
              this.select.product_pid = this.$route.query.product_pid
            }
            if(this.$route.query?.product_type_list){
              this.select.product_type_list = this.$route.query.product_type_list.split(',')
            }

            this.getMembers()
          }

        },
        mounted() {
          this.getArea()
          this.getHospital()
          this.reloadUser()
        },
        watch:{
          '$route.query.total_related_person'(newval){
            if(newval){
              this.reloadUser()
            }
          },
          '$route.query.start_date'(newval){
            if(newval){
              this.reloadUser()
            }
          },
          '$route.query.end_date'(newval){
            if(newval){
              this.reloadUser()
            }
          },
          '$route.query.product_pid'(newval){
            if(newval){
              this.reloadUser()
            }
          },
          '$route.query.product_type_list'(newval){
            if(newval){
              console.log("newval",newval)
              this.reloadUser()
            }
          }

        }

    }
</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;
      }
    }
  }
  .el-range-editor.el-input__inner{
    height:32px;
    width:250px;
  }
  .el-date-editor{
    ::v-deep .el-range__icon{
      line-height: 26px!important;
    }
    ::v-deep .el-range-separator{
      line-height: 26px!important;
    }
    ::v-deep .el-range__close-icon{
      line-height: 26px!important;
    }
  }
</style>