<template> <div class="admin-refresh"> <el-form ref="searchFrom" :model="searchFrom" style="padding-top:20px;" label-width="80px" inline > <el-form-item label="主账户ID"> <el-input v-model="searchFrom.user_id"></el-input> </el-form-item> <el-form-item label="子账户ID"> <el-input v-model="searchFrom.sub_user_id"></el-input> </el-form-item> <el-form-item> <el-button type="primary" plain @click="getUser">搜索</el-button> </el-form-item> </el-form> <el-table :data="userList" :style="{width: width+'px'}"> <el-table-column className="f-c" label="主账户"> <template slot-scope="scope"> <img class="avatar" :src="scope.row.user_avatar" /> {{scope.row.user_nickname}}(ID:{{scope.row.user_id}}) </template> </el-table-column> <el-table-column className="f-c" label="子账户"> <template slot-scope="scope"> <img class="avatar" :src="scope.row.sub_user_avatar" /> {{scope.row.sub_user_nickname}}(ID:{{scope.row.sub_user_id}}) </template> </el-table-column> <el-table-column prop="created_at" label="绑定时间"></el-table-column> <el-table-column prop="unbind_at" label="解绑时间"> <template slot-scope="scope" >{{scope.row.unbind_at=='0000-00-00 00:00:00'?'未解绑':scope.row.unbind_at}}</template> </el-table-column> </el-table> <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange" /> </div> </template> <script> import { getSubAccountListApi, getOldListApi } from "../../service/api"; import { INTEGRALTYPE, INTEGRALFUN } from "../../util/wordbook"; import page from "../framework/page"; export default { name: "index", components: { page }, data() { let is_addOption = []; for (let k in INTEGRALTYPE) { is_addOption.push({ id: k, value: INTEGRALTYPE[k] }); } let sourceOption = []; for (let j in INTEGRALFUN) { sourceOption.push({ id: j, value: INTEGRALFUN[j] }); } return { width: 0, searchFrom: { user_id: "", sub_user_id: "" }, userList: [], total: 0, nowPage: 1, limit: 10, showDetail: false }; }, mounted() { this.getUser(); this.width = window.innerWidth - 200; }, filters: { INTEGRALTYPE(value) { return INTEGRALTYPE[value]; }, INTEGRALFUN(value) { return INTEGRALFUN[value]; } }, methods: { onPageChange(val) { this.nowPage = val; this.getUser(); }, onSizeChange(val) { this.limit = val; this.nowPage = 1; this.getUser(); }, getUser() { let json = { page: this.nowPage, limit: this.limit }; if (this.searchFrom.user_id) { json.user_id = this.searchFrom.user_id; } if (this.searchFrom.sub_user_id) { json.sub_user_id = this.searchFrom.sub_user_id; } getSubAccountListApi(json).then(res => { this.userList = res.list; this.total = res.total; }); } } }; </script> <style scoped lang="less"> @import "../../util/public"; .avatar { width: 50px; min-width: 50px; height: 50px; margin-right: 5px; border-radius: 50%; } </style> <style> .f-c > .cell { display: flex !important; flex-flow: row; justify-content: flex-start; align-items: center; } </style>