190 lines
4.0 KiB
Vue
190 lines
4.0 KiB
Vue
<template>
|
||
<div class="list-wrap">
|
||
<div class="search">
|
||
<el-input
|
||
v-model="params.nickName"
|
||
size="mini"
|
||
placeholder="请输入用户昵称"
|
||
clearable
|
||
/>
|
||
<el-button type="primary" size="mini" @click="searchMsg">搜索</el-button>
|
||
</div>
|
||
<userItems
|
||
:group-id="groupId"
|
||
:list="list"
|
||
:loading="loading"
|
||
:has-next="hasNext"
|
||
@getList="getList"
|
||
@toPrivateChat="toPrivateChat"
|
||
@modifyStateCallback="modifyStateCallback"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getCustomerList } from "@/api/circle";
|
||
import userItems from "./components/userItems.vue";
|
||
export default {
|
||
components: {
|
||
userItems
|
||
},
|
||
props: {
|
||
groupId: {
|
||
type: Number,
|
||
default: null
|
||
},
|
||
modifyStateObj: {
|
||
// 修改了状态的对象
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
hasNext: true,
|
||
params: {
|
||
nickName: "",
|
||
lastId: "",
|
||
groupId: null,
|
||
size: 10
|
||
},
|
||
list: [],
|
||
userIdsObj: {}
|
||
};
|
||
},
|
||
watch: {
|
||
groupId(value) {
|
||
this.params.groupId = value;
|
||
this.params.nickName = "";
|
||
this.searchMsg();
|
||
},
|
||
modifyStateObj(value) {
|
||
// modifyType: 1审核通过 2禁言操作 isForbidden: 是否被禁言 1是 2否
|
||
if (value.modifyType === 2 && this.userIdsObj[value.userId]) {
|
||
this.userIdsObj[value.userId].isForbidden = value.isForbidden;
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
modifyStateCallback(item) {
|
||
this.$emit("modifyStateCallback", item);
|
||
},
|
||
async getList() {
|
||
if (this.loading) return;
|
||
this.loading = true;
|
||
const ret = await getCustomerList(this.params).catch(() => {
|
||
this.loading = false;
|
||
});
|
||
|
||
if (ret && ret.code === 0 && ret.data.list) {
|
||
const list = ret.data.list;
|
||
if (ret.data.list.length) {
|
||
this.params.lastId = ret.data.list[ret.data.list.length - 1].id;
|
||
}
|
||
list.forEach((item, index) => {
|
||
if (this.userIdsObj[item.userId]) {
|
||
list.splice(index, 1);
|
||
} else {
|
||
this.userIdsObj[item.userId] = item;
|
||
item.isForbidden = item.commentBlackStatus; // 是否禁言 1：是 2否
|
||
item.userHeadPicUrl = item.headPicUrl; // 用户头像
|
||
}
|
||
});
|
||
this.list = this.list.concat(list);
|
||
this.hasNext = ret.data.hasNext;
|
||
}
|
||
this.loading = false;
|
||
},
|
||
searchMsg() {
|
||
this.params.lastId = "";
|
||
this.hasNext = true;
|
||
this.userIdsObj = {};
|
||
this.list = [];
|
||
this.getList();
|
||
},
|
||
toPrivateChat(item) {
|
||
this.$emit("toPrivateChat", item);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.list-wrap {
|
||
height: 600px;
|
||
overflow-y: scroll;
|
||
}
|
||
.search {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
.el-input {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
dl {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
padding: 10px;
|
||
dt {
|
||
padding: 10px 0;
|
||
}
|
||
dd {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
dt,
|
||
dd {
|
||
display: flex;
|
||
border-bottom: 1px dashed #999;
|
||
& > div {
|
||
display: flex;
|
||
// flex-direction: column;
|
||
justify-content: center;
|
||
padding: 6px 0;
|
||
align-items: center;
|
||
}
|
||
& > div:nth-child(1) {
|
||
width: 60px;
|
||
}
|
||
& > div:nth-child(2) {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
& > div:nth-child(3) {
|
||
width: 100px;
|
||
text-align: center;
|
||
}
|
||
& > div:nth-child(4) {
|
||
width: 100px;
|
||
text-align: center;
|
||
}
|
||
& > div:nth-child(5) {
|
||
display: block;
|
||
width: 60px;
|
||
text-align: right;
|
||
& > div {
|
||
text-align: right;
|
||
}
|
||
}
|
||
p {
|
||
font-size: 14px;
|
||
margin: 0;
|
||
line-height: 16px;
|
||
}
|
||
::v-deep .el-button--medium {
|
||
padding: 4px 8px;
|
||
}
|
||
img {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
.load-tip {
|
||
text-align: center;
|
||
line-height: 50px;
|
||
}
|
||
</style>
|