move

components/chat-members.vue

-<template>
-    <div class="chat-members">
-        <div
-            class="chat-member pos-rel"
-            v-for="item in chatMembers"
-            :key="item.id"
-        >
-            <span class="member-name ver-mid text-truncate">
-                {{ item.name || item.eid }}
-            </span>
-            <span class="member-phone ver-mid text-nowrap">
-                {{ item.phone }}
-            </span>
-            <span class="member-type ver-mid text-nowrap">
-                {{ memberTypeStr(item.type) }}
-            </span>
-            <el-button class="ver-mid get-out" type="text" @click="getout(item)"
-                >踢出</el-button
-            >
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { ChatStore, chatStore } from "../store/model";
-import avatar from "@/customer-service/components/avatar.vue";
-import { ChatRole } from "../model";
-
-@Component({ components: { avatar } })
-export default class ChatMembers extends Vue {
-    @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
-    private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
-
-    @chatStore.Action(ChatStore.ACTION_CHAT_REMOVE_MEMBER)
-    private readonly _getout!: ChatStore.ACTION_CHAT_REMOVE_MEMBER;
-
-    @chatStore.Action(ChatStore.ACTION_CHAT_REMOVE_CS)
-    private readonly _getoutCs!: ChatStore.ACTION_CHAT_REMOVE_CS;
-
-    private async getout(
-        item: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS[number]
-    ) {
-        await this.$confirm(`确定要移除${item.name}？`, "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        });
-        // xim里的eid等于uniplat里的uid
-        if (item.type === ChatRole.Default) {
-            // 普通成员
-            this._getout([item.eid]);
-        } else if (item.type === ChatRole.CustomerService) {
-            // 可否
-            this._getoutCs([item.eid]);
-        }
-    }
-
-    private memberTypeStr(type: string | number) {
-        if (+type === ChatRole.CustomerService) {
-            return "客服";
-        }
-        if (+type === ChatRole.Admin) {
-            return "管理员";
-        }
-        return "";
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.chat-members {
-    padding: 20px;
-    padding-bottom: 0;
-    background: #fff;
-    .chat-member {
-        display: flex;
-        vertical-align: top;
-        align-items: center;
-        margin: 10px 0;
-        padding: 10px;
-        &:hover {
-            background-color: #f5f7fa;
-            .get-out {
-                display: unset;
-            }
-        }
-    }
-    .member-name {
-        display: inline-block;
-        min-width: 7em;
-        margin-right: 10px;
-    }
-    .member-type {
-        margin-left: 20px;
-    }
-    .get-out {
-        display: none;
-        margin-left: auto;
-        padding: 0;
-    }
-}
-.ver-mid {
-    vertical-align: middle;
-}
-</style>