聊天功能完善

zengh

2021-06-17 9e9d12683f3b4bcce2f58bc49c17f10c683a2b64

聊天功能完善

 components/contacts/contacts.vue

New file
@@ -0,0 +1,231 @@
<template>
    <view class="pColumn">
        <view class="inPColumn" >
            <view class="left" @click="chating">
                <view class="top">
                    <view class="userImg">
                        <img class="img" :src="require('../../static/images/index/friend-list/kiko.jpg')">
                    </view>
                    <view class="t-type">{{Pdata.name}}</view>
                    <view class="t-id">{{Pdata.lastTime}}</view>
                </view>
                <view class="bottom">{{Pdata.LastMessage}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['fromW', 'Pdata'],
        data() {
            return {
                popuShow: false,
                bmainb: ''
            }
        },
        methods: {
            beginObj() {
                this.bmainb = '3rem';
                //#ifdef MP-WEIXIN
                this.bmainb = '0';
                //#endif
            },
            receives() {
                var url = this.$store.state.piAPI + "blade-jfpts/alarm/alarm/APP-setAlarm",
                    Pid = this.Pdata.id,
                    id = this.$store.state.puserID, //警察id
                    name = this.$store.state.puserName, //警察id
                    data = {
                        id: Pid,
                        securityId: id,
                        alarmPeople: name
                    },
                    that = this;
                // console.log(data);
                wx.request({
                    url: url,
                    data: data,
                    header: {
                        "content-type": "application/x-www-form-urlencoded"
                    },
                    method: 'POST',
                    success(res) {
                        // console.log(res.data.msg);
                    }
                })
            },
            chating(){
            //发起聊天
            var datas = this.Pdata;
            //alert(datas.name)
            uni.navigateTo({
                url: '/pages/groupChat/chating?'
            });
            },
            onClose() { //触摸遮罩事件
                this.setData({
                    popuShow: false
                });
            },
            popupBY() {
                this.receives();
                // console.log('接收成功');
                this.$emit('refreshTask', this.fromW)
                // this.triggerEvent('myevent', this.data.fromW);
                this.popuShow = false;
            },
            popupBN() {
                // console.log('接收取消');
                this.popuShow = false;
            }
        },
        mounted() {
            this.beginObj();
        }

    }
</script>

<style lang="scss" scoped>
    /* components/pColumn/pColumn.wxss */
    .pColumn,
    .inPColumn,
    .left,
    .right,
    .top {
        display: flex;
    }

    .userImg {
        // border: 1px solid #007AFF;

        .img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 100rpx;
            // border: 1px solid #007AFF;
        }
    }

    .pColumn {
        width: 100%;
        align-items: center;
        justify-content: center;
        padding-top: 0.5rem;

        .inPColumn {
            margin: 0.2rem 0 0.4rem 0;
            width: 95%;
            height: 4rem;
            border-bottom: 1px rgb(207, 207, 207) solid;
            align-items: center;
            justify-content: space-between;

            .left {
                width: 80%;
                /* border: 1px rgb(114, 250, 159) solid; */
                flex-direction: column;

                .top {
                    .t-type {
                        padding-left: 0.7rem;
                        font-size: 1.1rem;
                        color: #000000;
                    }

                    .t-id {
                        color: #8b8b8b;
                        font-size: 0.8rem;
                        line-height: 1.6rem;
                        position: absolute;
                        right: 1.2rem;
                    }
                }

                .bottom {
                    color: #8b8b8b;
                    font-size: 0.9rem;
                    position: relative;
                    bottom: 1rem;
                    left: 4rem;
                }
            }

            .right {
                width: 20%;
                /* border: 1px rgb(143, 114, 250) solid; */
                justify-content: space-around;

                /* align-items: center; */
                .butPopup {
                    z-index: 4;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba($color: #000000, $alpha: 0.5);

                    .b-main {
                        position: absolute;
                        z-index: 2;
                        // bottom: 3rem;//小程序不兼容
                        width: 100%;
                        // border: 1px solid #007AFF;
                        border-radius: 1.5rem;
                        background-color: #fff;

                        // height: 20rem;
                        .b-m-title {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100%;
                            height: 2.8rem;
                        }

                        .b-m-Y,
                        .b-m-N {
                            color: #fff;
                            border-radius: 0;
                        }

                        .b-m-Y {
                            background-color: #07C160 !important;
                        }

                        .b-m-Y-hove {
                            background-color: #048c44 !important;
                        }

                        .b-m-N {
                            background-color: #FF976A !important;
                        }

                        .b-m-N-hove {
                            background-color: #e1855d !important;
                        }
                    }
                }
            }
        }
    }




    // .buttitle {
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     width: 100%;
    //     height: 2.8rem;
    // }

    // .popups {
    //     width: 100%;
    //     padding-bottom: 0 !important;
    //     /* border: 1px solid seagreen; */
    // }
</style>

 components/submit/emoji/emoji.vue

New file
@@ -0,0 +1,75 @@
<template>
    <view class="emoji"
                :style="{height:height + 'px'}">
        <view class="emoji-line"
                    v-for="(line, i) in emoji"
                    :key="i">
            <view class="emoji-line-item"
                        v-for="(item, index) in line"
                        :key="index"
                        @tap="clickEmoji(item)">
                {{ item }}		
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            height: {
                type: Number,
                default: 260
            }
        },
        data() {
            return {
                emoji:[
                    ['😀', '😁', '😂', '🤣', '😃', '😅'],
                    ['😆', '😉', '😊', '😋', '😎', '😍'],
                    ['😘', '😗', '😙', '😚', '🙂', '🤗'],
                    ['🤔', '😐', '😑', '😶', '🙄', '😏'],
                    ['😣', '😥', '😮', '🤐', '😯', '😪'],
                    ['😫', '😴', '😌', '😛', '😜', '😝'],
                    ['🤤', '😓', '😔', '😕', '🙃', '🤑'],
                    ['😲', '🙁', '😖', '😞', '😟', '😤'],
                    ['😢', '😭', '😦', '😧', '😨', '😩'],
                    ['😬', '😱', '😳', '😵', '😳', '😵'],
                    ['💼', '🌂', '💍', '💄', '⛑', '🎓'],
                    ['👒', '🎩', '👑', '👢', '👡', '👠'],
                    ['👟', '👞', '👝', '👜', '👛', '👚'],
                    ['🍇', '🍈', '🍉', '🍊', '🍌', '🍒'],
                    ['☠', '🛀', '💣', '⏰', '🎎', '📻'],
                    ['💘', '❤', '💔', '💢', '💮', '🕜'],
                ]
            };
        },
        methods: {
            clickEmoji(e) {
                this.$emit('emotion', e)
            }
        }
    }
</script>

<style lang="scss">
    .emoji{
        width: 100%;
        padding: 16rpx 10rpx 180rpx 10rpx;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;
		
        .emoji-line {
            display: flex;
			
            .emoji-line-item {
                flex: 1;
                text-align: center;
                font-size: 52rpx;
                line-height: 80rpx;
            }
        }
    }

</style>

 components/submit/submit.vue

New file
@@ -0,0 +1,447 @@
<template>
    <view>
        <view class="submit">
            <view class="submit-chat">
                <view class="bt-img">
                    <image src="../../static/images/chatroom/voice.png" 
                                 mode=""
                                 @tap="records"/>
                </view>
                <textarea auto-height="true" 
                                    class="chat-send btn" 
                                    :class="{displaynone: isrecord}"
                                    @input="inputs"
                                    v-model="msg"
                                    @focus="focus"/>
                <view class="record btn"
                            :class="{displaynone: !isrecord}"
                            @touchstart="touchstart"
                            @touchend="touchend"
                            @touchmove="touchmove"
                            >
                    按住说话
                </view>
                <view class="bt-img">
                    <image src="../../static/images/chatroom/emoji.png" 
                                 mode=""
                                 @tap="emoji"/>
                </view>
                <view class="bt-img">
                    <image src="../../static/images/chatroom/add.png" 
                                 mode=""
                                 @tap="more"/>
                </view>
            </view>
            <view class="emoji"
                        :class="{ displaynone: !isemoji }">
                <view class="emoji-send">
                    <view class="emoji-send-del"
                                @tap="emojiBack">
                                删除
                    </view>
                    <view class="emoji-send-bt"
                                @tap="emojiSend">
                                发送
                    </view>
                </view>
                <emoji @emotion="emotion"
                             :height="260" />
            </view>
			
            <view class="more"
                        :class="{ displaynone: !ismore }">
                <view class="more-list" 
                            @tap="sendImg('album')">
                    <image src="../../static/images/chatroom/photo.png"/>
                    <text class="more-list-title">图片</text>
                </view>
                <view class="more-list"
                            @tap="sendImg('camera')">
                    <image src="../../static/images/chatroom/camera.png"/>
                    <text class="more-list-title">拍照</text>
                </view>
                <view class="more-list">
                    <image src="../../static/images/chatroom/file.png"/>
                    <text class="more-list-title">文件</text>
                </view>
                <view class="more-list"
                            @tap="chooseLocation()">
                    <image src="../../static/images/chatroom/location.png"/>
                    <text class="more-list-title">位置</text>
                </view>
                <view class="more-list">
                    <image src="../../static/images/chatroom/vedio.png"/>
                    <text class="more-list-title">视频</text>
                </view>
            </view>
        </view>
		
        <!-- 录制语音遮罩 -->
        <view class="voice-bg"
                    :class="{displaynone: !voicebg}">
            <view class="voice-bg-len">
                <view class="voice-bg-time"
                            :style="{width:vlength/0.6 + '%'}">
                    {{ vlength }} "
                </view>
            </view>
            <view class="voice-del">上滑取消取消录音</view>
        </view>
    </view>
</template>

<script>
    import emoji from './emoji/emoji.vue'
	
    const recorderManager = uni.getRecorderManager()
	
    export default {
        data() {
            return {
                isrecord: false,
                isemoji: false,
                ismore: false,
                voicebg: false,
                msg: '',
                timer: '',
                vlength: 0,
                pageY: 0,
            };
        },
        components:{
            emoji,
        },
        methods:{
            // 获取高度
            _getElementHeight() {
                const query = uni.createSelectorQuery().in(this);
                query.select('.submit').boundingClientRect(data => {
                    this.$emit('heights', data.height)
                }).exec();
            },
            // 点击切换音频
            records() {
                this.isrecord = !this.isrecord
                this.isemoji = false
                this.ismore = false
                setTimeout(() => {
                    this._getElementHeight()
                }, 10)
            },
            // 点击弹出表情
            emoji() {
                this.isemoji = !this.isemoji
                this.ismore = false
                this.isrecord = false
                setTimeout(() => {
                    this._getElementHeight()
                }, 10)
            },
            // 点击弹出更多
            more() {
                this.ismore = !this.ismore
                this.isemoji = false
                this.isrecord = false
                setTimeout(() => {
                    this._getElementHeight()
                }, 10)
            },
            // 接收表情
            emotion(e) {
                this.msg = this.msg + e
            },
            // 文字发送
            inputs(e) {
                let chatm = e.detail.value
                let pos = chatm.indexOf('\n')
                if(pos != -1 && chatm.length > 1) {
                    this.send(this.msg,0)
                }
                setTimeout(() => {
                    this._getElementHeight()
                },10)
            },
            // 输入框聚焦
            focus(){
                this.isemoji = false;
                this.ismore = false;
                setTimeout(() => {
                    this._getElementHeight()
                },10)
            },
            // 表情内发送
            emojiSend() {
                if(this.msg.length > 0) {
                    this.send(this.msg, 0)
                }
                setTimeout(() => {
                    this._getElementHeight()
                },10)
            },
            // 表情退格
            emojiBack() {
                if(this.msg.length > 0){
                    this.msg = this.msg.substring(0, this.msg.length-1)
                }
            },
            // 发送消息
            send(msg, type) {
                let data = {
                    message: msg,
                    types: type
                }
                this.$emit('inputs', data)
                setTimeout(() => {
                    this.msg = ''
                }, 0)
                setTimeout(() => {
                    this._getElementHeight()
                },10)
            },
            // 发送图片
            sendImg(e) {
                let count = 9;
                if(e == 'album') {
                    count = 9
                }else {
                    count = 1
                }
                uni.chooseImage({
                    count: count,
                    sizeType: ['original', 'comperssed'],
                    sourceType: [e],
                    success: (res) => {
                        const filePath = res.tempFilePaths
                        for (let i in filePath){
                            this.send(filePath[i], 1)
                        }
                    }
                })
                setTimeout(() => {
                    this._getElementHeight()
                },10)
            },
            // 音频处理
            touchstart(e) {
                // 此时的Y轴位置
                this.pageY = e.changedTouches[0].pageY
                let startIndex = 1
                this.voicebg = true
                this.timer = setInterval(() => {
                    this.vlength = startIndex
                    startIndex++
                    if(startIndex > 60) {
                        clearInterval(this.timer)
                        this.touchend();
                    }
                }, 1000)
                recorderManager.start()
            },
            touchend() {
                clearInterval(this.timer)
                recorderManager.stop()
                recorderManager.onStop((res) => {
                    let data = {
                        voice: res.tempFilePath,
                        time: this.vlength
                    }
                    if(this.voicebg){
                        this.send(data, 2);
                    }					
                    this.vlength = 0
                    this.voicebg = false
                })
            },
            touchmove(e) {
                if(this.pageY - e.changedTouches[0].pageY > 200) {
                    this.voicebg = false
                }
            },
            // 定位
            chooseLocation() {
                uni.chooseLocation({
                    success: (res) => {
                        let data = {
                            name: res.name,
                            address: res.address,
                            latitude: res.latitude,
                            longitude: res.longitude
                        }
                        this.send(data, 3)
                        console.log('位置名称' + res.name)
                        console.log('详细地址' + res.address)
                        console.log('维度' + res.latitude)
                        console.log('经度' + res.longitude)
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .submit {
        background-color: rgba(244, 244, 244, .96);
        border-top: 1px solid $uni-border-color;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1002;
        padding-bottom: env(safe-area-inset-bottom);
    }
	
    .submit-chat {
        width: 100%;
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
        padding: 14rpx 10rpx;
		
        image {
            width: 56rpx;
            height: 56rpx;
            margin: 0 10rpx;
            flex: auto;
        }
		
        .btn {
            flex: auto;
            background-color: #fff;
            border-radius: 10rpx;
            padding: 20rpx;
            max-height: 160rpx;
            margin: 0 10rpx;
        }
		
        .chat-send {
            line-height: 44rpx !important;
        }
		
        .record {
            text-align: center;
            font-size: $uni-font-size-lg;
            color: $uni-text-color-grey;
            font-weight: bold;
        }
		
    }
    .displaynone {
        display: none;
    }
	
    .emoji {
        width: 100%;
        height: 460rpx;
        background: rgba(236, 237, 238, 1);
        box-shadow: 0 -1rpx 0 0 rgba(0, 0, 0, 1);
		
        .emoji-send {
            width: 260rpx;
            height: 104rpx;
            background: rgba(236, 237, 238, .9);
            position: fixed;
            bottom: env(safe-area-inset-bottom);
            right: 0;
            padding-top: 24rpx;
            display: flex;
			
            .emoji-send-bt {
                flex: 1;
                height: 80rpx;
                margin: 0 32rpx 0 20rpx;
                background: rgba(255, 228, 49 ,1);
                border-radius: 240rpx;
                font-size: 32rpx;
                text-align: center;
                line-height: 80rpx;
                border-radius: 12rpx;
            }
			
            .emoji-send-del {
                flex: 1;
                height: 80rpx;
                background: #fff;
                border-radius: 240rpx;
                font-size: 32rpx;
                text-align: center;
                line-height: 80rpx;
                border-radius: 12rpx;
                margin-left: 24rpx;
            }
        }
    }
    .more {
        width: 100%;
        height: 436rpx;
        background: rgba(236, 237, 238, 1);
        box-shadow: rgba(0, 0, 0, .1);
        bottom: env(safe-area-inset-bottom);
        padding: 0 20rpx;
        box-sizing: border-box;
		
        .more-list {
            width: 25%;
            text-align: center;
            float: left;
            margin-top: 32rpx;

            image {
                width: 72rpx;
                height: 72rpx;
                padding: 24rpx;
                background: rgba(255, 255, 255, 1);
                border-radius: 24rpx;
            }
			
            .more-list-title {
                color: rgba(30, 40, 50, .5);
                line-height: 34rpx;
                font-size: 24rpx;
                display: block;
            }
        }
    }
	
    .voice-bg {
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, .3);
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 1001;
        // position: relative;
		
        .voice-bg-len {
            height: 84rpx;
            width: 600rpx;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            background: rgba(255, 255, 255, .2);
            border-radius: 42rpx;
            text-align: center;
            .voice-bg-time {
                display: inline-block;
                line-height: 84rpx;
                background-color: $uni-color-primary;
                border-radius: 42rpx;
                min-width: 120rpx;
            }
        }
		
        .voice-del {
            position: absolute;
            bottom: 148rpx;
            margin-bottom: env(safe-area-inset-bottom);
            width: 100%;
            text-align: center;
             color: #fff;
             font-size: $uni-font-size-base;
        }
    }
</style>

 config/filter.js

New file
@@ -0,0 +1,93 @@
// tip值>99显示99+
import Vue from 'vue'
// tip值＞99显示99+
Vue.filter('tip', function (tip) {
  if (tip > 99) {
    return '99+'
  }
  return tip
})



export default {
    date(time){
        let oldDate = new Date(time)
        let newDate = new Date()
        var dayNum = "";
        var getTime = (newDate.getTime() - oldDate.getTime())/1000;
	
        if(getTime < 60*5){
                dayNum = "刚刚";
        }else if(getTime >= 60*5 && getTime < 60*60){
                dayNum = parseInt(getTime / 60) + "分钟前";
        }else if(getTime >= 3600 && getTime < 3600*24){
                dayNum = parseInt(getTime / 3600) + "小时前";
        }else if(getTime >= 3600 * 24 && getTime < 3600 * 24 * 30){
                dayNum = parseInt(getTime / 3600 / 24 ) + "天前";
        }else if(getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12){
                dayNum = parseInt(getTime / 3600 / 24 / 30 ) + "个月前";  
        }else if(time >= 3600 * 24 * 30 * 12){
                dayNum = parseInt(getTime / 3600 / 24 / 30 / 12 ) + "年前";  
        }
	
        let year   = oldDate.getFullYear();
        let month  = oldDate.getMonth()+1;
        let day    = oldDate.getDate();
        let hour   = oldDate.getHours(); 
        let minute = oldDate.getMinutes(); 
        let second = oldDate.getSeconds(); 
        if(getTime < 60 * 5) {
            return dayNum+" "+hour+":"+minute;
        }else {
            return dayNum+" "+year+"-"+month+"-"+day+" "+hour+":"+minute;
        }
    },
	
    Msgdate(time){
        let oldDate = new Date(time)
        let newDate = new Date()
        var dayNum = "";
        var getTime = (newDate.getTime() - oldDate.getTime())/1000;
	
        if(getTime < 60*5){
                dayNum = "刚刚";
        }else if(getTime >= 60*5 && getTime < 60*60){
                dayNum = parseInt(getTime / 60) + "分钟前";
        }else if(getTime >= 3600 && getTime < 3600*24){
                dayNum = parseInt(getTime / 3600) + "小时前";
        }else if(getTime >= 3600 * 24 && getTime < 3600 * 24 * 30){
                dayNum = parseInt(getTime / 3600 / 24 ) + "天前";
        }else if(getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12){
                dayNum = parseInt(getTime / 3600 / 24 / 30 ) + "个月前";  
        }else if(time >= 3600 * 24 * 30 * 12){
                dayNum = parseInt(getTime / 3600 / 24 / 30 / 12 ) + "年前";  
        }
	
        let year   = oldDate.getFullYear();
        let month  = oldDate.getMonth()+1;
        let day    = oldDate.getDate();
        let hour   = oldDate.getHours(); 
        let minute = oldDate.getMinutes(); 
        let second = oldDate.getSeconds(); 
        if(getTime < 60 * 60 * 12) {
            return dayNum;
        }else if(getTime < 60 * 60 * 24){
            return "昨天" + " " + hour + ":" +minute;
        }else{
            return dayNum+" "+year+"-"+month+"-"+day+" "+hour+":"+minute;
        }
    },
    spaceTime(old, now) {
        old = new Date(old)
        now = new Date(now)
        let told = old.getTime()
        let tnow = now.getTime()
        if(told > (tnow + 1000 * 60 * 5)) {
            return now
        }else {
            return ''
        }
    }
}


 debugdate/debugdate.js

New file
@@ -0,0 +1,357 @@
export default {
    friends() {
        let friendArr = [
            {
                id: 1,
                name: '王野未',
                head: require('@/static/images/index/top-bar/me.jpg'),
                mess: '做个好梦',
                data: new Date(),
                tip: 1,
                email: 'wangyewei1@foxmail.com',
                intro: '求知若渴，虚心若愚',
                sex: 'male',
                sexImg: require('@/static/images/userhome/male.png')
            },
            {
                id: 2,
                name: '孟子',
                head: require('@/static/images/index/friend-list/mengzi.jpg'),
                mess: '所以我也想不通我要睡啥子觉，为了他们晓得',
                data: new Date(),
                tip: 0,
                email: 'mengzi@163.com',
                intro: '我的身体还有我的灵魂都没法知足，所以我也想不通我要睡啥子觉，为了他们晓得，为了妈跟老汉儿，如果我起不来就该被驾驶骂',
                sex: 'male',
                sexImg: require('@/static/images/userhome/male.png')
            },
            {
                id: 3,
                name: '谢帝',
                head: require('@/static/images/index/friend-list/xiedi.jpg'),
                mess: '是学校的赘肉，试卷上躺了我的遗骸，我拿起笔来',
                data: new Date(),
                tip: 2,
                email: 'xiedi@163.com',
                intro: '说唱在我心中还是一如既往的根本不用去想的去讲的保持一贯风靡',
                sex: 'male',
                sexImg: require('@/static/images/userhome/male.png')
            },
            {
                id: 4,
                name: '水原希子',
                head: require('@/static/images/index/friend-list/kiko.jpg'),
                mess: '早点休息哦宝贝',
                data: new Date(),
                tip: 208,
                email: 'kiko@163.com',
                intro: '水原希子（Mizuhara Kiko），1990年10月15日出生于美国德克萨斯州达拉斯。演员、模特。曾是日本杂志《ViVi》及日版《Seventeen》的专属模特',
                sex: 'famale',
                sexImg: require('@/static/images/userhome/famale.png')
            },
            {
                id: 5,
                mess: '吃点串呀',
                data: new Date(),
                tip: 1,
                name: '撸串研究生',
                email: 'luchuanyanjiusheng@foxmail.com',
                head: require('@/static/images/search/searchresultImg1.jpg'),
                intro: '我爱吃串',
                sex: 'male',
                sexImg: require('@/static/images/userhome/male.png')
            },
            {
                id: 6,
                mess: '你发现我了呀',
                data: new Date(),
                tip: 1,
                name: '港城宝藏女孩',
                email: 'gangchengbaozangnvhai@foxmail.com',
                head: require('@/static/images/search/searchresultImg2.jpg'),
                intro: '你在看我主页吗？',
                sex: 'famale',
                sexImg: require('@/static/images/userhome/famale.png')
            },
            {
                id: 7,
                mess: '哦',
                data: new Date(),
                tip: 1,
                name: '不解风情的老妖怪',
                email: 'yimiwuxiaokeai@foxmail.com',
                head: require('@/static/images/search/searchresultImg3.jpg'),
                intro: '为什么给我分配一些情侣头像啊',
                sex: 'male',
                sexImg: require('@/static/images/userhome/male.png')
            },
            {
                id: 8,
                mess: '晚上好呀~',
                data: new Date(),
                tip: 1,
                name: '一米五的小可爱',
                email: 'bujiefengqinglaotaoguai@foxmail.com',
                head: require('@/static/images/search/searchresultImg4.jpg'),
                intro: '个子矮矮，可可爱爱',
                sex: 'famale',
                sexImg: require('@/static/images/userhome/famale.png')
            },
            {
                id: 9,
                mess: '没钱还花呗了呀',
                data: new Date(),
                tip: 5,
                name: '马云背后的女人',
                email: 'ziwofoudingxianquzhe@foxmail.com',
                head: require('@/static/images/search/searchresultImg5.jpg'),
                intro: '马云靠我养',
                sex: 'famale',
                sexImg: require('@/static/images/userhome/famale.png')
            },
            {
                id: 10,
                mess: '我不行',
                data: new Date(),
                tip: 1,
                name: '自我否定先驱者',
                email: 'mayunbeihoudenvren@foxmail.com',
                head: require('@/static/images/search/searchresultImg6.jpg'),
                intro: '国际一级退堂鼓演奏家',
                sex: 'male',
                sexImg: require('@/static/images/userhome/male.png')
            },
            {
                id: 11,
                mess: '乖哦~',
                data: new Date(),
                tip: 5,
                name: '联合国认证小可爱',
                email: 'guojiatejibubaohudongwu@foxmail.com',
                head: require('@/static/images/search/searchresultImg7.jpg'),
                sex: 'famale',
                sexImg: require('@/static/images/userhome/famale.png')
            },
            {
                id: 12,
                mess: '我又被打了',
                data: new Date(),
                tip: 20,
                name: '国家特级不保护动物',
                email: 'lianheguorenzhengxiaokeai@foxmail.com',
                head: require('@/static/images/search/searchresultImg8.jpg'),
                intro: '针对我？',
                sex: 'male',
                sexImg: require('@/static/images/userhome/male.png')
            }
			
			
        ]
        return friendArr
    },
    applys(){
        let applyArr = [
            {
                name:'好友申请',
                head: require('@/static/images/index/friend-list/apply.png'),
                mess: '若人生只如初见~',
                tip: '3'
            }
        ]
        return applyArr
    },
    isFriend(){
        let isfriend = [
            {
                userid:1,
                friend:2
            },
            {
                userid:1,
                friend:3
            },
            {
                userid:1,
                friend:4
            },
            {
                userid:1,
                friend:5
            },
            {
                userid:1,
                friend:9
            },
            {
                userid:1,
                friend:1,
            }
        ]
        return isfriend
    },
    firendsRequest(){
        let friendRequests = [
            {
                name: '马云',
                head: require('@/static/images/friendrequest/mayun.jpg'),
                message: '王总您好，我是阿里巴巴马云，刚才有跟你致电。',
                date: new Date()
            },
            {
                name: '尤雨溪 Evan You',
                head: require('@/static/images/friendrequest/evanyou.jpg'),
                message: '我是Vue.js尤雨溪',
                date: new Date()
            },
            {
                name: '福布斯·中国',
                head: require('@/static/images/friendrequest/Forbes.jpg'),
                message: '王总您好，恭喜您入围2020福布斯富豪排行榜',
                date: new Date()
            }
        ]
        return friendRequests
    },
    // 聊天消息
    message(){
        let msgs = [
            // {
            //     id: 1,
            //     imgUrl; 'me.jpg',
            //     message: 'I miss u TaoXingyu',
            //     types: 0,
            //     time: new Date(),
            //     tip: ''
            // },
            {
                id: 4,
                imgUrl: 'kiko.jpg',
                message: '增加数据条数',
                types: 0,
                time: new Date(),
                tip: 13
            },
            {
                id: 4,
                imgUrl: 'kiko.jpg',
                message: '开始写分页加载 2020/8/24',
                types: 0,
                time: new Date(),
                tip: 12
            },
            {
                id: 4,
                imgUrl: 'kiko.jpg',
                message: {
                    name: 'Komehyo',
                    address: '〒104-0061 東京都中央区銀座５丁目６−12 1F～4F みゆきビル',
                    latitude: '35.40159',
                    longitude: '139.45488'
                },
                types:3,
                time:new Date(),
                tip: 11
            },
            {
                id: 1,
                imgUrl: 'me.jpg',
                message: {
                    name: '春熙路',
                    address: '四川省成都市锦江区春熙路',
                    latitude: '30.65331',
                    longitude: '104.07775'
                },
                types:3,
                time:new Date(),
                tip: 10
            },
            {
                id: 1,
                message: {
                    voice: 'b',
                    time: 5
                },
                imgUrl: 'me.jpg',
                types: 2,
                time: new Date(),
                tip: 9
            },
            {
                id: 4,
                message: {
                    voice: 'a',
                    time: 60
                },
                imgUrl: 'kiko.jpg',
                types: 2,
                time: new Date(),
                tip: 8
            },
            {
                id: 1,
                message: '我在写BUG',
                imgUrl: 'me.jpg',
                types: 0,
                time: new Date() - 1000 * 60 * 10,
                tip: 7
            },
            {
                id: 4,
                message: '你还在写代码吗？',
                imgUrl: 'kiko.jpg',
                types: 0,
                time: new Date() - 1000 * 60 * 10,
                tip: 6
            },
            {
                id: 1,
                message: '你每天都好看',
                imgUrl: 'me.jpg',
                types: 0,
                time: new Date() - 1000,
                tip: 5
            },
            {
                id: 4,
                message: 'kiko.jpg',
                imgUrl: 'kiko.jpg',
                types: 1,
                time: new Date() - 1000,
                tip: 4
            },
            {
                id: 4,
                message: '嘻嘻，你看我今天好不好看',
                imgUrl: 'kiko.jpg',
                types: 0,
                time: new Date() - 1000 * 60 * 60,
                tip: 3
            },
            {
                id: 1,
                message: '傻瓜，端午要说安康哦',
                imgUrl: 'me.jpg',
                types: 0,
                time: new Date() - 1000 * 60 * 60,
                tip: 2
            },
            {
                id: 4,
                message: '今天是端午节哦，端午节快乐',
                imgUrl: 'kiko.jpg',
                types: 0,
                time: new Date() - 1000 * 60 * 600 ,
                tip: 1
            },
            {
                id: 4,
                message: '早哦，宝贝',
                imgUrl: 'kiko.jpg',
                types: 0,
                time: new Date() - 1000 * 60 * 600,
                tip: 0
            },
        ]
        return msgs
    }
}

 manifest.json

@@ -1,6 +1,6 @@
{
    "name" : "jfpt",
    "appid" : "__UNI__88EDF2B",
    "appid" : "__UNI__1A57486",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
@@ -42,7 +42,7 @@
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ],
                "abiFilters" : [ "armeabi-v7a" ]
                "abiFilters" : [ "armeabi-v7a", "x86" ]
            },
            /* ios打包配置 */
            "ios" : {},

 pages.json

@@ -99,6 +99,28 @@
            }
        },
        {
            "path": "pages/groupChat/groupChat",
            "name": "groupChat",
            "style": {
                "navigationBarTitleText": "聊天室"
            }
        },
        {
            "path" : "components/submit/submit",
            "style" : {}
        },
        {
            "path": "pages/groupChat/chating",
            "name": "chating",
            "style": {
                "navigationBarTitleText": "聊天室2",
                "navigationStyle":"custom",
                "app-plus":{
                    "titleNView":false
                }
            }
        },
        {
            "path": "pages/infoRegistration/infoRegistration",
            "name": "infoRegistration",
            "style": {
@@ -240,7 +262,7 @@
                "selectedIconPath": "static/tabbar/businessH.png"
            }, {

                "pagePath": "pages/investigation/investigation",
                "pagePath": "pages/groupChat/groupChat",
                "text": "我要说",
                "iconPath": "static/tabbar/investigation.png",
                "selectedIconPath": "static/tabbar/investigationH.png"
@@ -253,10 +275,15 @@

        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
    "globalStyle": { // 不能在globalStyle中设置隐藏头部导航栏，否则聊天页面的头部栏会不显示，在pages中设置titleNView为false就可以隐藏头部导航栏了
            "navigationBarTextStyle": "black",
            "navigationBarTitleText": "hello",
            "navigationBarBackgroundColor": "#fff",
            "backgroundColor": "#f7f7f7",
            "backgroundTextStyle":"light",
            "pageOrientation":"portrait", //横屏配置，屏幕旋转设置
            "app-plus": {
                "bounce": "none"
            }
        }
}

 pages/groupChat/chating.vue

New file
@@ -0,0 +1,560 @@
<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>水原希子kiko</text>
        </view>
        <view class="top-bar-right search pice">
            <view class="group-img">
                <image src="@/static/images/index/friend-list/kiko.jpg"
                             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.tip">
                <view class="chat-time" v-if="item.time != ''">{{ item.time | Msgdate }}</view>
				
                <view class="msg-m msg-left" v-if="item.id != 1">
                    <image :src="item.imgUrl" 
                                 mode=""
                                 class="user-img" />
                    <!-- text -->
                    <view class="message" v-if="item.types == 0">
                        <view class="msg-text">{{ item.message }}</view>
                    </view>
                    <!-- image -->
                    <view class="message" v-if="item.types == 1">
                        <image :src="item.message" 
                                     class="msg-img"
                                     mode="widthFix"
                                     @tap="previewImage(item.message)"/>
                    </view>
                    <!-- voice -->
                    <view class="message" v-if="item.types == 2">
                        <view class="msg-text voice"
                                    :style="{width:item.message.time * 4 + 'px'}"
                                    @tap="playVoice(item.message.voice)">
                            <image src="../../static/images/chatroom/sound.png" 
                                         mode=""
                                         class="voice-img"/>
                            {{ item.message.time }} "
                        </view>
                    </view>
                    <!-- location -->
                    <view class="message" v-if="item.types == 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>
                            <image src="../../static/images/chatroom/map.jpg" 
                                         mode="aspectFit" 
                                         class="map-img"/>
                        </view>
                    </view>
					
                </view>
				
                <view class="msg-m msg-right" v-if="item.id == 1">
                    <image :src="item.imgUrl" 
                                 mode=""
                                 class="user-img" />
                    <view class="message" v-if="item.types == 0">
                        <view class="msg-text">{{ item.message }}</view>
                    </view>
                    <view class="message" v-if="item.types == 1">
                        <image :src="item.message" 
                                     class="msg-img"
                                     mode="widthFix"
                                     @tap="previewImage(item.message)"/>
                    </view>
                    <!-- voice -->
                    <view class="message" v-if="item.types == 2">
                        <view class="msg-text voice"
                                    :style="{width:item.message.time * 4 + 'px'}"
                                    @tap="playVoice(item.message.voice)">
                            {{ item.message.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="msg-map"
                                    @tap="openLocation(item.message)">
                            <view class="map-name">{{ item.message.name }}</view>
                            <view class="map-address">{{ item.message.address }}</view>
                            <!-- <map class="map"
                                     :latitude="item.message.latitude"
                                     :longitude="item.message.longitude"
                                     :markers="covers(item.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'
	
    const innerAudioContext = uni.createInnerAudioContext()
	
    export default {
        data() {
            return {
                msgs: [],
                imgMsg: [],
                oldTime: new Date(),
                scrollToView: '',
                inputh: '72',                 
                animationData: {},            // 动画
                nowpage: 0,                   // 页码
                loading: '',                  // 滚动事件
                isload: true,
                isanimation: true,
                begainloading: true
            };
        },
        components:{
            submit,
        },
        onLoad() {
            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) {
                // 页数加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
                        }
                        msg[i].time = t
                    }
                    // 补充图片地址
                    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) {
				
                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) {
                this.isanimation = true
                let len = this.msgs.length -1				
                let nowTime = new Date()				
                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
                }
                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.msgs.length -1
                    this.scrollToView = 'msg' + this.msgs[len].tip
                })
            },
            // 地图定位
            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')
                    }
                })
            },
        },
        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;
    }
</style>

 pages/groupChat/groupChat.vue

New file
@@ -0,0 +1,199 @@
<!-- 工作台 -->
<template>
    <view class="work">
        <view class="main">
            <div>
                <div class="m-main">
                    <!-- <view class="inTitle">{{Task}}</view> -->
                    <view class="inTmain">
                        <contacts v-for="(item,index) in dataListP" :key="index" :Pdata="item" :fromW="fromW"
                            @refreshTask="refreshTask"></contacts>
                    </view>
                </div>
            </div>
        </view>
		
    </view>
</template>

<script>
    import WxStorage from "../../static/lib/wxStorage.js"
    import axios from '../../static/lib/axios.js'
    import contacts from '../../components/contacts/contacts.vue'
    export default {
        components: {
            contacts
        },
        data() {
            return {
                zhanwei: '', //因为小程序中底部和顶部栏占位置，uniapp中不占位置
                ingsDB: '#00d1ff 2px solid',
                candoDB: '#fff 2px solid',
                Task: '当前已接任务',
                show: true,
                dataListP: [],
                fromW: '',
                onTop: false, //是否吸顶
                rect: '', //页面滚动距离
                menutop: '', //组件距离顶部的距离
                titleTop: '', //
                hello: false,
                userName: '',
            }
        },
        methods: {
            beginObj() {
                this.titleTop = '2.6rem';
                this.zhanwei = '3rem';
                //#ifdef MP-WEIXIN
                console.log('uni-app小程序中')
                this.titleTop = '0';
                this.zhanwei = '0';
                //#endif
            },
            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) {
                this.fromW = need;
                var that = this;
				
                uni.request({
                    url:"http://s16s652780.51mypc.cn/map/chat.json",
                    method:"get",
                    data:{
                    },
                    success:(res)=> {
                        that.dataListP = res.data.contacts
                    }
                })
				
				
            },
            refreshTask() {
                this.getdataList(1);
            },
			
        },
        mounted() {
            this.beginObj();
            this.ingss();
        },
        onPageScroll(e) {
            // console.log(e.scrollTop, 'pingmu')
            this.rect = e.scrollTop
        },
        watch: {
            rect() {
                if (this.rect >= this.menutop) {
                    this.onTop = true
                } else {
                    this.onTop = false
                }
            }
        },
        onLoad: function(options) {
            this.userName = options.login
			
        }
    }
</script>

<style lang="scss">
    .work {
        width: 100%;
        height: 100%;
        padding: 0.625rem 2.5% 3rem 2.5%;
        box-sizing: border-box;

        .hello {
            position: absolute;
            top: 0;
            left: 25%;
            width: 50%;
            height: 2rem;
            border-radius: 20rem;
            color: #fff;
            background-color: rgba($color: #000000, $alpha: 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .center {
            padding-top: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .left,
            .right {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                image {
                    width: 4rem;
                    height: 4rem;
                }
            }
        }

        .main {
            .m-title {
                width: 100%;
                height: 2rem;
                display: flex;
                align-items: center;
                justify-content: space-around;
                padding-top: 0.8rem;
                padding-bottom: 0.5rem;
                // border: 1px solid #B3E19D;
                box-sizing: border-box;

                .m-t {
                    padding-bottom: 0.5rem;
                    box-sizing: border-box;
                }
            }

            .m-titletop {
                width: 95%;
                height: 2.2rem;
                display: flex;
                align-items: center;
                justify-content: space-around;
                padding-top: 0.8rem;
                padding-bottom: 0.5rem;
                // border: 1px solid #B3E19D;
                box-sizing: border-box;
                position: fixed;
                background-color: #fff;
                z-index: 3;
                border-bottom: 1px solid rgba($color: #000000, $alpha: 0.3);

                .m-t {
                    padding-bottom: 0.5rem;
                    box-sizing: border-box;
                }
            }

            .m-main {
                box-sizing: border-box;
            }
        }
    }
</style>

 static/chat.json

New file
@@ -0,0 +1,25 @@
{
    "contacts": [
        {
            "name":"王一平",
            "id":"123",
            "sex":1,
            "lastTime":"2021-6-17 8:59:25",
            "LastMessage":"等下吃啥"
        },
        {
            "name":"查干",
            "id":"456",
            "sex":1,
            "lastTime":"2021-6-17 9:42:25",
            "LastMessage":"测试信息"
        },
        {
            "name":"王秋娇",
            "id":"789",
            "sex":1,
            "lastTime":"2021-6-17 8:25:17",
            "LastMessage":"巡逻点有问题"
        }
    ]
}

 static/images/chatroom/add.png

 static/images/chatroom/camera.png

 static/images/chatroom/emoji.png

 static/images/chatroom/file.png

 static/images/chatroom/load.png

 static/images/chatroom/location.png

 static/images/chatroom/map.jpg

 static/images/chatroom/photo.png

 static/images/chatroom/placeholder-b.png

 static/images/chatroom/placeholder-r.png

 static/images/chatroom/sound.png

 static/images/chatroom/vedio.png

 static/images/chatroom/voice.png

 static/images/common/back.png

 static/images/friendrequest/Forbes.jpg

 static/images/friendrequest/evanyou.jpg

 static/images/friendrequest/mayun.jpg

 static/images/index/friend-list/apply.png

 static/images/index/friend-list/kiko.jpg

 static/images/index/friend-list/me.jpg

 static/images/index/friend-list/mengzi.jpg

 static/images/index/friend-list/xiedi.jpg

 static/images/index/top-bar/add.png

 static/images/index/top-bar/me.jpg

 static/images/index/top-bar/search.png

 static/images/login/biyan.png

 static/images/login/look.png

 static/images/login/right1.png

 static/images/search/search.png

 static/images/search/searchresultImg1.jpg

 static/images/search/searchresultImg2.jpg

 static/images/search/searchresultImg3.jpg

 static/images/search/searchresultImg4.jpg

 static/images/search/searchresultImg5.jpg

 static/images/search/searchresultImg6.jpg

 static/images/search/searchresultImg7.jpg

 static/images/search/searchresultImg8.jpg

 static/images/userdetails/right-arrow.png

 static/images/userhome/famale.png

 static/images/userhome/gender.png

 static/images/userhome/male.png

 static/images/userhome/more.png

 static/lib/axios.js

New file
@@ -0,0 +1,3 @@
/* axios v0.21.1 | (c) 2020 by Matt Zabriskie */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.axios=t():e.axios=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){var t=new i(e),n=s(i.prototype.request,t);return o.extend(n,i.prototype,t),o.extend(n,t),n}var o=n(2),s=n(3),i=n(4),a=n(22),u=n(10),c=r(u);c.Axios=i,c.create=function(e){return r(a(c.defaults,e))},c.Cancel=n(23),c.CancelToken=n(24),c.isCancel=n(9),c.all=function(e){return Promise.all(e)},c.spread=n(25),c.isAxiosError=n(26),e.exports=c,e.exports.default=c},function(e,t,n){"use strict";function r(e){return"[object Array]"===R.call(e)}function o(e){return"undefined"==typeof e}function s(e){return null!==e&&!o(e)&&null!==e.constructor&&!o(e.constructor)&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}function i(e){return"[object ArrayBuffer]"===R.call(e)}function a(e){return"undefined"!=typeof FormData&&e instanceof FormData}function u(e){var t;return t="undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&e.buffer instanceof ArrayBuffer}function c(e){return"string"==typeof e}function f(e){return"number"==typeof e}function p(e){return null!==e&&"object"==typeof e}function d(e){if("[object Object]"!==R.call(e))return!1;var t=Object.getPrototypeOf(e);return null===t||t===Object.prototype}function l(e){return"[object Date]"===R.call(e)}function h(e){return"[object File]"===R.call(e)}function m(e){return"[object Blob]"===R.call(e)}function y(e){return"[object Function]"===R.call(e)}function g(e){return p(e)&&y(e.pipe)}function v(e){return"undefined"!=typeof URLSearchParams&&e instanceof URLSearchParams}function x(e){return e.replace(/^\s*/,"").replace(/\s*$/,"")}function w(){return("undefined"==typeof navigator||"ReactNative"!==navigator.product&&"NativeScript"!==navigator.product&&"NS"!==navigator.product)&&("undefined"!=typeof window&&"undefined"!=typeof document)}function b(e,t){if(null!==e&&"undefined"!=typeof e)if("object"!=typeof e&&(e=[e]),r(e))for(var n=0,o=e.length;n<o;n++)t.call(null,e[n],n,e);else for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.call(null,e[s],s,e)}function E(){function e(e,n){d(t[n])&&d(e)?t[n]=E(t[n],e):d(e)?t[n]=E({},e):r(e)?t[n]=e.slice():t[n]=e}for(var t={},n=0,o=arguments.length;n<o;n++)b(arguments[n],e);return t}function j(e,t,n){return b(t,function(t,r){n&&"function"==typeof t?e[r]=S(t,n):e[r]=t}),e}function C(e){return 65279===e.charCodeAt(0)&&(e=e.slice(1)),e}var S=n(3),R=Object.prototype.toString;e.exports={isArray:r,isArrayBuffer:i,isBuffer:s,isFormData:a,isArrayBufferView:u,isString:c,isNumber:f,isObject:p,isPlainObject:d,isUndefined:o,isDate:l,isFile:h,isBlob:m,isFunction:y,isStream:g,isURLSearchParams:v,isStandardBrowserEnv:w,forEach:b,merge:E,extend:j,trim:x,stripBOM:C}},function(e,t){"use strict";e.exports=function(e,t){return function(){for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];return e.apply(t,n)}}},function(e,t,n){"use strict";function r(e){this.defaults=e,this.interceptors={request:new i,response:new i}}var o=n(2),s=n(5),i=n(6),a=n(7),u=n(22);r.prototype.request=function(e){"string"==typeof e?(e=arguments[1]||{},e.url=arguments[0]):e=e||{},e=u(this.defaults,e),e.method?e.method=e.method.toLowerCase():this.defaults.method?e.method=this.defaults.method.toLowerCase():e.method="get";var t=[a,void 0],n=Promise.resolve(e);for(this.interceptors.request.forEach(function(e){t.unshift(e.fulfilled,e.rejected)}),this.interceptors.response.forEach(function(e){t.push(e.fulfilled,e.rejected)});t.length;)n=n.then(t.shift(),t.shift());return n},r.prototype.getUri=function(e){return e=u(this.defaults,e),s(e.url,e.params,e.paramsSerializer).replace(/^\?/,"")},o.forEach(["delete","get","head","options"],function(e){r.prototype[e]=function(t,n){return this.request(u(n||{},{method:e,url:t,data:(n||{}).data}))}}),o.forEach(["post","put","patch"],function(e){r.prototype[e]=function(t,n,r){return this.request(u(r||{},{method:e,url:t,data:n}))}}),e.exports=r},function(e,t,n){"use strict";function r(e){return encodeURIComponent(e).replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,"+").replace(/%5B/gi,"[").replace(/%5D/gi,"]")}var o=n(2);e.exports=function(e,t,n){if(!t)return e;var s;if(n)s=n(t);else if(o.isURLSearchParams(t))s=t.toString();else{var i=[];o.forEach(t,function(e,t){null!==e&&"undefined"!=typeof e&&(o.isArray(e)?t+="[]":e=[e],o.forEach(e,function(e){o.isDate(e)?e=e.toISOString():o.isObject(e)&&(e=JSON.stringify(e)),i.push(r(t)+"="+r(e))}))}),s=i.join("&")}if(s){var a=e.indexOf("#");a!==-1&&(e=e.slice(0,a)),e+=(e.indexOf("?")===-1?"?":"&")+s}return e}},function(e,t,n){"use strict";function r(){this.handlers=[]}var o=n(2);r.prototype.use=function(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.eject=function(e){this.handlers[e]&&(this.handlers[e]=null)},r.prototype.forEach=function(e){o.forEach(this.handlers,function(t){null!==t&&e(t)})},e.exports=r},function(e,t,n){"use strict";function r(e){e.cancelToken&&e.cancelToken.throwIfRequested()}var o=n(2),s=n(8),i=n(9),a=n(10);e.exports=function(e){r(e),e.headers=e.headers||{},e.data=s(e.data,e.headers,e.transformRequest),e.headers=o.merge(e.headers.common||{},e.headers[e.method]||{},e.headers),o.forEach(["delete","get","head","post","put","patch","common"],function(t){delete e.headers[t]});var t=e.adapter||a.adapter;return t(e).then(function(t){return r(e),t.data=s(t.data,t.headers,e.transformResponse),t},function(t){return i(t)||(r(e),t&&t.response&&(t.response.data=s(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t,n){return r.forEach(n,function(n){e=n(e,t)}),e}},function(e,t){"use strict";e.exports=function(e){return!(!e||!e.__CANCEL__)}},function(e,t,n){"use strict";function r(e,t){!s.isUndefined(e)&&s.isUndefined(e["Content-Type"])&&(e["Content-Type"]=t)}function o(){var e;return"undefined"!=typeof XMLHttpRequest?e=n(12):"undefined"!=typeof process&&"[object process]"===Object.prototype.toString.call(process)&&(e=n(12)),e}var s=n(2),i=n(11),a={"Content-Type":"application/x-www-form-urlencoded"},u={adapter:o(),transformRequest:[function(e,t){return i(t,"Accept"),i(t,"Content-Type"),s.isFormData(e)||s.isArrayBuffer(e)||s.isBuffer(e)||s.isStream(e)||s.isFile(e)||s.isBlob(e)?e:s.isArrayBufferView(e)?e.buffer:s.isURLSearchParams(e)?(r(t,"application/x-www-form-urlencoded;charset=utf-8"),e.toString()):s.isObject(e)?(r(t,"application/json;charset=utf-8"),JSON.stringify(e)):e}],transformResponse:[function(e){if("string"==typeof e)try{e=JSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:"XSRF-TOKEN",xsrfHeaderName:"X-XSRF-TOKEN",maxContentLength:-1,maxBodyLength:-1,validateStatus:function(e){return e>=200&&e<300}};u.headers={common:{Accept:"application/json, text/plain, */*"}},s.forEach(["delete","get","head"],function(e){u.headers[e]={}}),s.forEach(["post","put","patch"],function(e){u.headers[e]=s.merge(a)}),e.exports=u},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){r.forEach(e,function(n,r){r!==t&&r.toUpperCase()===t.toUpperCase()&&(e[t]=n,delete e[r])})}},function(e,t,n){"use strict";var r=n(2),o=n(13),s=n(16),i=n(5),a=n(17),u=n(20),c=n(21),f=n(14);e.exports=function(e){return new Promise(function(t,n){var p=e.data,d=e.headers;r.isFormData(p)&&delete d["Content-Type"];var l=new XMLHttpRequest;if(e.auth){var h=e.auth.username||"",m=e.auth.password?unescape(encodeURIComponent(e.auth.password)):"";d.Authorization="Basic "+btoa(h+":"+m)}var y=a(e.baseURL,e.url);if(l.open(e.method.toUpperCase(),i(y,e.params,e.paramsSerializer),!0),l.timeout=e.timeout,l.onreadystatechange=function(){if(l&&4===l.readyState&&(0!==l.status||l.responseURL&&0===l.responseURL.indexOf("file:"))){var r="getAllResponseHeaders"in l?u(l.getAllResponseHeaders()):null,s=e.responseType&&"text"!==e.responseType?l.response:l.responseText,i={data:s,status:l.status,statusText:l.statusText,headers:r,config:e,request:l};o(t,n,i),l=null}},l.onabort=function(){l&&(n(f("Request aborted",e,"ECONNABORTED",l)),l=null)},l.onerror=function(){n(f("Network Error",e,null,l)),l=null},l.ontimeout=function(){var t="timeout of "+e.timeout+"ms exceeded";e.timeoutErrorMessage&&(t=e.timeoutErrorMessage),n(f(t,e,"ECONNABORTED",l)),l=null},r.isStandardBrowserEnv()){var g=(e.withCredentials||c(y))&&e.xsrfCookieName?s.read(e.xsrfCookieName):void 0;g&&(d[e.xsrfHeaderName]=g)}if("setRequestHeader"in l&&r.forEach(d,function(e,t){"undefined"==typeof p&&"content-type"===t.toLowerCase()?delete d[t]:l.setRequestHeader(t,e)}),r.isUndefined(e.withCredentials)||(l.withCredentials=!!e.withCredentials),e.responseType)try{l.responseType=e.responseType}catch(t){if("json"!==e.responseType)throw t}"function"==typeof e.onDownloadProgress&&l.addEventListener("progress",e.onDownloadProgress),"function"==typeof e.onUploadProgress&&l.upload&&l.upload.addEventListener("progress",e.onUploadProgress),e.cancelToken&&e.cancelToken.promise.then(function(e){l&&(l.abort(),n(e),l=null)}),p||(p=null),l.send(p)})}},function(e,t,n){"use strict";var r=n(14);e.exports=function(e,t,n){var o=n.config.validateStatus;n.status&&o&&!o(n.status)?t(r("Request failed with status code "+n.status,n.config,null,n.request,n)):e(n)}},function(e,t,n){"use strict";var r=n(15);e.exports=function(e,t,n,o,s){var i=new Error(e);return r(i,t,n,o,s)}},function(e,t){"use strict";e.exports=function(e,t,n,r,o){return e.config=t,n&&(e.code=n),e.request=r,e.response=o,e.isAxiosError=!0,e.toJSON=function(){return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:this.config,code:this.code}},e}},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,s,i){var a=[];a.push(e+"="+encodeURIComponent(t)),r.isNumber(n)&&a.push("expires="+new Date(n).toGMTString()),r.isString(o)&&a.push("path="+o),r.isString(s)&&a.push("domain="+s),i===!0&&a.push("secure"),document.cookie=a.join("; ")},read:function(e){var t=document.cookie.match(new RegExp("(^|;\\s*)("+e+")=([^;]*)"));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,"",Date.now()-864e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t,n){"use strict";var r=n(18),o=n(19);e.exports=function(e,t){return e&&!r(t)?o(e,t):t}},function(e,t){"use strict";e.exports=function(e){return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(e)}},function(e,t){"use strict";e.exports=function(e,t){return t?e.replace(/\/+$/,"")+"/"+t.replace(/^\/+/,""):e}},function(e,t,n){"use strict";var r=n(2),o=["age","authorization","content-length","content-type","etag","expires","from","host","if-modified-since","if-unmodified-since","last-modified","location","max-forwards","proxy-authorization","referer","retry-after","user-agent"];e.exports=function(e){var t,n,s,i={};return e?(r.forEach(e.split("\n"),function(e){if(s=e.indexOf(":"),t=r.trim(e.substr(0,s)).toLowerCase(),n=r.trim(e.substr(s+1)),t){if(i[t]&&o.indexOf(t)>=0)return;"set-cookie"===t?i[t]=(i[t]?i[t]:[]).concat([n]):i[t]=i[t]?i[t]+", "+n:n}}),i):i}},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){function e(e){var t=e;return n&&(o.setAttribute("href",t),t=o.href),o.setAttribute("href",t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,""):"",host:o.host,search:o.search?o.search.replace(/^\?/,""):"",hash:o.hash?o.hash.replace(/^#/,""):"",hostname:o.hostname,port:o.port,pathname:"/"===o.pathname.charAt(0)?o.pathname:"/"+o.pathname}}var t,n=/(msie|trident)/i.test(navigator.userAgent),o=document.createElement("a");return t=e(window.location.href),function(n){var o=r.isString(n)?e(n):n;return o.protocol===t.protocol&&o.host===t.host}}():function(){return function(){return!0}}()},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){function n(e,t){return r.isPlainObject(e)&&r.isPlainObject(t)?r.merge(e,t):r.isPlainObject(t)?r.merge({},t):r.isArray(t)?t.slice():t}function o(o){r.isUndefined(t[o])?r.isUndefined(e[o])||(s[o]=n(void 0,e[o])):s[o]=n(e[o],t[o])}t=t||{};var s={},i=["url","method","data"],a=["headers","auth","proxy","params"],u=["baseURL","transformRequest","transformResponse","paramsSerializer","timeout","timeoutMessage","withCredentials","adapter","responseType","xsrfCookieName","xsrfHeaderName","onUploadProgress","onDownloadProgress","decompress","maxContentLength","maxBodyLength","maxRedirects","transport","httpAgent","httpsAgent","cancelToken","socketPath","responseEncoding"],c=["validateStatus"];r.forEach(i,function(e){r.isUndefined(t[e])||(s[e]=n(void 0,t[e]))}),r.forEach(a,o),r.forEach(u,function(o){r.isUndefined(t[o])?r.isUndefined(e[o])||(s[o]=n(void 0,e[o])):s[o]=n(void 0,t[o])}),r.forEach(c,function(r){r in t?s[r]=n(e[r],t[r]):r in e&&(s[r]=n(void 0,e[r]))});var f=i.concat(a).concat(u).concat(c),p=Object.keys(e).concat(Object.keys(t)).filter(function(e){return f.indexOf(e)===-1});return r.forEach(p,o),s}},function(e,t){"use strict";function n(e){this.message=e}n.prototype.toString=function(){return"Cancel"+(this.message?": "+this.message:"")},n.prototype.__CANCEL__=!0,e.exports=n},function(e,t,n){"use strict";function r(e){if("function"!=typeof e)throw new TypeError("executor must be a function.");var t;this.promise=new Promise(function(e){t=e});var n=this;e(function(e){n.reason||(n.reason=new o(e),t(n.reason))})}var o=n(23);r.prototype.throwIfRequested=function(){if(this.reason)throw this.reason},r.source=function(){var e,t=new r(function(t){e=t});return{token:t,cancel:e}},e.exports=r},function(e,t){"use strict";e.exports=function(e){return function(t){return e.apply(null,t)}}},function(e,t){"use strict";e.exports=function(e){return"object"==typeof e&&e.isAxiosError===!0}}])});
//# sourceMappingURL=axios.min.map

 static/scss/index.scss

New file
@@ -0,0 +1,108 @@
// 页面开头公共样式
.content {
    padding-top: var(--status-bar-height);
    }


// 头部公共样式
.top-bar {
            height: 88rpx;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;			
            display: flex;
            align-items: center;
            z-index: 999;
            padding-top: var(--status-bar-height);

			
            .top-bar-left {
                margin-left: 32rpx;
                justify-content: left;
                flex: 1;
							
                image {
                    width: 68rpx;
                    height: 68rpx;
                    border-radius: 16rpx;
                }
								
                .back-img {
                    left: 0;
                    width: 88rpx;
                    height : 88rpx;
					
                    image {
                        width: 26rpx;
                        height: 45rpx;
                        margin-top: 22rpx;
                    }
                }

            }
            .top-bar-center {
				
                .logo {
                    font-weight: bold;
                    color: grey;
                }
            }
			
            .top-bar-right {
                margin-right: 32rpx;
                flex: 1;
                text-align: right;
                justify-content: right;
				
                image {
                    width: 52rpx;
                    height: 52rpx;
                    margin-left: 52rpx;
                }
				
                .text {
                    font-size: $uni-font-size-lg;
                    font-weight: 500;
                    color: $uni-text-color;
                }
				
                .more-img {
                    padding-right: $uni-spacing-col-base;
                    position: relative;
					
                    image {
                        width: 52rpx;
                        height: 12rpx;
                        top: 0;
                        right: 0;
                        position: absolute;
                    }
                }
            }
        }
		
        // 底部样式
        .bottom-bar {
            position: fixed;
            bottom: 0;
            height: 90rpx;
            width: 100%;
            // padding: 12rpx $uni-spacing-col-base;
            padding-top: 10rpx;
            padding-bottom: var(--status-bar-height);
				
        }
		
        // 按钮公共样式1
        .btn1 {
            margin: 0 $uni-spacing-col-base;
            line-height: 80rpx;			
            height: 80rpx;
            border-radius: $uni-border-radius-sm;
            font-size: 32rpx;
            color: $uni-text-color;
            text-align: center;
        }
		
		

 static/tabbar/article.png

 static/tabbar/investigation.png

 static/tabbar/investigationH.png

 static/tabbar/user.png