优化
This commit is contained in:
pengxiaolong
@@ -190,12 +190,11 @@
|
||||
import topNavigation from "../../components/topNavigation/topNavigation";
|
||||
import Advertisement from "../../components/Advertisement/Advertisement";
|
||||
import tabBar from "../../components/tabBar/tabBar";
|
||||
import TUIlogin from "../../components/TUILogin.js";
|
||||
import request from "../../components/request.js";
|
||||
import formatDate from "../../components/formatDate.js";
|
||||
import { useCounterStore } from "@/stores/counter";
|
||||
import optionsArray from "../../components/NationalDictionary.js";
|
||||
import { TUILogin } from "@tencentcloud/tui-core";
|
||||
import { goEasylogin } from "../../components/goEasyTool/tool.js";
|
||||
|
||||
const counter = useCounterStore();
|
||||
export default {
|
||||
@@ -256,20 +255,9 @@ export default {
|
||||
key: "userinfo",
|
||||
success: (res) => {
|
||||
this.info = res.data;
|
||||
console.log("userinfo", this.info);
|
||||
counter.$patch({ myitem: this.info });
|
||||
uni.getStorage({
|
||||
key: "myuserSig",
|
||||
success: (res) => {
|
||||
this.myuserSig = res.data;
|
||||
uni.getStorage({
|
||||
key: "chatInfo",
|
||||
success: (res) => {
|
||||
this.chatInfo = res.data;
|
||||
TUIlogin(this.chatInfo.appId, this.info.id, this.myuserSig.userSig);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
goEasylogin(this.$goeasy, String(this.info.id), this.info.headerIcon, this.info.nickName)//登录IM
|
||||
},
|
||||
});
|
||||
// setTimeout(() => {
|
||||
@@ -283,7 +271,6 @@ export default {
|
||||
const now = Date.now();
|
||||
if (now - lastCleanTime < 7 * 24 * 3600 * 1000) return; // 7 days
|
||||
uni.clearStorage();
|
||||
TUILogin.logout();
|
||||
uni.setStorageSync("last_clean_time", now);
|
||||
},
|
||||
//关闭弹窗（取消）
|
||||
|
||||
@@ -233,8 +233,7 @@ import tabBar from "../../components/tabBar/tabBar";
|
||||
import request from "../../components/request.js";
|
||||
import formatDate from "../../components/formatDate.js";
|
||||
import TimeFormatting from "../../components/TimeFormatting.js";
|
||||
import { TUILogin } from "@tencentcloud/tui-core";
|
||||
|
||||
import { goEasylogout } from "../../components/goEasyTool/tool.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -456,7 +455,7 @@ export default {
|
||||
//确认退出登录
|
||||
onExpurgateConfirm() {
|
||||
uni.clearStorage();
|
||||
TUILogin.logout();
|
||||
goEasylogout(this.$goeasy);
|
||||
uni.reLaunch({
|
||||
url: "/pages/login/login",
|
||||
});
|
||||
|
||||
@@ -25,6 +25,7 @@ import request from "../../components/request.js";
|
||||
import postFile from "../../components/postFile.js";
|
||||
import generateFileName from "../../components/generateFileName.js";
|
||||
import { useCounterStore } from "@/stores/counter";
|
||||
import { goEasylogin } from "../../components/goEasyTool/tool.js";
|
||||
const counter = useCounterStore();
|
||||
|
||||
export default {
|
||||
@@ -48,12 +49,6 @@ export default {
|
||||
this.id = res.data.id;
|
||||
},
|
||||
});
|
||||
uni.getStorage({
|
||||
key: "userSig",
|
||||
success: (res) => {
|
||||
this.userSig = res.data;
|
||||
},
|
||||
});
|
||||
uni.getStorage({
|
||||
key: "lastPage",
|
||||
success: (res) => {
|
||||
@@ -107,7 +102,6 @@ export default {
|
||||
headerIcon: this.Filename,
|
||||
nickName: this.name,
|
||||
code,
|
||||
usersig: this.userSig.userSig,
|
||||
},
|
||||
userInfo: false,
|
||||
}).then((res) => {
|
||||
@@ -117,6 +111,7 @@ export default {
|
||||
icon: "success",
|
||||
});
|
||||
uni.setStorageSync("userinfo", res.data.info);
|
||||
goEasylogin(this.$goeasy,String(res.data.info.id),this.picture,this.name);
|
||||
counter.$patch({ myitem: res.data.info });
|
||||
uni.hideLoading();
|
||||
//```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
|
||||
|
||||
572
pages/index/chat/chat.vue
Normal file
572
pages/index/chat/chat.vue
Normal file
@@ -0,0 +1,572 @@
|
||||
<template>
|
||||
<view class="chat">
|
||||
<view class="bg" @click="onMore(false)">
|
||||
<image
|
||||
class="bgImg"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="Return" @click="onBack">
|
||||
<image
|
||||
class="ReturnImg"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="title" @click="onMore(false)">{{ nickname }}</view>
|
||||
<!-- 聊天内容 -->
|
||||
<view
|
||||
class="content"
|
||||
@click="onMore(false)"
|
||||
:style="{
|
||||
bottom:
|
||||
MoreStatus || KeyboardHeight != 0 || Elementheight != 0
|
||||
? MoreStatus
|
||||
? 650 + Elementheight + 'rpx'
|
||||
: KeyboardHeight != 0
|
||||
? KeyboardHeight + Elementheight + 'rpx'
|
||||
: Elementheight + 'rpx'
|
||||
: Elementheight + 'rpx',
|
||||
}"
|
||||
>
|
||||
<scroll-view
|
||||
show-scrollbar="false"
|
||||
scroll-y="true"
|
||||
class="scroll"
|
||||
refresher-enabled="true"
|
||||
refresher-threshold="40"
|
||||
@refresherrefresh="onRefresherRefresh"
|
||||
lower-threshold="100"
|
||||
@scrolltolower="onScrollToLower"
|
||||
:refresher-triggered="triggered"
|
||||
:scroll-into-view="ElementPositioning"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<view
|
||||
class="chat-card"
|
||||
v-for="(item, index) in chatList"
|
||||
:key="item.id"
|
||||
:id="item.id"
|
||||
>
|
||||
<view class="chat-time"v-if="checkInterval(item.timestamp)">{{
|
||||
TimeFormatting(item.timestamp)
|
||||
}}</view>
|
||||
<view class="chat-avatar">
|
||||
<!-- <textmessage :messagetext="item.payload.text"></textmessage> -->
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 输入框组 -->
|
||||
<view
|
||||
class="inputComponent"
|
||||
id:inputComponent
|
||||
:style="{
|
||||
bottom:
|
||||
MoreStatus || KeyboardHeight != 0
|
||||
? MoreStatus
|
||||
? '650rpx'
|
||||
: KeyboardHeight != 0
|
||||
? KeyboardHeight + 'rpx'
|
||||
: '0'
|
||||
: '0',
|
||||
}"
|
||||
>
|
||||
<view class="textareacomponent">
|
||||
<textarea
|
||||
v-model="content"
|
||||
@input="SendInput"
|
||||
auto-height
|
||||
class="input"
|
||||
:maxlength="500"
|
||||
cursor-spacing="20"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
:adjust-position="false"
|
||||
></textarea>
|
||||
</view>
|
||||
<view class="sendComponent">
|
||||
<image
|
||||
v-if="!ButtonStatus"
|
||||
class="MoreImg"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chat_add.png"
|
||||
mode="scaleToFill"
|
||||
@click="onMore(!MoreStatus)"
|
||||
/>
|
||||
<button v-if="ButtonStatus" class="send" @click="onSend">发送</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 更多消息类型弹窗 -->
|
||||
<view
|
||||
class="MoreComponent"
|
||||
:style="{
|
||||
bottom:
|
||||
MoreStatus || KeyboardHeight != 0
|
||||
? MoreStatus
|
||||
? '0'
|
||||
: KeyboardHeight != 0
|
||||
? '0'
|
||||
: KeyboardHeight + 'rpx'
|
||||
: '-650rpx',
|
||||
}"
|
||||
>
|
||||
<view class="Morecontent">
|
||||
<view class="MoreList" v-for="(item, index) in popUpList" :key="index">
|
||||
<view class="MoreItem" @click="onMoreItem(item.type)">
|
||||
<image class="Moreicon" :src="item.icon" mode="scaleToFill" />
|
||||
<text class="MoreName">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 相关消息事件弹窗 -->
|
||||
<view
|
||||
class="popUpInvitation"
|
||||
@click="onMoreItem(null)"
|
||||
:style="{ top: MoreItemStatus == null ? '100vh' : '0' }"
|
||||
>
|
||||
<view
|
||||
class="popUpInvitationContent"
|
||||
@click.stop
|
||||
:style="{ bottom: MoreItemStatus == null ? '-1000rpx' : '0' }"
|
||||
>
|
||||
<!-- 更多相关消息组件 -->
|
||||
<InvitationComponents
|
||||
v-if="MoreItemStatus == 'Invitation'"
|
||||
></InvitationComponents>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textmessage from "./messageComponent/textmessage";
|
||||
import InvitationComponents from "./moreMessageComponents/InvitationComponents";
|
||||
import { generateId } from "../../../components/ChatId.js";
|
||||
import TimeFormatting from "../../../components/TimeFormatting.js";
|
||||
import {
|
||||
getConversationMessages,
|
||||
sendMessage,
|
||||
messageRead,
|
||||
} from "../../../components/goEasyTool/tool.js";
|
||||
import GoEasy from "goeasy";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userId: "", // 对方用户id
|
||||
nickname: "", // 对方用户昵称
|
||||
triggered: false, // 下拉刷新状态
|
||||
avatar: "", // 对方用户头像
|
||||
chatList: [], // 聊天记录
|
||||
userinfo: {}, // 自己用户信息
|
||||
ButtonStatus: false, // 发送按钮状态
|
||||
MoreStatus: false, // 更多消息类型弹窗状态
|
||||
KeyboardHeight: 0, // 键盘高度
|
||||
content: "", // 输入框内容
|
||||
MoreItemStatus: null, // 更多消息类型弹窗点击属性
|
||||
ioshide: 0, // 隐藏ios键盘
|
||||
ElementPositioning: null, // 元素定位
|
||||
scrollviewheight: 0, // 滚动视图高度
|
||||
Elementheight: 0, // 元素高度
|
||||
Scrolling: false, // 滚动状态
|
||||
scrollTop: 0, // 滚动高度
|
||||
judgescrollTop: false, // 判断滚动高度
|
||||
onPage: false, // 是否在页面
|
||||
timer: null, // 定时器
|
||||
lastTimestamp: null, // 上一次刷新时间戳
|
||||
popUpList: [
|
||||
{
|
||||
name: "邀请",
|
||||
icon: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chat_invite.png",
|
||||
type: "Invitation",
|
||||
},
|
||||
], /// 更多消息类型弹窗列表
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.onPage = true;
|
||||
},
|
||||
onHide() {
|
||||
this.onPage = false;
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.getStorage({
|
||||
key: "userinfo",
|
||||
success: (res) => {
|
||||
this.userinfo = res;
|
||||
},
|
||||
});
|
||||
this.userId = options.userId;
|
||||
this.nickname = options.nickname;
|
||||
this.avatar = options.avatar;
|
||||
// 获取和对方用户的聊天记录
|
||||
getConversationMessages(this.$goeasy, this.userId, null).then((res) => {
|
||||
this.chatList = res.map((item) => {
|
||||
item.id = generateId();
|
||||
return item;
|
||||
});
|
||||
console.log("获取和对方用户的聊天记录", this.chatList);
|
||||
setTimeout(() => {
|
||||
this.ElementPositioning = this.chatList[this.chatList.length - 1].id;
|
||||
}, 300);
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(".inputComponent")
|
||||
.boundingClientRect((res) => {
|
||||
this.Elementheight = res.height * 2;
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
//已读对方的消息
|
||||
messageRead(this.$goeasy, this.userId).then((res) => {
|
||||
console.log("已读对方的消息");
|
||||
});
|
||||
this.getIOSDeviceType();
|
||||
var im = this.$goeasy.im;
|
||||
im.on(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, this.onPrivateMessageReceived); //监听接受消息
|
||||
im.on(GoEasy.IM_EVENT.MESSAGE_READ, this.onMessageRead); //监听已读消息
|
||||
|
||||
this.getscrollviewheight();
|
||||
},
|
||||
methods: {
|
||||
//时间显示
|
||||
checkInterval(timestamp) {
|
||||
if (!this.lastTimestamp) {
|
||||
this.lastTimestamp = timestamp;
|
||||
return true;
|
||||
}
|
||||
|
||||
const timeDiff = timestamp - this.lastTimestamp;
|
||||
if (timeDiff >= 300000) {
|
||||
// 5 分钟=300000 毫秒
|
||||
this.lastTimestamp = timestamp;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
//时间格式化
|
||||
TimeFormatting: TimeFormatting,
|
||||
//获取容器高度
|
||||
getscrollviewheight() {
|
||||
const queryheight = uni.createSelectorQuery().in(this);
|
||||
queryheight
|
||||
.select(".scroll")
|
||||
.boundingClientRect((res) => {
|
||||
this.scrollviewheight = res.height;
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
//滚动事件
|
||||
onScroll(event) {
|
||||
if (!this.judgescrollTop) {
|
||||
this.scrollTop = event.detail.scrollTop;
|
||||
this.judgescrollTop = true;
|
||||
} else if (this.scrollTop - event.detail.scrollTop > this.scrollviewheight) {
|
||||
this.Scrolling = true;
|
||||
} else if (this.scrollTop - event.detail.scrollTop < this.scrollviewheight) {
|
||||
this.Scrolling = false;
|
||||
}
|
||||
},
|
||||
//监听已读消息
|
||||
onMessageRead(message) {
|
||||
console.log("已读消息", message);
|
||||
},
|
||||
//监听接受消息
|
||||
onPrivateMessageReceived(message) {
|
||||
if (!this.Scrolling) {
|
||||
this.ElementPositioning = message.id = generateId();
|
||||
this.judgescrollTop = false;
|
||||
} else {
|
||||
message.id = generateId();
|
||||
}
|
||||
this.chatList.push(message);
|
||||
if (this.onPage) {
|
||||
messageRead(this.$goeasy, this.userId).then((res) => {
|
||||
console.log("已读对方的消息");
|
||||
});
|
||||
}
|
||||
},
|
||||
//发送消息
|
||||
onSend() {
|
||||
if (this.content != "") {
|
||||
sendMessage(
|
||||
this.$goeasy,
|
||||
this.userId,
|
||||
this.content,
|
||||
this.avatar,
|
||||
this.nickname
|
||||
).then((res) => {
|
||||
console.log("发送成功", res);
|
||||
this.ElementPositioning = res.id = generateId();
|
||||
this.chatList.push(res);
|
||||
this.judgescrollTop = false;
|
||||
});
|
||||
this.content = "";
|
||||
this.ButtonStatus = false;
|
||||
}
|
||||
},
|
||||
|
||||
//ios兼容
|
||||
getIOSDeviceType() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const model = systemInfo.model;
|
||||
if (/iPhone X|iPhone11|iPhone12|iPhone13|iPhone14/i.test(model)) {
|
||||
if (/iPhone X|iPhone XS|iPhone 11 Pro/i.test(model)) {
|
||||
this.ioshide = 88;
|
||||
} else if (/iPhone 12|iPhone 13|iPhone 14/i.test(model)) {
|
||||
this.ioshide = 94;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//更多消息类型弹窗事件
|
||||
onMore(Status) {
|
||||
if (!this.Scrolling) {
|
||||
this.ElementPositioning = null;
|
||||
setTimeout(() => {
|
||||
this.ElementPositioning = this.chatList[this.chatList.length - 1].id;
|
||||
}, 100);
|
||||
this.judgescrollTop = false;
|
||||
}
|
||||
this.getscrollviewheight();
|
||||
this.MoreStatus = Status;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(".inputComponent")
|
||||
.boundingClientRect((res) => {
|
||||
this.Elementheight = res.height * 2;
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
//更多消息类型弹窗点击事件
|
||||
onMoreItem(type) {
|
||||
this.MoreItemStatus = type;
|
||||
},
|
||||
// 获取键盘高度
|
||||
onFocus(event) {
|
||||
if (!this.Scrolling) {
|
||||
this.ElementPositioning = null;
|
||||
setTimeout(() => {
|
||||
this.ElementPositioning = this.chatList[this.chatList.length - 1].id;
|
||||
}, 100);
|
||||
this.judgescrollTop = false;
|
||||
}
|
||||
this.getscrollviewheight();
|
||||
this.KeyboardHeight = event.detail.height * 2 - this.ioshide;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(".inputComponent")
|
||||
.boundingClientRect((res) => {
|
||||
this.Elementheight = res.height * 2;
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
//键盘消失
|
||||
onBlur(event) {
|
||||
this.KeyboardHeight = 0;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(".inputComponent")
|
||||
.boundingClientRect((res) => {
|
||||
this.Elementheight = res.height * 2;
|
||||
})
|
||||
.exec();
|
||||
this.getscrollviewheight();
|
||||
},
|
||||
//按钮切换
|
||||
SendInput(event) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(".inputComponent")
|
||||
.boundingClientRect((res) => {
|
||||
this.Elementheight = res.height * 2;
|
||||
})
|
||||
.exec();
|
||||
if (event.target.value != "") {
|
||||
this.ButtonStatus = true;
|
||||
} else {
|
||||
this.ButtonStatus = false;
|
||||
}
|
||||
},
|
||||
// 返回上一页
|
||||
onBack() {
|
||||
this.onPage = false;
|
||||
wx.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
textmessage,
|
||||
InvitationComponents,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.bgImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.Return {
|
||||
position: fixed;
|
||||
left: 35rpx;
|
||||
top: 120rpx;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.title {
|
||||
position: fixed;
|
||||
top: 120rpx;
|
||||
left: 325rpx;
|
||||
font-size: 34rpx;
|
||||
color: #100e0f;
|
||||
font-weight: bold;
|
||||
z-index: 1;
|
||||
}
|
||||
.ReturnImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 200rpx;
|
||||
left: 0rpx;
|
||||
right: 0rpx;
|
||||
}
|
||||
.scroll {
|
||||
width: 96%;
|
||||
height: 100%;
|
||||
padding: 0% 2% 0% 2%;
|
||||
}
|
||||
.inputComponent {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: auto;
|
||||
background-color: #f0f0f0;
|
||||
padding: 15rpx 15rpx 37.5rpx 15rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
transition: bottom 0.1s ease;
|
||||
}
|
||||
.chat-card {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
.chat-time {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 50rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #00000000;
|
||||
}
|
||||
.chat-avatar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.textareacomponent {
|
||||
width: 570rpx;
|
||||
height: auto;
|
||||
}
|
||||
.input {
|
||||
width: 95%;
|
||||
background-color: #ffffff;
|
||||
min-height: 60rpx;
|
||||
max-height: 200rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
overflow-wrap: break-word;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
.sendComponent {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
.send {
|
||||
width: 100rpx;
|
||||
height: 75rpx;
|
||||
background-color: #539c00;
|
||||
border-radius: 10rpx;
|
||||
color: #ffffff;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
line-height: 75rpx;
|
||||
}
|
||||
.MoreImg {
|
||||
margin-left: 20rpx;
|
||||
height: 80rpx;
|
||||
width: 80rpx;
|
||||
margin-bottom: -10rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
.MoreComponent {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 650rpx;
|
||||
transition: bottom 0.1s ease;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.Morecontent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-content: baseline;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.MoreList {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 20rpx;
|
||||
margin: 18.75rpx;
|
||||
}
|
||||
.MoreItem {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.Moreicon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
.popUpInvitation {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: top 0.1s ease;
|
||||
}
|
||||
.popUpInvitationContent {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1000rpx;
|
||||
transition: bottom 0.1s ease;
|
||||
background-color: #ffffff;
|
||||
border-top-left-radius: 40rpx;
|
||||
border-top-right-radius: 40rpx;
|
||||
}
|
||||
</style>
|
||||
31
pages/index/chat/messageComponent/textmessage.vue
Normal file
31
pages/index/chat/messageComponent/textmessage.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<view class="messagetext"> {{ messagetext }} </view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时执行
|
||||
},
|
||||
props: {
|
||||
messagetext: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 方法定义
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.messagetext{
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view class="chat-more-message-invitation">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时执行
|
||||
},
|
||||
methods: {
|
||||
// 方法定义
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-more-message-invitation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,22 +1,212 @@
|
||||
<template>
|
||||
<view class="forum">
|
||||
<view class="bg">
|
||||
<image
|
||||
class="bgImg"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="title">消息</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<scroll-view show-scrollbar="false" scroll-y="true" class="scroll">
|
||||
|
||||
<view class="card" v-for="item in Conversationobj.conversations" :key="item.userId">
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item>
|
||||
<view class="cardContent" @click="goChat(item.userId,item.data.nickname,item.data.avatar)">
|
||||
<image
|
||||
class="cardImg"
|
||||
:src="item.data.avatar"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardUnread" v-if="item.unread>0">{{ item.unread > 99 ? '99+':item.unread }}</view>
|
||||
<view class="cardnameandtimeandNews">
|
||||
<view class="cardnameandtime">
|
||||
<view class="cardname">{{ item.data.nickname }}</view>
|
||||
<view class="cardtime">{{TimeFormatting(item.lastMessage.timestamp)}}</view>
|
||||
</view>
|
||||
<view class="cardNews">
|
||||
{{ item.lastMessage.payload.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<template v-slot:right>
|
||||
<view class="rightPosition">
|
||||
<view class="topPosition">置顶</view>
|
||||
<view class="Delete">删除</view>
|
||||
</view>
|
||||
</template>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- tanber -->
|
||||
<view class="tabBar">
|
||||
<tabBar :tabIndex="3"></tabBar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时执行
|
||||
},
|
||||
methods: {
|
||||
// 方法定义
|
||||
}
|
||||
}
|
||||
import tabBar from "../../components/tabBar/tabBar";
|
||||
import TimeFormatting from "../../components/TimeFormatting.js";
|
||||
import {
|
||||
getConversationList,
|
||||
} from "../../components/goEasyTool/tool.js";
|
||||
import GoEasy from 'goeasy'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Conversationobj: {},
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
//获取会话列表
|
||||
getConversationList(this.$goeasy).then((res) => {
|
||||
console.log(res);
|
||||
this.Conversationobj = res;
|
||||
});
|
||||
//监听会话列表变化
|
||||
var im = this.$goeasy.im;
|
||||
im.on(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, this.onConversationsUpdated);
|
||||
},
|
||||
methods: {
|
||||
//监听会话列表变化
|
||||
onConversationsUpdated(conversations){
|
||||
this.Conversationobj = conversations;
|
||||
},
|
||||
TimeFormatting:TimeFormatting,
|
||||
//跳转聊天页面
|
||||
goChat(userId,nickname,avatar) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/index/chat/chat?userId=${userId}&nickname=${nickname}&avatar=${avatar}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
tabBar,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
</style>
|
||||
.bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.bgImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 120rpx;
|
||||
left: 335rpx;
|
||||
font-size: 34rpx;
|
||||
color: #100e0f;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 200rpx;
|
||||
left: 0rpx;
|
||||
right: 0rpx;
|
||||
bottom: 100rpx;
|
||||
}
|
||||
.scroll {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
padding: 0% 5% 0% 5%;
|
||||
}
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.cardContent{
|
||||
height: 150rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.cardImg{
|
||||
height: 110rpx;
|
||||
width: 110rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.cardUnread{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 15rpx;
|
||||
font-size: 18rpx;
|
||||
color: #ffffff;
|
||||
background-color: #f53123;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
margin-top: -100rpx;
|
||||
margin-left: -15rpx;
|
||||
}
|
||||
.cardnameandtimeandNews{
|
||||
width: 500rpx;
|
||||
height: 110rpx;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.cardnameandtime{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.cardNews{
|
||||
width: 500rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
.cardname{
|
||||
font-size: 30rpx;
|
||||
color: #100e0f;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cardtime{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.rightPosition{
|
||||
height: 150rpx;
|
||||
width: 300rpx;
|
||||
display: flex;
|
||||
}
|
||||
.topPosition{
|
||||
height: 150rpx;
|
||||
width: 150rpx;
|
||||
background-color: #f5a623;
|
||||
text-align: center;
|
||||
line-height: 150rpx;
|
||||
}
|
||||
.Delete{
|
||||
height: 150rpx;
|
||||
width: 150rpx;
|
||||
background-color: #f54323;
|
||||
text-align: center;
|
||||
line-height: 150rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,11 +17,10 @@
|
||||
|
||||
<script>
|
||||
import request from "../../components/request.js";
|
||||
import genTestUserSig from "../../components/debug/GenerateTestUserSig.js";
|
||||
import TUIlogin from "../../components/TUILogin.js";
|
||||
import { goEasylogin } from "../../components/goEasyTool/tool.js";
|
||||
import { useCounterStore } from '@/stores/counter'
|
||||
|
||||
const counter = useCounterStore()
|
||||
// const genTestUserSig = require('../../components/debug/GenerateTestUserSig.js');
|
||||
export default {
|
||||
inject: ['$global'],
|
||||
data() {
|
||||
@@ -80,21 +79,6 @@ export default {
|
||||
userInfo: false,
|
||||
});
|
||||
this.info = res;
|
||||
const sdkAppID = Number(this.info.data.chatInfo.appId);
|
||||
const userID ="administrator";
|
||||
this.userSig = genTestUserSig({
|
||||
SDKAPPID : sdkAppID,
|
||||
SECRETKEY:this.info.data.chatInfo.appKey,
|
||||
userID: userID,
|
||||
})
|
||||
this.myuserSig = genTestUserSig({
|
||||
SDKAPPID : sdkAppID,
|
||||
SECRETKEY:this.info.data.chatInfo.appKey,
|
||||
userID: String(res.data.info.id),
|
||||
})
|
||||
uni.setStorageSync("myuserSig", this.myuserSig)
|
||||
uni.setStorageSync("chatInfo", this.info.data.chatInfo)
|
||||
uni.setStorageSync("userSig", this.userSig)
|
||||
uni.setStorageSync("userinfo", this.info.data.info);
|
||||
const now = Date.now();
|
||||
uni.setStorageSync("last_clean_time", now);
|
||||
@@ -104,11 +88,10 @@ export default {
|
||||
uni.reLaunch({
|
||||
url: "/pages/UserInformation/UserInformation",
|
||||
});
|
||||
TUIlogin(this.info.data.chatInfo.appId, this.info.data.info.id,this.myuserSig.userSig)
|
||||
uni.hideLoading();
|
||||
} else {
|
||||
uni.setStorageSync("userinfo", this.info.data.info);
|
||||
TUIlogin(this.info.data.chatInfo.appId, this.info.data.info.id,this.myuserSig.userSig)
|
||||
goEasylogin(this.$goeasy,String(this.info.data.info.id),this.info.data.info.headerIcon,this.info.data.info.nickName);
|
||||
uni.hideLoading();
|
||||
//跳转原来页面否则首页
|
||||
uni.reLaunch({
|
||||
|
||||
@@ -184,6 +184,7 @@ export default {
|
||||
chatInfo: {},
|
||||
currentConversation: null,
|
||||
inid: null,
|
||||
chatPartnerinfo: {},
|
||||
// parentMessage: null,
|
||||
style: {
|
||||
backgroundColor: "#ffffff",
|
||||
@@ -208,7 +209,19 @@ export default {
|
||||
// 监听itemDetail事件
|
||||
eventChannel.on("itemDetail", (data) => {
|
||||
this.item = data.item; // 将接收到的数据赋值给item
|
||||
console.log(" itemDetail", data.item);
|
||||
//获取对方用户信息
|
||||
request({
|
||||
url: "user/getUserInfo",
|
||||
method: "POST",
|
||||
data: {
|
||||
id: data.item.senderId,
|
||||
},
|
||||
userInfo: true,
|
||||
}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.chatPartnerinfo = res.data;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
uni.getStorage({
|
||||
@@ -297,22 +310,19 @@ export default {
|
||||
inviteHint(){
|
||||
this.$refs.popups.close();
|
||||
// 发送邀请消息
|
||||
const conversationID = `C2C${this.item.senderId}`;
|
||||
const myitem = JSON.stringify(this.list[this.InvitingPartyEventindex]);
|
||||
const youritem = JSON.stringify(this.item);
|
||||
uni.redirectTo({
|
||||
url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}&myitem=${myitem}&youritem=${youritem}`,
|
||||
});
|
||||
// uni.redirectTo({
|
||||
// url: `/pages/index/chat/chat?userId=${this.item}&nickname=${nickname}&avatar=${avatar}&myitem=${myitem}&youritem=${youritem}&type=pk`,
|
||||
// });
|
||||
},
|
||||
// 打开邀请弹窗
|
||||
close() {
|
||||
this.$refs.popup.close();
|
||||
},
|
||||
openChat() {
|
||||
// 打开聊天页面
|
||||
const conversationID = `C2C${this.item.senderId}`;
|
||||
uni.navigateTo({
|
||||
url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`,
|
||||
wx.navigateTo({
|
||||
url: `/pages/index/chat/chat?userId=${this.chatPartnerinfo.id}&nickname=${this.chatPartnerinfo.nickName}&avatar=${this.chatPartnerinfo.headerIcon}`,
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user