<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>