|
|
@@ -0,0 +1,513 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <Card :bordered="false" dis-hover class="ivu-mt listbox">
|
|
|
+ <Form ref="userFrom" :model="userFrom" :label-width="labelWidth" :label-position="labelPosition"
|
|
|
+ @submit.native.prevent>
|
|
|
+ <Row :gutter="16">
|
|
|
+ <Col span="18">
|
|
|
+ <Col span="24">
|
|
|
+ <Col v-bind="grid">
|
|
|
+ <FormItem label="用户搜索：" label-for="nickname">
|
|
|
+ <Input v-model="userFrom.nickname" placeholder="请输入用户" element-id="nickname" clearable>
|
|
|
+ <Select v-model="field_key" slot="prepend" style="width: 80px">
|
|
|
+ <Option value="all">全部</Option>
|
|
|
+ <Option value="uid">UID</Option>
|
|
|
+ <Option value="phone">手机号</Option>
|
|
|
+ <Option value="nickname">用户昵称</Option>
|
|
|
+ </Select>
|
|
|
+ </Input>
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ </Col>
|
|
|
+ </Col>
|
|
|
+ <Col span="6" class="ivu-text-right userFrom">
|
|
|
+ <FormItem>
|
|
|
+ <Button type="primary" icon="ios-search" label="default" class="mr15"
|
|
|
+ @click="userSearchs">搜索</Button>
|
|
|
+ <Button class="ResetSearch" @click="reset('userFrom')">重置</Button>
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Form>
|
|
|
+ <Divider dashed />
|
|
|
+ <Row type="flex" justify="space-between" class="mt20">
|
|
|
+ <Col span="24" class="userAlert" v-if="selectionList.length">
|
|
|
+ <Alert show-icon>
|
|
|
+ 已选择<i class="userI"> {{ selectionList.length }} </i>项</Alert>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Table :columns="columns" :data="userLists" class="mt25" ref="table" highlight-row :loading="loading"
|
|
|
+ no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果" @on-sort-change="sortChanged"
|
|
|
+ @on-select="handleSelectRow" @on-select-cancel="handleCancelRow" @on-select-all="handleSelectAll"
|
|
|
+ @on-select-all-cancel="handleSelectAll">
|
|
|
+ <template slot-scope="{ row, index }" slot="avatars">
|
|
|
+ <div class="tabBox_img" v-viewer>
|
|
|
+ <img v-lazy="row.avatar" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row, index }" slot="nickname">
|
|
|
+ <div class="acea-row">
|
|
|
+ <Icon type="md-male" v-show="row.sex === '男'" color="#2db7f5" size="15" class="mr5" />
|
|
|
+ <Icon type="md-female" v-show="row.sex === '女'" color="#ed4014" size="15" class="mr5" />
|
|
|
+ <div v-text="row.nickname"></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="row.is_del == 1" style="color: red">用户已注销</div>
|
|
|
+ <!-- <div v-show="row.vip_name" class="vipName">{{row.vip_name}}</div> -->
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row, index }" slot="isMember">
|
|
|
+ <div>{{ row.isMember ? '是' : '否' }}</div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row, index }" slot="action">
|
|
|
+ <a @click="edit(row)">编辑</a>
|
|
|
+ <Divider type="vertical" />
|
|
|
+ <Dropdown @on-click="changeMenu(row, $event, index)" :transfer="true">
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ 更多
|
|
|
+ <Icon type="ios-arrow-down"></Icon>
|
|
|
+ </a>
|
|
|
+ <DropdownMenu slot="list">
|
|
|
+ <DropdownItem name="1">账户详情</DropdownItem>
|
|
|
+ <DropdownItem name="2">积分余额</DropdownItem>
|
|
|
+ </DropdownMenu>
|
|
|
+ </Dropdown>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+ import {
|
|
|
+ userList,
|
|
|
+ getUserSaveForm,
|
|
|
+ getUserInfo,
|
|
|
+ editUser,
|
|
|
+ } from '@/api/user';
|
|
|
+ import {
|
|
|
+ agentSpreadApi
|
|
|
+ } from '@/api/agent';
|
|
|
+ import {
|
|
|
+ exportUserList
|
|
|
+ } from '@/api/export';
|
|
|
+ export default {
|
|
|
+ name: 'user_list',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataLabel: [],
|
|
|
+ selectDataLabel: [],
|
|
|
+ grid: {
|
|
|
+ xl: 8,
|
|
|
+ lg: 8,
|
|
|
+ md: 12,
|
|
|
+ sm: 24,
|
|
|
+ xs: 24,
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ total: 0,
|
|
|
+ userFrom: {
|
|
|
+ label_id: '',
|
|
|
+ user_type: '',
|
|
|
+ status: '',
|
|
|
+ sex: '',
|
|
|
+ is_promoter: '',
|
|
|
+ country: '',
|
|
|
+ isMember: '',
|
|
|
+ pay_count: '',
|
|
|
+ user_time_type: '',
|
|
|
+ user_time: '',
|
|
|
+ nickname: '',
|
|
|
+ province: '',
|
|
|
+ city: '',
|
|
|
+ page: 1,
|
|
|
+ limit: 15,
|
|
|
+ level: '',
|
|
|
+ group_id: '',
|
|
|
+ field_key: '',
|
|
|
+ },
|
|
|
+ field_key: '',
|
|
|
+ level: '',
|
|
|
+ group_id: '',
|
|
|
+ label_id: '',
|
|
|
+ user_time_type: '',
|
|
|
+ pay_count: '',
|
|
|
+ columns: [{
|
|
|
+ type: 'selection',
|
|
|
+ width: 60,
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'ID',
|
|
|
+ key: 'uid',
|
|
|
+ width: 80,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '头像',
|
|
|
+ slot: 'avatars',
|
|
|
+ minWidth: 60,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '姓名',
|
|
|
+ slot: 'nickname',
|
|
|
+ minWidth: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '付费会员',
|
|
|
+ slot: 'isMember',
|
|
|
+ minWidth: 90,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用户等级',
|
|
|
+ key: 'level',
|
|
|
+ minWidth: 90,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '分组',
|
|
|
+ key: 'group_id',
|
|
|
+ minWidth: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '手机号',
|
|
|
+ key: 'phone',
|
|
|
+ minWidth: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用户类型',
|
|
|
+ key: 'user_type',
|
|
|
+ minWidth: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '余额',
|
|
|
+ key: 'now_money',
|
|
|
+ sortable: 'custom',
|
|
|
+ minWidth: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ slot: 'action',
|
|
|
+ fixed: 'right',
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ userLists: [],
|
|
|
+ FromData: null,
|
|
|
+ selectionList: [],
|
|
|
+ selectedIds: new Set(), //选中合并项的id
|
|
|
+ ids: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState('media', ['isMobile']),
|
|
|
+ labelWidth() {
|
|
|
+ return this.isMobile ? undefined : 100;
|
|
|
+ },
|
|
|
+ labelPosition() {
|
|
|
+ return this.isMobile ? 'top' : 'right';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 操作
|
|
|
+ changeMenu(row, name, index) {
|
|
|
+ let uid = [];
|
|
|
+ uid.push(row.uid);
|
|
|
+ let uids = {
|
|
|
+ uids: uid
|
|
|
+ };
|
|
|
+ switch (name) {
|
|
|
+ case '1':
|
|
|
+ break;
|
|
|
+ case '2':
|
|
|
+ this.getOtherFrom(row.uid);
|
|
|
+ break;
|
|
|
+ case '3':
|
|
|
+ break;
|
|
|
+ case '4':
|
|
|
+ this.del(row, '清除 【 ' + row.nickname + ' 】的会员等级', index, 'user');
|
|
|
+ break;
|
|
|
+ case '5':
|
|
|
+ break;
|
|
|
+ case '6':
|
|
|
+ break;
|
|
|
+ case '7':
|
|
|
+ this.editS(row);
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ this.del(row, '解除【 ' + row.nickname + ' 】的上级推广人', index, 'tuiguang');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ del(row, tit, num, name) {
|
|
|
+ let delfromData = {
|
|
|
+ title: tit,
|
|
|
+ num: num,
|
|
|
+ url: name === 'user' ? `user/del_level/${row.uid}` : `agent/stair/delete_spread/${row.uid}`,
|
|
|
+ method: name === 'user' ? 'DELETE' : 'PUT',
|
|
|
+ ids: '',
|
|
|
+ };
|
|
|
+ this.$modalSure(delfromData)
|
|
|
+ .then((res) => {
|
|
|
+ this.$Message.success(res.msg);
|
|
|
+ this.getList();
|
|
|
+ })
|
|
|
+ .catch((res) => {
|
|
|
+ this.$Message.error(res.msg);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 清除会员删除成功
|
|
|
+ submitModel() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 会员列表
|
|
|
+ getList() {
|
|
|
+ if (this.selectDataLabel.length) {
|
|
|
+ let activeIds = [];
|
|
|
+ this.selectDataLabel.forEach((item) => {
|
|
|
+ activeIds.push(item.id);
|
|
|
+ });
|
|
|
+ this.userFrom.label_id = activeIds.join(',');
|
|
|
+ }
|
|
|
+ this.userFrom.user_type = this.userFrom.user_type || '';
|
|
|
+ this.userFrom.status = this.userFrom.status || '';
|
|
|
+ this.userFrom.sex = this.userFrom.sex || '';
|
|
|
+ this.userFrom.is_promoter = this.userFrom.is_promoter || '';
|
|
|
+ this.userFrom.country = this.userFrom.country || '';
|
|
|
+ this.userFrom.pay_count = this.pay_count === 'all' ? '' : this.pay_count;
|
|
|
+ this.userFrom.user_time_type = this.user_time_type === 'all' ? '' : this.user_time_type;
|
|
|
+ this.userFrom.field_key = this.field_key === 'all' ? '' : this.field_key;
|
|
|
+ this.userFrom.level = this.level === 'all' ? '' : this.level;
|
|
|
+ this.userFrom.group_id = this.group_id === 'all' ? '' : this.group_id;
|
|
|
+ this.loading = true;
|
|
|
+ userList(this.userFrom)
|
|
|
+ .then(async (res) => {
|
|
|
+ let data = res.data;
|
|
|
+ this.userLists = data.list;
|
|
|
+ this.total = data.count;
|
|
|
+ this.loading = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setChecked();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$Message.error(res.msg);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pageChange(index) {
|
|
|
+ this.selectionList = [];
|
|
|
+ this.userFrom.page = index;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ userSearchs() {
|
|
|
+ this.userFrom.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ reset(name) {
|
|
|
+ this.userFrom = {
|
|
|
+ user_type: this.userFrom.user_type,
|
|
|
+ status: '',
|
|
|
+ sex: '',
|
|
|
+ is_promoter: '',
|
|
|
+ country: '',
|
|
|
+ pay_count: '',
|
|
|
+ user_time_type: '',
|
|
|
+ user_time: '',
|
|
|
+ nickname: '',
|
|
|
+ field_key: '',
|
|
|
+ level: '',
|
|
|
+ group_id: '',
|
|
|
+ label_id: '',
|
|
|
+ page: 1, // 当前页
|
|
|
+ limit: 20, // 每页显示条数
|
|
|
+ };
|
|
|
+ this.field_key = '';
|
|
|
+ this.level = '';
|
|
|
+ this.group_id = '';
|
|
|
+ this.dataLabel = [];
|
|
|
+ this.selectDataLabel = [];
|
|
|
+ this.user_time_type = '';
|
|
|
+ this.pay_count = '';
|
|
|
+ this.selectedIds = new Set();
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ edit(row) {
|
|
|
+ this.getUserFrom(row.uid);
|
|
|
+ },
|
|
|
+ // 修改成功
|
|
|
+ submitFail() {
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+ // 排序
|
|
|
+ sortChanged(e) {
|
|
|
+ this.userFrom[e.key] = e.order;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ //全选和取消全选时触发
|
|
|
+ handleSelectAll(selection) {
|
|
|
+ if (selection.length === 0) {
|
|
|
+ //获取table的数据；
|
|
|
+ let data = this.$refs.table.data;
|
|
|
+ data.forEach((item) => {
|
|
|
+ if (this.selectedIds.has(item.uid)) {
|
|
|
+ this.selectedIds.delete(item.uid);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ selection.forEach((item) => {
|
|
|
+ this.selectedIds.add(item.uid);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ //确保dom加载完毕
|
|
|
+ this.setChecked();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 选中某一行
|
|
|
+ handleSelectRow(selection, row) {
|
|
|
+ this.selectedIds.add(row.uid);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ //确保dom加载完毕
|
|
|
+ this.setChecked();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消某一行
|
|
|
+ handleCancelRow(selection, row) {
|
|
|
+ this.selectedIds.delete(row.uid);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ //确保dom加载完毕
|
|
|
+ this.setChecked();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setChecked() {
|
|
|
+ //将new Set()转化为数组
|
|
|
+ this.ids = [...this.selectedIds];
|
|
|
+ // 找到绑定的table的ref对应的dom，找到table的objData对象，objData保存的是当前页的数据
|
|
|
+ let objData = this.$refs.table.objData;
|
|
|
+ for (let index in objData) {
|
|
|
+ if (this.selectedIds.has(objData[index].uid)) {
|
|
|
+ objData[index]._isChecked = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="stylus">
|
|
|
+ .picBox {
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .upLoad {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ line-height: 58px;
|
|
|
+ border: 1px dotted rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(0, 0, 0, 0.02);
|
|
|
+ }
|
|
|
+
|
|
|
+ .pictrue {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border: 1px dotted rgba(0, 0, 0, 0.1);
|
|
|
+ margin-right: 10px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .userFrom {
|
|
|
+ >>>.ivu-form-item-content {
|
|
|
+ margin-left: 0px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .userAlert {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .userI {
|
|
|
+ color: #1890FF;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 36px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabBox_img {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabBox_tit {
|
|
|
+ width: 60%;
|
|
|
+ font-size: 12px !important;
|
|
|
+ margin: 0 2px 0 10px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ padding: 5px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modelBox {
|
|
|
+ >>>.ivu-modal-body {
|
|
|
+ padding: 0 16px 16px 16px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .vipName {
|
|
|
+ color: #dab176;
|
|
|
+ }
|
|
|
+
|
|
|
+ .listbox {
|
|
|
+ >>>.ivu-divider-horizontal {
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .labelInput {
|
|
|
+ border: 1px solid #dcdee2;
|
|
|
+ padding: 0 6px;
|
|
|
+ border-radius: 5px;
|
|
|
+ min-height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .span {
|
|
|
+ color: #c5c8ce;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-icon-ios-arrow-down {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #808695;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-drawer-footer {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border-top: 1px solid #e8e8e8;
|
|
|
+ padding: 10px 16px;
|
|
|
+ text-align: right;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+</style>
|
