manage-member.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <template>
  2. <main v-if="!isUniFrameWork" class="member">
  3. <ul class="list">
  4. <li v-for="(item, index) in memberList" :key="index" class="list-item">
  5. <aside class="aside" @click="handleMemberProfileShow(item)">
  6. <img
  7. class="avatar"
  8. :src="
  9. item.avatar ||
  10. 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
  11. "
  12. onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
  13. />
  14. <span class="name">{{ item.nick || item.userID }}</span>
  15. <span>{{ handleRoleName(item) }}</span>
  16. </aside>
  17. <div @click="submit(item)">
  18. <Icon
  19. v-if="item.role !== 'Owner' && isShowDeleteBtn"
  20. :file="delIcon"
  21. :width="'16px'"
  22. :height="'16px'"
  23. />
  24. </div>
  25. </li>
  26. <li
  27. v-if="memberList.length < totalMember"
  28. class="list-item"
  29. @click="getMore"
  30. >
  31. {{ TUITranslateService.t(`TUIGroup.查看更多`) }}
  32. </li>
  33. </ul>
  34. </main>
  35. <div v-else class="edit-h5">
  36. <main class="main">
  37. <header class="edit-h5-header">
  38. <aside class="left">
  39. <h1>{{ TUITranslateService.t(`TUIGroup.群成员`) }}</h1>
  40. </aside>
  41. <span class="close" @click="close('member')">{{
  42. TUITranslateService.t(`关闭`)
  43. }}</span>
  44. </header>
  45. <div class="member">
  46. <ul class="list list-uniapp">
  47. <li
  48. v-for="(item, index) in memberList"
  49. :key="index"
  50. class="list-item"
  51. >
  52. <aside class="aside" @click="handleMemberProfileShow(item)">
  53. <img
  54. class="avatar"
  55. :src="
  56. item.avatar ||
  57. 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
  58. "
  59. onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
  60. />
  61. <span class="name">{{ item.nick || item.userID }}</span>
  62. <span>{{ handleRoleName(item) }}</span>
  63. </aside>
  64. <div @click="submit(item)">
  65. <Icon
  66. v-if="item.role !== 'Owner' && isShowDeleteBtn"
  67. :file="delIcon"
  68. :width="'16px'"
  69. :height="'16px'"
  70. />
  71. </div>
  72. </li>
  73. <li
  74. v-if="memberList.length < totalMember"
  75. class="list-item"
  76. @click="getMore"
  77. >
  78. {{ TUITranslateService.t(`TUIGroup.查看更多`) }}
  79. </li>
  80. </ul>
  81. </div>
  82. </main>
  83. </div>
  84. </template>
  85. <script lang="ts" setup>
  86. import TUIChatEngine, {
  87. TUITranslateService,
  88. } from "@tencentcloud/chat-uikit-engine";
  89. import { watchEffect, ref } from "../../../adapter-vue";
  90. import Icon from "../../common/Icon.vue";
  91. import delIcon from "../../../assets/icon/del-icon.svg";
  92. import { IGroupSelfInfo, IGroupMember } from "../../../interface";
  93. import { isUniFrameWork } from "../../../utils/env";
  94. const props = defineProps({
  95. list: {
  96. type: Array,
  97. default: () => [],
  98. },
  99. total: {
  100. type: Number,
  101. default: () => 0,
  102. },
  103. isShowDel: {
  104. type: Boolean,
  105. default: () => false,
  106. },
  107. self: {
  108. type: Object,
  109. default: () => ({}),
  110. },
  111. });
  112. const totalMember = ref(0);
  113. const memberList = ref<Array<IGroupMember>>([]);
  114. const isShowDeleteBtn = ref(false);
  115. const selfValue = ref<IGroupSelfInfo>({});
  116. watchEffect(() => {
  117. totalMember.value = props.total;
  118. isShowDeleteBtn.value = props.isShowDel;
  119. memberList.value = props.list as Array<IGroupMember>;
  120. selfValue.value = props.self;
  121. });
  122. const emits = defineEmits(["more", "del", "handleMemberProfileShow", "close"]);
  123. const handleRoleName = (item: any) => {
  124. let name = "";
  125. switch (item?.role) {
  126. case TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN:
  127. name = TUITranslateService.t("TUIGroup.管理员");
  128. break;
  129. case TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER:
  130. name = TUITranslateService.t("TUIGroup.群主");
  131. break;
  132. }
  133. if (name) {
  134. name = `(${name})`;
  135. }
  136. if (item.userID === selfValue.value.userID) {
  137. name += ` (${TUITranslateService.t("TUIGroup.我")})`;
  138. }
  139. return name;
  140. };
  141. const getMore = () => {
  142. emits("more");
  143. };
  144. const submit = (item: any) => {
  145. emits("del", [item]);
  146. };
  147. const handleMemberProfileShow = (user: any) => {
  148. emits("handleMemberProfileShow", user);
  149. };
  150. const close = (tabName: string) => {
  151. emits("close", tabName);
  152. };
  153. </script>
  154. <style lang="scss" scoped>
  155. @import "../../../assets/styles/common";
  156. .member {
  157. flex: 1;
  158. background: #fff;
  159. .list {
  160. display: flex;
  161. flex-direction: column;
  162. background: #f4f5f9;
  163. padding-top: 22px;
  164. &-uniapp {
  165. background: none;
  166. }
  167. &-item {
  168. padding: 13px;
  169. display: flex;
  170. justify-content: space-between;
  171. align-items: center;
  172. background: #fff;
  173. font-size: 14px;
  174. overflow: hidden;
  175. cursor: pointer;
  176. &:hover {
  177. background: #f1f2f6;
  178. }
  179. .aside {
  180. display: flex;
  181. align-items: center;
  182. width: 100%;
  183. overflow: hidden;
  184. .name {
  185. margin-left: 8px;
  186. font-weight: 400;
  187. font-size: 14px;
  188. color: #000;
  189. flex: 1;
  190. overflow: hidden;
  191. white-space: nowrap;
  192. text-overflow: ellipsis;
  193. }
  194. }
  195. }
  196. }
  197. }
  198. .avatar {
  199. width: 36px;
  200. height: 36px;
  201. border-radius: 4px;
  202. }
  203. .edit-h5 {
  204. position: fixed;
  205. width: 100%;
  206. height: 100%;
  207. top: 0;
  208. left: 0;
  209. background: rgba(0, 0, 0, 0.5);
  210. display: flex;
  211. align-items: flex-end;
  212. z-index: 1;
  213. .main {
  214. background: #fff;
  215. flex: 1;
  216. padding: 18px;
  217. border-radius: 12px 12px 0 0;
  218. overflow: scroll;
  219. height: 50%;
  220. width: 80vw;
  221. }
  222. &-header {
  223. display: flex;
  224. align-items: center;
  225. justify-content: space-between;
  226. .close {
  227. font-family: PingFangSC-Regular;
  228. font-weight: 400;
  229. font-size: 18px;
  230. color: #3370ff;
  231. letter-spacing: 0;
  232. line-height: 27px;
  233. }
  234. }
  235. &-footer {
  236. display: flex;
  237. .btn {
  238. flex: 1;
  239. border: none;
  240. background: #00b693;
  241. border-radius: 5px;
  242. font-family: PingFangSC-Regular;
  243. font-weight: 400;
  244. font-size: 16px;
  245. color: #fff;
  246. letter-spacing: 0;
  247. line-height: 27px;
  248. padding: 8px 0;
  249. &:disabled {
  250. opacity: 0.3;
  251. }
  252. }
  253. }
  254. }
  255. </style>