聊天室调整

zengh

2021-07-04 b29be4bad75d502177485a5722fb796892ca7cca

聊天室调整

 components/contacts/contacts.vue

@@ -13,15 +13,15 @@
            </view>
        </view>
        <view class="inPColumn" v-if="fromW == 1">
            <view class="left" @click="chating">
            <view class="left" @click="QZchating">
                <view class="top">
                    <view class="userImg">
                        <img class="img" :src=Pdata.avatar>
                    </view>
                    <view class="t-type">{{Pdata.recipientName}}</view>
                    <view class="t-type">{{Pdata.GroupName}}</view>
                    <view class="t-id">{{Pdata.postTime}}</view>
                </view>
                <view class="bottom">{{Pdata.postMessage}}</view>
                <view class="bottom">{{Pdata.GroupContent}}</view>
            </view>
        </view>
    </view>
@@ -44,12 +44,20 @@
                //#endif
            },
            chating(){
            //发起聊天
            var datas = this.Pdata;
            //alert(datas.name)
            uni.navigateTo({
                url: '/pages/groupChat/chating?chatID=' + datas.recipientId.toString()
            });
                //发起聊天
                var datas = this.Pdata;
                //alert(datas.name)
                uni.navigateTo({
                    url: '/pages/groupChat/chating?chatID=' + datas.recipientId.toString()
                });
            },
            QZchating(){
                //发起聊天
                var datas = this.Pdata;
                //alert(datas.name)
                uni.navigateTo({
                    url: '/pages/groupChat/chatingQZ?chatID=' + datas.id.toString()
                });
            },
            onClose() { //触摸遮罩事件
                this.setData({

 pages.json

@@ -128,7 +128,9 @@
            "path": "pages/groupChat/groupChat",
            "name": "groupChat",
            "style": {
                "navigationBarTitleText": "聊天室"
                "navigationBarTitleText": "我要说",
                "navigationBarBackgroundColor": "#0cd7e5",
                "navigationBarTextStyle":"white"
            }
        },
        {
@@ -147,8 +149,8 @@
            }
        },
        {
            "path": "pages/groupChat/chatingcopy",
            "name": "chatingcopy",
            "path": "pages/groupChat/chatingQZ",
            "name": "chatingQZ",
            "style": {
                "navigationBarTitleText": "聊天室2",
                "navigationStyle":"custom",

 pages/groupChat/chatingQZ.vue

New file
@@ -0,0 +1,645 @@
<template>
    <view class="content">
	
    <!-- 头部 -->
    <view class="top-bar">
        <view class="top-bar-left" @tap="backOne()">
            <view class="back-img">
                <image src="@/static/images/common/back.png" />
            </view>
        </view>
        <view class="top-bar-center title">
            <text>{{ recName }}</text>
        </view>
        <view class="top-bar-right search pice">
            <view class="group-img">
                <image :src=recAvatar
                             mode=""/>
            </view>
        </view>
    </view>
	
    <scroll-view scroll-y="true"
                             class="chat"
                             scroll-with-animation="isanimation"
                             :scroll-into-view="scrollToView"
                             @scrolltoupper="nextPage">
        <view class="chat-main"
                    :style="{paddingBottom:inputh + 'px'}">
            <view class="loading"
                        :class="{displaynone:isload}">
                <image src="@/static/images/chatroom/load.png" 
                             mode=""
                             class="loading-img"
                             :animation="animationData"/>
            </view>
            <view class="chat-ls" v-for="(item, index) in msgs"
                                                      :key="index"
                                                        :id="'msg' + item.id">
                <view class="chat-time" v-if="item.post_time != ''">{{ item.post_time | Msgdate }}</view>
				
                <view class="msg-m msg-left" v-if="item.sender_id != senId">
					
                    <image :src= item.avatar 
                                 mode=""
                                 class="user-img" />
                    <view>
                    <view  class="sent_name">
                        {{item.real_name}}
                    </view>
                    <!-- text -->
                    <view class="message" v-if="item.message_type == 0">
                        <view class="msg-text">{{ item.post_message }}</view>
                    </view>
                    <!-- image -->
                    <view class="message" v-if="item.message_type == 1">
                        <image :src="item.post_message" 
                                     class="msg-img"
                                     mode="widthFix"
                                     @tap="previewImage(item.post_message)"/>
                    </view>
                    <!-- voice -->
                    <view class="message" v-if="item.message_type == 2">
                        <view class="msg-text voice"
                                    :style="{width:item.post_message.time * 4 + 'px'}"
                                    @tap="playVoice(item.post_message.voice)">
                            <image src="../../static/images/chatroom/sound.png" 
                                         mode=""
                                         class="voice-img"/>
                            {{ item.post_message.time }} "
                        </view>
                    </view>
                    <!-- location -->
                    <view class="message" v-if="item.message_type == 3">
                        <view class="msg-map"
                                    @tap="openLocation(item.post_message)">
                            <view class="map-name">{{ item.post_message.name }}</view>
                            <view class="map-address">{{ item.post_message.address }}</view>
                            <image src="../../static/images/chatroom/map.jpg" 
                                         mode="aspectFit" 
                                         class="map-img"/>
                        </view>
                    </view>
                    </view>
                </view>
				
                <view class="msg-m msg-right" v-if="item.sender_id == senId">
                    <image :src= item.avatar  
                                 mode=""
                                 class="user-img" />
                    <view class="message" v-if="item.message_type == 0">
                        <view class="msg-text">{{ item.post_message }}</view>
                    </view>
                    <view class="message" v-if="item.message_type == 1">
                        <image :src="item.post_message" 
                                     class="msg-img"
                                     mode="widthFix"
                                     @tap="previewImage(item.post_message)"/>
                    </view>
                    <!-- voice -->
                    <view class="message" v-if="item.message_type == 2">
                        <view class="msg-text voice"
                                    :style="{width:item.post_message.time * 4 + 'px'}"
                                    @tap="playVoice(item.post_message.voice)">
                            {{ item.post_message.time }} "
                            <image src="@/static/images/chatroom/sound.png"
                                         mode=""
                                         class="voice-img"/>
                        </view>
                    </view>
                    <!-- location -->
                    <view class="message" v-if="item.message_type == 3">
                        <view class="msg-map"
                                    @tap="openLocation(item.post_message)">
                            <view class="map-name">{{ item.post_message.name }}</view>
                            <view class="map-address">{{ item.post_message.address }}</view>
                            <!-- <map class="map"
                                     :latitude="item.post_message.latitude"
                                     :longitude="item.post_message.longitude"
                                     :markers="covers(item.post_message)"/> -->
                            <image src="../../static/images/chatroom/map.jpg"
                                         mode="aspectFit" 
                                         class="map-img"/>
                        </view>
                    </view>
                </view>
				
				
            </view>
			
        </view>
        <!-- <view class="padbt"></view> -->
    </scroll-view>
    <submit @inputs="inputs" 
                    @heights="heights"/>
    </view>
</template>

<script>
    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 {
        data() {
            return {
                msgs: [],
                imgMsg: [],
                oldTime: new Date(),
                scrollToView: '',
                inputh: '72',   
                recipientId: null,//接收者id
                recAvatar: null,//接收者头像
                recName: null,//接收者姓名
                senAvatar:null,//发送者头像
                senId: null,//接收者id
                getData: null,
                animationData: {},            // 动画
                nowpage: 0,                   // 页码
                loading: '',                  // 滚动事件
                isload: true,
                isanimation: true,
                begainloading: true
            };
        },
        components:{
            submit,
        },
        onLoad(option) {
            this.recipientId = option.chatID;
            this._getMsg(this.nowpage)
            // this.nextPage()
        },
        methods:{
            // 返回键
            backOne() {
                uni.navigateBack({
                    delta: 1
                })
            },
            // 滚动顶部加载上一页
            nextPage() {
                // if(this.nowpage > 0 && this.begainloading) {
                //     // 出现loading icon
                //     this.isload = false
                //     this.begainloading = false
					
                //     var animation = uni.createAnimation({
                //         duration: 1000,
                //         timingFunction: 'step-start'
                //     })
					
                //     this.animation = animation
					
					
                //     let i = 1
                //     this.loading = setInterval(function() {
                //         animation.rotate(i * 30).step()
                //         this.animationData = animation.export()
                //         i++
                //         // 滑动加载数据
                //         if(i > 40) {
                //             this._getMsg(this.nowpage)
                //         }
						
                //     }.bind(this), 100)
                // }
				
				
            },
            // 获取聊天数据
            _getMsg(page) {
				
                var that = this;
                that.senId = WxStorage.get("ids");
                uni.request({
                    url:"http://s16s652780.51mypc.cn/api/chatgroupc/selectList",
                    method:"post",
                    header: {
                        'content-type': 'application/x-www-form-urlencoded', 
                    },
                    data:{
                        //gid: that.recipientId
                        gid: "1"
                    },
                    success:(res)=> {
                        // recAvatar: null,//接收者头像
                        // senAvatar:null,//发送者头像
                        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";
                            }else{
                                resdata[i].avatar = resdata[i].avatar;
                            }
							
							
                        }
                        let msg = res.data.data;
                        that.getData = msg;
                        // 页数加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 = 0; i < msg.length; 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].post_time)
                                if(t){
                                    that.oldTime = t
                                }
                                msg[i].post_time = 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.getData[0].id
                        })
                        // 数据加载完毕关闭动画，停止数据加载
                        clearInterval(this.loading)
                        // 关闭loading icon
                        this.isload = true
                        // 开启加载
                        this.begainloading = true
						
                    }
                })
				
            },
            // 预览图片
            previewImage(e) {
				
                let index = 0
                for(var i =0; i < this.imgMsg.length; i++){
                    if(this.imgMsg[i] == e) {
                        index = i
                    }
                }
                uni.previewImage({
                    current: index,
                    urls: this.imgMsg,
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏'],
                        success: function(data) {
                            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                    }
                });
            },
            // 音频播放
            playVoice(e) {
                console.log('ok')
                innerAudioContext.src = e
                innerAudioContext.play()
            },
            // 接收输入内容
            inputs(e) {
                var that = this;
                this.isanimation = true
                let len = this.msgs.length -1				
                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 = {
                    senderId: that.senId,
                    recipientId: that.recipientId,
                    post_message: e.message,
                    message_type: 0,
                    status: 0,
                    post_time: nowTime,
                }
				
                uni.request({
                    url:"http://s16s652780.51mypc.cn/api/chatgroupc/submit",
                    method:"post",
                    data:{
                        senderId: that.senId,
                        postMessage: e.message,
                        messageType: 0,
                        status: 0,
                        postTime: sentTime,
                    },
                    success:(res)=> {
						
                    }
                });
				
                this.msgs.push(sendMsg)
                this.$nextTick(() => {
                    this.scrollToView = 'msg' + len
                })
                if(e.types == 1) {
                    this.imgMsg.push(e.message)
                }
            },
            // 输入框高度
            heights(e) {
                this.inputh = e
                this.goBottom()
                // console.log('高度' + e)
            },
            // 滚动到底部
            goBottom() {
                this.isanimation = true
                this.scrollToView = ''
                this.$nextTick(() => {
                    let len = this.getData.length -1
                    this.scrollToView = 'msg' + this.getData[0].id
                })
            },
            // 地图定位
            covers(e) {
                let map = [
                    {
                        latitude: e.latitude,
                        longitude: e.longitude,
                        iconPath: '../../static/images/chatroom/placeholder-r.png'
                    }
                ]
                return (map)
            },
            // 导航
            openLocation(e) {
                uni.openLocation({
                    latitude: e.latitude,
                    longitude: e.longitude,
                    name: e.name,
                    address: e.address,
                    success: () => {
                        console.log('success')
                    }
                })
            },
            //时间格式化
            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) {
             return    filter.Msgdate(time)
            }
        }
    }
	
</script>

<style lang="scss">	
    @import '../../static/scss/index.scss';
    .padbt {
        height: var(--status-bar-height);
        width: 100%;
    }
    page {
        height: 100%;
    }
    .content {
        height: 100%;
        background: rgba(244, 244, 244, 1);
        // background: #2C405A;
    }
	
    .top-bar {
        background: rgba(244, 244, 244, .96);
        // box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1);
        border-bottom: 1px solid $uni-border-color;
		
        .group-img {
            image{
                position: absolute;
                bottom: 10rpx;
                right: $uni-spacing-col-base;
                width: 68rpx;
                height: 68rpx;
                border-radius: 16rpx;
                // justify-content: center;
            }
        }
    }

    .chat {
        height: 100%;
		
        .chat-main {
            padding-left: $uni-spacing-col-base;
            padding-right: $uni-spacing-col-base;
            padding-top: 100rpx;
            // padding-bottom: 120rpx;
            display: flex;
            flex-direction: column;
			
            .loading {
                text-align: center;
				
                .loading-img {
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }
		
        .chat-ls {
			
            .chat-time {
                font-size: $uni-font-size-base;
                color: rgba(39, 40, 50, .6);
                line-height: 34rpx;
                padding: 20rpx 0;
                text-align: center;
            }
			
            .msg-m {
                display: flex;
                padding: 20rpx 0;
				
                .user-img {
                    flex: none;
                    width: 88upx;;
                    height: 88upx;;
                    border-radius: $uni-border-radius-base;
                }
				
                .message {
                    flex: none;
                    max-width: 480rpx;
					
                }
				
                .msg-text {
                    font-size: $uni-font-size-lg;
                    color: $uni-text-color;
                    line-height: 44rpx;
                    padding: 18rpx 34rpx;
                }
				
                .msg-img {
                    border-radius: $uni-border-radius-base;
                    max-width: 400rpx;
                }
				
                .voice {
                    width: 200rpx;
                    min-width: 110rpx;
                    max-width: 400rpx;
					
                    .voice-img {
                        width: 20px;
                        height: 40rpx;
                        top: 2rpx;
                        // padding-top: -8rpx;
                    }
					
                }
                // 陶 我想你
                .msg-map {
                    background: #fff;
                    width: 464rpx;
                    height: 284rpx;
                    overflow: hidden;
					
                    .map-name {
                        font-size: $uni-font-size-lg;
                        color: $uni-text-color;
                        line-height: 44rpx;
                        padding: 18rpx 24rpx 0 24rpx;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
					
                    .map-address {
                        font-size: $uni-font-size-sm;
                        color: $uni-text-color-disable;
                        padding: 0rpx 24rpx;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
					
                    // .map {
                    //     padding-top: 8rpx;
                    //     width: 464rpx;
                    //     height: 190rpx;
                    //     overflow: hidden;
                    // }
					
                    .map-img {
                        width: 464rpx;
                        // padding-top: 8rpx;
                        height: 310rpx;
                        // top: -70rpx;
                    }
                }
				
            }
            .msg-left {
                flex-direction: row;
                .msg-text {
                    margin-left: 16rpx;
                    background-color: #fff;
                    border-radius: 0 20rpx 20rpx 20rpx;
                }
				
                .msg-img {
                    padding-left: 16rpx;
                }
				
                .msg-map {
                    margin-left: 16rpx;
                    border-radius: 0 20rpx 20rpx 20rpx;
                }
				
                .voice {
                    text-align: right;
					
                    .voice-img {
                        float: left;			
                    }
					
                }
				
            }
			
            .msg-right {
                flex-direction: row-reverse;
                .msg-text {
                    margin-right: 16rpx;
                    background-color: rgba(255, 228, 49, .8);
                    border-radius: 20rpx 0rpx 20rpx 20rpx;
                }
				
                .msg-img {
                    padding-right: 16rpx;
                }
				
                .msg-map {
                    margin-right: 16rpx;
                    border-radius: 20rpx 0rpx 20rpx 20rpx;
                }
				
                .voice {
                    text-align: left;
					
                    .voice-img {
                        float: right;
                        transform: rotate(180deg);					
                    }
					
                }
				
            }
        }
		
    }
    .displaynone {
        display: none;
    }
	
    .sent_name{
            margin-left: 8px;
            font-size: 8px;
            padding-bottom: 5px;
    }
</style>

 pages/groupChat/groupChat.vue

@@ -76,7 +76,7 @@
        },
        activated(){
              this.beginObj();
              this.ingss();
              this.getdataList(0);
            },
            onReady() {
                let that = this;
@@ -136,18 +136,6 @@
            onClick(e) {
                console.log(e, 777878)
            },
            ingss() {
                this.ingsDB = '#00d1ff 2px solid';
                this.candoDB = '#fff 2px solid';
                this.Task = '当前已接任务';
                this.getdataList(0);
            },
            candos() {
                this.candoDB = '#00d1ff 2px solid';
                this.ingsDB = '#fff 2px solid';
                this.Task = '当前可接任务';
                this.getdataList(1);
            },
            getdataList(need) {
                var that = this;
                uni.request({
@@ -174,7 +162,7 @@
        },
        mounted() {
            this.beginObj();
            this.ingss();
            this.getdataList(0);
        },
        onPageScroll(e) {
            // console.log(e.scrollTop, 'pingmu')