xsx
2 years ago
3 changed files with 273 additions and 0 deletions
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<div class="group-member-item" :style="{'height':height+'px'}"> |
|||
<div class="member-avatar"> |
|||
<head-image :size="headImageSize" :name="member.aliasName" |
|||
:url="member.headImage" :online="member.online"> </head-image> |
|||
</div> |
|||
<div class="member-name" :style="{'line-height':height+'px'}"> |
|||
<div>{{ member.aliasName }}</div> |
|||
</div> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HeadImage from "../common/HeadImage.vue"; |
|||
export default { |
|||
name: "groupMember", |
|||
components: { HeadImage }, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
props: { |
|||
member: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
height:{ |
|||
type: Number, |
|||
default: 50 |
|||
} |
|||
}, |
|||
computed:{ |
|||
headImageSize(){ |
|||
return Math.ceil(this.height * 0.75) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.group-member-item { |
|||
display: flex; |
|||
margin-bottom: 1px; |
|||
position: relative; |
|||
padding: 0 15px; |
|||
align-items: center; |
|||
background-color: #fafafa; |
|||
white-space: nowrap; |
|||
box-sizing: border-box; |
|||
|
|||
&:hover { |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
&.active { |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
.member-name { |
|||
flex:1; |
|||
padding-left: 10px; |
|||
height: 100%; |
|||
text-align: left; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<el-dialog title="选择成员" :visible.sync="isShow" width="50%"> |
|||
<div class="group-member-selector"> |
|||
<div class="left-box"> |
|||
<el-input placeholder="搜索" v-model="searchText"> |
|||
<i class="el-icon-search el-input__icon" slot="suffix"> </i> |
|||
</el-input> |
|||
<el-scrollbar style="height:400px;"> |
|||
<div v-for="m in members" :key="m.userId"> |
|||
<group-member-item v-show="!m.quit&&m.aliasName.startsWith(searchText)" |
|||
:member="m" @click.native="onClickMember(m)"> |
|||
<el-checkbox :disabled="m.locked" v-model="m.checked" @change="onChange(m)" |
|||
@click.native.stop=""></el-checkbox> |
|||
</group-member-item> |
|||
</div> |
|||
</el-scrollbar> |
|||
</div> |
|||
<div class="arrow el-icon-d-arrow-right"></div> |
|||
<div class="right-box"> |
|||
<div class="select-tip"> 已勾选{{checkedMembers.length}}位成员</div> |
|||
<div class="checked-member-list"> |
|||
<div v-for="m in members" :key="m.userId"> |
|||
<group-member class="member-item" v-if="m.checked" :member="m"></group-member> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="close()">取 消</el-button> |
|||
<el-button type="primary" @click="ok()">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import GroupMemberItem from './GroupMemberItem.vue'; |
|||
import GroupMember from './GroupMember.vue'; |
|||
|
|||
export default { |
|||
name: "addGroupMember", |
|||
components: { |
|||
GroupMemberItem, |
|||
GroupMember |
|||
}, |
|||
data() { |
|||
return { |
|||
isShow: false, |
|||
searchText: "", |
|||
maxSize: -1, |
|||
members: [] |
|||
} |
|||
}, |
|||
props: { |
|||
groupId: { |
|||
type: Number |
|||
} |
|||
}, |
|||
methods: { |
|||
open(maxSize, checkedIds, lockedIds) { |
|||
this.maxSize = maxSize; |
|||
this.isShow = true; |
|||
this.loadGroupMembers(checkedIds, lockedIds); |
|||
}, |
|||
loadGroupMembers(checkedIds, lockedIds) { |
|||
this.$http({ |
|||
url: `/group/members/${this.groupId}`, |
|||
method: 'get' |
|||
}).then((members) => { |
|||
members.forEach((m) => { |
|||
// 默认选择和锁定的用户 |
|||
m.checked = checkedIds.indexOf(m.userId) >= 0; |
|||
m.locked = lockedIds.indexOf(m.userId) >= 0; |
|||
}); |
|||
this.members = members; |
|||
}); |
|||
}, |
|||
onClickMember(m) { |
|||
if (!m.locked) { |
|||
m.checked = !m.checked; |
|||
} |
|||
if (this.checkedMembers.length > this.maxSize) { |
|||
this.$message.error(`最多选择${this.maxSize}位成员`) |
|||
m.checked = false; |
|||
} |
|||
}, |
|||
onChange(m) { |
|||
if (this.checkedMembers.length > this.maxSize) { |
|||
this.$message.error(`最多选择${this.maxSize}位成员`) |
|||
m.checked = false; |
|||
} |
|||
}, |
|||
ok() { |
|||
this.$emit("complete", this.checkedMembers); |
|||
this.isShow = false; |
|||
}, |
|||
close() { |
|||
this.isShow = false; |
|||
} |
|||
}, |
|||
computed: { |
|||
checkedMembers() { |
|||
let ids = []; |
|||
this.members.forEach((m) => { |
|||
if (m.checked) { |
|||
ids.push(m); |
|||
} |
|||
}) |
|||
return ids; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.group-member-selector { |
|||
display: flex; |
|||
|
|||
.left-box { |
|||
width: 48%; |
|||
border: #587FF0 solid 1px; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
.arrow { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
padding: 10px; |
|||
font-weight: 600; |
|||
color: #687Ff0; |
|||
} |
|||
|
|||
.right-box { |
|||
|
|||
width: 48%; |
|||
border: #587FF0 solid 1px; |
|||
border-radius: 5px; |
|||
|
|||
.select-tip { |
|||
text-align: left; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
text-indent: 5px; |
|||
} |
|||
|
|||
.checked-member-list { |
|||
padding: 10px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
|
|||
.member-item { |
|||
padding: 2px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,42 @@ |
|||
<template> |
|||
<el-dialog v-dialogDrag top="5vh" title="语音通话" :close-on-click-modal="false" :close-on-press-escape="false" |
|||
:visible.sync="isShow" width="50%"> |
|||
<div class='rtc-group-video'> |
|||
<div style="padding-top:30px;font-weight: 600; text-align: center;font-size: 16px;"> |
|||
多人音视频通话为付费功能，有需要请联系作者... |
|||
</div> |
|||
<div style="padding-top:50px; text-align: center;font-size: 16px;"> |
|||
点击下方文档了解详细信息: |
|||
</div> |
|||
<div style="padding-top:10px; text-align: center;font-size: 16px;"> |
|||
<a href="https://www.yuque.com/u1475064/mufu2a/vi7engzluty594s2" target="_blank"> |
|||
付费-音视频通话源码 |
|||
</a> |
|||
</div> |
|||
|
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "rtcGroupVideo", |
|||
data() { |
|||
return { |
|||
isShow: false |
|||
} |
|||
}, |
|||
methods: { |
|||
open() { |
|||
this.isShow = true; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.rtc-group-video { |
|||
height: 300px; |
|||
background-color: #E8F2FF; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue