From 47e64721f825322d3627ba8bb3e8c722204006f2 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Tue, 22 Jun 2021 14:47:37 +0800
Subject: [PATCH] 聊天功能完善
---
pages/groupChat/chating.vue | 242 +++++++++++++++++++++++++++++++----------------
pages/groupChat/groupChat.vue | 6 +
2 files changed, 163 insertions(+), 85 deletions(-)
diff --git a/pages/groupChat/chating.vue b/pages/groupChat/chating.vue
index 10737b0..ba56471 100644
--- a/pages/groupChat/chating.vue
+++ b/pages/groupChat/chating.vue
@@ -9,11 +9,11 @@
</view>
</view>
<view class="top-bar-center title">
- <text>水原希子kiko</text>
+ <text>{{ recName }}</text>
</view>
<view class="top-bar-right search pice">
<view class="group-img">
- <image src="@/static/images/index/friend-list/kiko.jpg"
+ <image :src=recAvatar
mode=""/>
</view>
</view>
@@ -36,40 +36,40 @@
<view class="chat-ls" v-for="(item, index) in msgs"
:key="index"
:id="'msg' + item.tip">
- <view class="chat-time" v-if="item.time != ''">{{ item.time | Msgdate }}</view>
+ <view class="chat-time" v-if="item.postTime != ''">{{ item.postTime | Msgdate }}</view>
- <view class="msg-m msg-left" v-if="item.id != 1">
- <image :src="item.imgUrl"
+ <view class="msg-m msg-left" v-if="item.senderId != senId">
+ <image :src= recAvatar
mode=""
class="user-img" />
<!-- text -->
- <view class="message" v-if="item.types == 0">
- <view class="msg-text">{{ item.message }}</view>
+ <view class="message" v-if="item.messageType == 0">
+ <view class="msg-text">{{ item.postMessage }}</view>
</view>
<!-- image -->
- <view class="message" v-if="item.types == 1">
- <image :src="item.message"
+ <view class="message" v-if="item.messageType == 1">
+ <image :src="item.postMessage"
class="msg-img"
mode="widthFix"
- @tap="previewImage(item.message)"/>
+ @tap="previewImage(item.postMessage)"/>
</view>
<!-- voice -->
- <view class="message" v-if="item.types == 2">
+ <view class="message" v-if="item.messageType == 2">
<view class="msg-text voice"
- :style="{width:item.message.time * 4 + 'px'}"
- @tap="playVoice(item.message.voice)">
+ :style="{width:item.postMessage.time * 4 + 'px'}"
+ @tap="playVoice(item.postMessage.voice)">
<image src="../../static/images/chatroom/sound.png"
mode=""
class="voice-img"/>
- {{ item.message.time }} "
+ {{ item.postMessage.time }} "
</view>
</view>
<!-- location -->
- <view class="message" v-if="item.types == 3">
+ <view class="message" v-if="item.messageType == 3">
<view class="msg-map"
- @tap="openLocation(item.message)">
- <view class="map-name">{{ item.message.name }}</view>
- <view class="map-address">{{ item.message.address }}</view>
+ @tap="openLocation(item.postMessage)">
+ <view class="map-name">{{ item.postMessage.name }}</view>
+ <view class="map-address">{{ item.postMessage.address }}</view>
<image src="../../static/images/chatroom/map.jpg"
mode="aspectFit"
class="map-img"/>
@@ -78,40 +78,40 @@
</view>
- <view class="msg-m msg-right" v-if="item.id == 1">
- <image :src="item.imgUrl"
+ <view class="msg-m msg-right" v-if="item.senderId == senId">
+ <image :src= senAvatar
mode=""
class="user-img" />
- <view class="message" v-if="item.types == 0">
- <view class="msg-text">{{ item.message }}</view>
+ <view class="message" v-if="item.messageType == 0">
+ <view class="msg-text">{{ item.postMessage }}</view>
</view>
- <view class="message" v-if="item.types == 1">
- <image :src="item.message"
+ <view class="message" v-if="item.messageType == 1">
+ <image :src="item.postMessage"
class="msg-img"
mode="widthFix"
- @tap="previewImage(item.message)"/>
+ @tap="previewImage(item.postMessage)"/>
</view>
<!-- voice -->
- <view class="message" v-if="item.types == 2">
+ <view class="message" v-if="item.messageType == 2">
<view class="msg-text voice"
- :style="{width:item.message.time * 4 + 'px'}"
- @tap="playVoice(item.message.voice)">
- {{ item.message.time }} "
+ :style="{width:item.postMessage.time * 4 + 'px'}"
+ @tap="playVoice(item.postMessage.voice)">
+ {{ item.postMessage.time }} "
<image src="@/static/images/chatroom/sound.png"
mode=""
class="voice-img"/>
</view>
</view>
<!-- location -->
- <view class="message" v-if="item.types == 3">
+ <view class="message" v-if="item.messageType == 3">
<view class="msg-map"
- @tap="openLocation(item.message)">
- <view class="map-name">{{ item.message.name }}</view>
- <view class="map-address">{{ item.message.address }}</view>
+ @tap="openLocation(item.postMessage)">
+ <view class="map-name">{{ item.postMessage.name }}</view>
+ <view class="map-address">{{ item.postMessage.address }}</view>
<!-- <map class="map"
- :latitude="item.message.latitude"
- :longitude="item.message.longitude"
- :markers="covers(item.message)"/> -->
+ :latitude="item.postMessage.latitude"
+ :longitude="item.postMessage.longitude"
+ :markers="covers(item.postMessage)"/> -->
<image src="../../static/images/chatroom/map.jpg"
mode="aspectFit"
class="map-img"/>
@@ -134,7 +134,7 @@
import datas from '@/debugdate/debugdate.js'
import filter from '@/config/filter.js'
import submit from '@/components/submit/submit.vue'
-
+ import WxStorage from "../../static/lib/wxStorage.js"
const innerAudioContext = uni.createInnerAudioContext()
export default {
@@ -144,7 +144,12 @@
imgMsg: [],
oldTime: new Date(),
scrollToView: '',
- inputh: '72',
+ inputh: '72',
+ recipientId: null,//接收者id
+ recAvatar: null,//接收者头像
+ recName: null,//接收者姓名
+ senAvatar:null,//发送者头像
+ senId: null,//接收者id
animationData: {}, // 动画
nowpage: 0, // 页码
loading: '', // 滚动事件
@@ -156,7 +161,8 @@
components:{
submit,
},
- onLoad() {
+ onLoad(option) {
+ this.recipientId = option.chatID;
this._getMsg(this.nowpage)
// this.nextPage()
},
@@ -169,7 +175,6 @@
},
// 滚动顶部加载上一页
nextPage() {
-
if(this.nowpage > 0 && this.begainloading) {
// 出现loading icon
this.isload = false
@@ -200,47 +205,77 @@
},
// 获取聊天数据
_getMsg(page) {
- // 页数加1
- let msg = datas.message()
- let maxpages = msg.length
- if(msg.length > (page + 1) * 10) {
- maxpages = (page + 1) * 10
- this.nowpage++
- }else {
- // 数据获取完毕
- this.nowpage = -1
- }
-
- // 数据分页加载 每十条为一页
- for(var i = page * 10; i < maxpages; i++){
- msg[i].imgUrl = '../../static/images/index/friend-list/'+msg[i].imgUrl
- // 时间间隔
- if(i < msg.length-1){
- let t = filter.spaceTime(this.oldTime, msg[i].time)
- if(t){
- this.oldTime = t
+ var that = this;
+ that.senId = WxStorage.get("ids");
+ uni.request({
+ url:"http://s16s652780.51mypc.cn/api/blade-jfpts/chat-records/getSingleMessagePage",
+ method:"get",
+ data:{
+ senderId: that.senId,
+ // recipientId: that.recipientId
+ recipientId: "1370571848600920066"
+ },
+ success:(res)=> {
+ // recAvatar: null,//接收者头像
+ // senAvatar:null,//发送者头像
+ var resdata = res.data.data.user;
+ for (var i = 0; i < resdata.length; i++) {
+ if(resdata[i].avatar == null || resdata[i].avatar == ""){
+ resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
+ }
+
+ if(resdata[i].id == that.senId){
+ that.senAvatar = resdata[i].avatar;
+ }else{
+ that.recAvatar = resdata[i].avatar;
+ that.recName = resdata[i].realName;
+ }
}
- msg[i].time = t
+ let msg = res.data.data.chatRecordsIPage
+ // 页数加1
+ //let msg = datas.message()
+ let maxpages = msg.length
+ if(msg.length > (page + 1) * 10) {
+ maxpages = (page + 1) * 10
+ that.nowpage++
+ }else {
+ // 数据获取完毕
+ that.nowpage = -1
+ }
+ // 数据分页加载 每十条为一页
+ for(var i = page * 10; i < maxpages; i++){
+ msg[i].imgUrl = '../../static/images/index/friend-list/'+msg[i].imgUrl
+ // 时间间隔
+ if(i < msg.length-1){
+ let t = filter.spaceTime(that.oldTime, msg[i].postTime)
+ if(t){
+ that.oldTime = t
+ }
+ msg[i].postTime = t
+ }
+ // 补充图片地址
+ if(msg[i].types == 1){
+ msg[i].message = '../../static/images/index/friend-list/'+msg[i].message
+ that.imgMsg.unshift(msg[i].message)
+ }
+ that.msgs.unshift(msg[i])
+ }
+
+ that.$nextTick(() => {
+ that.isanimation = false
+ that.scrollToView = 'msg' + that.msgs[maxpages - page * 10 - 1].tip
+ })
+ // 数据加载完毕关闭动画，停止数据加载
+ clearInterval(this.loading)
+ // 关闭loading icon
+ this.isload = true
+ // 开启加载
+ this.begainloading = true
+
}
- // 补充图片地址
- if(msg[i].types == 1){
- msg[i].message = '../../static/images/index/friend-list/'+msg[i].message
- this.imgMsg.unshift(msg[i].message)
- }
- this.msgs.unshift(msg[i])
- }
-
- this.$nextTick(() => {
- this.isanimation = false
- this.scrollToView = 'msg' + this.msgs[maxpages - page * 10 - 1].tip
})
- // 数据加载完毕关闭动画，停止数据加载
- clearInterval(this.loading)
- // 关闭loading icon
- this.isload = true
- // 开启加载
- this.begainloading = true
+
},
// 预览图片
previewImage(e) {
@@ -273,22 +308,41 @@
},
// 接收输入内容
inputs(e) {
+ var that = this;
this.isanimation = true
let len = this.msgs.length -1
- let nowTime = new Date()
+ let nowTime = new Date();
+ var sentTime = that.dateFormat("YYYY-mm-dd HH:MM:SS", nowTime);
let t = filter.spaceTime(this.oldTime, nowTime)
if(t){
this.oldTime = t
}
nowTime = t
let sendMsg = {
- id: 1,
- imgUrl: '../../static/images/index/friend-list/me.jpg',
- message: e.message,
- types: e.types,
- time: nowTime,
- tip: len
+ senderId: that.senId,
+ recipientId: that.recipientId,
+ postMessage: e.message,
+ messageType: 0,
+ status: 0,
+ postTime: nowTime,
}
+
+ uni.request({
+ url:"http://s16s652780.51mypc.cn/api/blade-jfpts/chat-records/insertSingleChat",
+ method:"post",
+ data:{
+ senderId: that.senId,
+ recipientId: that.recipientId,
+ postMessage: e.message,
+ messageType: 0,
+ status: 0,
+ postTime: sentTime,
+ },
+ success:(res)=> {
+
+ }
+ });
+
this.msgs.push(sendMsg)
this.$nextTick(() => {
this.scrollToView = 'msg' + len
@@ -335,6 +389,26 @@
}
})
},
+ //时间格式化
+ dateFormat(fmt, date) {
+ let ret;
+ const opt = {
+ "Y+": date.getFullYear().toString(), // 年
+ "m+": (date.getMonth() + 1).toString(), // 月
+ "d+": date.getDate().toString(), // 日
+ "H+": date.getHours().toString(), // 时
+ "M+": date.getMinutes().toString(), // 分
+ "S+": date.getSeconds().toString() // 秒
+ // 有其他格式化字符需求可以继续添加，必须转化成字符串
+ };
+ for (let k in opt) {
+ ret = new RegExp("(" + k + ")").exec(fmt);
+ if (ret) {
+ fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+ };
+ };
+ return fmt;
+ }
},
filters:{
Msgdate(time) {
diff --git a/pages/groupChat/groupChat.vue b/pages/groupChat/groupChat.vue
index f1cd09e..e6af889 100644
--- a/pages/groupChat/groupChat.vue
+++ b/pages/groupChat/groupChat.vue
@@ -41,6 +41,10 @@
userName: '',
}
},
+ activated(){
+ this.beginObj();
+ this.ingss();
+ },
methods: {
beginObj() {
this.titleTop = '2.6rem';
@@ -76,7 +80,7 @@
senderId: WxStorage.get("ids")
},
success:(res)=> {
- var resdata = res.data.data.records;
+ var resdata = res.data.data;
for (var i = 0; i < resdata.length; i++) {
if(resdata[i].avatar == null || resdata[i].avatar == ""){
resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
--
Gitblit v1.9.3