xsx
2 years ago
12 changed files with 313 additions and 49 deletions
@ -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