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 85 additions and 63 deletions
.prettierrc 0 → 100644
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": false
}
components/who-read-list.vue
...@@ -4,26 +4,46 @@ ...@@ -4,26 +4,46 @@
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 v-if="!loading"> <template>
<div class="list-left"> <div class="d-flex tabs">
<div class="number-count">已读 {{ readlist.length }}</div> <div
<div class="member-item" v-for="item in readlist" :key="item.eid"> class="tab text-nowrap"
<avatar class="member-avatar" :src="item.avatar" :size="30" /> :class="{ selected: tab === 1 }"
<span class="member-name">{{ item.name }}</span> @click="tab = 1"
>
<span>{{ readlist.length }}</span>
<span>已读</span>
</div>
<div
class="tab text-nowrap"
:class="{ selected: tab === 2 }"
@click="tab = 2"
>
<span>{{ unreadlist.length }}</span>
<span>未读</span>
</div> </div>
</div> </div>
<div class="list-right"> <div class="items">
<div class="number-count">未读 {{ unreadlist.length }}</div> <el-scrollbar>
<div class="member-item" v-for="item in unreadlist" :key="item.eid"> <div
<avatar class="member-avatar" :src="item.avatar" :size="30" /> 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> <span class="member-name">{{ item.name }}</span>
</div> </div>
</el-scrollbar>
</div> </div>
</template> </template>
</div> </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,11 +57,8 @@ import chat from "@/customer-service/xim/index"; ...@@ -37,11 +57,8 @@ 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;
...@@ -49,19 +66,22 @@ export default class WhoReadList extends Vue { ...@@ -49,19 +66,22 @@ export default class WhoReadList extends Vue {
@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") @Ref("list-con")
private listCon!: HTMLElement; private listCon!: HTMLElement;
private top = 0;
private left = 0;
private readlist: { name: string; avatar: string }[] = []; private readlist: { name: string; avatar: string }[] = [];
private unreadlist: { name: string; avatar: string }[] = []; private unreadlist: { name: string; avatar: string }[] = [];
private loading = false; private loading = false;
private tab = 1;
private get items() {
return this.tab === 1 ? this.readlist : this.unreadlist;
}
private startLoading() { private startLoading() {
this.loading = true; this.loading = true;
} }
...@@ -78,10 +98,6 @@ export default class WhoReadList extends Vue { ...@@ -78,10 +98,6 @@ export default class WhoReadList extends Vue {
public mounted() { public mounted() {
this.enableBlur(); this.enableBlur();
const { top, left } = (this.listCon
.parentNode as HTMLElement).getBoundingClientRect();
this.top = top;
this.left = left;
} }
private enableBlur() { private enableBlur() {
...@@ -90,11 +106,7 @@ export default class WhoReadList extends Vue { ...@@ -90,11 +106,7 @@ export default class WhoReadList extends Vue {
} }
private async getUserNameByid(eid: string) { private async getUserNameByid(eid: string) {
const data = await chat const data = await chat.getSdk().model("user").detail(eid).query();
.getSdk()
.model("user")
.detail(eid)
.query();
return data.row.first_name.value as string; return data.row.first_name.value as string;
} }
...@@ -137,58 +149,62 @@ export default class WhoReadList extends Vue { ...@@ -137,58 +149,62 @@ export default class WhoReadList extends Vue {
} }
private uniqueReaderList(data: dto.OneWhoReadMessage[]) { private uniqueReaderList(data: dto.OneWhoReadMessage[]) {
return unique(data, function(item, all) { return unique(data, function (item, all) {
return all.findIndex((k) => k.eid === item.eid); 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: "";
position: absolute;
width: 1px;
top: 15px;
bottom: 15px;
left: 0;
right: 0;
margin: auto;
background: #e1e2e2;
}
&:focus {
outline: unset;
}
padding: 15px 30px;
background: rgba(249, 249, 249, 1);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(183, 191, 199, 1); border: 1px solid rgba(183, 191, 199, 1);
width: 455px;
min-height: 100px; min-height: 100px;
position: fixed; position: absolute;
margin-left: -200px;
margin-top: 20px;
color: #000; color: #000;
z-index: 2; z-index: 2;
.list-left, margin-left: -100px;
.list-right {
display: inline-block;
vertical-align: top;
width: calc(50% - 30px);
}
.list-left {
padding-right: 30px;
}
.list-right {
padding-left: 30px;
}
.number-count { .number-count {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
.tabs {
border-bottom: 1px solid #f0f0f0;
padding: 10px;
.tab {
cursor: pointer;
span {
font-size: 22px;
& + span {
font-size: 12px;
}
}
&.selected {
color: #4389f8;
}
& + .tab {
margin-left: 30px;
}
}
}
.items {
padding: 10px;
padding-top: 0;
padding-left: 20px;
}
.member-item { .member-item {
margin-top: 10px; margin-top: 10px;
.member-avatar, .member-avatar,
......
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