|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<el-dialog title="邀请好友" :visible.sync="show" width="620px" :before-close="close"> |
|
|
|
<div class="agm-container"> |
|
|
|
<div class="agm-l-box"> |
|
|
|
<el-dialog v-dialogDrag title="邀请好友" :visible.sync="show" width="620px" :before-close="close"> |
|
|
|
<div class="add-group-member"> |
|
|
|
<div class="left-box"> |
|
|
|
<div class="search"> |
|
|
|
<el-input placeholder="搜索好友" v-model="searchText" size="small"> |
|
|
|
<i class="el-icon-search el-input__icon" slot="suffix"> </i> |
|
|
|
@ -11,15 +11,15 @@ |
|
|
|
<div v-for="friend in friends" :key="friend.id"> |
|
|
|
<friend-item v-show="friend.nickName.includes(searchText)" :showDelete="false" |
|
|
|
@click.native="onSwitchCheck(friend)" :menu="false" :friend="friend" :active="false"> |
|
|
|
<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox" |
|
|
|
<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="friend-checkbox" |
|
|
|
v-model="friend.isCheck" size="medium"></el-checkbox> |
|
|
|
</friend-item> |
|
|
|
</div> |
|
|
|
</el-scrollbar> |
|
|
|
</div> |
|
|
|
<div class="agm-arrow el-icon-d-arrow-right"></div> |
|
|
|
<div class="agm-r-box"> |
|
|
|
<div class="agm-select-tip"> 已勾选{{ checkCount }}位好友</div> |
|
|
|
<div class="arrow el-icon-d-arrow-right"></div> |
|
|
|
<div class="right-box"> |
|
|
|
<div class="tip"> 已勾选{{ checkCount }}位好友</div> |
|
|
|
<el-scrollbar style="height:400px;"> |
|
|
|
<div v-for="friend in friends" :key="friend.id"> |
|
|
|
<friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend" :active="false" |
|
|
|
@ -123,11 +123,11 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.agm-container { |
|
|
|
<style lang="scss" scoped> |
|
|
|
.add-group-member { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.agm-l-box { |
|
|
|
.left-box { |
|
|
|
flex: 1; |
|
|
|
overflow: hidden; |
|
|
|
border: var(--im-border); |
|
|
|
@ -141,15 +141,14 @@ export default { |
|
|
|
border: unset; |
|
|
|
border-bottom: var(--im-border); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.agm-friend-checkbox { |
|
|
|
.friend-checkbox { |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.agm-arrow { |
|
|
|
.arrow { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 18px; |
|
|
|
@ -158,15 +157,15 @@ export default { |
|
|
|
color: var(--im-color-primary); |
|
|
|
} |
|
|
|
|
|
|
|
.agm-r-box { |
|
|
|
.right-box { |
|
|
|
flex: 1; |
|
|
|
border: var(--im-border); |
|
|
|
|
|
|
|
.agm-select-tip { |
|
|
|
.tip { |
|
|
|
text-align: left; |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
text-indent: 6px; |
|
|
|
text-indent: 10px; |
|
|
|
color: var(--im-text-color-light) |
|
|
|
} |
|
|
|
} |
|
|
|
|