加入聊天室

liuyg

2021-07-27 8b206c06e7b8fe61cbb7713677e4360762d2f7ff

加入聊天室

 components/friend/friend.vue

New file
@@ -0,0 +1,21 @@
<template>
    <view>
        {{data}}
    </view>
</template>

<script>
    export default {
        name:"friend",
        props:['data'],
        data() {
            return {
				
            };
        }
    }
</script>

<style lang="scss">

</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
    }
}

 pages.json

@@ -10,7 +10,7 @@
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },{
        }, {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "首页",
@@ -41,6 +41,34 @@
                "navigationStyle": "custom"
            }
        }, {
            "path": "pages/talking/talking",
            "style": {
                "navigationBarTitleText": "好友",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },  {
            "path": "pages/groupChat/groupChat",
            "style": {
                "navigationBarTitleText": "聊天室",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
            "path": "pages/groupChat/chatingQZ",
            "style": {
                "navigationBarTitleText": "聊天室",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        }, {
            "path": "pages/groupChat/chating",
            "style": {
                "navigationBarTitleText": "聊天室",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },  {
            "path": "pages/company/company",
            "style": {
                "navigationBarTitleText": "服务单位",
@@ -164,7 +192,7 @@
            "selectedIconPath": "static/images/tabbar/home_selected.png",
            "text": "首页"
        }, {
            "pagePath": "pages/demo/demo",
            "pagePath": "pages/groupChat/groupChat",
            "iconPath": "static/images/tabbar/demo.png",
            "selectedIconPath": "static/images/tabbar/demo_selected.png",
            "text": "好友"

 pages/groupChat/groupChat.vue

@@ -213,9 +213,9 @@
        },
        onLoad: function(options) {
            this.userName = options.login;
            if(options.txlType == 2){
            // if(options.txlType == 2){
                this.current = 2;
            }
            // }
            
        }
    }

 pages/talking/talking.vue

New file
@@ -0,0 +1,55 @@
<template>
    <view class="container">
        <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title="好友"
            :background="{ background: '#0BB9C8' }" title-color="#fff">
            <image slot="right" src="/static/images/home/message.png" class="message-icon" mode="widthFix"></image>
        </u-navbar>
        <friend v-for="(item,index) in friendlist" :key='index' :data="item"></friend>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                friendlist:[
                    {
                        name: 'liu',
                        havetalk: 0,
                        id: 1,
                        msg: 'xxxxxxxxxx',
                        imgsrc:''
                    },{
                        name: 'liu2',
                        havetalk: 4,
                        id: 2,
                        msg: 'xxxxxxxxxx',
                        imgsrc:''
                    },
                ]
            };
        },
        onReady() {
			
        },
        methods: {
        }
    };
</script>

<style lang="scss">
    .swiper-box {
        height: 100vh;
    }

    .message-icon {
        width: 32rpx;
        height: auto;
        margin-right: 27rpx;
    }

    .tab {
        margin-bottom: 10rpx;
    }

</style>

 static/images/article/menu.png

 static/images/article/microphone.png

 static/images/article/search.png

 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/clock/position01.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/c8.png

 static/images/login/look.png

 static/images/login/right1.png

 static/images/nav/back.png

 static/images/nav/back01.png

 static/images/nav/back02.png

 static/images/pColumn/alarm.png

 static/images/pColumn/position-bule.png

 static/images/pColumn/position.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/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;
        }