233 lines
8.4 KiB
Vue
233 lines
8.4 KiB
Vue
<template>
|
|
<view class="page edge">
|
|
<fy-header title="通讯录">
|
|
<template #right>
|
|
<view class="ico" @click="goGroup">
|
|
<wd-icon name="usergroup" size="40rpx" color="#111827" />
|
|
</view>
|
|
</template>
|
|
</fy-header>
|
|
<fy-scroll class="edge-scroll" dock @refresh="reload">
|
|
<view class="finder">
|
|
<wd-icon name="search" size="28rpx" color="#9CA3AF" />
|
|
<input v-model="q" class="finder-input" placeholder="搜索同事、部门或手机号" placeholder-class="finder-ph" confirm-type="search" />
|
|
<view v-if="q" class="finder-clear" @click="q = ''">
|
|
<wd-icon name="close-bold" size="22rpx" color="#9CA3AF" />
|
|
</view>
|
|
</view>
|
|
<view class="shortcuts">
|
|
<view class="org" @click="goGroups">
|
|
<view class="obox group">
|
|
<wd-icon name="usergroup" size="36rpx" color="#1677FF" />
|
|
</view>
|
|
<view class="ometa">
|
|
<text class="on">群聊</text>
|
|
<text class="os">{{ groupCount }} 个群</text>
|
|
</view>
|
|
<wd-icon name="arrow-right" size="28rpx" color="#D1D5DB" />
|
|
</view>
|
|
<view class="org" @click="goSearch">
|
|
<view class="obox orgn">
|
|
<wd-icon name="layers" size="36rpx" color="#16A34A" />
|
|
</view>
|
|
<view class="ometa">
|
|
<text class="on">全员架构</text>
|
|
<text class="os">{{ deptCount }} 个部门 · {{ peopleCount }} 位在职</text>
|
|
</view>
|
|
<wd-icon name="arrow-right" size="28rpx" color="#D1D5DB" />
|
|
</view>
|
|
</view>
|
|
<view v-for="g in groups" :key="g.name" class="block">
|
|
<view class="dept" @click="toggle(g.name)">
|
|
<text class="dept-name">{{ g.name }}</text>
|
|
<text class="cnt">{{ g.people.length }}</text>
|
|
<wd-icon class="chev" :name="open[g.name] === false ? 'arrow-right' : 'arrow-down'" size="24rpx" color="#9CA3AF" />
|
|
</view>
|
|
<view v-if="open[g.name] !== false" class="card people">
|
|
<view v-for="p in g.people" :key="p.id" class="item" @click="openPerson(p)">
|
|
<view class="av-wrap">
|
|
<image v-if="p.avatar" class="av" :src="p.avatar" mode="aspectFill" />
|
|
<view v-else class="av txt">{{ p.name.slice(0, 1) }}</view>
|
|
<view v-if="p.online" class="dot" />
|
|
</view>
|
|
<view class="meta">
|
|
<text class="name">{{ p.name }}</text>
|
|
<text class="sub">{{ p.title || (p.online ? '在线' : '离线') }}</text>
|
|
</view>
|
|
<view class="acts">
|
|
<view class="mini" @click.stop="chat(p)">
|
|
<wd-icon name="chat" size="34rpx" color="#1677FF" />
|
|
</view>
|
|
<view class="mini" @click.stop="call(p)">
|
|
<wd-icon name="phone" size="34rpx" color="#1677FF" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="!groups.length" class="empty">没有匹配的同事</view>
|
|
<text class="foot">仅显示当前所属企业成员</text>
|
|
</fy-scroll>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import FyHeader from '../../components/fy-header.vue'
|
|
import FyScroll from '../../components/fy-scroll.vue'
|
|
import { store } from '../../utils/store.js'
|
|
import { toast } from '../../utils/format.js'
|
|
|
|
export default {
|
|
components: { FyHeader, FyScroll },
|
|
data() {
|
|
return { q: '', open: {}, off: null }
|
|
},
|
|
computed: {
|
|
peopleCount() {
|
|
return Object.keys(store.people).length
|
|
},
|
|
deptCount() {
|
|
return new Set(Object.values(store.people).map((p) => p.department || '未分组')).size
|
|
},
|
|
groupCount() {
|
|
return store.conversations.filter((c) => c.type === 'group').length
|
|
},
|
|
groups() {
|
|
const q = this.q.trim()
|
|
const list = Object.values(store.people).filter((p) => {
|
|
if (store.me && p.id === store.me.id) return false
|
|
if (!q) return true
|
|
return (p.name + p.department + p.phone + p.title).includes(q)
|
|
})
|
|
const map = {}
|
|
list.forEach((p) => {
|
|
const d = p.department || '未分组'
|
|
if (!map[d]) map[d] = []
|
|
map[d].push(p)
|
|
})
|
|
return Object.keys(map).sort().map((name) => ({ name, people: map[name] }))
|
|
}
|
|
},
|
|
onShow() {
|
|
if (store.phase !== 'app') uni.reLaunch({ url: '/pages/login/login' })
|
|
if (this.off) this.off()
|
|
store.refreshPeoplePhotos()
|
|
this.off = store.on(() => this.$forceUpdate())
|
|
},
|
|
onHide() { if (this.off) this.off() },
|
|
methods: {
|
|
toggle(name) {
|
|
this.open[name] = this.open[name] === false
|
|
},
|
|
openPerson(p) {
|
|
uni.navigateTo({ url: '/pages/contact/detail?id=' + encodeURIComponent(p.id) })
|
|
},
|
|
chat(p) {
|
|
const conv = store.openDirect(p)
|
|
uni.navigateTo({ url: '/pages/chat/chat?sid=' + encodeURIComponent(conv.id) })
|
|
},
|
|
call(p) {
|
|
if (!p.phone) return toast('该同事未登记手机号')
|
|
uni.makePhoneCall({ phoneNumber: String(p.phone) })
|
|
},
|
|
reload() { store.refreshPeoplePhotos() },
|
|
goSearch() { uni.navigateTo({ url: '/pages/search/search' }) },
|
|
goGroup() { uni.navigateTo({ url: '/pages/chat/create' }) },
|
|
goGroups() {
|
|
const groups = store.conversations.filter((c) => c.type === 'group')
|
|
if (!groups.length) {
|
|
uni.navigateTo({ url: '/pages/chat/create' })
|
|
return
|
|
}
|
|
uni.showActionSheet({
|
|
itemList: groups.slice(0, 6).map((c) => c.name || '群聊'),
|
|
success: (res) => {
|
|
const c = groups[res.tapIndex]
|
|
if (c) uni.navigateTo({ url: '/pages/chat/chat?sid=' + encodeURIComponent(c.id) })
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.finder {
|
|
margin: 8rpx 24rpx 12rpx;
|
|
height: 56rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 12rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #9CA3AF;
|
|
}
|
|
.finder-input {
|
|
flex: 1;
|
|
height: 56rpx;
|
|
margin-left: 8rpx;
|
|
font-size: 26rpx;
|
|
line-height: 56rpx;
|
|
color: #111827;
|
|
}
|
|
.finder-ph { color: #9CA3AF; font-size: 26rpx; }
|
|
.finder-clear {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.shortcuts {
|
|
margin: 0 24rpx 8rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
border: 1rpx solid rgba(17, 24, 39, 0.06);
|
|
overflow: hidden;
|
|
}
|
|
.org {
|
|
padding: 22rpx 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.org + .org { border-top: 1rpx solid #F0F2F5; }
|
|
.obox {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.obox.group { background: #E8F1FF; }
|
|
.obox.orgn { background: #E8F8EF; }
|
|
.ometa { flex: 1; margin: 0 16rpx; min-width: 0; }
|
|
.on { display: block; font-size: 30rpx; font-weight: 600; color: #111827; }
|
|
.os { display: block; margin-top: 4rpx; font-size: 22rpx; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.block { margin: 20rpx 24rpx 0; }
|
|
.dept {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8rpx 8rpx 12rpx;
|
|
}
|
|
.dept-name { font-size: 24rpx; font-weight: 600; color: #6B7280; }
|
|
.cnt { margin-left: 8rpx; font-size: 22rpx; color: #9CA3AF; }
|
|
.chev { margin-left: auto; }
|
|
.people { overflow: hidden; }
|
|
.item { display: flex; align-items: center; padding: 0 20rpx 0 24rpx; }
|
|
.item + .item .meta { border-top: 1rpx solid #F0F2F5; }
|
|
.av-wrap { position: relative; width: 80rpx; height: 80rpx; flex-shrink: 0; margin: 18rpx 0; }
|
|
.av { width: 80rpx; height: 80rpx; border-radius: 18rpx; }
|
|
.av.txt { background: #E8F1FF; color: #1677FF; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 30rpx; }
|
|
.dot { position: absolute; right: -2rpx; bottom: -2rpx; width: 16rpx; height: 16rpx; border-radius: 50%; background: #16A34A; border: 3rpx solid #fff; }
|
|
.meta { flex: 1; margin-left: 20rpx; min-width: 0; padding: 22rpx 0; }
|
|
.name { display: block; font-size: 30rpx; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.sub { display: block; margin-top: 4rpx; font-size: 22rpx; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.acts { display: flex; align-items: center; flex-shrink: 0; margin-left: 8rpx; }
|
|
.mini { width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; }
|
|
.empty { text-align: center; color: #6B7280; padding: 120rpx 40rpx; font-size: 28rpx; }
|
|
.foot { display: block; text-align: center; color: #9CA3AF; font-size: 22rpx; padding: 28rpx 0 48rpx; }
|
|
.ico { width: 56rpx; height: 56rpx; display: flex; align-items: center; justify-content: center; }
|
|
</style>
|