会员等级

src/views/purseManage/incomeOverview.vue

 <template>
 	<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
 		<div>
+			<!-- 筛选 -->
 			<div class="filter-container" ref="filter-container">
 				<el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
 					<el-row>
-						<el-col :span="5">
-							<el-form-item label="姓名">
-								<el-input v-model="listQuery.username" placeholder="请输入姓名"></el-input>
-							</el-form-item>
-						</el-col>
-						<el-col :span="5">
-							<el-form-item label="手机号">
-								<el-input v-model.number="listQuery.phone" placeholder="请输入手机号"></el-input>
-							</el-form-item>
+						<el-col :span="10">
+							<el-input v-model="listQuery.username" placeholder="请输入姓名" style="width:200px"></el-input>
+							<el-input v-model.number="listQuery.phone" placeholder="请输入手机号" style="width:200px"></el-input>
 						</el-col>
+
 						<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
 						<el-button class="filter-item" type="primary" v-waves icon="search" @click="clearFilter">清除搜索</el-button>
 					</el-row>
 				</el-form>
 			</div>
+			<!-- 表格 -->
 			<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
 				<el-table-column width="150" align="center" label="姓名" type="index">
 					<template scope="scope">
@@ -32,11 +29,17 @@
 					</template>
 				</el-table-column>
 
+				<el-table-column width="250" align="center" label="身份/公司">
+					<template scope="scope">
+						<span>{{scope.row.phone}}</span>
+					</template>
+				</el-table-column>
+
 				<!-- <el-table-column width="200" align="center" label="佣金比例">
 					<template scope="scope">
 						<span>{{scope.row.commissionRate+'%'}}</span>
 					</template>
-				</el-table-column> -->
+				</el-table-column>-->
 
 				<el-table-column width="200" align="center" label="总收益">
 					<template scope="scope">
@@ -50,7 +53,6 @@
 					</template>
 				</el-table-column>
 
-
 				<el-table-column align="center" label="总提现">
 					<template scope="scope">
 						<span>{{scope.row.withdrawals}}</span>
@@ -67,21 +69,39 @@
 						<span>{{scope.row.unbooked}}</span>
 					</template>
 				</el-table-column>
+				<el-table-column align="center" label="下级">
+					<template scope="scope">
+						<el-button
+							size="small"
+							class="el-button el-button--text el-button--small"
+							@click="subordinate(scope.row)"
+						>{{scope.row.isFrozen}}</el-button>
+					</template>
+				</el-table-column>
 				<!-- <el-table-column align="center" label="当前余额">
 					<template scope="scope">
 						<span>{{scope.row.balance}}</span>
 					</template>
-				</el-table-column> -->
-				<!-- <el-table-column align="center" label="操作" fixed="right">
-					<template scope="scope">
+				</el-table-column>-->
+				<el-table-column align="center" label="操作" fixed="right">
+					<!-- <template scope="scope">
 						<el-button
 							size="small"
 							class="el-button el-button--text el-button--small"
 							@click="deposit(scope.row)"
 						>{{scope.row.isFrozen == 0 ? '禁止提现' : '允许提现'}}</el-button>
+					</template>-->
+					<template scope="scope">
+						<el-button
+							size="small"
+							class="el-button el-button--text el-button--small"
+							@click="detailed(scope.row)"
+						>收益明细</el-button>
 					</template>
-				</el-table-column> -->
+				</el-table-column>
 			</el-table>
+
+			<!-- 分页 -->
 			<div v-show="!listLoading" class="pagination-container">
 				<el-pagination
 					@size-change="handleSizeChange"
@@ -93,6 +113,56 @@
 					:total="total"
 				></el-pagination>
 			</div>
+
+			<!-- 下级弹窗 -->
+			<el-dialog
+				:title="popTitle"
+				:visible.sync="nextListPop"
+				border
+				highlight-current-row
+				style="width:100%"
+			>
+				<el-table :data="nextList" v-if="popTitle == '下级列表'">
+					<el-table-column type="index" width="50"></el-table-column>
+					<el-table-column align="center" label="头像/用户名">
+						<template scope="scope">
+							<span>{{scope.row.unbooked}}</span>
+						</template>
+					</el-table-column>
+					<el-table-column align="center" label="总收益">
+						<template scope="scope">
+							<span>{{scope.row.unbooked}}</span>
+						</template>
+					</el-table-column>
+				</el-table>
+				<el-table :data="nextList" v-else>
+					<el-table-column align="center" label="成交时间/到账时间">
+						<template scope="scope">
+							<span>{{scope.row.unbooked}}</span>
+						</template>
+					</el-table-column>
+					<el-table-column align="center" label="下级及成交金额">
+						<template scope="scope">
+							<span>{{scope.row.unbooked}}</span>
+						</template>
+					</el-table-column>
+					<el-table-column align="center" label="收益">
+						<template scope="scope">
+							<span>{{scope.row.unbooked}}</span>
+						</template>
+					</el-table-column>
+					<el-table-column align="center" label="状态">
+						<template scope="scope">
+							<span>{{scope.row.unbooked}}</span>
+						</template>
+					</el-table-column>
+					<el-table-column align="center" label="订单号">
+						<template scope="scope">
+							<span>{{scope.row.unbooked}}</span>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-dialog>
 		</div>
 	</div>
 </template>
@@ -140,7 +210,10 @@ export default {
 				username: '' //姓名
 			},
 			inline: true,
-			tableKey: 0
+			tableKey: 0,
+			nextListPop: true, //下级列表弹窗
+			nextList: [], //下级列表弹窗数据
+			popTitle: '收益明细'
 		}
 	},
 	created() {
@@ -150,9 +223,17 @@ export default {
 		...mapGetters(['elements'])
 	},
 	methods: {
+		//下级
+		subordinate(row) {
+			this.popTitle = '下级列表'
+		},
+		//收益明细
+		detailed(row) {
+			this.popTitle = '收益明细'
+		},
 		//清除搜索
-		clearFilter(){
-			this.listQuery.username = this.listQuery.phone = null;
+		clearFilter() {
+			this.listQuery.username = this.listQuery.phone = null
 			this.getList()
 		},
 		//提现