Skip to content

foreign / customer-service

Go to a project
Commit 3fa9d734 by Sixong.Zhu
Options

style

parent 452addc8
Inline Side-by-side
Showing with 200 additions and 178 deletions
.prettierrc 0 → 100644
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": false
}
components/who-read-list.vue
<template> <template>
<div <div
v-loading="loading" v-loading="loading"
ref="list-con" ref="list-con"
@blur="$emit('blur')" @blur="$emit('blur')"
class="who-read-list pos-rel" class="who-read-list pos-rel"
:style="`left:${left}px;top:${top}px`" >
> <template>
<template v-if="!loading"> <div class="d-flex tabs">
<div class="list-left"> <div
<div class="number-count">已读 {{ readlist.length }}</div> class="tab text-nowrap"
<div class="member-item" v-for="item in readlist" :key="item.eid"> :class="{ selected: tab === 1 }"
<avatar class="member-avatar" :src="item.avatar" :size="30" /> @click="tab = 1"
<span class="member-name">{{ item.name }}</span> >
</div> <span>{{ readlist.length }}</span>
</div> <span>已读</span>
<div class="list-right"> </div>
<div class="number-count">未读 {{ unreadlist.length }}</div> <div
<div class="member-item" v-for="item in unreadlist" :key="item.eid"> class="tab text-nowrap"
<avatar class="member-avatar" :src="item.avatar" :size="30" /> :class="{ selected: tab === 2 }"
<span class="member-name">{{ item.name }}</span> @click="tab = 2"
</div> >
</div> <span>{{ unreadlist.length }}</span>
</template> <span>未读</span>
</div> </div>
</div>
<div class="items">
<el-scrollbar>
<div
class="member-item"
v-for="item in items"
:key="`${item.eid}-${tab}`"
>
<avatar
class="member-avatar"
:src="item.avatar"
:size="30"
/>
<span class="member-name">{{ item.name }}</span>
</div>
</el-scrollbar>
</div>
</template>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Ref, Vue } from "vue-property-decorator"; import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import { namespace } from "vuex-class"; import { namespace } from "vuex-class";
...@@ -37,167 +57,163 @@ import chat from "@/customer-service/xim/index"; ...@@ -37,167 +57,163 @@ import chat from "@/customer-service/xim/index";
import xim from "@/customer-service/xim/xim"; import xim from "@/customer-service/xim/xim";
const chatStoreNamespace = namespace("chatStore"); const chatStoreNamespace = namespace("chatStore");
@Component({
components: { @Component({ components: { avatar } })
avatar
}
})
export default class WhoReadList extends Vue { export default class WhoReadList extends Vue {
@chatStoreNamespace.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID) @chatStoreNamespace.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID; private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@chatStoreNamespace.State(ChatStore.STATE_CHAT_MY_ID) @chatStoreNamespace.State(ChatStore.STATE_CHAT_MY_ID)
private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID; private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID;
@Prop({ @Prop({ type: Number })
type: Number, private msgId!: number;
})
private msgId!: number; @Ref("list-con")
private listCon!: HTMLElement;
@Ref("list-con")
private listCon!: HTMLElement; private readlist: { name: string; avatar: string }[] = [];
private unreadlist: { name: string; avatar: string }[] = [];
private top = 0; private loading = false;
private left = 0;
private readlist: { name: string; avatar: string }[] = []; private tab = 1;
private unreadlist: { name: string; avatar: string }[] = [];
private loading = false; private get items() {
private startLoading() { return this.tab === 1 ? this.readlist : this.unreadlist;
this.loading = true; }
}
private startLoading() {
private endLoading() { this.loading = true;
this.loading = false; }
}
private endLoading() {
public async created() { this.loading = false;
this.startLoading(); }
await this.getReader();
this.endLoading(); public async created() {
} this.startLoading();
await this.getReader();
public mounted() { this.endLoading();
this.enableBlur(); }
const { top, left } = (this.listCon
.parentNode as HTMLElement).getBoundingClientRect(); public mounted() {
this.top = top; this.enableBlur();
this.left = left; }
}
private enableBlur() {
private enableBlur() { this.listCon.setAttribute("tabindex", "-1");
this.listCon.setAttribute("tabindex", "-1"); this.listCon.focus();
this.listCon.focus(); }
}
private async getUserNameByid(eid: string) {
private async getUserNameByid(eid: string) { const data = await chat.getSdk().model("user").detail(eid).query();
const data = await chat return data.row.first_name.value as string;
.getSdk() }
.model("user")
.detail(eid) private async getReader() {
.query(); if (this.chatId == null) return;
return data.row.first_name.value as string; if (this.msgId == null) return;
} const data = await xim.fetchMsgInBox(this.chatId, this.msgId);
if (data == null) return;
private async getReader() { const readerlist = this.uniqueReaderList(
if (this.chatId == null) return; data.args[0] as dto.OneWhoReadMessage[]
if (this.msgId == null) return; );
const data = await xim.fetchMsgInBox(this.chatId, this.msgId); this.readlist = await Promise.all(
if (data == null) return; readerlist
const readerlist = this.uniqueReaderList( .filter((k) => k.is_read)
data.args[0] as dto.OneWhoReadMessage[] .filter((k) => k.eid !== this.chatMyId)
); .map(async (k) => {
this.readlist = await Promise.all( const eid = k.eid;
readerlist const name = await this.getUserNameByid(eid);
.filter((k) => k.is_read) return {
.filter((k) => k.eid !== this.chatMyId) eid,
.map(async (k) => { name,
const eid = k.eid; avatar: "",
const name = await this.getUserNameByid(eid); };
return { })
eid, );
name, this.unreadlist = await Promise.all(
avatar: "", readerlist
}; .filter((k) => !k.is_read)
}) .filter((k) => k.eid !== this.chatMyId)
); .map(async (k) => {
this.unreadlist = await Promise.all( const eid = k.eid;
readerlist const name = await this.getUserNameByid(eid);
.filter((k) => !k.is_read) return {
.filter((k) => k.eid !== this.chatMyId) eid,
.map(async (k) => { name,
const eid = k.eid; avatar: "",
const name = await this.getUserNameByid(eid); };
return { })
eid, );
name, }
avatar: "",
}; private uniqueReaderList(data: dto.OneWhoReadMessage[]) {
}) return unique(data, function (item, all) {
); return all.findIndex((k) => k.eid === item.eid);
} });
}
private uniqueReaderList(data: dto.OneWhoReadMessage[]) {
return unique(data, function(item, all) {
return all.findIndex((k) => k.eid === item.eid);
});
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.who-read-list { .who-read-list {
::before { background-color: #fff;
content: ""; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px;
border: 1px solid rgba(183, 191, 199, 1);
min-height: 100px;
position: absolute; position: absolute;
width: 1px; color: #000;
top: 15px; z-index: 2;
bottom: 15px; margin-left: -100px;
left: 0; .number-count {
right: 0; font-size: 14px;
margin: auto; color: #333333;
background: #e1e2e2; margin-bottom: 15px;
} }
&:focus { }
outline: unset;
} .tabs {
padding: 15px 30px; border-bottom: 1px solid #f0f0f0;
background: rgba(249, 249, 249, 1); padding: 10px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px; .tab {
border: 1px solid rgba(183, 191, 199, 1); cursor: pointer;
width: 455px;
min-height: 100px; span {
position: fixed; font-size: 22px;
margin-left: -200px;
margin-top: 20px; & + span {
color: #000; font-size: 12px;
z-index: 2; }
.list-left, }
.list-right {
display: inline-block; &.selected {
vertical-align: top; color: #4389f8;
width: calc(50% - 30px); }
}
.list-left { & + .tab {
padding-right: 30px; margin-left: 30px;
} }
.list-right { }
padding-left: 30px;
}
.number-count {
font-size: 14px;
color: #333333;
margin-bottom: 15px;
}
} }
.items {
padding: 10px;
padding-top: 0;
padding-left: 20px;
}
.member-item { .member-item {
margin-top: 10px; margin-top: 10px;
.member-avatar, .member-avatar,
.member-name { .member-name {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.member-avatar { .member-avatar {
margin-right: 10px; margin-right: 10px;
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment