529 行
18 KiB
HTML
529 行
18 KiB
HTML
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||
<style>
|
||
#userIndex {
|
||
color: #444;
|
||
background: #fff;
|
||
}
|
||
|
||
.custom-header {
|
||
padding: 0 20px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.color-7536D0 {
|
||
color: #7536D0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.common-btn {
|
||
height: 32px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.el-input__inner,
|
||
.el-input__icon {
|
||
line-height: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.btn-box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.refresh-btn {
|
||
width: 32px;
|
||
border: 1px solid #E6E6E6;
|
||
font-size: 14px;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.create-goods,
|
||
.add-params,
|
||
.add-level1-sku {
|
||
width: 98px;
|
||
background: #7536D0;
|
||
color: #fff;
|
||
}
|
||
|
||
.create-goods {
|
||
margin-right: 40px;
|
||
}
|
||
|
||
.create-goods span,
|
||
.add-params span,
|
||
.add-level1-sku span {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.platform-name span {
|
||
display: flex;
|
||
}
|
||
|
||
.goods-img {
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-right: 10px;
|
||
border: 1px solid #e6e6e6;
|
||
}
|
||
|
||
.display-flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.label-auto {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.one-ellipsis {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.sort-order {
|
||
margin-left: 6px;
|
||
color: #C0C4CC;
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.recycle-btn {
|
||
width: 88px;
|
||
color: #444;
|
||
border: #444 1px solid;
|
||
}
|
||
|
||
.recycle-btn i {
|
||
margin-right: 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-box {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.status-btn {
|
||
width: 56px;
|
||
height: 26px;
|
||
border: 1px solid #7438D5;
|
||
color: #7438D5;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.status-btn-2 {
|
||
color: #FF5959;
|
||
border-color: #FF5959;
|
||
}
|
||
|
||
.status-btn-3 {
|
||
color: #999;
|
||
border-color: #999;
|
||
}
|
||
|
||
.icon-top {
|
||
margin-left: -5px;
|
||
}
|
||
|
||
.edit-text,
|
||
.del-text,
|
||
.enable-text,
|
||
.disable-text {
|
||
cursor: pointer;
|
||
color: #444;
|
||
margin-right: 14px;
|
||
}
|
||
|
||
.edit-text {
|
||
color: #7438D5;
|
||
}
|
||
|
||
.enable-text {
|
||
color: #01CFA1;
|
||
}
|
||
|
||
.del-text {
|
||
color: #FF5959;
|
||
}
|
||
|
||
.el-popover {
|
||
left: 46px;
|
||
top: 10px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.choose-container {
|
||
margin-bottom: 10px;
|
||
color: #666;
|
||
}
|
||
|
||
.custom-choose,
|
||
.custom-choose-type,
|
||
.custom-choose-sub {
|
||
height: 50px;
|
||
border-radius: 4px;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
background: #fff;
|
||
}
|
||
|
||
.custom-choose-type,
|
||
.custom-choose-sub {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.custom-choose-sub {
|
||
height: 70px;
|
||
padding: 0 10px 20px 20px;
|
||
}
|
||
|
||
.choose-status-tip {
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.custom-choose-type-tip {
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.choose-btn {
|
||
width: 80px;
|
||
border: 1px solid #E6E6E6;
|
||
margin-right: 10px;
|
||
height: 30px;
|
||
}
|
||
|
||
.choose-btn-active {
|
||
background-color: #7536D0;
|
||
border: none;
|
||
color: #fff;
|
||
}
|
||
|
||
.custom-table {
|
||
/* padding: 20px 20px 30px; */
|
||
padding: 0px 20px 30px;
|
||
background: #fff;
|
||
}
|
||
|
||
label {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.page-container {
|
||
justify-content: flex-end;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.goods-title {
|
||
margin-bottom: 4px;
|
||
width: 154px;
|
||
line-height: 14px;
|
||
}
|
||
|
||
.activity-type {
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.activity-type-btn {
|
||
width: 40px;
|
||
height: 20px;
|
||
padding-top: 2px;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
justify-content: center;
|
||
}
|
||
|
||
.groupon-btn {
|
||
background: #A17BDF;
|
||
}
|
||
|
||
.seckill-btn {
|
||
background: #FE9387;
|
||
}
|
||
|
||
.score-btn {
|
||
background: #FBB74A;
|
||
}
|
||
|
||
.el-table .bg-color {
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
.cell-left .cell {
|
||
justify-content: flex-start !important;
|
||
}
|
||
|
||
.el-table_1_column_11.is-leaf,
|
||
.el-table_1_column_11 {
|
||
border-color: #EBEEF5 !important;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 26px;
|
||
height: 26px;
|
||
border: 1px solid #E5E5E5;
|
||
}
|
||
|
||
.el-popover {
|
||
padding-bottom: 6px;
|
||
color: #444;
|
||
}
|
||
|
||
.popover-container>div {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.popover-tip {
|
||
width: 56px;
|
||
color: #666;
|
||
text-align: justify;
|
||
text-align-last: justify;
|
||
}
|
||
|
||
.custom-table {
|
||
padding-top: 14px;
|
||
}
|
||
|
||
[v-cloak] {
|
||
display: none
|
||
}
|
||
</style>
|
||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
||
<script src="__CDN__/assets/addons/shopro/libs/Sortable.min.js"></script>
|
||
<script src="__CDN__/assets/addons/shopro/libs/vuedraggable.js"></script>
|
||
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
|
||
<div id="userIndex" v-cloak>
|
||
<div class="custom-header display-flex">
|
||
<div class="choose-status" style="font-size: 14px;">
|
||
用户列表
|
||
</div>
|
||
<div class="custom-search">
|
||
<el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" v-model="searchKey">
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
<div class="display-flex-b" style="padding: 0 20px;">
|
||
<div class="custom-refresh display-flex-c" @click="getData">
|
||
<i class="el-icon-refresh"></i>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="choose-container">
|
||
<div class="custom-choose display-flex">
|
||
<div class="choose-status">
|
||
<span class="choose-status-tip">筛选条件</span>
|
||
<el-switch @change="isShoose" active-value="1" inactive-value="0" v-model="chooseType"
|
||
active-color="#7536D0" inactive-color="#E9EBEF">
|
||
</el-switch>
|
||
</div>
|
||
<div class="custom-search">
|
||
<el-input placeholder="请输入搜索关键词" suffix-icon="el-icon-search" v-model="searchKey">
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
<div v-if="chooseType==1">
|
||
<div class="custom-choose-type display-flex">
|
||
<div class="custom-choose-type-tip">
|
||
渠道来源
|
||
</div>
|
||
<div class="common-btn choose-btn" :class="platformType=='all'?'choose-btn-active':''"
|
||
@click="operation('platform','all')">
|
||
全部
|
||
</div>
|
||
<div class="common-btn choose-btn" :class="platformType=='wxMiniProgram'?'choose-btn-active':''"
|
||
@click="operation('platform','wxMiniProgram')">
|
||
小程序
|
||
</div>
|
||
<div class="common-btn choose-btn" :class="platformType=='wxOfficialAccount'?'choose-btn-active':''"
|
||
@click="operation('platform','wxOfficialAccount')">
|
||
公众号
|
||
</div>
|
||
<div class="common-btn choose-btn" :class="platformType=='H5'?'choose-btn-active':''"
|
||
@click="operation('platform','H5')">
|
||
H5
|
||
</div>
|
||
<div class="common-btn choose-btn" :class="platformType=='App'?'choose-btn-active':''"
|
||
@click="operation('platform','App')">
|
||
App
|
||
</div>
|
||
</div>
|
||
<div class="custom-choose-type display-flex">
|
||
<div class="custom-choose-type-tip">
|
||
角色分组
|
||
</div>
|
||
<div class="common-btn choose-btn" :class="roleType=='all'?'choose-btn-active':''"
|
||
@click="operation('role','all')">
|
||
全部
|
||
</div>
|
||
<div class="common-btn choose-btn" :class="roleType=='default'?'choose-btn-active':''"
|
||
@click="operation('role','default')">
|
||
默认分组
|
||
</div>
|
||
<div class="common-btn choose-btn" :class="roleType=='test'?'choose-btn-active':''"
|
||
@click="operation('role','test')">
|
||
测试会员
|
||
</div>
|
||
</div>
|
||
<div class="custom-choose-type display-flex">
|
||
<div class="custom-choose-type-tip">
|
||
加入时间
|
||
</div>
|
||
<div>
|
||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" v-model="joinTime"
|
||
type="datetime" placeholder="选择日期时间">
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
<div class="custom-choose-sub display-flex">
|
||
<div class="common-btn choose-btn choose-btn-active" style="margin-right: 20px;"
|
||
@click="operation('filter')">
|
||
筛选
|
||
</div>
|
||
<div class="common-btn choose-btn" @click="operation('clear')">
|
||
清空
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="custom-table">
|
||
<div class="custom-table-border">
|
||
<el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
|
||
:row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"
|
||
:header-cell-class-name="tableCellClassName" @row-dblclick="operation">
|
||
<el-table-column label="ID" prop="id" min-width="60">
|
||
</el-table-column>
|
||
<el-table-column label="头像" min-width="60">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
<img class="avatar-img" v-if="scope.row.avatar"
|
||
:src="Fast.api.cdnurl(scope.row.avatar)">
|
||
<span v-if="!scope.row.avatar">-</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="昵称" min-width="120">
|
||
<template slot-scope="scope">
|
||
<div class="ellipsis-item">{{scope.row.nickname}}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="手机号" min-width="110">
|
||
<template slot-scope="scope">
|
||
<div><span v-if="scope.row.mobile">{{scope.row.mobile}}</span><span v-else>-</span></div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="用户角色" min-width="100">
|
||
<template slot-scope="scope">
|
||
<div class="display-flex-c">
|
||
<span v-if="scope.row.group.name">{{scope.row.group.name}}</span>
|
||
<span v-else>-</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="邀请人" min-width="120">
|
||
<template slot-scope="scope">
|
||
<div class="ellipsis-item" slot="reference">{{scope.row.nickname}}
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column label="第三方账号" prop="id" min-width="140">
|
||
<template slot-scope="scope">
|
||
<div class="platform-name display-flex-c">
|
||
<template v-if="scope.row.third_platform.length>0">
|
||
<el-popover placement="bottom" trigger="hover"
|
||
:title="operation('platformname',i.platform)" width="360"
|
||
v-for="(i,index) in scope.row.third_platform">
|
||
<div class="popover-container">
|
||
<div class="display-flex">
|
||
<div class="display-flex"><div class="popover-tip">头像</div>：</div>
|
||
<img class="avatar-img"
|
||
:src="Fast.api.cdnurl(i.headimgurl)">
|
||
</div>
|
||
<div class="display-flex">
|
||
<div class="display-flex"><div class="popover-tip">性别</div>：</div>
|
||
<div class="color-7536D0">{{i.sex==2?'女':'男'}}</div>
|
||
</div>
|
||
<div class="display-flex">
|
||
<div class="display-flex"><div class="popover-tip">国家</div>：</div>
|
||
<div class="color-7536D0">{{i.country}}</div>
|
||
</div>
|
||
<div class="display-flex">
|
||
<div class="display-flex"><div class="popover-tip">省市</div>：</div>
|
||
<div class="color-7536D0">{{i.province}}-{{i.city}}</div>
|
||
</div>
|
||
<div class="display-flex">
|
||
<div class="display-flex"><div class="popover-tip">OpenId</div>：</div>
|
||
<div class="color-7536D0">{{i.openid}}</div>
|
||
</div>
|
||
<div class="display-flex">
|
||
<div class="display-flex"><div class="popover-tip">UnionId</div>：</div>
|
||
<div class="color-7536D0">{{i.unionid}}</div>
|
||
</div>
|
||
<div class="display-flex">
|
||
<div class="display-flex"><div class="popover-tip">创建时间</div>：</div>
|
||
<div class="color-7536D0">
|
||
{{moment(i.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ellipsis-item cursor-pointer" slot="reference">
|
||
<img style="width: 30px;height: 30px;" :style="{'margin-right':index!=scope.row.third_platform.length-1?'5px':''}"
|
||
:src="'/assets/addons/shopro/img/user/'+i.provider+'-'+i.platform+'.png'">
|
||
</div>
|
||
</el-popover>
|
||
</template>
|
||
<span v-else>-</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="余额" prop="money" min-width="120">
|
||
</el-table-column>
|
||
<el-table-column label="积分" prop="score" min-width="120">
|
||
</el-table-column>
|
||
<el-table-column label="直播权限" prop="is_live" min-width="120">
|
||
<template slot-scope="scope">
|
||
<el-button v-if="scope.row.is_live == 1" type="primary" plain size="small" icon="el-icon-check">开启</el-button>
|
||
<el-button v-if="scope.row.is_live == 2" type="warning" plain size="small" icon="el-icon-close">关闭</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="加入时间" min-width="160">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
{{moment(scope.row.logintime*1000).format("YYYY-MM-DD HH:mm:ss")}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column fixed="right" label="操作" min-width="180">
|
||
<template slot-scope="scope">
|
||
<div>
|
||
{if condition = "$auth->check('shopro/user/user/profile')"}
|
||
<span class="edit-text" @click="operation('edit',scope.row.id)">查看详情</span>
|
||
{/if}
|
||
{if condition = "$auth->check('shopro/user/user/del')"}
|
||
<span class="del-text" @click="operation('del',scope.row.id)">删除</span>
|
||
{/if}
|
||
<!-- <span v-if="scope.row.status!='normal'" class="enable-text"
|
||
@click="operation('enable',scope.row.id)">启用</span>
|
||
<span v-if="scope.row.status!='hidden'" class="disable-text"
|
||
@click="operation('disable',scope.row.id)">禁用</span> -->
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="page-container display-flex">
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||
:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div> |