blue
2 years ago
committed by
Gitee
Gitee
54 changed files with 1403 additions and 630 deletions
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<el-scrollbar v-show="show" ref="scrollBox" class="group-member-choose" |
|||
:style="{'left':pos.x+'px','top':pos.y-300+'px'}"> |
|||
<div v-for="(member,idx) in showMembers" :key="member.id"> |
|||
<div class="member-item" :class="idx==activeIdx?'active':''" @click="onSelectMember(member)"> |
|||
<div class="member-avatar"> |
|||
<head-image :size="25" :name="member.aliasName" :url="member.headImage"> </head-image> |
|||
</div> |
|||
<div class="member-name"> |
|||
<div>{{member.aliasName}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-scrollbar> |
|||
</template> |
|||
|
|||
<script> |
|||
import HeadImage from '../common/HeadImage.vue'; |
|||
|
|||
export default { |
|||
name: "chatAtBox", |
|||
components: { |
|||
HeadImage |
|||
}, |
|||
props: { |
|||
searchText: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
ownerId: { |
|||
type: Number, |
|||
}, |
|||
members: { |
|||
type: Array |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
show: false, |
|||
pos: { |
|||
x: 0, |
|||
y: 0 |
|||
}, |
|||
activeIdx: 0, |
|||
showMembers: [] |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.$refs.scrollBox.wrap.scrollTop = 0; |
|||
this.showMembers = []; |
|||
let userId = this.$store.state.userStore.userInfo.id; |
|||
let name = "全体成员"; |
|||
if (this.ownerId == userId && name.startsWith(this.searchText)) { |
|||
this.showMembers.push({ |
|||
userId: -1, |
|||
aliasName: name |
|||
}) |
|||
} |
|||
this.members.forEach((m) => { |
|||
if (m.userId != userId && m.aliasName.startsWith(this.searchText)) { |
|||
this.showMembers.push(m); |
|||
} |
|||
}) |
|||
this.activeIdx = this.showMembers.length > 0 ? 0: -1; |
|||
}, |
|||
open(pos) { |
|||
this.show = true; |
|||
this.pos = pos; |
|||
this.init(); |
|||
}, |
|||
close() { |
|||
this.show = false; |
|||
}, |
|||
moveUp() { |
|||
if (this.activeIdx > 0) { |
|||
this.activeIdx--; |
|||
this.scrollToActive() |
|||
} |
|||
}, |
|||
moveDown() { |
|||
if (this.activeIdx < this.showMembers.length - 1) { |
|||
this.activeIdx++; |
|||
this.scrollToActive() |
|||
} |
|||
}, |
|||
select() { |
|||
if (this.activeIdx >= 0) { |
|||
this.onSelectMember(this.showMembers[this.activeIdx]) |
|||
} |
|||
this.close(); |
|||
}, |
|||
scrollToActive() { |
|||
if (this.activeIdx * 35 - this.$refs.scrollBox.wrap.clientHeight > this.$refs.scrollBox.wrap.scrollTop) { |
|||
this.$refs.scrollBox.wrap.scrollTop += 140; |
|||
if (this.$refs.scrollBox.wrap.scrollTop > this.$refs.scrollBox.wrap.scrollHeight) { |
|||
this.$refs.scrollBox.wrap.scrollTop = this.$refs.scrollBox.wrap.scrollHeight |
|||
} |
|||
} |
|||
if (this.activeIdx * 35 < this.$refs.scrollBox.wrap.scrollTop) { |
|||
this.$refs.scrollBox.wrap.scrollTop -= 140; |
|||
if (this.$refs.scrollBox.wrap.scrollTop < 0) { |
|||
this.$refs.scrollBox.wrap.scrollTop = 0; |
|||
} |
|||
} |
|||
}, |
|||
onSelectMember(member) { |
|||
this.$emit("select", member); |
|||
this.show = false; |
|||
} |
|||
}, |
|||
computed: { |
|||
isOwner() { |
|||
return this.$store.state.userStore.userInfo.id == this.ownerId; |
|||
} |
|||
}, |
|||
watch: { |
|||
searchText: { |
|||
handler(newText, oldText) { |
|||
this.init(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.group-member-choose { |
|||
position: fixed; |
|||
width: 200px; |
|||
height: 300px; |
|||
border: 1px solid #b4b4b4; |
|||
border-radius: 5px; |
|||
background-color: #f5f5f5; |
|||
box-shadow: 0px 0px 10px #ccc; |
|||
|
|||
.member-item { |
|||
display: flex; |
|||
height: 35px; |
|||
margin-bottom: 1px; |
|||
position: relative; |
|||
padding: 0 5px; |
|||
align-items: center; |
|||
background-color: #fafafa; |
|||
white-space: nowrap; |
|||
box-sizing: border-box; |
|||
|
|||
&:hover { |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
&.active { |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
|
|||
.member-avatar { |
|||
width: 25px; |
|||
height: 25px; |
|||
} |
|||
|
|||
.member-name { |
|||
padding-left: 10px; |
|||
height: 100%; |
|||
text-align: left; |
|||
line-height: 40px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<uni-popup ref="popup" type="bottom" @change="onChange"> |
|||
<view class="chat-at-box"> |
|||
<view class="chat-at-top"> |
|||
<view class="chat-at-tip"> 选择要提醒的人</view> |
|||
<button class="chat-at-btn" type="warn" size="mini" @click="onClean()">清空 </button> |
|||
<button class="chat-at-btn" type="primary" size="mini" @click="onOk()">确定({{atUserIds.length}}) |
|||
</button> |
|||
</view> |
|||
<scroll-view v-show="atUserIds.length>0" scroll-x="true" scroll-left="120"> |
|||
<view class="at-user-items"> |
|||
<view v-for="m in showMembers" v-show="m.checked" class="at-user-item"> |
|||
<head-image :name="m.aliasName" :url="m.headImage" :size="60"></head-image> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="search-bar"> |
|||
<uni-search-bar v-model="searchText" cancelButton="none" placeholder="搜索"></uni-search-bar> |
|||
</view> |
|||
<view class="member-items"> |
|||
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true"> |
|||
<view v-for="m in showMembers" v-show="m.aliasName.startsWith(searchText)" |
|||
:key="m.userId"> |
|||
<view class="member-item" @click="onSwitchChecked(m)"> |
|||
<head-image :name="m.aliasName" :online="m.online" :url="m.headImage" |
|||
:size="90"></head-image> |
|||
<view class="member-name">{{ m.aliasName}}</view> |
|||
<view class="member-checked"> |
|||
<radio :checked="m.checked" @click.stop="onSwitchChecked(m)" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "chat-at-box", |
|||
props: { |
|||
ownerId: { |
|||
type: Number, |
|||
}, |
|||
members: { |
|||
type: Array |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
searchText: "", |
|||
showMembers:[] |
|||
}; |
|||
}, |
|||
methods: { |
|||
init(atUserIds) { |
|||
this.showMembers = []; |
|||
let userId = this.$store.state.userStore.userInfo.id; |
|||
if(this.ownerId == userId){ |
|||
this.showMembers.push({ |
|||
userId:-1, |
|||
aliasName: "全体成员" |
|||
}) |
|||
} |
|||
this.members.forEach((m) => { |
|||
if(m.userId != userId){ |
|||
m.checked = atUserIds.indexOf(m.userId) >= 0; |
|||
this.showMembers.push(m); |
|||
} |
|||
}); |
|||
}, |
|||
open() { |
|||
this.$refs.popup.open(); |
|||
}, |
|||
onSwitchChecked(member) { |
|||
member.checked = !member.checked; |
|||
}, |
|||
onClean() { |
|||
this.showMembers.forEach((m) => { |
|||
m.checked = false; |
|||
}) |
|||
}, |
|||
onOk() { |
|||
this.$refs.popup.close(); |
|||
}, |
|||
onChange(e) { |
|||
if (!e.show) { |
|||
this.$emit("complete", this.atUserIds) |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
atUserIds() { |
|||
let ids = []; |
|||
this.showMembers.forEach((m) => { |
|||
if (m.checked) { |
|||
ids.push(m.userId); |
|||
} |
|||
}) |
|||
return ids; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
.chat-at-box { |
|||
position: relative; |
|||
border: #dddddd solid 1rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: white; |
|||
padding: 10rpx; |
|||
border-radius: 15rpx; |
|||
|
|||
.chat-at-top { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 70rpx; |
|||
padding: 10rpx; |
|||
|
|||
.chat-at-tip { |
|||
flex: 1; |
|||
} |
|||
|
|||
.chat-at-btn { |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.at-user-items { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 90rpx; |
|||
|
|||
.at-user-item { |
|||
padding: 3rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.member-items { |
|||
position: relative; |
|||
flex: 1; |
|||
overflow: hidden; |
|||
|
|||
.member-item { |
|||
height: 120rpx; |
|||
display: flex; |
|||
position: relative; |
|||
padding: 0 30rpx; |
|||
align-items: center; |
|||
background-color: white; |
|||
white-space: nowrap; |
|||
|
|||
.member-name { |
|||
flex: 1; |
|||
padding-left: 20rpx; |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
line-height: 60rpx; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
.scroll-bar { |
|||
height: 800rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Binary file not shown.
Loading…
Reference in new issue