cansnow
311 lines
7.5 KiB
Vue
311 lines
7.5 KiB
Vue
<template>
|
|
<view class="chat_header">
|
|
<uni-nav-bar
|
|
right-icon="plus"
|
|
@clickRight="showMore"
|
|
:border="false"
|
|
:title="config.name"
|
|
statusBar
|
|
fixed
|
|
backgroundColor="transparent"
|
|
>
|
|
<template #right>
|
|
<uni-icons @click="showMore" type="plus" size="26" class="more_icon"></uni-icons>
|
|
</template>
|
|
</uni-nav-bar>
|
|
<view class="right_action">
|
|
<u-overlay :show="moreMenuVisible" @click="moreMenuVisible = false" opacity="0">
|
|
<view :style="{ top: popMenuPosition.top, right: popMenuPosition.right }" class="more_menu">
|
|
<view @click="clickMenu({name:'createGroup'})" class="menu_item">
|
|
<uni-icons size="24" color="#FFF" type="chat"></uni-icons>
|
|
<text>创建群聊</text>
|
|
</view>
|
|
<view @click="clickMenu({name:'addFriend'})" class="menu_item">
|
|
<uni-icons size="24" color="#FFF" type="personadd"></uni-icons>
|
|
<text>添加好友</text>
|
|
</view>
|
|
<view @click="clickMenu({name:'scan'})" class="menu_item">
|
|
<uni-icons size="24" color="#FFF" type="scan"></uni-icons>
|
|
<text>扫一扫</text>
|
|
</view>
|
|
</view>
|
|
</u-overlay>
|
|
</view>
|
|
<SearchbarPlace @click="toSearch">搜索</SearchbarPlace>
|
|
<view class="status_notice">
|
|
<view class="tag" v-if="storeIsSyncing">
|
|
<img class="loading" style="height: 24rpx; width: 24rpx" src="static/images/loading.png"
|
|
alt="" />
|
|
<text class="status">同步中</text>
|
|
</view>
|
|
<view class="tag" v-if="connectStart == 0">
|
|
<img class="loading" style="height: 24rpx; width: 24rpx" src="static/images/loading.png"
|
|
alt="" />
|
|
<text class="status">连接中</text>
|
|
</view>
|
|
<view class="err-tag" v-if="connectStart == -1">
|
|
<img style="height: 24rpx; width: 24rpx" src="static/images/sync_error.png" alt="" />
|
|
<text class="status">连接失败</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="self_info" v-if="1==2">
|
|
<my-avatar :src="storeSelfInfo.faceURL" :desc="storeSelfInfo.nickname || storeSelfInfo.remark" size="46" />
|
|
<view class="self_info_desc">
|
|
<view class="user_state">
|
|
<text class="nickname">{{ storeSelfInfo.nickname || storeSelfInfo.remark }}</text>
|
|
<view v-if="!storeReinstall">
|
|
<view class="tag" v-if="storeIsSyncing">
|
|
<img class="loading" style="height: 24rpx; width: 24rpx" src="static/images/loading.png"
|
|
alt="" />
|
|
<text class="status">同步中</text>
|
|
</view>
|
|
<view class="tag" v-if="connectStart == 0">
|
|
<img class="loading" style="height: 24rpx; width: 24rpx" src="static/images/loading.png"
|
|
alt="" />
|
|
<text class="status">连接中</text>
|
|
</view>
|
|
<view class="err-tag" v-if="connectStart == -1">
|
|
<img style="height: 24rpx; width: 24rpx" src="static/images/sync_error.png" alt="" />
|
|
<text class="status">连接失败</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from "vuex";
|
|
import MyAvatar from "@/components/MyAvatar/index.vue";
|
|
import IMSDK from "openim-uniapp-polyfill";
|
|
import util from "@/util";
|
|
import SearchbarPlace from "@/components/searchbar_place.vue";
|
|
export default {
|
|
name: "ChatHeader",
|
|
components: {
|
|
MyAvatar,SearchbarPlace
|
|
},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
connectStart: -2,
|
|
moreMenuVisible: false,
|
|
popMenuPosition: {
|
|
top: 0,
|
|
right: 0,
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(["storeSelfInfo", "storeIsSyncing", "storeReinstall",'config']),
|
|
},
|
|
mounted() {
|
|
this.subscribeAll();
|
|
},
|
|
beforeDestroy() {
|
|
this.unsubscribeAll();
|
|
},
|
|
methods: {
|
|
toSearch(){
|
|
uni.navigateTo({
|
|
url:"/pages/common/search/index"
|
|
})
|
|
},
|
|
setStateStart() {
|
|
this.connectStart = 0;
|
|
},
|
|
setStateSuccess() {
|
|
this.connectStart = 1;
|
|
},
|
|
setStateError() {
|
|
this.connectStart = -1;
|
|
},
|
|
subscribeAll() {
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnConnecting, this.setStateStart);
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
|
|
IMSDK.subscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
|
|
},
|
|
unsubscribeAll() {
|
|
IMSDK.unsubscribe(IMSDK.IMEvents.OnConnecting, this.setStateStart);
|
|
IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
|
|
IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
|
|
},
|
|
clickMenu({name}) {
|
|
switch (name) {
|
|
case 'createGroup':
|
|
uni.navigateTo({
|
|
url: `/pages/common/createGroup/index`,
|
|
});
|
|
break;
|
|
case 'addFriend':
|
|
uni.navigateTo({
|
|
url: `/pages/common/searchUserOrGroup/index?isSearchGroup=false`,
|
|
});
|
|
break;
|
|
case 'scan':
|
|
util.scan();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
async showMore() {
|
|
const {right,bottom} = await this.getEl(".more_icon");
|
|
this.popMenuPosition.right =
|
|
uni.getWindowInfo().windowWidth - right + "px";
|
|
this.popMenuPosition.top = bottom + "px";
|
|
this.moreMenuVisible = true;
|
|
},
|
|
getEl(el) {
|
|
return new Promise((resolve) => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query
|
|
.select(el)
|
|
.boundingClientRect((data) => {
|
|
// 存在data，且存在宽和高，视为渲染完毕
|
|
resolve(data);
|
|
})
|
|
.exec();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@keyframes loading {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.chat_header {
|
|
@include colBox(true);
|
|
padding: 0 24rpx 10rpx;
|
|
//margin-top: var(--status-bar-height);
|
|
background: #f4f4f4;
|
|
.status_notice{
|
|
.err-tag {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 44rpx;
|
|
background: #ffe1dd;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
margin-left: 8rpx;
|
|
|
|
.status {
|
|
font-size: 24rpx;
|
|
margin-left: 8rpx;
|
|
font-weight: 400;
|
|
color: #ff381f;
|
|
}
|
|
}
|
|
|
|
.tag {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 44rpx;
|
|
background: #f2f8ff;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
margin-left: 8rpx;
|
|
|
|
.loading {
|
|
animation: loading 1.5s infinite;
|
|
}
|
|
|
|
.status {
|
|
font-size: 24rpx;
|
|
margin-left: 8rpx;
|
|
font-weight: 400;
|
|
color: #0089ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.self_info {
|
|
@include btwBox();
|
|
|
|
&_desc {
|
|
@include colBox(true);
|
|
margin-left: 24rpx;
|
|
color: $uni-text-color;
|
|
|
|
.company {
|
|
@include nomalEllipsis();
|
|
font-size: 24rpx;
|
|
margin-bottom: 10rpx;
|
|
max-width: 300rpx;
|
|
}
|
|
|
|
.user_state {
|
|
@include vCenterBox();
|
|
|
|
.nickname {
|
|
@include nomalEllipsis();
|
|
font-size: 26rpx;
|
|
max-width: 240rpx;
|
|
}
|
|
|
|
.online_state {
|
|
@include vCenterBox();
|
|
margin-left: 24rpx;
|
|
font-size: 24rpx;
|
|
|
|
.dot {
|
|
background-color: #10cc64;
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right_action {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.more_menu {
|
|
position: absolute;
|
|
// bottom: 0;
|
|
// left: 100%;
|
|
z-index: 999;
|
|
// transform: translate(-100%, 100%);
|
|
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.16);
|
|
width: max-content;
|
|
border-radius: 12rpx;
|
|
background-color: rgba(76 ,76, 76, 0.9);
|
|
|
|
.menu_item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 20rpx 24rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
//border-bottom: 1px solid #f0f0f0;
|
|
|
|
.uni-icons {
|
|
margin-right: 16rpx;
|
|
color: #FFF;
|
|
}
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |