Skip to content

杨俊 / spread_im

Go to a project
Toggle navigation
Toggle navigation pinning
Commit f96995a7 f96995a79ba81e543b4ff16cc83ffc112e201064 by 杨俊
Options

更新

1 parent f5e26bd2
Inline Side-by-side
Showing 6 changed files with 387 additions and 265 deletions
1 <template> 1 <template>
2 <div> 2 <div>
3 <group-member-list :groupProfile="groupProfile" /> 3 <group-member-list :groupProfile="groupProfile"/>
4 <div class="group-info-content"> 4 <div class="group-info-content">
5 <div class="info-item"> 5 <div class="info-item">
6 <div class="label">群ID</div> 6 <div class="label">群ID</div>
...@@ -34,10 +34,10 @@ ...@@ -34,10 +34,10 @@
34 /> 34 />
35 </div> 35 </div>
36 36
37 <div class="info-item"> 37 <!-- <div class="info-item">-->
38 <div class="label">群类型</div> 38 <!-- <div class="label">群类型</div>-->
39 <div class="content">{{ groupType}}</div> 39 <!-- <div class="content">{{ groupType }}</div>-->
40 </div> 40 <!-- </div>-->
41 <div class="info-item"> 41 <div class="info-item">
42 <div class="label"> 42 <div class="label">
43 群名称 43 群名称
...@@ -104,50 +104,50 @@ ...@@ -104,50 +104,50 @@
104 style="cursor:pointer; font-size:16px;" 104 style="cursor:pointer; font-size:16px;"
105 /> 105 />
106 </div> 106 </div>
107 <div class="long-content" :title="groupProfile.notification" v-if="!showEditNotification"> 107 <div class="long-content" :title="notice" v-if="!showEditNotification">
108 {{ groupProfile.notification || '暂无' }} 108 {{ notice || '暂无' }}
109 </div> 109 </div>
110 110
111 <el-input 111 <!-- <el-input-->
112 ref="editNotification" 112 <!-- ref="editNotification"-->
113 v-else 113 <!-- v-else-->
114 autofocus 114 <!-- autofocus-->
115 v-model="notification" 115 <!-- v-model="notification"-->
116 size="mini" 116 <!-- size="mini"-->
117 @blur="showEditNotification = false" 117 <!-- @blur="showEditNotification = false"-->
118 @keydown.enter.native="editNotification" 118 <!-- @keydown.enter.native="editNotification"-->
119 /> 119 <!-- />-->
120 </div>
121 <div class="info-item" v-if="groupProfile.type !== 'Private'">
122 <div class="label">
123 申请加群方式
124 <!-- <i-->
125 <!-- class="el-icon-edit"-->
126 <!-- v-if="editable"-->
127 <!-- @click="-->
128 <!-- showEditJoinOption = true-->
129 <!-- inputFocus('editJoinOption')-->
130 <!-- "-->
131 <!-- style="cursor:pointer; font-size:16px;"-->
132 <!-- />-->
133 </div>
134 <div class="content" v-show="!showEditJoinOption">
135 {{ joinOptionMap[groupProfile.joinOption] }}
136 </div>
137 <el-select
138 ref="editJoinOption"
139 v-model="joinOption"
140 v-show="showEditJoinOption"
141 size="mini"
142 automatic-dropdown
143 @blur="showEditJoinOption = false"
144 @change="editJoinOption"
145 >
146 <el-option label="自由加入" value="FreeAccess"></el-option>
147 <el-option label="需要验证" value="NeedPermission"></el-option>
148 <el-option label="禁止加群" value="DisableApply"></el-option>
149 </el-select>
150 </div> 120 </div>
121 <!-- <div class="info-item" v-if="groupProfile.type !== 'Private'">-->
122 <!-- <div class="label">-->
123 <!-- 申请加群方式-->
124 <!-- &lt;!&ndash; <i&ndash;&gt;-->
125 <!-- &lt;!&ndash; class="el-icon-edit"&ndash;&gt;-->
126 <!-- &lt;!&ndash; v-if="editable"&ndash;&gt;-->
127 <!-- &lt;!&ndash; @click="&ndash;&gt;-->
128 <!-- &lt;!&ndash; showEditJoinOption = true&ndash;&gt;-->
129 <!-- &lt;!&ndash; inputFocus('editJoinOption')&ndash;&gt;-->
130 <!-- &lt;!&ndash; "&ndash;&gt;-->
131 <!-- &lt;!&ndash; style="cursor:pointer; font-size:16px;"&ndash;&gt;-->
132 <!-- &lt;!&ndash; />&ndash;&gt;-->
133 <!-- </div>-->
134 <!-- <div class="content" v-show="!showEditJoinOption">-->
135 <!-- {{ joinOptionMap[groupProfile.joinOption] }}-->
136 <!-- </div>-->
137 <!-- <el-select-->
138 <!-- ref="editJoinOption"-->
139 <!-- v-model="joinOption"-->
140 <!-- v-show="showEditJoinOption"-->
141 <!-- size="mini"-->
142 <!-- automatic-dropdown-->
143 <!-- @blur="showEditJoinOption = false"-->
144 <!-- @change="editJoinOption"-->
145 <!-- >-->
146 <!-- <el-option label="自由加入" value="FreeAccess"></el-option>-->
147 <!-- <el-option label="需要验证" value="NeedPermission"></el-option>-->
148 <!-- <el-option label="禁止加群" value="DisableApply"></el-option>-->
149 <!-- </el-select>-->
150 <!-- </div>-->
151 <div class="info-item"> 151 <div class="info-item">
152 <div class="label"> 152 <div class="label">
153 群消息提示类型 153 群消息提示类型
...@@ -178,64 +178,66 @@ ...@@ -178,64 +178,66 @@
178 <el-option label="屏蔽消息" value="Discard"></el-option> 178 <el-option label="屏蔽消息" value="Discard"></el-option>
179 </el-select> 179 </el-select>
180 </div> 180 </div>
181 <div class="info-item"> 181 <!-- <div class="info-item">-->
182 <div class="label"> 182 <!-- <div class="label">-->
183 我的群名片 183 <!-- 我的群名片-->
184 <i 184 <!-- <i-->
185 class="el-icon-edit" 185 <!-- class="el-icon-edit"-->
186 @click=" 186 <!-- @click="-->
187 showEditNameCard = true 187 <!-- showEditNameCard = true-->
188 inputFocus('editNameCard') 188 <!-- inputFocus('editNameCard')-->
189 " 189 <!-- "-->
190 style="cursor:pointer; font-size:16px;" 190 <!-- style="cursor:pointer; font-size:16px;"-->
191 /> 191 <!-- />-->
192 </div> 192 <!-- </div>-->
193 <div class="content cursor-pointer" v-if="!showEditNameCard"> 193 <!-- <div class="content cursor-pointer" v-if="!showEditNameCard">-->
194 {{ groupProfile.selfInfo.nameCard || '暂无' }} 194 <!-- {{ groupProfile.selfInfo.nameCard || '暂无' }}-->
195 </div> 195 <!-- </div>-->
196 <el-input 196 <!-- <el-input-->
197 ref="editNameCard" 197 <!-- ref="editNameCard"-->
198 v-else 198 <!-- v-else-->
199 autofocus 199 <!-- autofocus-->
200 v-model="nameCard" 200 <!-- v-model="nameCard"-->
201 size="mini" 201 <!-- size="mini"-->
202 @blur="showEditNameCard = false" 202 <!-- @blur="showEditNameCard = false"-->
203 @keydown.enter.native="editNameCard" 203 <!-- @keydown.enter.native="editNameCard"-->
204 /> 204 <!-- />-->
205 </div> 205 <!-- </div>-->
206 <!-- <div class="info-item">--> 206 <!-- <div class="info-item">-->
207 <!-- <div class="label" :class="{'active' : active}">全体禁言</div>--> 207 <!-- <div class="label" :class="{'active' : active}">全体禁言</div>-->
208 <!-- <el-switch--> 208 <!-- <el-switch-->
209 <!-- v-model="muteAllMembers"--> 209 <!-- v-model="muteAllMembers"-->
210 <!-- active-color="#409eff"--> 210 <!-- active-color="#409eff"-->
211 <!-- inactive-color="#dcdfe6"--> 211 <!-- inactive-color="#dcdfe6"-->
212 <!-- @change='changeMuteStatus'>--> 212 <!-- @change='changeMuteStatus'>-->
213 <!-- </el-switch>--> 213 <!-- </el-switch>-->
214 <!-- </div>--> 214 <!-- </div>-->
215 <!-- <div v-if="isOwner">--> 215 <!-- <div v-if="isOwner">-->
216 <!-- <el-button type="text" @click="showChangeGroupOwner = true">转让群组</el-button>--> 216 <!-- <el-button type="text" @click="showChangeGroupOwner = true">转让群组</el-button>-->
217 <!-- <el-input--> 217 <!-- <el-input-->
218 <!-- v-if="showChangeGroupOwner"--> 218 <!-- v-if="showChangeGroupOwner"-->
219 <!-- v-model="newOwnerUserID"--> 219 <!-- v-model="newOwnerUserID"-->
220 <!-- placeholder="新群主的userID"--> 220 <!-- placeholder="新群主的userID"-->
221 <!-- size="mini"--> 221 <!-- size="mini"-->
222 <!-- @blur="showChangeGroupOwner = false"--> 222 <!-- @blur="showChangeGroupOwner = false"-->
223 <!-- @keydown.enter.native="changeOwner"--> 223 <!-- @keydown.enter.native="changeOwner"-->
224 <!-- />--> 224 <!-- />-->
225 <!-- </div>--> 225 <!-- </div>-->
226 <div> 226 <div>
227 <el-button type="text" style="color:red;" @click="quitGroup">退出群组</el-button> 227 <el-button type="text" style="color:red;" @click="quitGroup">退出群组</el-button>
228 </div> 228 </div>
229 <!-- <div v-if="showDissmissGroup">--> 229 <!-- <div v-if="showDissmissGroup">-->
230 <!-- <el-button type="text" style="color:red;" @click="dismissGroup">解散群组</el-button>--> 230 <!-- <el-button type="text" style="color:red;" @click="dismissGroup">解散群组</el-button>-->
231 <!-- </div>--> 231 <!-- </div>-->
232 </div> 232 </div>
233 </div> 233 </div>
234 </template> 234 </template>
235 235
236 <script> 236 <script>
237 import GroupMemberList from './group-member-list.vue' 237 import GroupMemberList from './group-member-list.vue'
238 import { Select, Option, Switch } from 'element-ui' 238 import {Option, Select, Switch} from 'element-ui'
239 import _ from 'loadsh'
240
239 export default { 241 export default {
240 props: ['groupProfile'], 242 props: ['groupProfile'],
241 components: { 243 components: {
...@@ -273,14 +275,14 @@ export default { ...@@ -273,14 +275,14 @@ export default {
273 NeedPermission: '需要验证', 275 NeedPermission: '需要验证',
274 DisableApply: '禁止加群' 276 DisableApply: '禁止加群'
275 }, 277 },
276 active:false 278 active: false
277 } 279 }
278 }, 280 },
279 computed: { 281 computed: {
280 editable() { 282 editable() {
281 return ( 283 return (
282 this.groupProfile.type === this.TIM.TYPES.GRP_WORK || 284 this.groupProfile.type === this.TIM.TYPES.GRP_WORK ||
283 [this.TIM.TYPES.GRP_MBR_ROLE_OWNER, this.TIM.TYPES.GRP_MBR_ROLE_ADMIN].includes(this.groupProfile.selfInfo.role) 285 [this.TIM.TYPES.GRP_MBR_ROLE_OWNER, this.TIM.TYPES.GRP_MBR_ROLE_ADMIN].includes(this.groupProfile.selfInfo.role)
284 ) 286 )
285 }, 287 },
286 isOwner() { 288 isOwner() {
...@@ -306,6 +308,11 @@ export default { ...@@ -306,6 +308,11 @@ export default {
306 default: 308 default:
307 return '' 309 return ''
308 } 310 }
311 },
312 notice() {
313 let val = _.get(_.first(this.groupProfile.groupCustomField.filter(item => item.key === 'ActivityNotice')), 'value', '')
314
315 return val.length === 0 ? '' : _.get(JSON.parse(val), 'notice', '')
309 } 316 }
310 }, 317 },
311 watch: { 318 watch: {
...@@ -337,63 +344,63 @@ export default { ...@@ -337,63 +344,63 @@ export default {
337 }, 344 },
338 editName() { 345 editName() {
339 this.tim 346 this.tim
340 .updateGroupProfile({ 347 .updateGroupProfile({
341 groupID: this.groupProfile.groupID, 348 groupID: this.groupProfile.groupID,
342 name: this.name.trim() 349 name: this.name.trim()
343 }) 350 })
344 .then(() => { 351 .then(() => {
345 this.showEditName = false 352 this.showEditName = false
346 }) 353 })
347 .catch(error => { 354 .catch(error => {
348 this.$store.commit('showMessage', { 355 this.$store.commit('showMessage', {
349 type: 'error', 356 type: 'error',
350 message: error.message 357 message: error.message
358 })
351 }) 359 })
352 })
353 }, 360 },
354 editFaceUrl() { 361 editFaceUrl() {
355 this.tim 362 this.tim
356 .updateGroupProfile({ 363 .updateGroupProfile({
357 groupID: this.groupProfile.groupID, 364 groupID: this.groupProfile.groupID,
358 avatar: this.avatar.trim() 365 avatar: this.avatar.trim()
359 }) 366 })
360 .then(() => { 367 .then(() => {
361 this.showEditFaceUrl = false 368 this.showEditFaceUrl = false
362 }) 369 })
363 .catch(error => { 370 .catch(error => {
364 this.$store.commit('showMessage', { 371 this.$store.commit('showMessage', {
365 type: 'error', 372 type: 'error',
366 message: error.message 373 message: error.message
374 })
367 }) 375 })
368 })
369 }, 376 },
370 changeMuteStatus() { 377 changeMuteStatus() {
371 if (this.isOwner || this.isAdmin) { 378 if (this.isOwner || this.isAdmin) {
372 this.tim 379 this.tim
373 .updateGroupProfile({ 380 .updateGroupProfile({
374 muteAllMembers: this.muteAllMembers, 381 muteAllMembers: this.muteAllMembers,
375 groupID: this.groupProfile.groupID 382 groupID: this.groupProfile.groupID
376 })
377 .then(imResponse => {
378 this.muteAllMembers = imResponse.data.group.muteAllMembers
379 if (this.muteAllMembers) {
380 this.active = true
381 this.$store.commit('showMessage', {
382 message: '全体禁言'
383 }) 383 })
384 } else { 384 .then(imResponse => {
385 this.active = false 385 this.muteAllMembers = imResponse.data.group.muteAllMembers
386 this.$store.commit('showMessage', { 386 if (this.muteAllMembers) {
387 message: '取消全体禁言' 387 this.active = true
388 this.$store.commit('showMessage', {
389 message: '全体禁言'
390 })
391 } else {
392 this.active = false
393 this.$store.commit('showMessage', {
394 message: '取消全体禁言'
395 })
396 }
397 })
398 .catch(error => {
399 this.$store.commit('showMessage', {
400 type: 'error',
401 message: error.message
402 })
388 }) 403 })
389 }
390 })
391 .catch(error => {
392 this.$store.commit('showMessage', {
393 type: 'error',
394 message: error.message
395 })
396 })
397 } else { 404 } else {
398 this.muteAllMembers = this.groupProfile.muteAllMembers 405 this.muteAllMembers = this.groupProfile.muteAllMembers
399 this.$store.commit('showMessage', { 406 this.$store.commit('showMessage', {
...@@ -404,74 +411,74 @@ export default { ...@@ -404,74 +411,74 @@ export default {
404 }, 411 },
405 editIntroduction() { 412 editIntroduction() {
406 this.tim 413 this.tim
407 .updateGroupProfile({ 414 .updateGroupProfile({
408 groupID: this.groupProfile.groupID, 415 groupID: this.groupProfile.groupID,
409 introduction: this.introduction.trim() 416 introduction: this.introduction.trim()
410 }) 417 })
411 .then(() => { 418 .then(() => {
412 this.showEditIntroduction = false 419 this.showEditIntroduction = false
413 }) 420 })
414 .catch(error => { 421 .catch(error => {
415 this.$store.commit('showMessage', { 422 this.$store.commit('showMessage', {
416 type: 'error', 423 type: 'error',
417 message: error.message 424 message: error.message
425 })
418 }) 426 })
419 })
420 }, 427 },
421 editNotification() { 428 editNotification() {
422 this.tim 429 this.tim
423 .updateGroupProfile({ 430 .updateGroupProfile({
424 groupID: this.groupProfile.groupID, 431 groupID: this.groupProfile.groupID,
425 notification: this.notification.trim() 432 notification: this.notification.trim()
426 }) 433 })
427 .then(() => { 434 .then(() => {
428 this.showEditNotification = false 435 this.showEditNotification = false
429 }) 436 })
430 .catch(error => { 437 .catch(error => {
431 this.$store.commit('showMessage', { 438 this.$store.commit('showMessage', {
432 type: 'error', 439 type: 'error',
433 message: error.message 440 message: error.message
441 })
434 }) 442 })
435 })
436 }, 443 },
437 editJoinOption() { 444 editJoinOption() {
438 this.tim 445 this.tim
439 .updateGroupProfile({ 446 .updateGroupProfile({
440 groupID: this.groupProfile.groupID, 447 groupID: this.groupProfile.groupID,
441 joinOption: this.joinOption 448 joinOption: this.joinOption
442 }) 449 })
443 .then(() => { 450 .then(() => {
444 this.showEditJoinOption = false 451 this.showEditJoinOption = false
445 }) 452 })
446 .catch(error => { 453 .catch(error => {
447 this.$store.commit('showMessage', { 454 this.$store.commit('showMessage', {
448 type: 'error', 455 type: 'error',
449 message: error.message 456 message: error.message
457 })
450 }) 458 })
451 })
452 }, 459 },
453 changeOwner() { 460 changeOwner() {
454 this.tim 461 this.tim
455 .changeGroupOwner({ 462 .changeGroupOwner({
456 groupID: this.groupProfile.groupID, 463 groupID: this.groupProfile.groupID,
457 newOwnerID: this.newOwnerUserID 464 newOwnerID: this.newOwnerUserID
458 })
459 .then(() => {
460 this.showChangeGroupOwner = false
461 this.$store.commit('showMessage', {
462 message: `转让群主成功，新群主ID：${this.newOwnerUserID}`
463 }) 465 })
464 this.newOwnerUserID = '' 466 .then(() => {
465 }) 467 this.showChangeGroupOwner = false
466 .catch(error => { 468 this.$store.commit('showMessage', {
467 this.$store.commit('showMessage', { 469 message: `转让群主成功，新群主ID：${this.newOwnerUserID}`
468 type: 'error', 470 })
469 message: error.message 471 this.newOwnerUserID = ''
472 })
473 .catch(error => {
474 this.$store.commit('showMessage', {
475 type: 'error',
476 message: error.message
477 })
470 }) 478 })
471 })
472 }, 479 },
473 quitGroup() { 480 quitGroup() {
474 this.tim.quitGroup(this.groupProfile.groupID).then(({ data: { groupID } }) => { 481 this.tim.quitGroup(this.groupProfile.groupID).then(({data: {groupID}}) => {
475 this.$store.commit('showMessage', { 482 this.$store.commit('showMessage', {
476 message: '退群成功' 483 message: '退群成功'
477 }) 484 })
...@@ -479,15 +486,15 @@ export default { ...@@ -479,15 +486,15 @@ export default {
479 this.$store.commit('resetCurrentConversation') 486 this.$store.commit('resetCurrentConversation')
480 } 487 }
481 }) 488 })
482 .catch(error => { 489 .catch(error => {
483 this.$store.commit('showMessage', { 490 this.$store.commit('showMessage', {
484 type: 'error', 491 type: 'error',
485 message: error.message 492 message: error.message
493 })
486 }) 494 })
487 })
488 }, 495 },
489 dismissGroup() { 496 dismissGroup() {
490 this.tim.dismissGroup(this.groupProfile.groupID).then(({ data: { groupID } }) => { 497 this.tim.dismissGroup(this.groupProfile.groupID).then(({data: {groupID}}) => {
491 this.$store.commit('showMessage', { 498 this.$store.commit('showMessage', {
492 message: `群：${this.groupProfile.name || this.groupProfile.groupID}解散成功！`, 499 message: `群：${this.groupProfile.name || this.groupProfile.groupID}解散成功！`,
493 type: 'success' 500 type: 'success'
...@@ -496,28 +503,28 @@ export default { ...@@ -496,28 +503,28 @@ export default {
496 this.$store.commit('resetCurrentConversation') 503 this.$store.commit('resetCurrentConversation')
497 } 504 }
498 }) 505 })
499 .catch(error => { 506 .catch(error => {
500 this.$store.commit('showMessage', { 507 this.$store.commit('showMessage', {
501 type: 'error', 508 type: 'error',
502 message: error.message 509 message: error.message
510 })
503 }) 511 })
504 })
505 }, 512 },
506 editMessageRemindType() { 513 editMessageRemindType() {
507 this.tim 514 this.tim
508 .setMessageRemindType({ 515 .setMessageRemindType({
509 groupID: this.groupProfile.groupID, 516 groupID: this.groupProfile.groupID,
510 messageRemindType: this.messageRemindType 517 messageRemindType: this.messageRemindType
511 }) 518 })
512 .then(() => { 519 .then(() => {
513 this.showEditMessageRemindType = false 520 this.showEditMessageRemindType = false
514 }) 521 })
515 .catch(error => { 522 .catch(error => {
516 this.$store.commit('showMessage', { 523 this.$store.commit('showMessage', {
517 type: 'error', 524 type: 'error',
518 message: error.message 525 message: error.message
526 })
519 }) 527 })
520 })
521 }, 528 },
522 editNameCard() { 529 editNameCard() {
523 if (this.nameCard.trim().length === 0) { 530 if (this.nameCard.trim().length === 0) {
...@@ -528,19 +535,19 @@ export default { ...@@ -528,19 +535,19 @@ export default {
528 return 535 return
529 } 536 }
530 this.tim 537 this.tim
531 .setGroupMemberNameCard({ 538 .setGroupMemberNameCard({
532 groupID: this.groupProfile.groupID, 539 groupID: this.groupProfile.groupID,
533 nameCard: this.nameCard.trim() 540 nameCard: this.nameCard.trim()
534 }) 541 })
535 .then(() => { 542 .then(() => {
536 this.showEditNameCard = false 543 this.showEditNameCard = false
537 }) 544 })
538 .catch(error => { 545 .catch(error => {
539 this.$store.commit('showMessage', { 546 this.$store.commit('showMessage', {
540 type: 'error', 547 type: 'error',
541 message: error.message 548 message: error.message
549 })
542 }) 550 })
543 })
544 } 551 }
545 } 552 }
546 } 553 }
...@@ -549,10 +556,12 @@ export default { ...@@ -549,10 +556,12 @@ export default {
549 <style lang="stylus"> 556 <style lang="stylus">
550 .group-info-content 557 .group-info-content
551 padding 10px 10px 558 padding 10px 10px
559
552 .avatar 560 .avatar
553 width 40px 561 width 40px
554 height 40px 562 height 40px
555 border-radius 50% 563 border-radius 50%
564
556 .info-item { 565 .info-item {
557 margin-bottom: 12px; 566 margin-bottom: 12px;
558 567
...@@ -560,16 +569,19 @@ export default { ...@@ -560,16 +569,19 @@ export default {
560 font-size: 14px; 569 font-size: 14px;
561 color: $secondary; 570 color: $secondary;
562 } 571 }
572
563 .active { 573 .active {
564 color: $black 574 color: $black
565 } 575 }
576
566 .content { 577 .content {
567 color: $background; 578 color: $background;
568 word-wrap: break-word; 579 word-wrap: break-word;
569 word-break: break-all; 580 word-break: break-all;
570 } 581 }
582
571 .long-content { 583 .long-content {
572 word-wrap:break-word; 584 word-wrap: break-word;
573 overflow: hidden; 585 overflow: hidden;
574 text-overflow: ellipsis; 586 text-overflow: ellipsis;
575 display: -webkit-box; 587 display: -webkit-box;
...@@ -577,9 +589,11 @@ export default { ...@@ -577,9 +589,11 @@ export default {
577 -webkit-line-clamp: 3; 589 -webkit-line-clamp: 3;
578 } 590 }
579 } 591 }
592
580 .cursor-pointer { 593 .cursor-pointer {
581 cursor: pointer; 594 cursor: pointer;
582 } 595 }
596
583 /* 设置滚动条的样式 */ 597 /* 设置滚动条的样式 */
584 ::-webkit-scrollbar { 598 ::-webkit-scrollbar {
585 width: 0px; 599 width: 0px;
......
...@@ -34,16 +34,19 @@ export default { ...@@ -34,16 +34,19 @@ export default {
34 </script> 34 </script>
35 35
36 <style lang="stylus" scoped> 36 <style lang="stylus" scoped>
37 .avatar
38 height 48px
39 width 48px
40
41
37 .friend-item-container 42 .friend-item-container
38 color #f7f7f8 43 color #f7f7f8
44 padding 10px 15px
39 45
40 :hover 46 :hover
41 background-color #404953 47 background-color #404953
42 cursor pointer 48 cursor pointer
43 49
44 .friend-list
45 padding 10px 15px
46
47 .friend-avatar 50 .friend-avatar
48 height 48px 51 height 48px
49 width 48px 52 width 48px
......
1 <template> 1 <template>
2 <div class="list-container"> 2 <div class="list-container">
3 <div class="header-bar"> 3 <div class="header-bar">
4 <el-input v-model="select" size="mini" placeholder="筛选昵称" prefix-icon="el-icon-search"/> 4 <el-input v-model="search" size="mini" placeholder="筛选昵称" @keyup.enter.native="handleSearch">
5 </el-input>
6 <el-button icon="el-icon-search" size="mini" circle @click="handleSearch" title="搜索"/>
5 </div> 7 </div>
6 <el-collapse v-model="activeNames" class="friend-list-container"> 8 <el-collapse v-model="activeNames" class="friend-list-container">
7 <el-collapse-item title="用户组" name="user"> 9 <el-collapse-item title="用户组" name="user">
8 <friend-item v-for="friend in userList" :key="friend.ems_id" :friend="friend"/> 10 <friend-item v-for="friend in user.list" :key="friend.ems_id" :friend="friend"/>
11 <el-button :loading="user.loading" v-show="user.list.length < user.paginate.total" type="text"
12 style="width: 100%"
13 @click="$store.dispatch('getFriendList',{ type: 'user', page: user.paginate.page + 1, method:'append' })">
14 加载更多
15 </el-button>
9 </el-collapse-item> 16 </el-collapse-item>
10 <el-collapse-item title="策划组" name="scheme"> 17 <el-collapse-item title="策划组" name="scheme">
11 <friend-item v-for="friend in schemeList" :key="friend.ems_id" :friend="friend"/> 18 <friend-item v-for="friend in scheme.list" :key="friend.ems_id" :friend="friend"/>
19 <el-button :loading="scheme.loading" v-show="scheme.list.length < scheme.paginate.total" type="text"
20 style="width: 100%"
21 @click="$store.dispatch('getFriendList',{ type: 'scheme', page: scheme.paginate.page + 1, method:'append' })">
22 加载更多
23 </el-button>
12 </el-collapse-item> 24 </el-collapse-item>
13 <el-collapse-item title="管理组" name="admin"> 25 <el-collapse-item title="管理组" name="admin">
14 <friend-item v-for="friend in adminList" :key="friend.ems_id" :friend="friend"/> 26 <friend-item v-for="friend in admin.list" :key="friend.ems_id" :friend="friend"/>
27 <el-button :loading="admin.loading" v-show="admin.list.length < admin.paginate.total" type="text"
28 style="width: 100%"
29 @click="$store.dispatch('getFriendList',{ type: 'admin', page: admin.paginate.page + 1, method:'append' })">
30 加载更多
31 </el-button>
15 </el-collapse-item> 32 </el-collapse-item>
16 </el-collapse> 33 </el-collapse>
17 </div> 34 </div>
...@@ -27,28 +44,37 @@ export default { ...@@ -27,28 +44,37 @@ export default {
27 FriendItem, 44 FriendItem,
28 }, 45 },
29 computed: { 46 computed: {
47 search: {
48 set(val) {
49 this.$store.commit('updateFriendSearch', val)
50 },
51 get() {
52 return this.$store.state.friend.search
53 }
54 },
30 ...mapState({ 55 ...mapState({
31 adminList(state) { 56 user(state) {
32 const list = state.friend.adminList || [] 57 return state.friend.user
33 return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
34 }, 58 },
35 userList(state) { 59 scheme(state) {
36 const list = state.friend.userList || [] 60 return state.friend.scheme
37 return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1) 61 },
62 admin(state) {
63 return state.friend.admin
38 }, 64 },
39 schemeList(state) {
40 const list = state.friend.schemeList || []
41 return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
42 }
43 }), 65 }),
44 }, 66 },
45 data() { 67 data() {
46 return { 68 return {
47 activeNames: [], 69 activeNames: [],
48 select: ''
49 } 70 }
50 }, 71 },
51 methods: {} 72 methods: {
73 handleSearch() {
74 this.$store.dispatch('getAllFriendList', {page: 1, size: 20})
75 // this.activeNames = ['user', 'scheme', 'admin']
76 }
77 },
52 } 78 }
53 </script> 79 </script>
54 80
...@@ -89,6 +115,11 @@ export default { ...@@ -89,6 +115,11 @@ export default {
89 border-bottom 1px solid $background-deep-dark 115 border-bottom 1px solid $background-deep-dark
90 padding 10px 10px 10px 20px 116 padding 10px 10px 10px 20px
91 117
118 >>> .el-button
119 color $first
120 border none
121 background-color $deep-background !important
122
92 >>> .el-input 123 >>> .el-input
93 width 100% 124 width 100%
94 margin-right 10px 125 margin-right 10px
......
...@@ -114,6 +114,7 @@ export default { ...@@ -114,6 +114,7 @@ export default {
114 break 114 break
115 case activeName.FRIEND_LIST: 115 case activeName.FRIEND_LIST:
116 this.checkoutActive(activeName.FRIEND_LIST) 116 this.checkoutActive(activeName.FRIEND_LIST)
117 this.getFriendList()
117 break 118 break
118 case activeName.BLACK_LIST: 119 case activeName.BLACK_LIST:
119 this.checkoutActive(activeName.BLACK_LIST) 120 this.checkoutActive(activeName.BLACK_LIST)
...@@ -148,7 +149,8 @@ export default { ...@@ -148,7 +149,8 @@ export default {
148 .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message})) 149 .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message}))
149 }, 150 },
150 getFriendList() { 151 getFriendList() {
151 Helper.contactList().then(res => this.$store.commit('updateFriendList', res.data)) 152 this.$store.commit('updateFriendSearch', '')
153 this.$store.dispatch('getAllFriendList', {page: 1, size: 20})
152 // this.tim 154 // this.tim
153 // .getFriendList() 155 // .getFriendList()
154 // .then(({data: friendList}) => { 156 // .then(({data: friendList}) => {
......
...@@ -142,9 +142,12 @@ export default { ...@@ -142,9 +142,12 @@ export default {
142 .then(({data}) => this.$store.commit('updateCurrentUserProfile', data)) 142 .then(({data}) => this.$store.commit('updateCurrentUserProfile', data))
143 .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message})) 143 .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message}))
144 this.$store.dispatch('getBlacklist') 144 this.$store.dispatch('getBlacklist')
145 Helper.contactList({type: 'admin'}).then(res => this.$store.commit('updateAdminList', res.data)) 145 // Helper.contactList({type: 'admin'}).then(res => this.$store.commit('updateAdminList', res.data))
146 Helper.contactList({type: 'scheme'}).then(res => this.$store.commit('updateSchemeList', res.data)) 146 // Helper.contactList({
147 Helper.contactList({type: 'user'}).then(res => this.$store.commit('updateUserList', res.data)) 147 // type: 'scheme',
148 // method: 'forPaginate'
149 // }).then(res => this.$store.commit('updateSchemeList', res.data))
150 // Helper.contactList({type: 'user'}).then(res => this.$store.commit('updateUserList', res.data))
148 // 登录trtc calling 151 // 登录trtc calling
149 // this.trtcCalling.login({sdkAppID: this.sdkAppID, userID: this.userID, userSig: this.userSig}) 152 // this.trtcCalling.login({sdkAppID: this.sdkAppID, userID: this.userID, userSig: this.userSig})
150 } 153 }
......
1 import _ from 'loadsh'
2 import Helper from '../../utils/helper'
3
1 const friendModules = { 4 const friendModules = {
2 state: { 5 state: {
3 friendList: [], 6 friendList: [],
4 adminList: [], 7 search: '',
5 schemeList: [], 8 user: {
6 userList: [], 9 loading: false,
10 list: [],
11 paginate: {
12 page: 1, size: 20, total: 0
13 }
14 },
15 admin: {
16 loading: false,
17 list: [],
18 paginate: {
19 page: 1, size: 20, total: 0
20 }
21 },
22 scheme: {
23 loading: false,
24 list: [],
25 paginate: {
26 page: 1, size: 20, total: 0
27 }
28 },
7 createGroupModelVisible: false, 29 createGroupModelVisible: false,
8 }, 30 },
9 getters: {}, 31 getters: {},
...@@ -11,18 +33,65 @@ const friendModules = { ...@@ -11,18 +33,65 @@ const friendModules = {
11 updateFriendList(state, friendList) { 33 updateFriendList(state, friendList) {
12 state.friendList = friendList 34 state.friendList = friendList
13 }, 35 },
14 updateAdminList(state, friendList) { 36 updateFriendSearch(state, search) {
15 state.adminList = friendList 37 state.search = search
38 },
39 updateLoading(state, {type, loading}) {
40 state[type].loading = loading
16 }, 41 },
17 updateSchemeList(state, friendList) { 42 updateList(state, {type, resource}) {
18 state.schemeList = friendList 43 state[type].list = resource.data
44 state[type].paginate = resource.meta
19 }, 45 },
20 updateUserList(state, friendList) { 46 appendList(state, {type, resource}) {
21 state.userList = friendList 47 state[type].list = state[type].list.concat(resource.data)
48 state[type].paginate = resource.meta
22 }, 49 },
50
23 reset(state) { 51 reset(state) {
24 Object.assign(state, {friendList: [], createGroupModelVisible: false}) 52 Object.assign(state, {
53 friendList: [],
54 search: '',
55 user: {
56 loading: false,
57 list: [],
58 paginate: {
59 page: 1, size: 20, total: 0
60 }
61 },
62 admin: {
63 loading: false,
64 list: [],
65 paginate: {
66 page: 1, size: 20, total: 0
67 }
68 },
69 scheme: {
70 loading: false,
71 list: [],
72 paginate: {
73 page: 1, size: 20, total: 0
74 }
75 },
76 createGroupModelVisible: false,
77 })
25 } 78 }
79 },
80 actions: {
81 getAllFriendList({dispatch}, payload) {
82 dispatch('getFriendList', {type: 'user', ...payload})
83 dispatch('getFriendList', {type: 'scheme', ...payload})
84 dispatch('getFriendList', {type: 'admin', ...payload})
85 },
86 getFriendList({state, commit}, payload) {
87 const type = _.get(payload, 'type', '')
88 const page = _.get(payload, 'page', _.get(state, `${type}.paginate.page`, 1))
89 const size = _.get(payload, 'size', _.get(state, `${type}.paginate.size`, 20))
90 const search = state.search
91 const method = _.get(payload, 'method', 'update')
92 commit('updateLoading', {type, loading: true})
93 Helper.contactList({method: 'forPaginate', search, type, page, size}).then(resource => commit(method + 'List', {type, resource})).finally(() => commit('updateLoading', {type, loading: false}))
94 },
26 } 95 }
27 } 96 }
28 97
......