290 lines
6.7 KiB
Vue
290 lines
6.7 KiB
Vue
<template>
|
|
<div style="height: 100%">
|
|
<div class="jolkp">
|
|
<div class="fan" :style="{ marginRight: statue == 0 ? '56%' : '70%' }">
|
|
<span @click="hui(0)">消息</span>
|
|
</div>
|
|
<!-- <TUIContact v-else-if="statue==1" :stu="2" /> -->
|
|
<div @click="hui(1)" class="jolkp_h" v-if="statue == 0"></div>
|
|
<div @click="fnkiopl" class="jolkp_l"></div>
|
|
<!-- 弹出框 -->
|
|
<div v-if="isPopupVisible" class="popup">
|
|
<ul>
|
|
<li @click="handleAddFriend">添加好友/群聊</li>
|
|
<li @click="handleMenu()">发起群聊</li>
|
|
<li>扫一扫</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="three">
|
|
<div class="con">
|
|
<div class="three_div1"></div>
|
|
<div class="title">点赞</div>
|
|
</div>
|
|
<div class="con">
|
|
<div class="three_div2"></div>
|
|
<div class="title">关注</div>
|
|
</div>
|
|
|
|
<div class="con">
|
|
<div class="three_div3"></div>
|
|
<div class="title">评论</div>
|
|
</div>
|
|
</div>
|
|
<!-- 搜索添加 -->
|
|
<TUIContactsea v-if="statue == 2" />
|
|
<!-- 联系人 -->
|
|
<TUIContact v-else-if="statue == 1" style="height: 100%;" />
|
|
<SelectFriend v-else-if="statue == 3" @con="confn" />
|
|
<SelectFriendqlioa v-else-if="statue == 4" @concen="concen" />
|
|
<!-- 会话 -->
|
|
<TUIConversation style="height: 100%;" v-else />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// 导入组件
|
|
import TUIConversation from "@/TUIKit/components/TUIConversation/index";
|
|
import TUIContact from "@/TUIKit/components/TUIContact/index";
|
|
import TUIContactsea from "@/TUIKit/components/TUIContact/indexsea";
|
|
import { TUILogin } from "@tencentcloud/tui-core";
|
|
import ContactSearch from "@/TUIKit/components/TUIContact/contact-search/index.vue";
|
|
import { TUIChatKit } from "@/TUIKit";
|
|
import SelectFriend from "@/TUIKit/components/TUIContact/select-friend/index.vue";
|
|
import SelectFriendqlioa from "@/TUIKit/components/TUIGroup/index.vue";
|
|
import TUICore, { ExtensionInfo, TUIConstants } from "@tencentcloud/tui-core";
|
|
import storage from "@/utils/storage.js";
|
|
import { getUserimInfo } from "@/api/members";
|
|
TUIChatKit.init();
|
|
let vueVersion = 2;
|
|
// vueVersion = 3;
|
|
|
|
export default {
|
|
// 注册组件
|
|
components: {
|
|
TUIConversation,
|
|
TUIContact,
|
|
TUIContactsea,
|
|
ContactSearch,
|
|
SelectFriend,
|
|
SelectFriendqlioa,
|
|
TUIChatKit,
|
|
},
|
|
data() {
|
|
return {
|
|
statue: 0, //1联系人 2添加好友/群聊 0对话记录 3建群 4群名称
|
|
isPopupVisible: false, // 控制弹出框的显示与隐藏
|
|
isq: false,
|
|
};
|
|
},
|
|
created() {},
|
|
onShow() {
|
|
// 每次进入页面时调用的方法
|
|
//获取用户信息
|
|
getUserimInfo()
|
|
.then(({ data }) => {
|
|
if (data.code == 200) {
|
|
const par = data.result;
|
|
TUILogin.login({
|
|
SDKAppID: par.sdkAppId,
|
|
userID: par.userID,
|
|
userSig: par.userSig,
|
|
useUploadPlugin: true, // If you need to send rich media messages, please set to true.
|
|
framework: `vue${vueVersion}`, // framework used vue2 / vue3
|
|
});
|
|
} else {
|
|
// 接口返回非 200 状态码，跳转登录页面
|
|
uni.navigateTo({
|
|
url: "/pages/passport/login",
|
|
});
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// 请求失败，跳转登录页面
|
|
uni.navigateTo({
|
|
url: "/pages/passport/login",
|
|
});
|
|
});
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
//完成跳转群名
|
|
confn() {
|
|
this.statue = 4;
|
|
},
|
|
concen() {
|
|
this.statue = 0;
|
|
this.isPopupVisible = false;
|
|
},
|
|
hui(index) {
|
|
this.statue = index;
|
|
},
|
|
fnkiopl() {
|
|
this.isPopupVisible = !this.isPopupVisible;
|
|
},
|
|
handleMenu() {
|
|
const fn = [
|
|
...TUICore.getExtensionList(
|
|
TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID
|
|
),
|
|
];
|
|
const item = fn[1];
|
|
const {
|
|
listener = {
|
|
onClicked: () => {},
|
|
},
|
|
} = item;
|
|
listener?.onClicked?.(item);
|
|
this.statue = 3;
|
|
},
|
|
// 处理添加好友/群聊点击事件
|
|
handleAddFriend() {
|
|
this.statue = 2;
|
|
this.isPopupVisible = false;
|
|
},
|
|
|
|
// // 打开会话列表
|
|
// openConversationList() {
|
|
// uni.navigateTo({
|
|
// url: '/TUIKit/components/TUIConversation/index'
|
|
// });
|
|
// },
|
|
// // 打开联系人
|
|
// openContact() {
|
|
// uni.navigateTo({
|
|
// url: '/TUIKit/components/TUIContact/index'
|
|
// });
|
|
// },
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
uni-page-body,
|
|
html,
|
|
body,
|
|
page {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
overflow: hidden;
|
|
}
|
|
.jolkp {
|
|
height: 66px;
|
|
display: flex;
|
|
font-size: 15px;
|
|
justify-content: end;
|
|
/* 设置背景图 */
|
|
background-image: url("@/static/im/Rectangle.png");
|
|
/* 让背景图覆盖整个元素 */
|
|
background-size: cover;
|
|
/* 背景图不重复 */
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.jolkp_l {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background-image: url("@/static/im/Frame.png");
|
|
/* 让背景图覆盖整个元素 */
|
|
background-size: cover;
|
|
/* 背景图不重复 */
|
|
background-repeat: no-repeat;
|
|
margin-top: 35px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.jolkp_h {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background-image: url("@/static/im/user.png");
|
|
/* 让背景图覆盖整个元素 */
|
|
background-size: cover;
|
|
/* 背景图不重复 */
|
|
background-repeat: no-repeat;
|
|
margin-top: 35px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.popup {
|
|
position: absolute;
|
|
top: 65px;
|
|
/* 调整弹出框的位置 */
|
|
right: 5px;
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
z-index: 3;
|
|
}
|
|
|
|
.popup ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.popup li {
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.popup li:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.fan {
|
|
width: 10%;
|
|
height: "100%";
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: end;
|
|
padding: 5px;
|
|
}
|
|
|
|
.three {
|
|
width: 100%;
|
|
height: 10%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background: rgb(255, 255, 255);
|
|
}
|
|
.con{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.three_div1 {
|
|
height: 3rem;
|
|
width: 40%;
|
|
background-image: url("@/static/im/kf.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
}
|
|
|
|
.three_div2 {
|
|
width: 40%;
|
|
height: 3rem;
|
|
background-image: url("@/static/im/hy.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 40%;
|
|
}
|
|
|
|
.three_div3 {
|
|
height: 3rem;
|
|
background-image: url("@/static/im/da.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 40%;
|
|
}
|
|
|
|
</style>
|