index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams"  :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="用户信息" prop="userInfo">
          <el-input v-model="queryParams.userInfo" placeholder="请输入姓名、手机号" clearable style="width: 240px" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="注册时间" >
          <el-date-picker v-model="createdTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width:230px"></el-date-picker>        
        </el-form-item> 
        <el-form-item label="购买记录" >
          <el-select v-model="queryParams.buyRecords" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>      
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['system:customer:query']">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>            
        </el-form-item>
        </el-form>       

        <el-table v-loading="loading" :data="customerList"> 
          <el-table-column label="用户" align="center"  prop="userName" >
            <template slot-scope="scope">
              <a  myattr="mcv" v-hasPermi="['system:customer:view']">
                <span @click="getDetial(scope.row)" style="color: blue"> {{ scope.row.userName }}</span>
              </a>              
            </template>
          </el-table-column>
          <el-table-column label="手机号" align="center" prop="phoneNumber"/>
          <el-table-column label="订单量" align="center" prop="orderCount"/>
          <el-table-column label="总金额" align="center" prop="amount"/>
          <el-table-column label="已取消" align="center" prop="cancelCount"/>
          <el-table-column label="取消金额" align="center" prop="cancelAmount"/>
          <el-table-column label="已退款" align="center" prop="refundCount"/>
          <el-table-column label="退款金额" align="center"  prop="refundAmount"/>   
          <el-table-column label="最近订单时间" align="center"  prop="lastOrderDate"/> 
          <el-table-column label="注册时间" align="center"  prop="createDate"/>      
          <el-table-column label="来源" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.source=='3'">小程序</span>
              <span v-if="scope.row.source=='12'">点单屏</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <!-- 用户详情页 -->
    <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
      <div style="display: flex;align-items: center;">
        <div>
          <img v-bind:src="img" class="img-circle img-lg" />
        </div>
        <div style="margin-left: 20px;">
          <div style="margin-bottom: 20px;">
            <span>{{userName}}</span>
          </div>
          <div>
            <span>{{phoneNumber}}</span>
          </div>
        </div>
        <div style="margin-left: 50px;">
          <div style="margin-bottom: 20px;">共{{orderCount}}单,消费{{amount}}元</div>
          <div>地址</div>
        </div> 
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="正常订单" name="first">
          <order-table :orderList="orderList" :orderTotal="orderTotal" :orderLoading="orderLoading" @getOrderList="getOrderList"></order-table>      
        </el-tab-pane>
        <el-tab-pane label="取消订单" name="second">
          <order-table :orderList="orderList" :orderTotal="orderTotal" :orderLoading="orderLoading" @getOrderList="getOrderList"></order-table> 
        </el-tab-pane>
        <el-tab-pane label="退款订单" name="third">
         <order-table :orderList="orderList" :orderTotal="orderTotal" :orderLoading="orderLoading" @getOrderList="getOrderList"></order-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listCustomer,getCustomer} from "@/api/system/customer";
import OrderTable from "./orderTable.vue";
export default {
  name: "Customer",  
  components: { OrderTable },  
  data() {
    return {
      img:"/static/img/profile.473f5971.jpg",
      createdTime:[],
      // 遮罩层
      loading: true,  
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 人员表格数据
      customerList: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,      
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userInfo:null,
        createAtStart: null,
        createAtEnd: null,
        buyRecords: null
      },
      options:[
        {value:"",label:"全部"},
        {value:"1",label:"有购买"},
        {value:"2",label:"无购买"},
        {value:"3",label:"有复购"},
      ],
      activeName:"first" ,
      customerId:null,
      orderList:[],
      orderTotal:0,
      tag:"",
      orderPageNum:1,
      orderPageSize: 10,
      userName:"",
      phoneNumber:"",
      orderCount:"",
      amount:"",
      orderLoading: true,
      
    };
  },
  created() {
    this.getList();   
  },
  methods: {
    handleClick(){
      if(this.activeName=="first"){
        this.tag="1";
      }else if(this.activeName=="second"){
        this.tag="2";
      }else if(this.activeName=="third"){
        this.tag="3";
      }
      this.orderPageNum=1;
      this.pageSize=10;
      this.orderLoading=true;
      this.getOrderList(this.orderPageNum,this.pageSize,this.customerId,this.tag);
    },
    getOrderList(pageNum,pageSize,id,tag) {
      getCustomer({'id':id,'status':tag,'pageNum':pageNum,'pageSize':pageSize}).then((response) => {
        if(response.code=="200"){
          this.orderList = response.rows;
          this.orderTotal = response.total;
          this.orderLoading=false;
        }        
      });
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listCustomer(this.queryParams).then((response) => {
        if(response.code=="200"){
          this.customerList = response.rows;
          this.total = response.total;
          this.loading = false;
        }        
      });
    },
    getDetial(row){
      this.orderLoading=true;
      this.customerId=row.id;
      this.userName=row.userName;
      this.phoneNumber=row.phoneNumber;
      this.amount=row.amount;
      this.orderCount=row.orderCount;
      this.open=true;
      this.title="用户信息";
      this.orderPageNum=1;
      this.pageSize=10;
      this.activeName="first";
      this.getOrderList(this.orderPageNum,this.pageSize,this.customerId,'1');
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.createAtStart=null;
      this.queryParams.createAtEnd=null;
      if(this.createdTime!=null && this.createdTime.length>0){
        this.queryParams.createAtStart=this.createdTime[0];
        this.queryParams.createAtEnd=this.createdTime[1];
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.userInfo=null;
      this.queryParams.buyRecords=null;
      this.createdTime=[];
      this.handleQuery();
    },


    
  },
};
</script>