初版集成

zengh

2021-07-23 bf96d142d8383f179e2d16f6555e43c5a1cbd85f

初版集成

 api/mock/home.js

@@ -3,8 +3,8 @@
    return new Promise((resolute, reject) => {
        try {
            const detail = {
                position: "研发部",
                positionArr: ['研发部', '产品部']
                position: "保安",
                positionArr: ['保安', '民警']
            }
            resolute(detail);
        } catch (e) {
@@ -103,38 +103,28 @@
    return new Promise((resolute, reject) => {
        try {
            const list = [{
                    name: '人口登记',
                    name: '服务单位',
                    img: '/static/images/home/s1.png',
                    url: ''
                    url: '../company/company'
                },
                {
                    name: '工商年报',
                    name: '保安管理',
                    img: '/static/images/home/s2.png',
                    url: ''
                },
                {
                    name: '税务登记',
                    img: '/static/images/home/s3.png',
                    name: '工作汇报',
                    img: '/static/images/home/report001.png',
                    url: ''
                },
                {
                    name: '健康码',
                    name: '调度指令',
                    img: '/static/images/home/s4.png',
                    url: ''
                },
                {
                    name: '便民服务',
                    name: '现场检查',
                    img: '/static/images/home/s5.png',
                    url: ''
                },
                {
                    name: '通办大厅',
                    img: '/static/images/home/s6.png',
                    url: ''
                },
                {
                    name: '智能问答',
                    img: '/static/images/home/s7.png',
                    url: ''
                }
            ];

 pages.json

@@ -4,6 +4,13 @@
    },
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/login/login-account",
            "style": {
                "navigationBarTitleText": "登录",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },{
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "首页",
@@ -33,7 +40,22 @@
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }

        }, {
            "path": "pages/company/company",
            "style": {
                "navigationBarTitleText": "服务单位",
                "enablePullDownRefresh": false,
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
            "path": "pages/company/companyDetail",
            "style": {
                "navigationBarTitleText": "服务单位管理",
                "enablePullDownRefresh": false,
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
            }
        }, {
            "path": "pages/user/profile",
            "style": {
@@ -145,7 +167,7 @@
            "pagePath": "pages/demo/demo",
            "iconPath": "static/images/tabbar/demo.png",
            "selectedIconPath": "static/images/tabbar/demo_selected.png",
            "text": "示例"
            "text": "好友"
        }, {
            "pagePath": "pages/manage/manage",
            "iconPath": "static/images/tabbar/manage.png",

 pages/company/company.vue

New file
@@ -0,0 +1,89 @@
<template>
    <view class="container">
        <u-search shape="square" class="u-search" input-align="center" height="70"></u-search>
        <view class="inTmain" v-for="(item,index) in dataList">
            <u-card :title="item.enterprisename" @click="goDetail(item)">
                    <view class="" slot="body">
                        <view>
                            <view style="margin-bottom: 10px;" class="u-body-item-title u-line-2">公司地址：{{item.address}}</view>
                        </view>
                        <view>
                            <view class="u-body-item-title u-line-2">经营范围：{{item.business}}</view>
                        </view>
                    </view>
                    <view class="" slot="foot"></u-icon>法定代表人：{{item.representative}}</view>
            </u-card>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataList:[]
            };
        },
        onLoad() {
			
        },
        onReachBottom() {
			
        },
        mounted() {
            this.getCompany();
        },
        methods: {
            getCompany(){
                var that = this;
                uni.request({
                    url: this.$store.state.piAPI + "/information/page",
                    method:"get",
                    data:{
						
                    },
                    success:(res)=> {
                        var resdata = res.data.data.records;
                        that.dataList = resdata;
                    }
                });
            },
            goDetail(item){
                uni.navigateTo({
                    url: './companyDetail?detailData=' + JSON.stringify(item)
                });
            }
			
        }
    };
</script>

<style lang="scss">
    .u-card-wrap { 
            background-color: $u-bg-color;
            padding: 1px;
        }
		
    .u-body-item {
        font-size: 32rpx;
        color: #333;
        padding: 20rpx 10rpx;
    }
		
    .u-body-item image {
        width: 120rpx;
        flex: 0 0 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-left: 12rpx;
    }
	
    .u-search {
        padding: 20rpx 30rpx 0 30rpx;
    }
	
    .inTmain{
		
    }
	
</style>

 pages/company/companyDetail.vue

New file
@@ -0,0 +1,64 @@
<template>
    <view class="container">
        <view class="tab">
            <u-tabs :list="list" :is-scroll="false" :current="current" active-color="#14B9C8" inactive-color="#595959"
                height="100" @change="change"></u-tabs>
				
            <u-form label-style="width:200rpx" :model="detailData" ref="uForm" class="companyForm">
                    <u-form-item label="单位名称"><u-input v-model="detailData.enterprisename" /></u-form-item>
                    <u-form-item label="法定代表人"><u-input v-model="detailData.intro" /></u-form-item>
                    <u-form-item label="成立日期"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="注册资本"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="实缴资本"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="组织机构代码    "><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="工商注册号"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="统一社会信用代码"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="纳税人识别号"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="注册地址"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="经营范围"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="所属地区"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="登记机关"><u-input v-model="detailData.sex" /></u-form-item>
                    <u-form-item label="所属行业"><u-input v-model="detailData.sex" /></u-form-item>
            </u-form>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                        name: '注册信息'
                    },
                    {
                        name: '保安员管理'
                    }
                ],
                current: 0,
                detailData:{},
            };
        },
        onLoad(event) {
            var that = this;
            this.detailData = JSON.parse(decodeURIComponent(event.detailData));
        },
        onReachBottom() {
			
        },
        mounted() {
			
        },
        methods: {
			
			
        }
    };
</script>

<style lang="scss">
    .companyForm{
        padding: 30rpx;
    }
	
</style>

 pages/groupChat/chating.vue

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

<script>
    import datas from  '@/debugdate/debugdate.js'
    import filter from '@/config/filter.js'
    import submit from '@/components/submit/submit.vue'
    import WxStorage from "../../static/lib/wxStorage.js"
    const innerAudioContext = uni.createInnerAudioContext()
	
    export default {
        data() {
            return {
                msgs: [],
                imgMsg: [],
                oldTime: new Date(),
                scrollToView: '',
                inputh: '72',   
                recipientId: null,//接收者id
                recAvatar: null,//接收者头像
                recName: null,//接收者姓名
                senAvatar:null,//发送者头像
                senId: null,//接收者id
                getData: null,
                animationData: {},            // 动画
                nowpage: 0,                   // 页码
                loading: '',                  // 滚动事件
                isload: true,
                isanimation: true,
                begainloading: true
            };
        },
        components:{
            submit,
        },
        onLoad(option) {
            this.recipientId = option.chatID;
            this._getMsg(this.nowpage)
            // this.nextPage()
        },
        methods:{
            // 返回键
            backOne() {
                uni.navigateBack({
                    delta: 1
                })
            },
            // 滚动顶部加载上一页
            nextPage() {
                // if(this.nowpage > 0 && this.begainloading) {
                //     // 出现loading icon
                //     this.isload = false
                //     this.begainloading = false
					
                //     var animation = uni.createAnimation({
                //         duration: 1000,
                //         timingFunction: 'step-start'
                //     })
					
                //     this.animation = animation
					
					
                //     let i = 1
                //     this.loading = setInterval(function() {
                //         animation.rotate(i * 30).step()
                //         this.animationData = animation.export()
                //         i++
                //         // 滑动加载数据
                //         if(i > 40) {
                //             this._getMsg(this.nowpage)
                //         }
						
                //     }.bind(this), 100)
                // }
				
				
            },
            // 获取聊天数据
            _getMsg(page) {
                var that = this;
                that.senId = WxStorage.get("ids");
                uni.request({
                    url:"http://s16s652780.51mypc.cn/api/chat-records/getSingleMessagePage",
                    method:"get",
                    data:{
                        senderId: that.senId,
                        recipientId: that.recipientId
                        // recipientId: "1370571848600920066"
                    },
                    success:(res)=> {
                        // recAvatar: null,//接收者头像
                        // senAvatar:null,//发送者头像
                        var resdata = res.data.data.user;
                        for (var i = 0; i < resdata.length; i++) {
                            if(resdata[i].avatar == null || resdata[i].avatar == ""){
                                resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
                            }
							
                            if(resdata[i].id == that.senId){
                                that.senAvatar = resdata[i].avatar;
                            }else{
                                that.recAvatar = resdata[i].avatar;
                                that.recName = resdata[i].realName;
                            }
                        }
                        let msg = res.data.data.chatRecordsIPage
                        that.getData = msg;
                        // 页数加1
                        //let msg = datas.message()			
                        let maxpages = msg.length
                        if(msg.length > (page + 1) * 10) {
                            maxpages = (page + 1) * 10
                            that.nowpage++
                        }else {
                            // 数据获取完毕
                            that.nowpage = -1
                        }
                        // 数据分页加载 每十条为一页
                        for(var i = 0; i < msg.length; i++){
                            msg[i].imgUrl = '../../static/images/index/friend-list/'+msg[i].imgUrl
                            // 时间间隔
                            if(i < msg.length-1){
                                let t = filter.spaceTime(that.oldTime, msg[i].postTime)
                                if(t){
                                    that.oldTime = t
                                }
                                msg[i].postTime = t
                            }
                            // 补充图片地址
                            if(msg[i].types == 1){
                                msg[i].message = '../../static/images/index/friend-list/'+msg[i].message
                                that.imgMsg.unshift(msg[i].message)
                            }
                            that.msgs.unshift(msg[i])
                        }
						
                        that.$nextTick(() => {
                            that.isanimation = false
                            if(that.getData.length != 0){
                                that.scrollToView = 'msg' + that.getData[0].id
                            }
							
                        })
                        // 数据加载完毕关闭动画，停止数据加载
                        clearInterval(this.loading)
                        // 关闭loading icon
                        this.isload = true
                        // 开启加载
                        this.begainloading = true
						
                    }
                })
				
            },
            // 预览图片
            previewImage(e) {
				
                let index = 0
                for(var i =0; i < this.imgMsg.length; i++){
                    if(this.imgMsg[i] == e) {
                        index = i
                    }
                }
                uni.previewImage({
                    current: index,
                    urls: this.imgMsg,
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏'],
                        success: function(data) {
                            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                    }
                });
            },
            // 音频播放
            playVoice(e) {
                console.log('ok')
                innerAudioContext.src = e
                innerAudioContext.play()
            },
            // 接收输入内容
            inputs(e) {
                var that = this;
                this.isanimation = true
                let len = this.msgs.length -1				
                let nowTime = new Date();	
                var sentTime = that.dateFormat("YYYY-mm-dd HH:MM:SS", nowTime);
                let t = filter.spaceTime(this.oldTime, nowTime)
                if(t){
                    this.oldTime = t
                }
                nowTime = t
                let sendMsg = {
                    senderId: that.senId,
                    recipientId: that.recipientId,
                    postMessage: e.message,
                    messageType: 0,
                    status: 0,
                    postTime: nowTime,
                }
				
                uni.request({
                    url:"http://s16s652780.51mypc.cn/api/chat-records/insertSingleChat",
                    method:"post",
                    data:{
                        senderId: that.senId,
                        recipientId: that.recipientId,
                        postMessage: e.message,
                        messageType: 0,
                        status: 0,
                        postTime: sentTime,
                    },
                    success:(res)=> {
						
                    }
                });
				
                this.msgs.push(sendMsg)
                this.$nextTick(() => {
                    this.scrollToView = 'msg' + len
                })
                if(e.types == 1) {
                    this.imgMsg.push(e.message)
                }
            },
            // 输入框高度
            heights(e) {
                this.inputh = e
                this.goBottom()
                // console.log('高度' + e)
            },
            // 滚动到底部
            goBottom() {
                this.isanimation = true
                this.scrollToView = ''
                this.$nextTick(() => {
                    let len = this.getData.length -1
                    if(this.getData.length != 0){
                        this.scrollToView = 'msg' + this.getData[0].id
                    }
					
                })
            },
            // 地图定位
            covers(e) {
                let map = [
                    {
                        latitude: e.latitude,
                        longitude: e.longitude,
                        iconPath: '../../static/images/chatroom/placeholder-r.png'
                    }
                ]
                return (map)
            },
            // 导航
            openLocation(e) {
                uni.openLocation({
                    latitude: e.latitude,
                    longitude: e.longitude,
                    name: e.name,
                    address: e.address,
                    success: () => {
                        console.log('success')
                    }
                })
            },
            //时间格式化
            dateFormat(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    };
                };
                return fmt;
            }
        },
        filters:{
            Msgdate(time) {
             return    filter.Msgdate(time)
            }
        }
    }
	
</script>

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

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

 pages/groupChat/chatingQZ.vue

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

<script>
    import datas from  '@/debugdate/debugdate.js'
    import filter from '@/config/filter.js'
    import submit from '@/components/submit/submit.vue'
    import WxStorage from "../../static/lib/wxStorage.js"
    const innerAudioContext = uni.createInnerAudioContext()
	
    export default {
        data() {
            return {
                msgs: [],
                imgMsg: [],
                oldTime: new Date(),
                scrollToView: '',
                inputh: '72',   
                recipientId: null,//接收者id
                recAvatar: null,//接收者头像
                recName: null,//接收者姓名
                senAvatar:null,//发送者头像
                senId: null,//接收者id
                getData: null,
                animationData: {},            // 动画
                nowpage: 0,                   // 页码
                loading: '',                  // 滚动事件
                isload: true,
                isanimation: true,
                begainloading: true
            };
        },
        components:{
            submit,
        },
        onLoad(option) {
            this.recipientId = option.chatID;
            this._getMsg(this.nowpage)
            // this.nextPage()
        },
        methods:{
            // 返回键
            backOne() {
                uni.navigateBack({
                    delta: 1
                })
            },
            // 滚动顶部加载上一页
            nextPage() {
                // if(this.nowpage > 0 && this.begainloading) {
                //     // 出现loading icon
                //     this.isload = false
                //     this.begainloading = false
					
                //     var animation = uni.createAnimation({
                //         duration: 1000,
                //         timingFunction: 'step-start'
                //     })
					
                //     this.animation = animation
					
					
                //     let i = 1
                //     this.loading = setInterval(function() {
                //         animation.rotate(i * 30).step()
                //         this.animationData = animation.export()
                //         i++
                //         // 滑动加载数据
                //         if(i > 40) {
                //             this._getMsg(this.nowpage)
                //         }
						
                //     }.bind(this), 100)
                // }
				
				
            },
            // 获取聊天数据
            _getMsg(page) {
				
                var that = this;
                that.senId = WxStorage.get("ids");
                uni.request({
                    url:"http://s16s652780.51mypc.cn/api/chatgroupc/selectList",
                    method:"post",
                    header: {
                        'content-type': 'application/x-www-form-urlencoded', 
                    },
                    data:{
                        gid: that.recipientId
                        //gid: "1"
                    },
                    success:(res)=> {
                        // recAvatar: null,//接收者头像
                        // senAvatar:null,//发送者头像
                        var resdata = res.data.data;
                        for (var i = 0; i < resdata.length; i++) {
                            if(resdata[i].avatar == null || resdata[i].avatar == ""){
                                resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
                            }else{
                                resdata[i].avatar = resdata[i].avatar;
                            }
                            if(resdata[i].sender_id == that.senId){
                                that.senAvatar = resdata[i].avatar;
                            }
							
                        }
                        let msg = res.data.data;
                        that.getData = msg;
                        // 页数加1
                        //let msg = datas.message()			
                        let maxpages = msg.length
                        if(msg.length > (page + 1) * 10) {
                            maxpages = (page + 1) * 10
                            that.nowpage++
                        }else {
                            // 数据获取完毕
                            that.nowpage = -1
                        }
                        // 数据分页加载 每十条为一页
                        for(var i = 0; i < msg.length; i++){
                            msg[i].imgUrl = '../../static/images/index/friend-list/'+msg[i].imgUrl
                            // 时间间隔
                            if(i < msg.length-1){
                                let t = filter.spaceTime(that.oldTime, msg[i].post_time)
                                if(t){
                                    that.oldTime = t
                                }
                                msg[i].post_time = t
                            }
                            // 补充图片地址
                            if(msg[i].types == 1){
                                msg[i].message = '../../static/images/index/friend-list/'+msg[i].message
                                that.imgMsg.unshift(msg[i].message)
                            }
                            that.msgs.unshift(msg[i])
                        }
						
                        that.$nextTick(() => {
                            that.isanimation = false
                            that.scrollToView = 'msg' + that.getData[0].id
                        })
                        // 数据加载完毕关闭动画，停止数据加载
                        clearInterval(this.loading)
                        // 关闭loading icon
                        this.isload = true
                        // 开启加载
                        this.begainloading = true
						
                    }
                })
				
            },
            // 预览图片
            previewImage(e) {
				
                let index = 0
                for(var i =0; i < this.imgMsg.length; i++){
                    if(this.imgMsg[i] == e) {
                        index = i
                    }
                }
                uni.previewImage({
                    current: index,
                    urls: this.imgMsg,
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏'],
                        success: function(data) {
                            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                    }
                });
            },
            // 音频播放
            playVoice(e) {
                console.log('ok')
                innerAudioContext.src = e
                innerAudioContext.play()
            },
            // 接收输入内容
            inputs(e) {
                var that = this;
                this.isanimation = true
                let len = this.msgs.length -1				
                let nowTime = new Date();	
                var sentTime = that.dateFormat("YYYY-mm-dd HH:MM:SS", nowTime);
                let t = filter.spaceTime(this.oldTime, nowTime)
                if(t){
                    this.oldTime = t
                }
                nowTime = t
                let sendMsg = {
                    sender_id: that.senId,
                    post_message: e.message,
                    message_type: 0,
                    status: 0,
                    post_time: nowTime,
                    avatar:that.senAvatar
                }
				
                uni.request({
                    url:"http://s16s652780.51mypc.cn/api/chatgroupc/submit",
                    method:"post",
                    data:{
                        senderId: that.senId,
                        postMessage: e.message,
                        messageType: 0,
                        status: 0,
                        postTime: sentTime,
                        gid:that.recipientId
                    },
                    success:(res)=> {
                    }
                });
				
                this.msgs.push(sendMsg)
                this.$nextTick(() => {
                    this.scrollToView = 'msg' + len
                })
                if(e.types == 1) {
                    this.imgMsg.push(e.message)
                }
            },
            // 输入框高度
            heights(e) {
                this.inputh = e
                this.goBottom()
                // console.log('高度' + e)
            },
            // 滚动到底部
            goBottom() {
                this.isanimation = true
                this.scrollToView = ''
                this.$nextTick(() => {
                    let len = this.getData.length -1
                    this.scrollToView = 'msg' + this.getData[0].id
                })
            },
            // 地图定位
            covers(e) {
                let map = [
                    {
                        latitude: e.latitude,
                        longitude: e.longitude,
                        iconPath: '../../static/images/chatroom/placeholder-r.png'
                    }
                ]
                return (map)
            },
            // 导航
            openLocation(e) {
                uni.openLocation({
                    latitude: e.latitude,
                    longitude: e.longitude,
                    name: e.name,
                    address: e.address,
                    success: () => {
                        console.log('success')
                    }
                })
            },
            //时间格式化
            dateFormat(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    };
                };
                return fmt;
            }
        },
        filters:{
            Msgdate(time) {
             return    filter.Msgdate(time)
            }
        }
    }
	
</script>

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

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

 pages/groupChat/chatingcopy.vue

New file
@@ -0,0 +1,590 @@
<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'
    import WxStorage from "../../static/lib/wxStorage.js"
    const innerAudioContext = uni.createInnerAudioContext()
	
    export default {
        data() {
            return {
                msgs: [],
                imgMsg: [],
                oldTime: new Date(),
                scrollToView: '',
                inputh: '72',   
                recipientId: null,//接收者id
                recAvatar: null,//接收者头像
                senAvatar:null,//发送者头像
                animationData: {},            // 动画
                nowpage: 0,                   // 页码
                loading: '',                  // 滚动事件
                isload: true,
                isanimation: true,
                begainloading: true
            };
        },
        components:{
            submit,
        },
        onLoad(option) {
            this.recipientId = option.chatID;
            this._getMsg(this.nowpage)
            // this.nextPage()
        },
        methods:{
            // 返回键
            backOne() {
                uni.navigateBack({
                    delta: 1
                })
            },
            // 滚动顶部加载上一页
            nextPage() {
                if(this.nowpage > 0 && this.begainloading) {
                    // 出现loading icon
                    this.isload = false
                    this.begainloading = false
					
                    var animation = uni.createAnimation({
                        duration: 1000,
                        timingFunction: 'step-start'
                    })
					
                    this.animation = animation
					
					
                    let i = 1
                    this.loading = setInterval(function() {
                        animation.rotate(i * 30).step()
                        this.animationData = animation.export()
                        i++
                        // 滑动加载数据
                        if(i > 40) {
                            this._getMsg(this.nowpage)
                        }
						
                    }.bind(this), 100)
                }
				
				
            },
            // 获取聊天数据
            _getMsg(page) {
				
                var that = this;
                uni.request({
                    url:"http://s16s652780.51mypc.cn/api/chat-records/getSingleMessagePage",
                    method:"get",
                    data:{
                        senderId: WxStorage.get("ids"),
                        recipientId: that.recipientId
                    },
                    success:(res)=> {
                        // recAvatar: null,//接收者头像
                        // senAvatar:null,//发送者头像
                        var resdata = res.data.data.user;
                        for (var i = 0; i < resdata.length; i++) {
                            if(resdata[i].avatar == null || resdata[i].avatar == ""){
                                resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
                            }
							
                            if(resdata[i].senderId == WxStorage.get("ids")){
                                that.senAvatar = resdata[i].avatar;
                            }else{
                                that.recAvatar = resdata[i].avatar;
                            }
                        }
                    }
                })
                //let msg = res.data.data.chatRecordsIPage.records
                // 页数加1
                let msg = datas.message()			
                let maxpages = msg.length
                debugger
                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,312 @@
<!-- 工作台 -->
<template>
    <view class="work">
        <!-- 自定义顶部导航栏 -->
        <!-- <navBarTop :title="'聊天室'"></navBarTop> -->
        <view class="tab">
            <u-tabs :list="list" :is-scroll="false" :current="current" active-color="#14B9C8" inactive-color="#595959"
                height="100" @change="change"></u-tabs>
        </view>
        <swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">
            <swiper-item class="swiper-item" v-for="(item, indexs) in list" :key="indexs">
                <view v-if="indexs == 0" 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="indexs"
                                    @refreshTask="refreshTask"></contacts>
                            </view>
                        </div>
                    </div>
                </view>
                <view v-if="indexs == 1" class="main">
                    <div>
                        <div class="m-main">
                            <!-- <view class="inTitle">{{Task}}</view> -->
                            <view class="inTmain">
                                <contacts v-for="(item,index) in dataListQZ" :key="index" :Pdata="item" :fromW="indexs"
                                    @refreshTask="refreshTask"></contacts>
                            </view>
                        </div>
                    </div>
                </view>
                <view v-if="indexs == 2" class="main">
                    <div>
                        <div class="m-main">
                            <!-- <view class="inTitle">{{Task}}</view> -->
                            <view class="inTmain">
                                <contacts v-for="(item,index) in dataListTXL" :key="index" :Pdata="item" :fromW="indexs"
                                    @refreshTask="refreshTask"></contacts>
                            </view>
                        </div>
                    </div>
                </view>
            </swiper-item>
        </swiper>
		
    </view>
</template>

<script>
    import WxStorage from "../../static/lib/wxStorage.js"
    import axios from '../../static/lib/axios.js'
    import contacts from '../../components/contacts/contacts.vue'
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
    export default{
        components: {
            navBarTop,contacts
        },
        data() {
            return {
                list: [{
                        name: '正在聊天'
                    },
                    {
                        name: '群组'
                    },
                    {
                        name: '通讯录'
                    }
                ],
                swiperHeight: 0,
                zhanwei: '', //因为小程序中底部和顶部栏占位置，uniapp中不占位置
                current: 0,
                show: true,
                dataListP: [],
                dataListQZ: [],
                dataListTXL:[],
                fromW: '',
                onTop: false, //是否吸顶
                rect: '', //页面滚动距离
                menutop: '', //组件距离顶部的距离
                titleTop: '', //
                hello: false,
                userName: '',
            }
        },
        activated(){
              this.beginObj();
              this.getdataList(0);
            },
            onReady() {
                let that = this;
                uni.getSystemInfo({
                    success(e) {
                        console.log(e);
                        let {
                            windowWidth,
                            windowHeight,
                            safeArea
                        } = e;
                        const query = uni.createSelectorQuery().in(that);
                        query
                            .select('#swiperBox')
                            .boundingClientRect(data => {
                                that.swiperHeight = safeArea.bottom - data.top;
                            })
                            .exec();
                    }
                });
            },
        methods: {
            change(index) {
                this.current = index;
            },
            tabsChange(e) {
                this.current = e.detail.current;
                this.getdataList();
            },
            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)
            },
            getdataList() {
                var that = this;
                if(this.current == 0){
                    uni.request({
                        url:"http://s16s652780.51mypc.cn/api/chat-records/getChatListPage",
                        method:"get",
                        data:{
                            senderId: WxStorage.get("ids")
                        },
                        success:(res)=> {
                            var resdata = res.data.data;
                            for (var i = 0; i < resdata.length; i++) {
                                if(resdata[i].avatar == null || resdata[i].avatar == ""){
                                    resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
                                }
                            }
                            that.dataListP = resdata;
                            that.swiperHeight = resdata.length * 85;
                        }
                    });
                }else if(this.current == 1){
                    uni.request({
                        url:"http://s16s652780.51mypc.cn/api/chatgroup/selectList",
                        method:"POST",
                        data:{
                            senderId: WxStorage.get("ids")
                        },
                        success:(res)=> {
                            var resdata = res.data.data;	
                            for (var i = 0; i < resdata.length; i++) {
                                if(resdata[i].avatar == null || resdata[i].avatar == ""){
                                    resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/qunz.png";
                                }
                            }
                            that.dataListQZ = resdata;
                            that.swiperHeight = resdata.length * 85;
                        }
                    })
                }else if(this.current == 2){
                    uni.request({
                        url:"http://s16s652780.51mypc.cn/api//blade-user/pages?current=1&size=9999",
                        method:"get",
                        data:{
                            senderId: WxStorage.get("ids")
                        },
                        success:(res)=> {
                            var resdata = res.data.data.records;
                            for (var i = 0; i < resdata.length; i++) {
					
                                if(resdata[i].avatar == null || resdata[i].avatar == ""){
                                    resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
                                }
                            }
                            that.dataListTXL = resdata;
                            that.swiperHeight = resdata.length * 85;
                        }
                    })
                }
            },
            refreshTask() {
                this.getdataList(1);
            },
			
        },
        mounted() {
            this.beginObj();
            this.getdataList(0);
			
        },
        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;
            if(options.txlType == 2){
                this.current = 2;
            }
			
        }
    }
</script>

<style lang="scss">
    .work {
        width: 100%;
        height: 100%;
        padding: 0rem 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 {
            margin-top: 0.625rem;
			
            .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>

 pages/home/home.vue

@@ -37,7 +37,7 @@
        <!-- 头部 end -->

        <!-- 头部按钮 start -->
        <view class="nav">
        <!-- <view class="nav">
            <u-grid :col="5" :border="false">
                <u-grid-item bg-color="transparent" v-for="(item, index) in navButton" :key="index">
                    <navigator :url="item.url" hover-class="none" class="nav-item">
@@ -46,11 +46,11 @@
                    </navigator>
                </u-grid-item>
            </u-grid>
        </view>
        </view> -->
        <!-- 头部按钮 end -->

        <!-- 公告 start -->
        <view class="notice-box">
        <!-- <view class="notice-box">
            <image src="/static/images/home/notice.png" class="img" mode="widthFix"></image>
            <view class="notice-info">
                <navigator hover-class="none" class="notice-cell" v-for="(item, index) in noticeList" :key="index">
@@ -59,13 +59,13 @@
                    <u-icon name="arrow-right" size="12" color="#C9C9C9"></u-icon>
                </navigator>
            </view>
        </view>
        </view> -->
        <!-- 公告 end -->

        <!-- 服务按钮 start -->
        <view class="service-box">
            <u-grid :col="4" :border="false">
                <u-grid-item bg-color="transparent" v-for="(item, index) in serviceButton" :key="index">
                <u-grid-item bg-color="transparent" v-for="(item, index) in serviceButton" :key="index" @click="goBusinessPage(item.url,index)">
                    <navigator url="" hover-class="none" class="service-item">
                        <image :src="item.img" mode="widthFix" class="img"></image>
                        <view class="name">{{ item.name }}</view>
@@ -84,7 +84,7 @@
        <!-- 新闻模块 start -->
        <view class="news">
            <navigator hover-class="none" url="/pages/news/list" class="cell">
                <view class="ctitle">新闻</view>
                <view class="ctitle">通知公告</view>
                <view class="more">
                    更多
                    <u-icon name="arrow-right" color="#A6ABB5" size="16"></u-icon>
@@ -96,7 +96,7 @@
                    v-for="(item, index) in newsList" :key="index">
                    <view class="left">
                        <view class="info">
                            [中国空间站] 神舟十二号载人发射任务取得圆满成功
                            [火灾防范] 严禁在建筑内的共用走道、楼梯间、安全出口处等公共区域停放电动车或者为电动车充电。
                        </view>
                        <view class="date">
                            <image src="/static/images/home/date.png" class="icon" mode=""></image>
@@ -178,6 +178,12 @@
                console.log(this.pickerArr[e.detail.value].name);
                this.position = this.pickerArr[e.detail.value].name;
            },
            //页面跳转
            goBusinessPage(url,index){
                uni.navigateTo({
                    url:url
                })
            },
            handleFocus() {
                this.focus = !this.focus;
            },

 pages/login/login-account.vue

@@ -138,8 +138,9 @@
                this.judgeMsg();
            },
            OURpass() {
                debugger
                if (this.OURpass == true) {
                    this.passwords = '******';
                    // this.passwords = '******';
                    uni.hideNavigationBarLoading();
                    uni.reLaunch({
                        url: '../home/home'

 pages/user/center.vue

@@ -3,7 +3,8 @@
        <view class="head">
            <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title="个人中心"
                :background="{ background: 'transprent' }" title-color="#FFFFFF">
                <view @click="$u.func.route('/pages/system/setting')" slot="right">
                <!-- <view @click="$u.func.route('/pages/system/setting')" slot="right"> -->
                <view slot="right">
                    <image src="/static/images/user/setting.png" class="set-icon" mode="widthFix"></image>
                </view>
            </u-navbar>
@@ -12,11 +13,12 @@
            <!-- 用户信息 -->
            <view class="user-box">
                <view class="left">
                    <image :src="userInfo.avatar" class="avatar" mode=""></image>
                    <view class="user-name">{{ userInfo.nick_name }}</view>
                    <view class="tag">{{ userInfo.tenant_id }}</view>
                    <image :src="useimg" class="avatar" mode=""></image>
                    <view class="user-name">{{ name }}</view>
                    <view class="tag">{{ tenantName }}</view>
                </view>
                <view @click="$u.func.route('/pages/user/profile')" class="edit-btn">编辑资料</view>
                <!-- <view @click="$u.func.route('/pages/user/profile')" class="edit-btn">编辑资料</view> -->
                <view class="edit-btn">编辑资料</view>
            </view>
            <!-- 操作按钮 -->
            <view class="nav">
@@ -39,7 +41,7 @@
            </view>
        </view>
        <!-- 功能列表 -->
        <view class="cell-box">
        <!-- <view class="cell-box">
            <u-cell-group :border="false">
                <u-cell-item title="我的评价">
                    <image slot="icon" src="/static/images/user/c1.png" class="icon" mode=""></image>
@@ -51,16 +53,16 @@
                    <image slot="icon" src="/static/images/user/c3.png" class="icon" mode=""></image>
                </u-cell-item>
            </u-cell-group>
        </view>
        </view> -->
        <view class="cell-box">
            <u-cell-group :border="false">
                <u-cell-item title="推荐">
                <!-- <u-cell-item title="推荐">
                    <image slot="icon" src="/static/images/user/c4.png" class="icon" mode=""></image>
                </u-cell-item>
                </u-cell-item> -->
                <u-cell-item title="评分">
                    <image slot="icon" src="/static/images/user/c5.png" class="icon" mode=""></image>
                </u-cell-item>
                <u-cell-item title="反馈">
                <u-cell-item title="隐私">
                    <image slot="icon" src="/static/images/user/c6.png" class="icon" mode=""></image>
                </u-cell-item>
                <u-cell-item title="关于" :border-bottom="false">
@@ -68,10 +70,11 @@
                </u-cell-item>
            </u-cell-group>
        </view>
        <u-action-sheet :list="list" @click="outInClick" v-model="show"></u-action-sheet>
        <view class="cell-box">
            <u-cell-group :border="false">
                <u-cell-item title="设置" :border-bottom="false" @click="$u.func.route('/pages/system/setting')">
                    <image slot="icon" src="/static/images/user/c8.png" class="icon" mode=""></image>
                <u-cell-item title="登出" :border-bottom="false" @click="show = true">
                    <image slot="icon" src="/static/images/user/dengchu.png" class="icon" mode=""></image>
                </u-cell-item>
            </u-cell-group>
        </view>
@@ -82,12 +85,49 @@
    export default {
        data() {
            return {
				
                list: [ {
                    text: '登出'
                }],
                show: false,
                name:'',
                id:'',
                tenantName:''
            };
        },
        methods: {

        }
            outInClick(index){
                if(index == 0){
                    this.$store.commit('loginReset'); //重置登录
                    uni.redirectTo({ //关闭并打开
                        url: '../login/login-account',
                        animationType: 'slide-in-top',
                        animationDuration: 20000
                    });
                }
            },
            //登录成功后，获取个人信息
            getOneselfInFo(){
                var that = this;
                //保安信息查询
                uni.request({
                    url:'http://s16s652780.51mypc.cn/api/blade-user/details?id='+this.$store.state.puserID,
                    method:'POST',
                    success(resdata) {
                        that.name = resdata.data.data.realName;
                        that.id = resdata.data.data.id;
                        that.tenantName = resdata.data.data.tenantName;
                    }
                })
            },
        },onLoad() {
            if(this.$store.state.puserID){
                //获取个人信息
                this.getOneselfInFo();
            }
            if(this.$store.state.avatar!=null && this.$store.state.avatar!=''){
                this.useimg = this.$store.state.avatar;
            }
        },
    };
</script>


 static/images/home/handle.png

 static/images/home/handle001.png

 static/images/home/handle002.png

 static/images/home/homeTop1.png

 static/images/home/homeTop2.png

 static/images/home/homeTop3.png

 static/images/home/look.png

 static/images/home/more.png

 static/images/home/partrol.png

 static/images/home/report.png

 static/images/home/report001.png

 static/images/home/report002.png

 static/images/home/say.png

 static/images/home/search003.png

 static/images/home/search004.png

 static/images/home/search02.png

 static/images/home/searchs.png

 static/images/user/dengchu.png

 store/actions.js

@@ -16,7 +16,7 @@
                },
            ],
            pasw = md5(data.pass),
            url = 'http://s16s652780.51mypc.cn/api/blade-auth/oauth/token?tenantId=963841&username=' + data.name +
            url = 'http://192.168.0.105:80/api/blade-auth/oauth/token?tenantId=963841&username=' + data.name +
            ' &password=' + pasw + '&grant_type=password&scope=all&type=account';
        // url ='http://192.168.0.109:82/blade-auth/oauth/token';
        // url ='http://192.168.0.109:82/blade-auth/oauth/token?tenantId=000000&username=admin&password=93369e86dc5fa854a0eaf75558c4039d&grant_type=password';

 store/index.js

@@ -48,7 +48,7 @@
            useName: '过客 ',
        },
        logPath: '',
        piAPI: 'http://s16s652780.51mypc.cn/api/',
        piAPI: 'http://192.168.0.104',
        // piAPI: 'http://localhost:82/',
        puserName: '',
        puserID: '',