wanma-benteng
/
new-admin-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化：用户列表样式优化，增加关系绑定信息显示

This commit is contained in:
wuhui_zzw 2024-04-25 16:03:26 +08:00
parent c3adc31148
commit 81dcd5541b
2 changed files with 927 additions and 793 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.env.development
View File

@ -3,12 +3,12 @@ ENV = 'development'
# http://192.168.1.43:8324/admin
# http://mer.crmeb.net/admin
# base api
#VUE_APP_BASE_API = 'https://bt.test.cdlfjy.com'
VUE_APP_BASE_API = 'https://mp.scwmbh.cn'
VUE_APP_BASE_API = 'https://bt.test.cdlfjy.com'
#VUE_APP_BASE_API = 'https://mp.scwmbh.cn'
# socket 连接地址
#VUE_APP_WS_URL = 'ws://bt.test.cdlfjy.com'
VUE_APP_WS_URL = 'ws://mp.scwmbh.cn'
VUE_APP_WS_URL = 'ws://bt.test.cdlfjy.com'
#VUE_APP_WS_URL = 'ws://mp.scwmbh.cn'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.

220
src/views/user/list/index.vue
View File

@ -120,8 +120,11 @@
</template>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right userFrom">
<el-form-item>
<el-button type="primary" icon="ios-search" label="default" class="mr15" size="small" @click="userSearchs">搜索</el-button>
<el-button class="ResetSearch mr10" size="small" type="reset" @click="reset('userFrom')">重置</el-button>
<el-button type="primary" icon="ios-search" label="default" class="mr15" size="small" @click="userSearchs">
搜索
</el-button>
<el-button class="ResetSearch mr10" size="small" type="reset" @click="reset('userFrom')">重置
</el-button>
<a class="ivu-ml-8" @click="collapse = !collapse">
<template v-if="!collapse">
展开 <i class="el-icon-arrow-down" />
@ -140,13 +143,15 @@
<el-button v-show="user_type === 'wechat'" size="mini" class="mr10" @click="sendNews">发送图文消息</el-button>
<el-button v-show="checkedIds.length != 0" size="mini" class="mr10" @click="batchGroup">批量设置分组</el-button>
<el-button v-show="checkedIds.length != 0" size="mini" @click="batchlabel">批量设置标签</el-button>
<el-button type="primary" icon="ios-search" label="default" class="mr15" size="mini" @click="sendCoupon">发送优惠券</el-button>
<el-button type="primary" icon="ios-search" label="default" class="mr15" size="mini" @click="sendCoupon">
发送优惠券
</el-button>
</div>
<el-alert v-if="checkedIds.length>0 || allCheck" :title="allCheck ? `已选择 ${tableData.total} 项` : `已选择 ${checkedIds.length} 项`" type="info" show-icon />
<!-- <el-alert v-if="multipleSelection.length>0" :title="`已选择 ${multipleSelection.length} 项`" type="info" show-icon /> -->
</div>
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row @selection-change="handleSelectionChange">
<el-table-column type="expand">
<el-table-column type="expand" width="60">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="首次访问：">
@ -179,8 +184,6 @@
</el-form>
</template>
</el-table-column>
<!-- <el-table-column type="selection" width="55" /> -->
<el-table-column width="50">
<template slot="header" slot-scope="scope">
<el-popover placement="top-start" width="100" trigger="hover" class="tabPop">
@ -195,70 +198,105 @@
<el-checkbox :disabled="scope.row.cancel_time" :value="!scope.row.cancel_time && (checkedIds.indexOf(scope.row.uid) > -1 || (chkName === 'duo' && noChecked.indexOf(scope.row.uid) === -1))" @change="(v)=>changeOne(v,scope.row)" />
</template>
</el-table-column>
<el-table-column prop="uid" label="ID" min-width="60" />
<el-table-column label="头像" min-width="50">
<el-table-column label="用户信息" min-width="230" align="center">
<template slot-scope="scope">
<div class="demo-image__preview">
<el-image style="width: 36px; height: 36px" :src="scope.row.avatar ? scope.row.avatar : moren" :preview-src-list="[scope.row.avatar || moren]" />
<div class="user-content">
<div class="user-avatar">
<el-image calss="avatar" :src="scope.row.avatar ? scope.row.avatar : moren" :preview-src-list="[scope.row.avatar || moren]" />
</div>
<div class="user-info">
<div class="nickname">
<i v-show="scope.row.sex===1" class="el-icon-male mr5" style="font-size: 15px; margin-top: 3px; color:#2db7f5;" />
<i v-show="scope.row.sex===2" class="el-icon-female mr5" style="font-size: 15px; margin-top: 3px; color:#ed4014;" />
{{ scope.row.nickname }}
</div>
<div class="agent-type-text">
<el-tag type="info" effect="dark" size="small">{{ scope.row.uid }}</el-tag>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="昵称" min-width="150">
<template slot-scope="{row}">
<div class="acea-row">
<i v-show="row.sex===1" class="el-icon-male mr5" style="font-size: 15px; margin-top: 3px; color:#2db7f5;" />
<i v-show="row.sex===2" class="el-icon-female mr5" style="font-size: 15px; margin-top: 3px; color:#ed4014;" />
<div v-text="row.nickname" />
</div>
</template>
</el-table-column>
<el-table-column prop="is_svip" label="付费会员" min-width="120">
<el-table-column prop="is_svip" label="付费会员" min-width="80" align="center">
<template slot-scope="{row}">
<span>{{ row.is_svip > 0 ? "是" : "否" }}</span>
</template>
</el-table-column>
<el-table-column prop="phone" label="手机号" min-width="120" />
<el-table-column label="等级" min-width="100">
<el-table-column prop="phone" label="手机号" min-width="120" align="center"/>
<el-table-column label="等级" min-width="100" align="center">
<template slot-scope="{row}">
<span>{{ row.member?row.member.brokerage_name:'-' }}</span>
<span>{{ row.member ? row.member.brokerage_name : '' }}</span>
</template>
</el-table-column>
<el-table-column label="分组" min-width="100">
<el-table-column label="分组" min-width="100" align="center">
<template slot-scope="{row}">
<span>{{ row.group?row.group.group_name:'无' }}</span>
<span>{{ row.group ? row.group.group_name : '' }}</span>
</template>
</el-table-column>
<el-table-column label="推荐人" min-width="140">
<el-table-column min-width="140" align="center">
<template slot="header" slot-scope="scope">
推荐人<br />
推荐人UID
</template>
<template slot-scope="{row}">
<span>{{ row.spread ? row.spread.nickname + ' / ' + row.spread.uid : '-' }}</span>
<div v-if="row.spread">
{{ row.spread.nickname }}<br />
{{ row.spread.uid }}
</div>
</template>
</el-table-column>
<el-table-column label="用户类型" min-width="100">
<el-table-column min-width="140" align="center">
<template slot="header" slot-scope="scope">
关系绑定状态<br />
预计解绑时间
</template>
<template slot-scope="{row}">
<span>{{ row.user_type === 'routine' ? '小程序' : row.user_type === 'wechat' ? '公众号' : row.user_type === 'app' || row.user_type === 'App' ? 'App' : row.user_type === 'pc' ? 'PC' : 'H5' }}</span>
<div v-if="row.spread">
{{ row.is_temporary == 1 ? '临时绑定' : '永久绑定'}}
<br />
{{ row.is_temporary == 1 ? row.spread_limit : '' }}
</div>
</template>
</el-table-column>
<el-table-column prop="now_money" label="余额" sortable min-width="100" :sort-method="(a,b)=>{return a.now_money - b.now_money}"/>
<el-table-column prop="integral" label="当前可用积分" min-width="100" />
<el-table-column label="用户类型" min-width="100" align="center">
<template slot-scope="{row}">
<span v-if="row.user_type === 'routine'">小程序</span>
<span v-else-if="row.user_type === 'wechat'">公众号</span>
<span v-else-if="row.user_type === 'app' || row.user_type === 'App'">App</span>
<span v-else-if="row.user_type === 'pc'">PC</span>
<span v-else>H5</span>
</template>
</el-table-column>
<el-table-column prop="now_money" label="余额" sortable min-width="100" :sort-method="(a,b)=>{return a.now_money - b.now_money}" align="center"/>
<el-table-column prop="integral" label="当前可用积分" min-width="100" align="center"/>
<el-table-column label="操作" min-width="130" fixed="right">
<template slot-scope="scope">
<el-button v-if="!scope.row.cancel_time" type="text" size="small" class="mr10" @click="onEdit(scope.row.uid)">编辑</el-button>
<el-button v-if="!scope.row.cancel_time" type="text" size="small" class="mr10" @click="onEdit(scope.row.uid)">
编辑
</el-button>
<el-dropdown>
<span class="el-dropdown-link">
更多<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="onDetails(scope.row.uid)">用户详情</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setMoney(scope.row)">设置余额</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="changeIntegral(scope.row)">设置积分</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setMoney(scope.row)">设置余额
</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="changeIntegral(scope.row)">设置积分
</el-dropdown-item>
<el-dropdown-item v-if="scope.row.vip_name && !scope.row.cancel_time">清除等级</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setGroup(scope.row)">设置分组</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setLabel(scope.row)">设置标签</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setModify(scope.row)">修改推荐人</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setPassword(scope.row)">修改密码</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setMember(scope.row)">编辑会员等级</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="giveMember(scope.row)">付费会员设置</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setGroup(scope.row)">设置分组
</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setLabel(scope.row)">设置标签
</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setModify(scope.row)">修改推荐人
</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setPassword(scope.row)">修改密码
</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setMember(scope.row)">编辑会员等级
</el-dropdown-item>
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="giveMember(scope.row)">付费会员设置
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
@ -289,7 +327,6 @@
:isUser="true"
ref="userDetails"
:cancel-time="cancel_time" />
<!-- 选择优惠券 -->
<el-dialog v-if="visibleCoupon" title="优惠券列表" :visible.sync="visibleCoupon" width="1000px">
<coupon-List v-if="visibleCoupon" ref="couponList" :couponForm="couponForm" :checkedIds="checkedIds" :allCheck="allCheck" :userFrom="userFrom" @sendSuccess="sendSuccess" />
@ -567,7 +604,15 @@ export default {
let label_id = this.userFrom.label_id == '' ? '' : this.getLabelValue(),
user_type = this.findKey(this.userFrom.user_type, {'': '', '微信用户': 'wechat', '小程序用户': 'routine', 'H5用户': 'h5'}),
sex = this.findKey(this.userFrom.sex, {'男': '1', '女': '2', '保密': '0', '': ''}),
pay_count = this.findKey(this.userFrom.sex,{'0次':'-1','1次以上':'0','2次以上':'1','3次以上':'2','4次以上':'3','5次以上':'4','': ''}),
pay_count = this.findKey(this.userFrom.sex, {
'0次': '-1',
'1次以上': '0',
'2次以上': '1',
'3次以上': '2',
'4次以上': '3',
'5次以上': '4',
'': ''
}),
is_promoter = this.findKey(this.userFrom.is_promoter, {'推广员': '1', '普通用户': '0', '': ''}),
user_time_type = this.userFrom.user_time_type == 'visit' ? '最后访问' : this.userFrom.user_time_type == 'add_time' ? '首次访问' : ''
this.couponForm = {
@ -802,6 +847,7 @@ export default {
.check {
color: #00a2d4;
}
.selWidth {
// width: 100% !important;
}
@ -863,4 +909,92 @@ button,
html [type=button] {
-webkit-appearance: none !important;
}
//重写表格部分样式
/deep/ .el-table .cell{
padding: 0!important;
}
/deep/ .el-table .el-table__expand-icon {
width: 50px !important;
height: 50px;
font-size: 30px;
font-weight: bold;
line-height: 50px;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
.el-icon{
position: unset!important;
}
}
.user-content{
--user-content-height-: 80px;
height: var(--user-content-height-);
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
.user-avatar{
height: var(--user-content-height-);
width: var(--user-content-height-);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
/deep/ .el-image{
height: 80%!important;
width: 80%!important;
border-radius: 50% !important;
}
}
.user-info{
max-width: calc(100% - var(--user-content-height-));
height: var(--user-content-height-);
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
.nickname{
width: 100%;
height: 25px;
line-height: 25px;
text-align: left;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
.user-id{
color: #fff;
background-color: #409eff;
border-color: #409eff;
height: 18px;
line-height: 20px;
font-size: 13px;
padding: 0 5px;
border-radius: 5px;
margin-left: 10px;
width: max-content!important;
}
}
.user-id{
width: 100%;
text-align: left;
font-size: 13px;
line-height: calc(var(--user-content-height- * 35%));
}
}
}
</style>