聊天功能完善

zengh

2021-06-22 47e64721f825322d3627ba8bb3e8c722204006f2

聊天功能完善

 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) {

 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";