<template> <div class="app-container"> <div class="filter-container"> <el-form ref="query" :model="query" style="display: inline-block;"> <el-input v-model="query.mobile" placeholder="手机号" style="width: 200px;" class="filter-item" name="userskk" /> <el-input v-model="query.city" placeholder="地区" style="width: 200px;" class="filter-item" name="city" /> <el-select v-model="query.sex" placeholder="性别" clearable style="width: 90px" class="filter-item" @change="selectOneSex"> <el-option v-for="item in importanceOptions" :key="item.key" :label="item.val" :value="item.key" /> </el-select> <el-select v-model="query.state" placeholder="状态" clearable class="filter-item" style="width: 130px" @change="selectOneState"> <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.val" :value="item.key" /> </el-select> <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSubmit"> {{ $t('table.search') }} </el-button> </el-form> <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload"> {{ $t('table.export') }} </el-button> <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">OpenId</el-checkbox> </div> <el-table :key="tableKey" v-loading="loading" :data="list" border fit highlight-current-row> <el-table-column align="center" label="id" width="80"> <template slot-scope="scope"> <span>{{ scope.row.id }}</span> </template> </el-table-column> <el-table-column align="left" label="用户名称"> <template slot-scope="scope"> <el-image :src="scope.row.headimgurl" :preview-src-list="srcList" style="width:50px"></el-image> <a class="zl-nickname">{{ scope.row.nickname | handeNickname }}</a> </template> </el-table-column> <el-table-column v-if="showReviewer" align="center" label="openid" width="320"> <template slot-scope="scope"> <span style="color: #909399;" @click="handleCopy(scope.row.openid,$event)">{{ scope.row.openid }}</span> </template> </el-table-column> <el-table-column align="center" label="性别" width="150"> <template slot-scope="scope"> <span>{{ scope.row.sex | handeSex }}</span> </template> </el-table-column> <el-table-column align="center" label="手机号" width="200"> <template slot-scope="scope"> <span>{{ scope.row.mobile }}</span> </template> </el-table-column> <el-table-column align="center" label="地区" width="220"> <template slot-scope="scope"> <span>{{ scope.row.country }}{{ scope.row.province }}{{ scope.row.city }}</span> </template> </el-table-column> <el-table-column align="center" label="创建时间" width="200"> <template slot-scope="scope"> <span>{{ scope.row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span> </template> </el-table-column> <el-table-column align="center" label="状态" width="170"> <template slot-scope="scope"> <span :style="{color:( scope.row.state==1 ? '#F56C6C' : '#67C23A' )}">{{ scope.row.state==1 ? '禁用' : '正常' }}</span> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getList" /> </div> </template> <script> import UserResource from '@/api/wxuser'; import clip from '@/utils/clipboard'; import Pagination from '@/components/Pagination'; // 分页 import { parseTime } from '@/utils'; import waves from '@/directive/waves'; // 水波纹效果 const Base64 = require('js-base64').Base64; const userResource = new UserResource(); export default { name: 'Wxuser', components: { Pagination }, directives: { waves }, filters: { handeNickname: function(value) { return Base64.decode(value); }, handeSex: function(value) { const sexes = [ '未知', '男', '女', ]; return sexes[value]; }, }, data() { return { total: 0, tableKey: 0, list: [], loading: true, showReviewer: false, query: { page: 1, limit: 10, mobile: undefined, sex: undefined, state: undefined, city: undefined, }, importanceOptions: [{ 'key': 0, 'val': '未知', }, { 'key': 1, 'val': '男', }, { 'key': 2, 'val': '女', }], calendarTypeOptions: [{ 'key': 1, 'val': '禁用', }, { 'key': 2, 'val': '启用', }], srcList: [], downloadLoading: false, }; }, created() { this.getList(); }, methods: { async getList() { const { limit, page } = this.query; this.loading = true; const { data } = await userResource.list(this.query); var Wxuser = data.Wxuser; this.list = Wxuser; this.list.forEach((element, index) => { element['index'] = (page - 1) * limit + index + 1; }); for (var item of Wxuser) { this.srcList.push(item['headimgurl']); } this.total = data.cont; this.loading = false; }, handleCopy(text, event) { clip(text, event); }, handleDownload() { this.downloadLoading = true; import('@/vendor/Export2Excel').then(excel => { const tHeader = ['id', 'openid', 'nickname', 'sex', 'mobile', 'created_at']; const filterVal = ['id', 'openid', 'nickname', 'sex', 'mobile', 'created_at']; const data = this.formatJson(filterVal, this.list); excel.export_json_to_excel({ header: tHeader, data, filename: '微信用户', }); this.downloadLoading = false; }); }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => { if (j === 'created_at') { return parseTime(v[j]); } else if (j === 'sex') { const sexes = [ '未知', '男', '女', ]; return sexes[v[j]]; } else { return v[j]; } })); }, async handleSubmit() { const { limit, page } = this.query; this.loading = true; const { data } = await userResource.fetchArticle(this.query); var Wxuser = data.Wxuser; this.list = Wxuser; this.list.forEach((element, index) => { element['index'] = (page - 1) * limit + index + 1; }); for (var item of Wxuser) { this.srcList.push(item['headimgurl']); } this.total = data.cont; this.loading = false; }, selectOneSex(event, item) { if (event === '') { this.query.sex = undefined; } }, selectOneState(event, item) { if (event === '') { this.query.state = undefined; } }, }, }; </script> <style> .zl-nickname{ position: absolute; line-height: 50px; margin-left: 10px; } </style>