commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

7

Browse Source
This commit is contained in:
cansnow
2025-11-27 07:40:32 +08:00
parent 198c3dd4a5
commit ab625e6463
17 changed files with 1092 additions and 1135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/conversation/conversationList/components/ChatHeader.vue
+84 -68
View File
@@ -1,10 +1,61 @@
<template>
<view class="chat_header">
<view class="self_info">
<my-avatar :src="storeSelfInfo.faceURL" :desc="storeSelfInfo.nickname" size="46" />
<uni-nav-bar
right-icon="plus"
@clickRight="showMore"
:border="false"
title="标题"
backgroundColor="transparent"
>
<template #right>
<uni-icons 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:'createGroup'})" class="menu_item">
<uni-icons size="24" color="#FFF" type="scan"></uni-icons>
<text>扫一扫</text>
</view>
</view>
</u-overlay>
</view>
<uni-search-bar @confirm="search" :focus="false" bgColor="#fff"
placeholder="请输入您要搜索的内容"
v-model="searchValue" @input="input"
@cancel="cancel" @clear="clear">
</uni-search-bar>
<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 }}</text>
<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"
@@ -24,20 +75,7 @@
</view>
</view>
</view>
<view class="right_action">
<view class="call_icon"> </view>
<view @click="showMore" class="more_icon">
<image src="@/static/images/common_circle_add.png"></image>
</view>
<u-overlay :show="moreMenuVisible" @click="moreMenuVisible = false" opacity="0">
<view :style="{ top: popMenuPosition.top, right: popMenuPosition.right }" class="more_menu">
<view @click="clickMenu(item)" v-for="item in moreMenus" :key="item.idx" class="menu_item">
<image :src="item.icon" mode=""></image>
<text>{{ item.title }}</text>
</view>
</view>
</u-overlay>
</view>
</view>
</template>
@@ -47,6 +85,7 @@
} from "vuex";
import MyAvatar from "@/components/MyAvatar/index.vue";
import IMSDK from "openim-uniapp-polyfill";
import util from "@/util";
export default {
name: "ChatHeader",
components: {
@@ -55,28 +94,13 @@
props: {},
data() {
return {
searchValue:"",
connectStart: -2,
moreMenuVisible: false,
popMenuPosition: {
top: 0,
right: 0,
},
moreMenus: [{
idx: 1,
title: "添加好友",
icon: require("static/images/more_add_friend.png"),
},
{
idx: 2,
title: "添加群聊",
icon: require("static/images/more_add_group.png"),
},
{
idx: 3,
title: "创建群聊",
icon: require("static/images/more_create_group.png"),
},
],
}
};
},
computed: {
@@ -89,6 +113,12 @@
this.unsubscribeAll();
},
methods: {
search(){},
blur(){},
focus(){},
input(){},
cancel(){},
clear(){},
setStateStart() {
this.connectStart = 0;
},
@@ -108,18 +138,20 @@
IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
},
clickMenu({idx}) {
switch (idx) {
case 1:
case 2:
clickMenu({name}) {
switch (name) {
case 'createGroup':
uni.navigateTo({
url: `/pages/common/createGroup/index`,
});
break;
case 'addFriend':
uni.navigateTo({
url: `/pages/common/searchUserOrGroup/index?isSearchGroup=${idx === 2}`,
});
break;
case 3:
uni.navigateTo({
url: `/pages/common/createGroup/index`,
});
case 'scan':
util.scan();
break;
default:
break;
@@ -160,9 +192,10 @@
}
.chat_header {
@include btwBox();
padding: 36rpx 44rpx;
margin-top: var(--status-bar-height);
@include colBox(true);
padding: 36rpx 24rpx 10rpx;
//margin-top: var(--status-bar-height);
background: #f4f4f4;
.self_info {
@include btwBox();
@@ -249,22 +282,6 @@
display: flex;
position: relative;
.call_icon {
margin-right: 24rpx;
image {
width: 56rpx;
height: 56rpx;
}
}
.more_icon {
image {
width: 56rpx;
height: 56rpx;
}
}
.more_menu {
position: absolute;
// bottom: 0;
@@ -274,7 +291,7 @@
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.16);
width: max-content;
border-radius: 12rpx;
background-color: #fff;
background-color: rgba(76 ,76, 76, 0.9);
.menu_item {
display: flex;
@@ -282,13 +299,12 @@
align-items: center;
padding: 20rpx 24rpx;
font-size: 28rpx;
color: $uni-text-color;
border-bottom: 1px solid #f0f0f0;
color: #fff;
//border-bottom: 1px solid #f0f0f0;
image {
width: 24px;
height: 24px;
margin-right: 24rpx;
.uni-icons {
margin-right: 16rpx;
color: #FFF;
}
&:last-child {