智慧保安app相关调整

shuishen

2021-08-26 47d4935166fdd8cac158c4b054ecd312a63b2270

智慧保安app相关调整

 .project

New file
@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
    <name>exam-app</name>
    <comment></comment>
    <projects>
    </projects>
    <buildSpec>
        <buildCommand>
            <name>com.aptana.ide.core.unifiedBuilder</name>
            <arguments>
            </arguments>
        </buildCommand>
    </buildSpec>
    <natures>
        <nature>com.aptana.projects.webnature</nature>
    </natures>
</projectDescription>

 api/mock/home.js

@@ -103,7 +103,7 @@
    return new Promise((resolute, reject) => {
        try {
            const list = [{
                    name: '服务单位',
                    name: '保安单位',
                    img: '/static/images/home/s1.png',
                    url: '../company/company'
                },

 common/css/mycss.scss

New file
@@ -0,0 +1,78 @@
//页面撑开头部样式
.content {
    padding-top: var(--status-bar-height);
}
.tb_solt {
    display: inline-block;
    font-weight: normal;
    height: 88rpx;
    line-height: 88rpx;
    box-sizing: border-box;
    padding-left: 30rpx;
}

.main {
    padding-top: 104rpx;
    padding-bottom: $uni-spacing-col-base;
    //border: 1px solid red;
}
.top-bar{
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    background: rgba(255, 255, 255, 1);
}
.tb_solt {
    height: 88rpx;
    line-height: 88rpx;
    padding-left: 26rpx;
}
//底部样式
.bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 90rpx;
    padding-top: 10rpx;
    padding-bottom: var(--status-bar-height);
    //background-color: rgba(255,255,255,0.96);
}

//btn1样式
.btn1 {
    text-align: center;
    line-height: 80rpx;
    font-size: $uni-font-size-lg;
    color: $uni-text-color;
    height: 80rpx;
    border-radius: $uni-border-radius-sm;
}
.comtarbar{
    position: fixed;
    top: var(--status-bar-height);
    right: 0;
    left: 0;
    height: 88rpx;
    z-index: 1001;
    .title {
        line-height: 88rpx;
        padding: 0rpx 20rpx;
        view{
            display: inline-block;
        }
    }
    .info {
        width: 60rpx;
        height: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
            width: 100%;
            height: auto;
        }
    }
}

 components/contacts/contacts.vue

@@ -84,7 +84,7 @@
            QZchating() {
                //发起聊天
                var datas = this.Pdata;
                //alert(datas.name)
                console.log(datas)
                uni.navigateTo({
                    url: '/pages/groupChat/chatingQZ?chatID=' + datas.id.toString()+ '&data=' + JSON.stringify(
                        datas)

 manifest.json

@@ -23,7 +23,8 @@
        },
        /* 模块配置 */
        "modules" : {
            "Geolocation" : {}
            "Geolocation" : {},
            "Maps" : {}
        },
        /* 应用发布信息 */
        "distribute" : {

 mapWz/js/vueMain.js

@@ -1,3 +1,9 @@
/*
 * @Author: Morpheus 
 * @Date: 2021-08-26 16:22:11 
 * @Last Modified by:   Morpheus 
 * @Last Modified time: 2021-08-26 16:22:11 
 */
var me = new Vue({
    el: '#mapVue',
    data: {
@@ -34,13 +40,14 @@
            //url解码

            var jurisdictionId = this.GetQueryString('id')

            this.userId = this.GetQueryString('userid')

            axios.get(this.$store.state.piAPI + '/blade-user/page?size=99999&jurisdiction=' + jurisdictionId).then((res) => {
            axios.get('http://223.82.109.183:2080/api/blade-user/pages?dispatch=0&jurisdiction=' + jurisdictionId + '&current=1&size=999999').then((res) => {

                if (res.data.data.records.length > 0) {
                    res.data.data.records.forEach(item => {
                        if (item.longitude && item.latitude) {
                        if (item.longitude && item.latitude && item.roleId != this.userId) {
                            resultData.push(item)
                        }
                    })
@@ -329,6 +336,7 @@
            };

            function showPosition(position) {

                var adCode = position.adCode; //邮政编码
                var nation = position.nation; //中国
                var city = position.city; //城市
@@ -365,6 +373,7 @@
                //TODO 如果出错了调用此方法 
            };


            geolocation.getLocation(showPosition, showErr, options);

        },
@@ -383,6 +392,7 @@
            that.getLocationData(that.geolocation);

        }, 30000);

    },
    wacth: {}
})

 mapWz/xcxmap.html

@@ -23,7 +23,8 @@
    <!-- <script src="../map/lib/layui/layui.js" charset="utf-8"></script> -->

    <!-- 百度地图api -->
    <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
    <script type="text/javascript"
        src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>

    <!-- axios支持 -->
    <script src="../map/lib/axios.js"></script>
@@ -51,14 +52,14 @@
    <script src="./js/move.js"></script>
    <!-- sha1加密 -->
    <!-- <script src="./js/sha1.js"></script> -->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>

    <style>
        #seedata {
            position: relative;

        }
         

        .clear {
            position: absolute;
            right: 6px;
@@ -96,7 +97,7 @@
        }
    </style>

    

</head>

<body>
@@ -105,19 +106,22 @@
            <img style="width: 80%;height: 80%;" src="./img/dingwei.png" alt="">
        </div>
        <div id="map">
           

        </div>
        <div id="seedata" style='display: none'>
            <div class="clear">
                <img style="width: 100%;height: 100%;" src="./img/gaunbi.png" alt="">
            </div>
            <div class="content">
                

            </div>
        </div>
    </div>
    <!-- vue渲染 -->
    <script src="./js/vueMain.js"></script>
    <!-- 引入高德地图所需秘钥 -->
    <script type="text/javascript"
        src='https://webapi.amap.com/maps?v=1.4.11&key=7ab53b28352e55dc5754699add0ad862&plugin=AMap.PlaceSearch'></script>
</body>

</html>

 pages.json

@@ -42,7 +42,7 @@
        {
            "path": "pages/manage/manage",
            "style": {
                "navigationBarTitleText": "管理",
                "navigationBarTitleText": "工作台",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
@@ -67,7 +67,7 @@
            "path": "pages/groupChat/groupChat",
            "style": {
                "navigationBarTitleText": "聊天室",
                "enablePullDownRefresh": true,
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },
@@ -119,7 +119,7 @@
        {
            "path": "pages/company/company",
            "style": {
                "navigationBarTitleText": "服务单位",
                "navigationBarTitleText": "保安单位",
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white",
                "enablePullDownRefresh": true
@@ -128,7 +128,7 @@
        {
            "path": "pages/company/companyDetail",
            "style": {
                "navigationBarTitleText": "服务单位管理",
                "navigationBarTitleText": "保安单位管理",
                "enablePullDownRefresh": false,
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white"
@@ -398,6 +398,15 @@
                "navigationBarTextStyle": "white"
            }

        }, {
            "path": "pages/groupChat/chatMessage",
            "style": {
                "navigationBarTitleText": "聊天信息",
                "navigationBarBackgroundColor": "#0BB9C8",
                "navigationBarTextStyle": "white",
                "navigationStyle": "custom",
                "enablePullDownRefresh": false
            }
        }
    ],
    "globalStyle": {
@@ -423,15 +432,15 @@
            },
            {
                "pagePath": "pages/groupChat/groupChat",
                "iconPath": "static/images/tabbar/demo.png",
                "selectedIconPath": "static/images/tabbar/demo_selected.png",
                "iconPath": "static/images/tabbar/call.png",
                "selectedIconPath": "static/images/tabbar/select-call.png",
                "text": "聊天"
            },
            {
                "pagePath": "pages/manage/manage",
                "iconPath": "static/images/tabbar/manage.png",
                "selectedIconPath": "static/images/tabbar/manage_selected.png",
                "text": "工具"
                "text": "工作台",
                "iconPath": "static/images/tabbar/job.png",
                "selectedIconPath": "static/images/tabbar/select-job.png"
            },
            {
                "pagePath": "pages/user/center",
@@ -440,5 +449,13 @@
                "text": "我的"
            }
        ]
    },
    "condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式(list 的索引项)
        "list": [{
            "name": "", //模式名称
            "path": "", //启动页面，必选
            "query": "" //启动参数，在页面的onLoad函数里面得到
        }]
    }
}

 pages/company/company.vue

@@ -42,7 +42,7 @@
                pagelist: 0,
                pages: 0,
                flag: true,
				

                pullDown: false
            };
        },
@@ -75,8 +75,10 @@
            this.newsList = [];
            this.status = 'loading';
            this.keyValue = '';
            setTimeout(() => {this.getCompany();}, 1000)
			
            setTimeout(() => {
                this.getCompany();
            }, 1000)

        },

        mounted() {
@@ -99,13 +101,15 @@
                    method: "get",
                    data: {
                        current: that.pagelist,
                        jurisdiction: this.$store.state
                            .UserData.jurisdiction,
                        size: 10
                    },
                    success: (res) => {
                        that.pages = res.data.data.pages;

                        var resdata = res.data.data.records;
						

                        if (this.pullDown == true) {
                            this.pullDown = false;
                            uni.stopPullDownRefresh();
@@ -127,7 +131,7 @@
                            that.status = 'nomore';
                            return
                        }
						

                    }
                });
            },
@@ -150,6 +154,8 @@
                        data: {
                            current: 1,
                            size: 999999,
                            jurisdiction: this.$store.state
                                .UserData.jurisdiction,
                            enterprisename: str
                        },
                        success: (res) => {

 pages/company/companyDetail111.vue

File was deleted

 pages/groupChat/addFriend.vue

@@ -1,19 +1,11 @@
<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">
                <text class="title">添加好友</text>
            </view>
            <view class="top-bar-right">
                <view class="pice"></view>
            </view>
        </view>
    <view class="container">
		
        <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="true" :is-back="true"
            title="添加好友" back-icon-color="#fff" :background="{ background: '#0BB9C8' }" title-color="#fff">
		
        </u-navbar>
		
        <view class="main">
            <u-search style="z-index: 9999;" :show-action="true" @custom="search" @search="search" :clearabled="true" placeholder="请输入姓名或手机号" action-text="搜索" :animation="true"></u-search>
            <!-- <image class="friendEmpty" src="../../static/wjg.png"></image> -->
@@ -113,7 +105,7 @@
                        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";
                                resdata[i].avatar = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c";
                            }
                        }
                        that.requestList = resdata;
@@ -138,12 +130,6 @@
<style lang="scss">
    @import '../../common/style/common.scss';

    .top-bar {
        background-color: #0BB9C8;
        // background-color: #42B983;
        box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1);
    }

    .friendEmpty {
        width: 200upx;
        height: 200upx;
@@ -156,7 +142,7 @@
    }

    .main {
        padding: 108rpx 32upx;
        padding: 16rpx 32upx;
        background: rgba(255, 255, 255, .6);

        .requestr {

 pages/groupChat/chatMessage.vue

New file
@@ -0,0 +1,334 @@
<template>
    <view class="container">
        <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="true" :is-back="true"
             :title="recName" back-icon-color="#fff"
            :background="{ background: '#0BB9C8' }" title-color="#fff">
        </u-navbar>
		
        <view class="groupmain">
            <scroll-view scroll-y="true">
				
                <view class="memberbox">
                    <view class="member-item" v-for="item in getGroupInfo.user_list" :key="item.user._id" @tap="goInfo(item.user._id)">
                        <image :src="item.user.avatars" mode="aspectFill"></image>
                        <view class="manager" v-if="item.user._id == getGroupInfo.manager"><image src="../../static/images/group/manager.png" mode="widthFix"></image></view>
                        <view class="m_name">{{ item.nickName }}</view>
                    </view>
                    <view class="member-item">
                        <view class="m_imgbox" @tap="goAdd"><image src="../../static/images/group/Group.png" mode="widthFix"></image></view>
                    </view>
                    <view class="more" @tap="more">查看全部群成员</view>
                </view>
                <view class="info">
                    <view class="info_item">
                        <view class="info_title">群名称</view>
                        <view class="info_content">{{ getGroupInfo.name }}</view>
                        <view class="info_oprea"><view v-show="isManager">></view></view>
                    </view>
                    <view class="info_item">
                        <view class="info_title">群公告</view>
                        <view class="info_content">{{ getGroupInfo.notice }}</view>
                        <view class="info_oprea">></view>
                    </view>
                    <view class="info_item">
                        <view class="info_title">群内昵称</view>
                        <view class="info_content">{{ getG_nickName }}</view>
                        <view class="info_oprea">></view>
                    </view>
                </view>
                <view class="operation">
                    <view class="op_item">
                        <view class="op_type">消息免打扰</view>
                        <view class="op_opera"><switch class="switch" color="#FFE431" :checked="false" @change="switch1" /></view>
                    </view>
                </view>
                <view class="dissolve" v-if="isManager" @tap="dissolve">解散该群</view>
                <view class="dissolve" v-if="isManager" @tap="management">移除群成员</view>
                <view class="btn" @tap="exitGroup">退出群聊</view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            recName: '聊天信息',
            id: null,
            nickName: null,
            isScroll: false,
            isManager: false,
            type: '',
            getGroupInfo: {},
            getG_nickName: ''
        };
    },
    onLoad(option) {
        this.id = option.id;
		
    },
    methods: {
        // 消息免打扰按钮
        switch1(e) {
            console.log('switch1 发生 change 事件，携带值为', e.target.value);
        },
		
        // 查看群成员信息
        goInfo(id) {
            uni.navigateTo({
                url: '../information/information?id=' + id
            });
        },
        // 跳转到添加群成员界面
        goAdd() {
            uni.navigateTo({
                url: 'add/add?id=' + this.id
            });
        },
        //查看所有群成员
        more(){
            uni.navigateTo({
                url: 'members/members'
            });
        },
        // 移除群成员
        management(){
            uni.navigateTo({
                url: 'members/members?id=' + this.id +"&&type=management"
            });
        },
        // 退出群聊
        exitGroup() {
            console.log("退群提醒")
        },
        // 解散群聊
        async dissolve(){
            console.log("解散群聊")
        },
        // 群聊天页面
        goGroupChat(){
            uni.navigateTo({
                url:"../chat/chat?id="+this.id+"&&type=group"
            })
        },
    }
};
</script>

<style lang="scss" scoped>
@import '../../common/css/mycss.scss';
.groupinfo {
    padding-top: var(--status-bar-height);
}
.comtarbar {
    background: white;
    .info{
        margin-left: 30rpx;
    }
}
.groupmain {
    padding-bottom: 0rpx;
    height: calc(100vh - 88rpx);
    scroll-view {
        height: 100%;
    }
    .g_avatar {
        background: white;
        height: 35vh;
        position: relative;
        overflow: hidden;
        .g_imgbox {
            position: absolute;
            z-index: 3;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            .g_box {
                display: flex;
                justify-content: center;
                .g_img {
                    border-radius: 50%;
                    width: 200rpx;
                    height: 200rpx;
                    overflow: hidden;
                    margin: 10rpx;
                    border: 4rpx solid white;
                    position: relative;
                    image {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translateX(-50%) translateY(-50%);
                    }
                }
            }

            .g_info {
                color: white;
                text-align: center;
                margin-top: 20rpx;
            }
        }

        .bg-img {
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            image {
                width: 100%;
                height: auto;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
        }
        .mask {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.3);
        }
    }

    .memberbox {
        padding-top: 20rpx;
        margin: 20rpx;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .member-item {
            width: 20%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 20rpx;
            position: relative;
            .manager {
                position: absolute;
                top: -20rpx;
                right: 4rpx;
                image {
                    width: 40rpx;
                    height: auto;
                }
            }
            image {
                width: 100rpx;
                height: 100rpx;
                border-radius: 10rpx;
            }
            .m_name {
                margin-top: 10rpx;
                width: 100rpx;
                text-align: center;
                font-size: 26rpx;
                color: rgba(25, 29, 35, 0.5);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .m_imgbox {
                width: 100rpx;
                height: 100rpx;
                background: #ffe431;
                border-radius: 10%;
                display: flex;
                justify-content: center;
                align-items: center;
                image {
                    height: 60rpx;
                    width: 60rpx;
                }
            }
        }
        .more {
            margin: 30rpx 0rpx;
            width: 100%;
            font-size: 30rpx;
            color: #ccc;
            text-align: center;
        }
    }
    .info {
        border-top: 10rpx solid #dfdfdf;
        border-bottom: 10rpx solid #dfdfdf;
        .info_item {
            margin: 0rpx 20rpx;
            display: flex;
            height: 100rpx;
            view {
                height: 100rpx;
                line-height: 100rpx;
            }
            .info_title {
                color: rgba(39, 40, 50, 1);
                font-size: 32rpx;
                flex: 3;
            }
            .info_content {
                color: rgba(39, 40, 50, 0.6);
                font-size: 32rpx;
                flex: 6;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .info_oprea {
                text-align: right;
                color: rgba(39, 40, 50, 0.6);
                font-size: 38rpx;
                flex: 1;
            }
        }
    }
    .info .info_item:not(:last-child) {
        border-bottom: 2rpx solid #e2e2e2;
    }
    .operation {
        border-bottom: 10rpx solid #dfdfdf;
        .op_item {
            margin: 0rpx 20rpx;
            display: flex;
            height: 100rpx;
            .op_type {
                flex: 4;
                color: rgba(39, 40, 50, 1);
                font-size: 32rpx;
                height: 100rpx;
                line-height: 100rpx;
            }
            .op_opera {
                flex: 1;
                text-align: right;
                .switch {
                    margin-top: 16rpx;
                    transform: scale(0.8);
                }
            }
        }
    }
    .dissolve {
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        color: red;
        border-bottom: 10rpx solid #dfdfdf;
    }
    .btn {
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        color: red;
    }
}
</style>

 pages/groupChat/chating.vue

@@ -1,167 +1,131 @@
<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 class="container">
		
        <!-- 头部 -->
        <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="true" :is-back="true"
            :title="recName" back-icon-color="#fff" :background="{ background: '#0BB9C8' }" title-color="#fff">

            <view slot='right'>
                <u-icon @click="chatMessageDetail" class="set-icon" name="more-dot-fill" color="#fff" size="28"></u-icon>
            </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>
					
        </u-navbar>



        <scroll-view id="chatingBox" :style="{ height: swiperHeight + 'px' }" 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="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 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>
                    <!-- 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"

                    <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"/>
                                <image src="../../static/images/chatroom/map.jpg" mode="aspectFit" class="map-img" />
                            </view>
                        </view>
                    </view>


                </view>
				
				

            </view>
			
        </view>
        <!-- <view class="padbt"></view> -->
    </scroll-view>
    <submit @inputs="inputs"  :names="name" :callname="callName"
                    @heights="heights"/>

        </scroll-view>
        <submit @inputs="inputs" :names="name" :callname="callName" @heights="heights" />
    </view>
</template>

<script>
    import datas from  '@/debugdate/debugdate.js'
    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 {
                swiperHeight: 0,
                msgs: [],
                imgMsg: [],
                oldTime: new Date(),
                scrollToView: '',
                inputh: '72',   
                recipientId: null,//接收者id
                recAvatar: null,//接收者头像
                recName: null,//接收者姓名
                senAvatar:null,//发送者头像
                senId: null,//接收者id
                inputh: '72',
                recipientId: null, //接收者id
                recAvatar: null, //接收者头像
                recName: null, //接收者姓名
                senAvatar: null, //发送者头像
                senId: null, //接收者id
                getData: null,
                animationData: {},            // 动画
                nowpage: 0,                   // 页码
                loading: '',                  // 滚动事件
                animationData: {}, // 动画
                nowpage: 0, // 页码
                loading: '', // 滚动事件
                isload: true,
                isanimation: true,
                begainloading: true,
				
                name: []//视频 双方id

                name: [] //视频 双方id
            };
        },
        components:{
        components: {
            submit,
        },
        onLoad(option) {
@@ -169,16 +133,40 @@
            this._getMsg(this.nowpage)
            // this.nextPage()
            var data = JSON.parse(option.data)
            console.log(data,55555555555555555555555)
            this.name = ['wo',option.chatID];
            console.log(data, 55555555555555555555555)
            this.name = ['wo', option.chatID];
            // console.log(data)
            if(typeof data.recipientName == "undefined"){
            if (typeof data.recipientName == "undefined") {
                this.callName = data.realName;
            }else{
            } else {
                this.callName = data.recipientName;
            }
        },
        methods:{
		
        onReady() {
            let that = this;
            uni.getSystemInfo({
                success(e) {
                    console.log(e);
                    let {
                        windowWidth,
                        windowHeight,
                        safeArea
                    } = e;
                    const query = uni.createSelectorQuery().in(that);
                    query
                        .select('#chatingBox')
                        .boundingClientRect(data => {
		
                            that.swiperHeight = (safeArea.bottom - data.top);
		
                        })
                        .exec();
                }
            });
        },
		
        methods: {
            // 返回键
            backOne() {
                uni.navigateBack({
@@ -191,15 +179,15 @@
                //     // 出现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()
@@ -209,36 +197,36 @@
                //         if(i > 40) {
                //             this._getMsg(this.nowpage)
                //         }
						

                //     }.bind(this), 100)
                // }
				
				


            },
            // 获取聊天数据
            _getMsg(page) {
                var that = this;
                that.senId = WxStorage.get("ids");
                uni.request({
                    url:this.$store.state.piAPI + "/chat-records/getSingleMessagePage",
                    method:"get",
                    data:{
                    url: this.$store.state.piAPI + "/chat-records/getSingleMessagePage",
                    method: "get",
                    data: {
                        senderId: that.senId,
                        recipientId: that.recipientId
                        // recipientId: "1370571848600920066"
                    },
                    success:(res)=> {
                    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].avatar == null || resdata[i].avatar == "") {
                                resdata[i].avatar = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c";
                            }
							
                            if(resdata[i].id == that.senId){

                            if (resdata[i].id == that.senId) {
                                that.senAvatar = resdata[i].avatar;
                            }else{
                            } else {
                                that.recAvatar = resdata[i].avatar;
                                that.recName = resdata[i].realName;
                            }
@@ -248,38 +236,38 @@
                        // 页数加1
                        //let msg = datas.message()            
                        let maxpages = msg.length
                        if(msg.length > (page + 1) * 10) {
                        if (msg.length > (page + 1) * 10) {
                            maxpages = (page + 1) * 10
                            that.nowpage++
                        }else {
                        } else {
                            // 数据获取完毕
                            that.nowpage = -1
                        }
                        // 数据分页加载 每十条为一页
                        for(var i = 0; i < msg.length; i++){
                            msg[i].imgUrl = '../../static/images/index/friend-list/'+msg[i].imgUrl
                        for (var i = 0; i < msg.length; i++) {
                            msg[i].imgUrl = '../../static/images/index/friend-list/' + msg[i].imgUrl
                            // 时间间隔
                            if(i < msg.length-1){
                            if (i < msg.length - 1) {
                                let t = filter.spaceTime(that.oldTime, msg[i].postTime)
                                if(t){
                                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
                            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){
                            if (that.getData.length != 0) {
                                that.scrollToView = 'msg' + that.getData[0].id
                            }
							

                        })
                        // 数据加载完毕关闭动画，停止数据加载
                        clearInterval(this.loading)
@@ -287,17 +275,17 @@
                        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) {
                for (var i = 0; i < this.imgMsg.length; i++) {
                    if (this.imgMsg[i] == e) {
                        index = i
                    }
                }
@@ -325,11 +313,11 @@
            inputs(e) {
                var that = this;
                this.isanimation = true
                let len = this.msgs.length -1				
                let nowTime = new Date();	
                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){
                if (t) {
                    this.oldTime = t
                }
                nowTime = t
@@ -341,11 +329,11 @@
                    status: 0,
                    postTime: nowTime,
                }
				

                uni.request({
                    url:this.$store.state.piAPI + "/chat-records/insertSingleChat",
                    method:"post",
                    data:{
                    url: this.$store.state.piAPI + "/chat-records/insertSingleChat",
                    method: "post",
                    data: {
                        senderId: that.senId,
                        recipientId: that.recipientId,
                        postMessage: e.message,
@@ -353,16 +341,16 @@
                        status: 0,
                        postTime: sentTime,
                    },
                    success:(res)=> {
						
                    success: (res) => {

                    }
                });
				

                this.msgs.push(sendMsg)
                this.$nextTick(() => {
                    this.scrollToView = 'msg' + len
                })
                if(e.types == 1) {
                if (e.types == 1) {
                    this.imgMsg.push(e.message)
                }
            },
@@ -377,22 +365,20 @@
                this.isanimation = true
                this.scrollToView = ''
                this.$nextTick(() => {
                    let len = this.getData.length -1
                    if(this.getData.length != 0){
                    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'
                    }
                ]
                let map = [{
                    latitude: e.latitude,
                    longitude: e.longitude,
                    iconPath: '../../static/images/chatroom/placeholder-r.png'
                }]
                return (map)
            },
            // 导航
@@ -409,90 +395,72 @@
            },
            //时间格式化
            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;
                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:{
        filters: {
            Msgdate(time) {
             return    filter.Msgdate(time)
                return filter.Msgdate(time)
            }
        }
    }
	
</script>

<style lang="scss">	
<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;
            }
        }
    }

    .set-icon {
        vertical-align: middle;
        width: 41rpx;
        height: auto;
        margin-right: 35rpx;
    }
	
    .chat {
        height: 100%;
		

        .chat-main {
            padding-left: $uni-spacing-col-base;
            padding-right: $uni-spacing-col-base;
            padding-top: 100rpx;
            padding-top: 16rpx;
            // 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);
@@ -500,56 +468,59 @@
                padding: 20rpx 0;
                text-align: center;
            }
			

            .msg-m {
                display: flex;
                padding: 20rpx 0;
				

                .user-img {
                    flex: none;
                    width: 88upx;;
                    height: 88upx;;
                    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;
@@ -560,7 +531,7 @@
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
					

                    .map-address {
                        font-size: $uni-font-size-sm;
                        color: $uni-text-color-disable;
@@ -570,14 +541,14 @@
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
					

                    // .map {
                    //     padding-top: 8rpx;
                    //     width: 464rpx;
                    //     height: 190rpx;
                    //     overflow: hidden;
                    // }
					

                    .map-img {
                        width: 464rpx;
                        // padding-top: 8rpx;
@@ -585,67 +556,71 @@
                        // top: -70rpx;
                    }
                }
				

            }

            .msg-left {
                flex-direction: row;

                .msg-text {
                    margin-left: 16rpx;
                    background-color: #fff;
                    border-radius: 0 20rpx 20rpx 20rpx;
                    background-color: rgba(255, 170, 0, 0.8);
                }
				

                .msg-img {
                    padding-left: 16rpx;
                }
				

                .msg-map {
                    margin-left: 16rpx;
                    border-radius: 0 20rpx 20rpx 20rpx;
                }
				

                .voice {
                    text-align: right;
					

                    .voice-img {
                        float: left;			
                        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);					
                        transform: rotate(180deg);
                    }
					

                }
				

            }
        }
		

    }

    .displaynone {
        display: none;
    }

 pages/groupChat/chatingQZ.vue

@@ -1,180 +1,167 @@
<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 class="container">

        <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="true" :is-back="true"
             :title="recName" back-icon-color="#fff"
            :background="{ background: '#0BB9C8' }" title-color="#fff">
            <view slot='right'>
                <u-icon @click="chatMessageDetail" class="set-icon" name="more-dot-fill" color="#fff" size="28"></u-icon>
            </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>
        </u-navbar>

        <scroll-view id="chatingQzBox" :style="{ height: swiperHeight + 'px' }" 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="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'}"
                <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 == '' ? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c' : 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)">
                            {{ item.post_message.time }} "
                            <image src="@/static/images/chatroom/sound.png"
                                         mode=""
                                         class="voice-img"/>
                                    <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>
                    <!-- 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"

                    <view class="msg-m msg-right" v-if="item.sender_id == senId">
                        <image :src="item.avatar == '' ? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c' : 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"/>
                                <image src="../../static/images/chatroom/map.jpg" mode="aspectFit" class="map-img" />
                            </view>
                        </view>
                    </view>


                </view>
				
				

            </view>
			
        </view>
        <!-- <view class="padbt"></view> -->
    </scroll-view>
    <submit @inputs="inputs" 
                    @heights="heights"/>
        </scroll-view>

        <submit @inputs="inputs" @heights="heights" />
    </view>
</template>

<script>
    import datas from  '@/debugdate/debugdate.js'
    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 {
                swiperHeight: 0,
                msgs: [],
                imgMsg: [],
                oldTime: new Date(),
                scrollToView: '',
                inputh: '72',   
                recipientId: null,//接收者id
                recAvatar: null,//接收者头像
                recName: null,//接收者姓名
                senAvatar:null,//发送者头像
                senId: null,//接收者id
                inputh: '72',
                recipientId: null, //接收者id
                recAvatar: null, //接收者头像
                recName: null, //接收者姓名
                senAvatar: null, //发送者头像
                senId: null, //接收者id
                getData: null,
                animationData: {},            // 动画
                nowpage: 0,                   // 页码
                loading: '',                  // 滚动事件
                animationData: {}, // 动画
                nowpage: 0, // 页码
                loading: '', // 滚动事件
                isload: true,
                isanimation: true,
                begainloading: true
            };
        },
        components:{
        components: {
            submit,
        },
        onLoad(option) {
            console.log(option)
            this.recipientId = option.chatID;
            var data = JSON.parse(option.data)
            this.recName = data.GroupName;
            this._getMsg(this.nowpage)
            // this.nextPage()
        },
        methods:{

        onReady() {
            let that = this;
            uni.getSystemInfo({
                success(e) {
                    console.log(e);
                    let {
                        windowWidth,
                        windowHeight,
                        safeArea
                    } = e;
                    const query = uni.createSelectorQuery().in(that);
                    query
                        .select('#chatingQzBox')
                        .boundingClientRect(data => {

                            that.swiperHeight = (safeArea.bottom - data.top);

                        })
                        .exec();
                }
            });
        },

        methods: {
            // 返回键
            backOne() {
                uni.navigateBack({
@@ -187,15 +174,15 @@
                //     // 出现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()
@@ -205,73 +192,73 @@
                //         if(i > 40) {
                //             this._getMsg(this.nowpage)
                //         }
						

                //     }.bind(this), 100)
                // }
				
				


            },
            // 获取聊天数据
            _getMsg(page) {
				

                var that = this;
                that.senId = WxStorage.get("ids");
                uni.request({
                    url:this.$store.state.piAPI + "/chatgroupc/selectList",
                    method:"post",
                    url: this.$store.state.piAPI + "/chatgroupc/selectList",
                    method: "post",
                    header: {
                        'content-type': 'application/x-www-form-urlencoded', 
                        'content-type': 'application/x-www-form-urlencoded',
                    },
                    data:{
                    data: {
                        gid: that.recipientId
                        //gid: "1"
                    },
                    success:(res)=> {
                    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{
                            if (resdata[i].avatar == null || resdata[i].avatar == "") {
                                resdata[i].avatar = "";
                            } else {
                                resdata[i].avatar = resdata[i].avatar;
                            }
                            if(resdata[i].sender_id == that.senId){
                            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) {
                        if (msg.length > (page + 1) * 10) {
                            maxpages = (page + 1) * 10
                            that.nowpage++
                        }else {
                        } else {
                            // 数据获取完毕
                            that.nowpage = -1
                        }
                        // 数据分页加载 每十条为一页
                        for(var i = 0; i < msg.length; i++){
                            msg[i].imgUrl = '../../static/images/index/friend-list/'+msg[i].imgUrl
                        for (var i = 0; i < msg.length; i++) {
                            msg[i].imgUrl = '../../static/images/index/friend-list/' + msg[i].imgUrl
                            // 时间间隔
                            if(i < msg.length-1){
                            if (i < msg.length - 1) {
                                let t = filter.spaceTime(that.oldTime, msg[i].post_time)
                                if(t){
                                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
                            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
@@ -282,17 +269,17 @@
                        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) {
                for (var i = 0; i < this.imgMsg.length; i++) {
                    if (this.imgMsg[i] == e) {
                        index = i
                    }
                }
@@ -320,11 +307,11 @@
            inputs(e) {
                var that = this;
                this.isanimation = true
                let len = this.msgs.length -1				
                let nowTime = new Date();	
                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){
                if (t) {
                    this.oldTime = t
                }
                nowTime = t
@@ -334,29 +321,28 @@
                    message_type: 0,
                    status: 0,
                    post_time: nowTime,
                    avatar:that.senAvatar
                    avatar: that.senAvatar
                }
				

                uni.request({
                    url:this.$store.state.piAPI + "/chatgroupc/submit",
                    method:"post",
                    data:{
                    url: this.$store.state.piAPI + "/chatgroupc/submit",
                    method: "post",
                    data: {
                        senderId: that.senId,
                        postMessage: e.message,
                        messageType: 0,
                        status: 0,
                        postTime: sentTime,
                        gid:that.recipientId
                        gid: that.recipientId
                    },
                    success:(res)=> {
                    }
                    success: (res) => {}
                });
				

                this.msgs.push(sendMsg)
                this.$nextTick(() => {
                    this.scrollToView = 'msg' + len
                })
                if(e.types == 1) {
                if (e.types == 1) {
                    this.imgMsg.push(e.message)
                }
            },
@@ -371,19 +357,17 @@
                this.isanimation = true
                this.scrollToView = ''
                this.$nextTick(() => {
                    let len = this.getData.length -1
                    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'
                    }
                ]
                let map = [{
                    latitude: e.latitude,
                    longitude: e.longitude,
                    iconPath: '../../static/images/chatroom/placeholder-r.png'
                }]
                return (map)
            },
            // 导航
@@ -400,90 +384,81 @@
            },
            //时间格式化
            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;
                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;
            },
            chatMessageDetail() {
                uni.navigateTo({
                    url: './chatMessage?'
                });
            }
        },
        filters:{
        filters: {
            Msgdate(time) {
             return    filter.Msgdate(time)
                return filter.Msgdate(time)
            }
        }
    }
	
</script>

<style lang="scss">	
<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;
            }
        }

    .set-icon {
        vertical-align: middle;
        width: 41rpx;
        height: auto;
        margin-right: 35rpx;
    }

    .chat {
        height: 100%;
		

        .chat-main {
            padding-left: $uni-spacing-col-base;
            padding-right: $uni-spacing-col-base;
            padding-top: 100rpx;
            padding-top: 16rpx;
            // 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);
@@ -491,56 +466,59 @@
                padding: 20rpx 0;
                text-align: center;
            }
			

            .msg-m {
                display: flex;
                padding: 20rpx 0;
				

                .user-img {
                    flex: none;
                    width: 88upx;;
                    height: 88upx;;
                    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;
@@ -551,7 +529,7 @@
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
					

                    .map-address {
                        font-size: $uni-font-size-sm;
                        color: $uni-text-color-disable;
@@ -561,14 +539,14 @@
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
					

                    // .map {
                    //     padding-top: 8rpx;
                    //     width: 464rpx;
                    //     height: 190rpx;
                    //     overflow: hidden;
                    // }
					

                    .map-img {
                        width: 464rpx;
                        // padding-top: 8rpx;
@@ -576,74 +554,79 @@
                        // top: -70rpx;
                    }
                }
				

            }

            .msg-left {
                flex-direction: row;

                .msg-text {
                    margin-left: 16rpx;
                    background-color: #fff;
                    border-radius: 0 20rpx 20rpx 20rpx;
                    background-color: rgba(255, 170, 0, 0.8);

                }
				

                .msg-img {
                    padding-left: 16rpx;
                }
				

                .msg-map {
                    margin-left: 16rpx;
                    border-radius: 0 20rpx 20rpx 20rpx;
                }
				

                .voice {
                    text-align: right;
					

                    .voice-img {
                        float: left;			
                        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);					
                        transform: rotate(180deg);
                    }
					

                }
				

            }
        }
		

    }

    .displaynone {
        display: none;
    }
	
    .sent_name{
            margin-left: 8px;
            font-size: 8px;
            padding-bottom: 5px;

    .sent_name {
        margin-left: 8px;
        font-size: 8px;
        padding-bottom: 5px;
    }
</style>

 pages/groupChat/friendrequest.vue

@@ -1,19 +1,11 @@
<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">
                <text class="title">好友申请</text>
            </view>
            <view class="top-bar-right">
                <view class="pice"></view>
            </view>
        </view>
    <view class="container">
		
        <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="true" :is-back="true"
            title="好友申请" back-icon-color="#fff" :background="{ background: '#0BB9C8' }" title-color="#fff">
		
        </u-navbar>
		
        <view class="main">
            <u-empty class="friendEmpty" v-if="requestList.length == 0" text="暂无好友申请" mode="list"></u-empty>
            <view class="requestr" v-for="(item, index) in requestList" :key="index">
@@ -77,7 +69,7 @@
                        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";
                                resdata[i].avatar = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c";
                            }
                        }
                        this.requestList = resdata;
@@ -134,12 +126,6 @@
<style lang="scss">
    @import '../../common/style/common.scss';

    .top-bar {
        background-color: #0BB9C8;
        // background-color: #42B983;
        box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1);
    }

    .friendEmpty {
        position: absolute;
        margin: auto;
@@ -150,7 +136,7 @@
    }

    .main {
        padding: 108rpx 32upx;
        padding: 16rpx 32upx;
        background: rgba(255, 255, 255, .6);

        .requestr {

 pages/groupChat/groupChat.vue

@@ -4,82 +4,92 @@
        <!-- 自定义顶部导航栏 -->
        <!-- <navBarTop :title="'聊天室'"></navBarTop> -->

        <view style="height:205rpx;"></view>
        <view class="tab" style="position: fixed;top: 0;width: 100%;height: 205rpx;z-index: 100;">
            <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="false" :is-back="false" title="好友"
                :background="{ background: '#0BB9C8' }" title-color="#fff">
                <u-icon @click="addFriend" slot="right" class="message-icon" mode="widthFix" name="plus" color="#fff">
                </u-icon>
                <!-- <image  src="../../static/add.png" ></image> -->
            </u-navbar>
        <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="false" :is-back="false" title="好友"
            :background="{ background: '#0BB9C8' }" title-color="#fff">
            <u-icon @click="addFriend" slot="right" class="message-icon" mode="widthFix" name="plus" color="#fff">
            </u-icon>
        </u-navbar>

        <view class="tab">
            <u-tabs :list="list" :is-scroll="false" :current="current" active-color="#14B9C8" inactive-color="#595959"
                height="100" @change="change" style="background-color:rgba(255,255,255,0.8); "></u-tabs>
                height="100" @change="change"></u-tabs>
        </view>

        <swiper id="swiperBoxPeo" :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="applys" @click="toFriendRequest">
                                <view class="head-wrap">
                                    <image src="../../static/apply.png" class="head" />
                                    <view v-if=false class="tip">233</view>
                                </view>
                                <view class="content-wrap">
                                    <text class="name">好友申请</text>
                                    <text class="mess">若人生只如初见</text>
                                </view>
                                <view class="data-wrap">
                                    <text class="data"></text>
                                </view>
                            </view>
                            <view class="inTmain">
                                <contacts v-for="(item,index) in dataListTXL" :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="applys" @click="newGroup">
                                <view class="head-wraps">
                                    <image src="../../static/qunzhu.png" class="head" />
                                    <view v-if=false class="tip">233</view>
                                </view>
                                <view class="content-wrap">
                                    <text class="name">群组创建</text>
                                    <text class="mess">何事秋风悲画扇</text>
                                </view>
                                <view class="data-wrap">
                                    <text class="data"></text>
                                </view>
                            </view>
                <scroll-view scroll-y :scroll-top="scrollTop" style="width: 100%;height: 100%;"
                    :refresher-enabled="refresherFlag" :refresher-threshold="threshold" :refresher-triggered="triggered"
                    @refresherrefresh="refreshing" @refresherrestore="refresherrestore">

                            <!-- <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>
                    <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>
                    </div>
                </view>
                    </view>
                    <view v-if="indexs == 1" class="main">
                        <div>
                            <div class="m-main">
                                <!-- <view class="inTitle">{{Task}}</view> -->
                                <view class="applys" @click="toFriendRequest">
                                    <view class="head-wrap">
                                        <image src="../../static/apply.png" class="head" />
                                        <view v-if=false class="tip">233</view>
                                    </view>
                                    <view class="content-wrap">
                                        <text class="name">好友申请</text>
                                        <text class="mess">若人生只如初见</text>
                                    </view>
                                    <view class="data-wrap">
                                        <text class="data"></text>
                                    </view>
                                </view>
                                <view class="inTmain">
                                    <contacts v-for="(item,index) in dataListTXL" :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="applys" @click="newGroup">
                                    <view class="head-wraps">
                                        <image src="../../static/qunzhu.png" class="head" />
                                        <view v-if=false class="tip">233</view>
                                    </view>
                                    <view class="content-wrap">
                                        <text class="name">群组创建</text>
                                        <text class="mess">何事秋风悲画扇</text>
                                    </view>
                                    <view class="data-wrap">
                                        <text class="data"></text>
                                    </view>
                                </view>

                                <!-- <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>

                </scroll-view>

            </swiper-item>

        </swiper>

    </view>
@@ -121,6 +131,11 @@
                titleTop: '', //
                hello: false,
                userName: '',
                scrollTop: 0,
                threshold: 50,
                triggered: false,
                isRefreshing: false, // 是否在刷新中
                refresherFlag: true,
            }
        },
        activated() {
@@ -131,6 +146,7 @@
            let that = this;
            uni.getSystemInfo({
                success(e) {
                    console.log(e);
                    let {
                        windowWidth,
                        windowHeight,
@@ -141,23 +157,40 @@
                        .select('#swiperBoxPeo')
                        .boundingClientRect(data => {

                            that.swiperHeight = safeArea.bottom - data.top;
                            that.swiperHeight = (safeArea.bottom - data.top);

                        })
                        .exec();
                }
            });
        },

        onPullDownRefresh: function() {

            setTimeout(() => {
                this.getdataList()
            }, 1000)

        },

        methods: {

			
            refreshing() {
				
                if (this.isRefreshing) {
                    return;
                }
                this.isRefreshing = true;
                //界面下拉触发，triggered可能不是true，要设为true
                if (!this.triggered) {
                    this.triggered = true;
                }
				
                this.dataListP = [];
                this.dataListQZ = [];
                this.dataListTXL = [];
				
                this.getdataList()
            },

            refresherrestore() {
		
			
				
            },

            change(index) {
                this.current = index;
            },
@@ -190,12 +223,18 @@
                            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";
                                    resdata[i].avatar = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c";
                                }
                            }
                            that.dataListP = resdata;

                            uni.stopPullDownRefresh();
                            that.scrollTop = 0;

                            setTimeout(() => {
                                that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
                                that.isRefreshing = false;
                            }, 1000)

                        }
                    });
                } else if (this.current == 1) {
@@ -210,13 +249,19 @@
                            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";
                                    resdata[i].avatar = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c";
                                }
                            }

                            that.dataListTXL = resdata;

                            uni.stopPullDownRefresh();
                            that.scrollTop = 0;
							
                            setTimeout(() => {
                                that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
                                that.isRefreshing = false;
                            }, 1000)

                        }
                    })
                } else if (this.current == 2) {
@@ -232,12 +277,18 @@
                            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";
                                    resdata[i].avatar = "../../static/images/people.png";
                                }
                            }
                            that.dataListQZ = resdata;

                            uni.stopPullDownRefresh();
                            that.scrollTop = 0;
							
                            setTimeout(() => {
                                that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
                                that.isRefreshing = false;
                            }, 1000)

                        }
                    });
                }
@@ -499,4 +550,8 @@
    .swiper-item {
        overflow-y: auto !important;
    }

    .tab {
        margin-bottom: 10rpx;
    }
</style>

 pages/groupChat/modify/modify.vue

New file
@@ -0,0 +1,223 @@
<template>
    <view class="modifybox" :animation="animationData">
        <view class="mask" :animation="animationData2"></view>
        <view class="content">
            <view class="m_title">{{ type }}</view>
            <view class="close" @tap="show"><image src="../../../static/images/group/close.png" mode="widthFix"></image></view>
            <view class="name" v-if="type == '群名'">
                <view class="namebox"><input type="text" v-model="name" /></view>
                <view class="notice-btn"><view class="modify-btn" @tap="modifyInfo('name')">修改</view></view>
            </view>
            <view class="notice" v-if="type == '公告'">
                <view class="notice-content" v-show="!isModify">{{ notice }}</view>
                <view class="notice-text" v-show="isModify"><textarea auto-height="true" v-model="notice" placeholder="" /></view>
                <view class="notice-btn">
                    <view class="modify-btn" @tap="modifyNotice" v-show="!isModify && isManager">修改</view>
                    <view class="confirm-btn" @tap="modifyInfo('notice')" v-show="isModify">确定</view>
                </view>
            </view>
            <view class="nickName" v-if="type == '昵称'">
                <view class="nickbox"><input type="text" v-model="nickName" /></view>
                <view class="notice-btn"><view class="modify-btn" @tap="modifyInfo('nickName')">修改</view></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isModify: false,
            animationData: {},
            animationData2: {},
            isShow: false,
            name: '',
            notice: '',
            nickName: ''
        };
    },
    props: ['isManager', 'groupInfo', 'n_Name', 'type'],
    created() {
        setTimeout(() => {
            this.name = this.groupInfo.name;
            this.notice = this.groupInfo.notice;
            this.nickName = this.n_Name;
        }, 100);
    },
    methods: {
        show() {
            this.isShow = !this.isShow;
            var animation = uni.createAnimation({
                duration: 600,
                timingFunction: 'ease'
            });
            var animation2 = uni.createAnimation({
                duration: 400,
                timingFunction: 'ease'
            });
            if (this.isShow) {
                animation.bottom(0).step();
                this.animationData = animation.export();
                setTimeout(
                    function() {
                        animation2.opacity(1).step();
                        this.animationData2 = animation2.export();
                    }.bind(this),
                    600
                );
            } else {
                animation2.opacity(0).step();
                this.animationData2 = animation2.export();
                setTimeout(
                    function() {
                        animation.bottom('-100vh').step();
                        this.animationData = animation.export();
                        setTimeout(() => {
                            this.isModify = false;
                        }, 500);
                    }.bind(this),
                    400
                );
            }
        },
        modifyNotice() {
            this.isModify = !this.isModify;
        },
        modifyInfo(type) {
            let key = null;
            let value = null;
            if (type == 'name') {
                key = 'name';
                value = this.name;
            } else if (type == 'notice') {
                key = 'notice';
                value = this.notice;
                this.isModify = !this.isModify;
            } else if(type =="nickName"){
                key = 'nickName';
                value = this.nickName;
            }
            this.$emit('modify', { [key]: value });
            this.show()
        }
    }
};
</script>

<style lang="scss" scoped>
.modifybox {
    position: fixed;
    bottom: -100vh;
    left: 0rpx;
    right: 0rpx;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    .mask {
        position: absolute;
        bottom: 0rpx;
        left: 0rpx;
        right: 0rpx;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
    }
    .content {
        background: white;
        width: 80vw;
        height: auto;
        padding-bottom: 20rpx;
        box-sizing: border-box;
        position: relative;
        display: block;
        .m_title {
            height: 80rpx;
            line-height: 80rpx;
            width: 100%;
            border-bottom: 2rpx solid #ccc;
            text-align: center;
            // background: red;
        }
        .close {
            position: absolute;
            top: 0rpx;
            right: 0;
            width: 80rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            image {
                height: 50rpx;
                width: 50rpx;
            }
        }
    }
    .name {
        margin: 30rpx;
        margin-top: 40rpx;
        width: calc(100% - 60rpx);
        font-size: 32rpx;
        .namebox {
            border: 2rpx solid #ccc;
            input {
                padding: 10rpx 5%;
                text-align: center;
            }
        }
    }
    .notice-btn {
        margin-top: 30rpx;
        display: flex;
        justify-content: center;
        .modify-btn {
            padding: 10rpx;
            background: red;
            color: white;
            width: 100rpx;
            text-align: center;
        }
        .confirm-btn {
            padding: 10rpx;
            background: #5a9bec;
            color: white;
            width: 100rpx;
            text-align: center;
        }
    }
    .notice {
        margin: 0rpx 30rpx;
        width: calc(100% - 60rpx);
        font-size: 32rpx;
        .notice-content {
            margin-top: 40rpx;
        }
        .notice-text {
            margin-top: 40rpx;
            // height: 80rpx;
            border: 2rpx solid #ccc;
            textarea {
                max-height: 300rpx;
                width: 90%;
                padding: 10rpx 5%;
            }
        }
    }
    .nickName {
        margin: 30rpx;
        margin-top: 40rpx;
        width: calc(100% - 60rpx);
        font-size: 32rpx;
        .nickbox {
            border: 2rpx solid #ccc;
            input {
                padding: 10rpx 5%;
                text-align: center;
            }
        }
    }
}
</style>

 pages/groupChat/newGroup/newGroup.vue

@@ -1,21 +1,41 @@
<template>
    <view class="registerUser">
        <u-form :model="form" ref="uForm">
            <u-form-item :label="item.title" :prop="item.froms" label-width="200" :left-icon="item.img"
                :required="item.requireds" v-for="(item, index) in list" :key="index">
                <u-input v-model="form[item.froms]" :placeholder="item.placeholder" />
            </u-form-item>
            <u-form-item label="群成员" prop="role" left-icon="man-add" label-width="200" :required="true">
                <u-checkbox-group @change="checkboxGroupChange">

        <view class="group-chat-box">

            <u-form :model="form" ref="uForm">

                <u-checkbox-group @change="checkboxGroupChange" :wrap='true' :size="40">

                    <u-checkbox v-model="item.checked" v-for="(item, index) in friend" :key="index"
                        :name="item.friendid">
                        {{item.realName}}
                        :name="item.friendid" shape="circle"
                        style="padding: 16rpx 0; height: 92rpx; position: relative; box-sizing: border-box;">

                        <view class="head-wrap">
                            <image
                                :src="item.avatar == '' ? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c' : item.avatar" />
                        </view>

                        <view style="margin-left: 106rpx">
                            {{item.realName}}
                        </view>

                    </u-checkbox>
                </u-checkbox-group>
            </u-form-item>
        </u-form>
        <u-button class="submit" @click="submit">
            创建</u-button>

            </u-form>

        </view>


        <view class="establish-box">

            <u-button class="submit" type='primary' @click="submit">
                立即创建
            </u-button>

        </view>

    </view>
</template>

@@ -25,53 +45,11 @@
        data() {
            return {
                friend: [],
                list: [{
                        title: '群名称',
                        img: 'chat',
                        froms: 'groupname',
                        requireds: true,
                        placeholder: '请输入群名称'
                    },
                    {
                        title: '群介绍',
                        img: 'order',
                        froms: 'groupcontent',
                        requireds: true,
                        placeholder: '请输入群介绍'
                    },
                    {
                        title: '群公告',
                        img: 'bell',
                        froms: 'groupnotice',
                        requireds: true,
                        placeholder: '请输入群公告'
                    },
                ],
                form: {
                    groupname: '',
                    groupcontent: '',
                    groupnotice: '',
                    groupmember: '',
                },
                rules: {
                    groupname: [{
                        required: true,
                        message: '请输入群名称',
                        // 可以单个或者同时写两个触发验证方式 
                        trigger: ['change', 'blur'],
                    }],
                    groupcontent: [{
                        required: true,
                        message: '请输入群介绍',
                        // 可以单个或者同时写两个触发验证方式 
                        trigger: ['change', 'blur'],
                    }],
                    groupnotice: [{
                        required: true,
                        message: '请输入群公告',
                        // 可以单个或者同时写两个触发验证方式 
                        trigger: ['change', 'blur'],
                    }]
                },
            }
        },
@@ -84,34 +62,30 @@
        methods: {
            submit() {
                var that = this;
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        var d = that.form;
                        if (d.groupmember == "") {
                            uni.showToast({
                                title: '请至少选择一个群成员',
                                icon: "none",
                                duration: 1000
                            });
                            return;
                        }
                        d.time = that.currTime();
                        d.groupid = WxStorage.get("ids");
                        uni.request({
                            url: that.$store.state.piAPI + "/chatgroup/submit",
                            method: "POST",
                            data: d,
                            success: (res) => {
                                uni.showToast({
                                    title: '创建成功',
                                    icon: "none",
                                    duration: 1000
                                });
                var d = that.form;
                if (d.groupmember == "") {
                    uni.showToast({
                        title: '请至少选择一个群成员',
                        icon: "none",
                        duration: 1000
                    });
                    return;
                }
                d.time = that.currTime();
                d.groupid = WxStorage.get("ids");
                uni.request({
                    url: that.$store.state.piAPI + "/chatgroup/submit",
                    method: "POST",
                    data: d,
                    success: (res) => {
                        uni.showToast({
                            title: '创建成功',
                            icon: "none",
                            duration: 1000
                        });

                                uni.switchTab({
                                    url: '/pages/groupChat/groupChat?'
                                });
                            }
                        uni.switchTab({
                            url: '/pages/groupChat/groupChat?'
                        });
                    }
                });
@@ -144,7 +118,19 @@
                    },
                    success: (res) => {
                        var resdata = res.data.data.records;

                        that.friend = resdata;

                        var str = '';
                        resdata.forEach((item, index) => {

                            if (index > 2) return;

                            str += item.realName + '、';

                        })

                        this.form.groupname = (str.substr(0, str.length - 1) + '···')
                    }
                })
            }
@@ -152,7 +138,9 @@
    }
</script>

<style>
<style lang="scss">
    @import '../../../common/style/common.scss';
	
    .warp {
        display: flex;
        align-items: center;
@@ -167,34 +155,65 @@
    }

    .submit {
        margin: 30rpx 50rpx 50rpx;
        border: none;
        width: 572rpx;
        width: 94%;
        height: 86rpx;
        line-height: 86rpx;
        box-sizing: border-box;
        border-radius: 15rpx;
        background-color: #14b9c8;
        color: #ffffff;
        font-size: 38rpx;

        &::after {
            content: none;
        }

        &::before {
            content: none;
        }

        &[disabled='true'] {
            background: #e4e4e4;
            font-size: 36rpx;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
        }
    }

    .registerUser {
        padding: 0 1.2rem;
        height: 100%;
        background: #f7f7f7;

        .group-chat-box {
            height: calc(100% - 116rpx);
            padding: 0 1.2rem;
            box-sizing: border-box;
            overflow-y: auto;
        }

        .establish-box {
            position: relative;
            height: 116rpx;
            background: #fff;
            text-align: center;

            uni-button {
                margin: 0;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

        }
    }

    .head-wrap {
        position: absolute;
        top: 0;
        left: 66rpx;
        bottom: 0;
        right: auto;
        margin: auto;
        width: 66rpx;
        height: 66rpx;
        border-radius: 50%;
        background: #e7e7e7;

        uni-image {
            width: 66rpx;
            height: 66rpx;
            border-radius: 50%;

            vertical-align: middle;
        }
    }
</style>

 pages/home/home - f.vue

 pages/home/home.vue

@@ -2,26 +2,27 @@
    <view class="container">
        <!-- 头部 start -->
        <view class="head">
            <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title=""
                :background="{ background: '#0BB9C8' }">
            <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title="智慧保安"
                :background="{ background: '#0BB9C8' }" title-color="#fff" title-size='32rpx' title-bold>
                <view class="nav-wrap">
                    <picker mode="selector" :range="positionArr" range-key="name" @change="changePicker"
                    <!-- <picker mode="selector" :range="positionArr" range-key="name" @change="changePicker"
                        class="picker-box">
                        {{ position }}
                        <u-icon name="arrow-down" class="arrow" size="18" color="#C9C9C9"></u-icon>
                    </picker>
                    <image src="/static/images/rider.png" class="rider" mode="widthFix" v-if="!focus"></image>
                    </picker> -->
					
                    <!-- <image src="/static/images/rider.png" class="rider" mode="widthFix" v-if="!focus"></image>

                    <view class="search-input" v-else>
                        <u-search height="50" placeholder="关键字" @blur="handleSearchBlur" :show-action="false"
                            v-model="keyword"></u-search>
                    </view>
                    </view> -->

                    <view class="tool">
                        <image src="/static/images/home/search.png" class="icon search-icon" mode="widthFix"
                            @click="handleFocus" v-if="!focus"></image>
                    <!--     <image src="/static/images/home/search.png" class="icon search-icon" mode="widthFix"
                            @click="handleFocus" v-if="!focus"></image> -->
                        <image src="/static/images/home/message.png" class="icon message-icon" mode="widthFix"></image>
                        <image src="/static/images/home/qr.png" class="icon qr-icon" mode="widthFix"></image>
                        <!-- <image src="/static/images/home/qr.png" class="icon qr-icon" mode="widthFix"></image> -->
                    </view>
                </view>
            </u-navbar>
@@ -224,29 +225,29 @@
            //页面跳转
            goBusinessPage(url, index, name) {
                // console.log(url,index)
                if (name == "位置查看") {
                    uni.request({
                        url: this.$store.state.piAPI + "/blade-user/page",
                        method: "get",
                        data: {
                            size: 99999
                        },
                        success: (res) => {
                            var re = res.data.data.records;
                            var d = [];
                            for (var k in re) {
                                if (re[k].latitude != '' && re[k].longitude != '') {
                                    d.push(re[k]);
                                }
                            }
                            console.log(d);
                            uni.navigateTo({
                                url: `${url}?data=${JSON.stringify(d)}`
                            })
                        }
                    })
                    return;
                }
                // if (name == "位置查看") {
                //     uni.request({
                //         url: this.$store.state.piAPI + "/blade-user/page",
                //         method: "get",
                //         data: {
                //             size: 99999
                //         },
                //         success: (res) => {
                //             var re = res.data.data.records;
                //             var d = [];
                //             for (var k in re) {
                //                 if (re[k].latitude != '' && re[k].longitude != '') {
                //                     d.push(re[k]);
                //                 }
                //             }
                //             console.log(d);
                //             uni.navigateTo({
                //                 url: `${url}?data=${JSON.stringify(d)}`
                //             })
                //         }
                //     })
                //     return;
                // }

                uni.navigateTo({
                    url: url

 pages/manage/manage.vue

@@ -1,31 +1,22 @@
<template>
    <view class="container">
        <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title="管理"
        <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title="工作台"
            :background="{ background: '#0BB9C8' }" title-color="#fff">
            <image slot="right" src="/static/images/home/message.png" class="message-icon" mode="widthFix"></image>
        </u-navbar>

        <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>
        <scroll-view id="swiperBox" :style="{ height: swiperHeight + 'px' }" scroll-y>
            <view class="content">
                <u-grid :col="3">
                    <u-grid-item v-for="(_item, _index) in gridList" :key="_index">
                        <navigator :url="_item.url" hover-class="none" class="gitem">
                            <image :src="_item.img" class="img" mode="widthFix"></image>
                            <view class="name">{{ _item.name }}</view>
                        </navigator>
                    </u-grid-item>
                </u-grid>
            </view>
        </scroll-view>

        <swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">
            <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
                <scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="onreachBottom">
                    <view class="content">
                        <u-grid :col="3">
                            <u-grid-item v-for="(_item, _index) in gridList" :key="_index">
                                <navigator url="" hover-class="none" class="gitem">
                                    <image :src="_item.img" class="img" mode="widthFix"></image>
                                    <view class="name">{{ _item.name }}</view>
                                </navigator>
                            </u-grid-item>
                        </u-grid>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

@@ -34,41 +25,37 @@
        data() {
            return {
                swiperHeight: 0,
                list: [{
                        name: '常用'
                    },
                    {
                        name: '系统'
                    },
                    {
                        name: '部门'
                    }
                ],
                current: 0,

                gridList: [{
                        name: '常规',
                        img: '/static/images/manage/g1.png'
                        name: '通知通告',
                        img: '/static/images/manage/g8.png',
                        url: '/pages/message/addMessage'
                    },
                    {
                        name: '权限',
                        img: '/static/images/manage/g2.png'
                        name: '人员检查',
                        img: '/static/images/manage/g7.png',
                        url: '/pages/examine/addpeople'
                    },
                    {
                        name: '角色',
                        img: '/static/images/manage/g3.png'
                        name: '单位检查',
                        img: '/static/images/manage/g9.png',
                        url: '/pages/examine/addunit'
                    },
                    {
                        name: '用户',
                        img: '/static/images/manage/g4.png'
                        name: '指令下发',
                        img: '/static/images/manage/g10.png',
                        url: '/pages/dispatch/dispatch'
                    },
                    {
                        name: '分类',
                        img: '/static/images/manage/g5.png'
                        name: '工作汇报',
                        img: '/static/images/manage/g11.png',
                        url: '/pages/report/initiate'
                    },
                    {
                        name: '公告',
                        img: '/static/images/manage/g6.png'
                    }
                        name: '位置查看',
                        img: '/static/images/manage/g12.png',
                        url: '/pages/map/map'
                    },
                ]
            };
        },
@@ -93,12 +80,7 @@
            });
        },
        methods: {
            tabsChange(e) {
                this.current = e.detail.current;
            },
            change(index) {
                this.current = index;
            }

        }
    };
</script>
@@ -106,16 +88,6 @@
<style lang="scss">
    .swiper-box {
        height: 100vh;
    }

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

    .tab {
        margin-bottom: 10rpx;
    }

    .gitem {

 pages/map/map.vue

@@ -15,10 +15,12 @@
        methods: {},
        mounted() {},
        onLoad: function(options) {
			

						
            this.urls = "http://web.byisf.com/mapWz/xcxmap.html?id="+ this.$store.state.UserData.jurisdiction + "&userid="+ this.$store.state.UserData.role_id;
            // this.urls = "http://127.0.0.1:5500/mapWz/xcxmap.html?id="+ this.$store.state.UserData.jurisdiction + "&userid="+ this.$store.state.UserData.role_id;
			
            // this.urls = "http://127.0.0.1:5500/mapWz/xcxmap.html?id=" + this.$store.state.UserData.jurisdiction +
            //     "&userid=" + this.$store.state.UserData.role_id;

        },
    }
</script>

 pages/securityStaff/exhibition - f.vue

 pages/securityStaff/exhibition.vue

@@ -100,6 +100,9 @@
                    url: that.$store.state.piAPI + "/blade-user/pages",
                    method: "get",
                    data: {
                        dispatch: 0,
                        jurisdiction: this.$store.state
                            .UserData.jurisdiction,
                        current: that.pagelist,
                        size: 10
                    },
@@ -107,7 +110,7 @@
                        that.pages = res.data.data.pages;

                        var resdata = res.data.data.records;
						

                        if (this.pullDown == true) {
                            this.pullDown = false;
                            uni.stopPullDownRefresh();
@@ -152,7 +155,10 @@
                        data: {
                            current: 1,
                            size: 999999,
                            realName: str
                            realName: str,
                            dispatch: 0,
                            jurisdiction: this.$store.state
                                .UserData.jurisdiction,
                        },
                        success: (res) => {


 pages/user/center.vue

@@ -23,22 +23,22 @@
            </view>
            <!-- 操作按钮 -->
            <view class="nav">
                <navigator url="" hover-class="none" class="nav-item">
    <!--             <navigator url="" hover-class="none" class="nav-item">
                    <image src="/static/images/user/n1.png" class="icon" mode=""></image>
                    <view class="name">我的消息</view>
                </navigator>
                <navigator url="" hover-class="none" class="nav-item">
                    <image src="/static/images/user/n2.png" class="icon" mode=""></image>
                    <view class="name">我的待办</view>
                </navigator>
                </navigator> -->
                <navigator url="" hover-class="none" class="nav-item">
                    <image src="/static/images/user/n3.png" class="icon" mode=""></image>
                    <view class="name">我的地址</view>
                </navigator>
                <navigator url="" hover-class="none" class="nav-item">
                <!-- <navigator url="" hover-class="none" class="nav-item">
                    <image src="/static/images/user/n4.png" class="icon" mode=""></image>
                    <view class="name">我的收藏</view>
                </navigator>
                </navigator> -->
            </view>
        </view>
        <!-- 功能列表 -->
@@ -60,9 +60,9 @@
                <!-- <u-cell-item title="推荐">
                    <image slot="icon" src="/static/images/user/c4.png" class="icon" mode=""></image>
                </u-cell-item> -->
                <u-cell-item title="评分">
                <!-- <u-cell-item title="评分">
                    <image slot="icon" src="/static/images/user/c5.png" class="icon" mode=""></image>
                </u-cell-item>
                </u-cell-item> -->
                <u-cell-item title="隐私">
                    <image slot="icon" src="/static/images/user/c6.png" class="icon" mode=""></image>
                </u-cell-item>

 pages/videoCall/mylyg.vue

 pages/videoCall/videoCall - f.vue

 pages/videoCall/videoCall.nvue

@@ -225,6 +225,7 @@
            // this.init();
        },
        onLoad(option) {

            var that = this;
            that.toName = option.toname;
            that.callname = option.callname;
@@ -235,6 +236,9 @@
                return
            }
            console.log(option.state);
			
		

            if (option.state == "Mains") {

                that.jieshouid = option.toname;
@@ -270,8 +274,17 @@
                                icon: 'none'
                            });
                            setTimeout(res => {
                                uni.navigateBack();
                                // console.log(111)
								
                                let routes = getCurrentPages();
								
                                let curRoute = routes[routes.length - 1].route;
								
                                if(curRoute.indexOf('/videoCall/videoCall') != -1) {
									
                                    uni.navigateBack();
									
                                }
								
                            }, 2000)

                        } else if (d.res == 1) {
@@ -279,7 +292,6 @@
                            console.log('对方在线-- 等待对方接受', d);
                            // call = true;
                            setTimeout(res => {
                                // uni.navigateBack();
                                // console.log(111)
                                that.join();
                                console.log('成功进入')
@@ -288,57 +300,6 @@
                    }
                })


                uni.onSocketMessage(function(res) {
                    console.log(res.data);
                    var data = JSON.parse(res.data)
                    // if (call && ) {

                    // }
                    // console.log(that,1111111111111)
                    if (data.type == 'close') {

                        console.log('对方已挂断');
                        // RtcModule.leaveChannel((res) => {});
                        // that.closeAll();
					
						
						
                        RtcModule.leaveChannel((res) => {
                            console.log('成功退出房间');
                            // uni.navigateBack();
                        })
                        // await RtcModule.destroyRtc((res) => {});
                        that.videoShow = false; //视频展示
                        // this.videoShowBg = true; //背景展示
                        that.promptText = "loading...";
						
                        that.PeerVideoUser = []; //远端用户加入存储
                        // 本地
                        that.audioSwitch = "open"; //音频开关 
                        that.vedioSwitch = "open"; //视频开关
                        // 重新创建实例
                        that.init();
                        // 如果需要跳转其它页面请按下边步骤
                        // await uni.redirectTo({
                        // url: '..',
                        // uni.showToast({
                        //     title: '正在退出视频',
                        //     duration: 2000,
                        //     icon: 'none'
                        // });
                        // success: () => {
						
                        // uni.navigateBack();
                        RtcModule.destroyRtc((res) => {
                            console.log("页面销毁", res.code);
                            console.log('成功销毁')
                            // uni.navigateBack();
                        });
                            uni.navigateBack();
						
                    }
                });


                // }, 5000)
@@ -351,7 +312,57 @@
                that.jieshouid = that.$store.state.puserID;
                that.init();
                that.isMain = false;




            }



            uni.onSocketMessage(function(res) {
                console.log(res.data);
                var data = JSON.parse(res.data)
                // if (call && ) {

                // }
                // console.log(that,1111111111111)


                if (data.type == 'close') {

                    // await RtcModule.destroyRtc((res) => {});
                    that.videoShow = false; //视频展示
                    // this.videoShowBg = true; //背景展示
                    that.promptText = "loading...";

                    that.PeerVideoUser = []; //远端用户加入存储
                    // 本地
                    that.audioSwitch = "open"; //音频开关 
                    that.vedioSwitch = "open"; //视频开关

                    RtcModule.leaveChannel((res) => {
                    })

                    RtcModule.destroyRtc((res) => {
                    });
					
                    let routes = getCurrentPages();
					
                    let curRoute = routes[routes.length - 1].route;
					
                    if(curRoute.indexOf('/videoCall/videoCall') != -1) {
						
                        uni.navigateBack();
						
                    }

                }

            });



        },

        watch: {
@@ -474,19 +485,22 @@
            },
            // 等待时候挂断
            phoneFnMain() {
                // RtcModule.leaveChannel((res) => {});
                console.log("等待时候挂断");
                uni.navigateBack();
                // this.closeAll();

                var data = {
                    sentId: this.faqiid,
                    acceptId: this.jieshouid
                }

                uni.request({
                    url: this.$store.state.api + '/pushMsg/closeVideoCall',
                    data: data,
                    success: (res) => {
                        // RtcModule.leaveChannel((res) => {});
                        // this.closeAll();
                        console.log(res, '成功关闭');

                        this.closeAll();

                    }
                })

            },
            joinit() { //接受进入视频
                // 传输接受的值
@@ -497,50 +511,41 @@
            //拒绝进入视频
            comeBack() {


                // 传输拒绝的值


                console.log("拒绝进入视频");
                uni.navigateBack();
                var data = {
                    sentId: this.faqiid,
                    acceptId: this.jieshouid
                }
                // uni.navigateBack();

                uni.request({
                    url: this.$store.state.api + '/pushMsg/closeVideoCall',
                    data: data,
                    success: (res) => {
                        // RtcModule.leaveChannel((res) => {});
                        // this.closeAll();
                        console.log(res, '成功关闭');

                        this.closeAll();

                    }
                })

                // RtcModule.leaveChannel((res) => {});
                // this.closeAll();
            },

            // 挂断 离开
            phoneFn() {
                //离开频道
                // RtcModule.leaveChannel((res) => {});
                // this.closeAll();

                var data = {
                    sentId: this.faqiid,
                    acceptId: this.jieshouid
                }
                uni.navigateBack();

                uni.request({
                    url: this.$store.state.api + '/pushMsg/closeVideoCall',
                    data: data,
                    success: (res) => {
                        // RtcModule.leaveChannel((res) => {});
                        // this.closeAll();
                        console.log(res, '成功关闭');

                        this.closeAll();

                    }
                })

            },

            //添加本地视频到页面
@@ -696,13 +701,7 @@
                return this.userName;
            },
            // 离开清空
            async closeAll() {
                // 销毁实例
                // uni.navigateBack();
                await RtcModule.leaveChannel((res) => {
                    // uni.navigateBack();
                })
                // await RtcModule.destroyRtc((res) => {});
            closeAll() {
                this.videoShow = false; //视频展示
                // this.videoShowBg = true; //背景展示
                this.promptText = "loading...";
@@ -711,26 +710,26 @@
                // 本地
                this.audioSwitch = "open"; //音频开关 
                this.vedioSwitch = "open"; //视频开关
                // 重新创建实例
                await this.init();
                // 如果需要跳转其它页面请按下边步骤
                // await uni.redirectTo({
                // url: '..',
                // uni.showToast({
                //     title: '正在退出视频',
                //     duration: 2000,
                //     icon: 'none'
                // });
                // success: () => {
				

                // uni.navigateBack();
                RtcModule.leaveChannel((res) => {
                })

                RtcModule.destroyRtc((res) => {
                    console.log("页面销毁", res.code);
                    console.log('成功关闭')
                    // uni.navigateBack();
                });
                // }
                // });
				
				
                let routes = getCurrentPages();
				
                let curRoute = routes[routes.length - 1].route;
				
                if(curRoute.indexOf('/videoCall/videoCall') != -1) {
					
                    uni.navigateBack();
					
                }

            },
            //查看授权

 static/images/group/Group.png

 static/images/group/addimage.png

 static/images/group/close.png

 static/images/group/create.png

 static/images/group/groupchat.png

 static/images/group/manager.png

 static/images/manage/g10.png

 static/images/manage/g11.png

 static/images/manage/g12.png

 static/images/manage/g7.png

 static/images/manage/g8.png

 static/images/manage/g9.png

 static/images/people.jfif

Binary files differ

 static/images/people.png

 static/images/tabbar/call.png

 static/images/tabbar/job.png

 static/images/tabbar/select-call.png

 static/images/tabbar/select-job.png

 static/tabbar/article.png

 static/tabbar/articleH.png

 static/tabbar/business.png

 static/tabbar/businessH.png

 static/tabbar/home.png

 static/tabbar/homeHL.png

 static/tabbar/index-03.png

 static/tabbar/index01.png

 static/tabbar/index02.png

 static/tabbar/index04.png

 static/tabbar/investigation.png

 static/tabbar/investigation22.png

 static/tabbar/investigationH.png

 static/tabbar/investigationH22.png

 static/tabbar/map.png

 static/tabbar/mapHL.png

 static/tabbar/my-blue.png

 static/tabbar/my.png

 static/tabbar/patrol-blue.png

 static/tabbar/patrol.png

 static/tabbar/user.png

 static/tabbar/userHL.png

 static/tabbar/workbench.png

 static/tabbar/workbenchH.png

 static/workbench/addressbook.png

 static/workbench/bracket.png

 static/workbench/daka.png

 static/workbench/feedback01.png

 static/workbench/huojian.png

 static/workbench/luxian.png

 static/workbench/myself.png

 static/workbench/policeDerails/guanbiimg.png

 static/workbench/policeDerails/shiping11.png

 static/workbench/policeDerails/xiangji.png

 static/workbench/report.png

 static/workbench/system.png

 static/workbench/task.png

 static/workbench/task1.png

 static/workbench/task2.png

 static/workbench/task3.png

 static/workbench/task4.png

 static/workbench/update.png

 static/workbench/user01.png

 store/actions.js

@@ -65,72 +65,57 @@
                    // data.userPhon = res.user_id;


						
						


                    // 实时定位获取得方法

                    uni.getLocation({
                        type: 'gcj02',
                        geocode: true,
                        success: function(wzres) {
                            uni.request({
                                url: "http://223.82.109.183:2080/api/liveLocation/saveLiveLocationAndLocus",
                                method: "post",
                                data: {
                                    type: 1,
                                    workerId: res.data.user_id,
                                    longitude: wzres.longitude,
                                    latitude: wzres.latitude,
                                    location: wzres.address.country +
                                        wzres.address.province + wzres
                                        .address.city + wzres.address
                                        .district + wzres.address
                                        .street + wzres.address
                                        .streetNum
                                }
                            })
                        }
                    });

                    setInterval(function() {

                        uni.request({
                            type: "get", //接口规定，只能用get
                            async: true, //异步
                            url: "https://apis.map.qq.com/ws/location/v1/ip?key=7WKBZ-QDY62-WEEUG-C7KUN-ADAF5-L5BKZ", //接口地址
                            data: {
                                output: "jsonp"
                            }, //参数格式必须用到output传参为jsonp，否则会报跨域问题
                            dataType: "jsonp",
                        uni.getLocation({
                            type: 'gcj02',
                            geocode: true,
                            success: function(wzres) {

                                if (wzres.data.result) {

                                    uni.request({
                                        url: "http://223.82.109.183:2080/api/liveLocation/saveLiveLocationAndLocus",
                                        method: "post",
                                        data: {
                                            type: 1,
                                            workerId: res.data.user_id,
                                            longitude: wzres.data.result
                                                .location.lng,
                                            latitude: wzres.data.result
                                                .location.lat,
                                            location: wzres.data.result
                                                .ad_info
                                                .province + wzres.data
                                                .result.ad_info
                                                .city +
                                                wzres.data
                                                .result
                                                .ad_info.district + '测试'
                                        }
                                    })

                                } else {
                                    var wzdata = JSON.parse(wzres.data.substring(13,
                                        wzres.data
                                        .length - 1));

                                    uni.request({
                                        url: "http://223.82.109.183:2080/api/liveLocation/saveLiveLocationAndLocus",
                                        method: "post",
                                        data: {
                                            type: 1,
                                            workerId: res.data.user_id,
                                            longitude: wzdata.result
                                                .location.lng,
                                            latitude: wzdata.result.location
                                                .lat,
                                            location: wzdata.result.ad_info
                                                .province + wzdata.result
                                                .ad_info.city +
                                                wzdata
                                                .result
                                                .ad_info.district
                                        }
                                    })
                                }

                                uni.request({
                                    url: "http://223.82.109.183:2080/api/liveLocation/saveLiveLocationAndLocus",
                                    method: "post",
                                    data: {
                                        type: 1,
                                        workerId: res.data.user_id,
                                        longitude: wzres.longitude,
                                        latitude: wzres.latitude,
                                        location: wzres.address.country +
                                            wzres.address.province + wzres
                                            .address.city + wzres.address
                                            .district + wzres.address
                                            .street + wzres.address
                                            .streetNum
                                    }
                                })
                            }
                        })

                        });

                    }, 30000)


 store/index.js

@@ -17,7 +17,7 @@
const store = new Vuex.Store({
    // 下面这些值仅为示例，使用过程中请删除
    state: {
		

        // 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
        userInfo: lifeData.userInfo ? lifeData.userInfo : {
            avatar: '',
@@ -36,42 +36,40 @@
        piAPI: 'http://223.82.109.183:2080/api',
        api: 'http://223.82.109.183:2080/api',
        // piAPI: 'http://localhost:81/',
        // piAPI: 'http://192.168.0.108:81',
        // piAPI: 'http://192.168.0.103:81',
        puserName: '',
        puserID: '',
        puserIphone:'',
        avatar:"../../static/logo.png",
        puserIphone: '',
        avatar: "../../static/logo.png",
        UserData: {},
        tabbar:[{
                iconPath: "/static/tabbar/index01.png",
                selectedIconPath: "/static/tabbar/index02.png",
                text: '首页',
                pagePath: "/pages/home/home"
        tabbar: [{
                pagePath: "pages/home/home",
                iconPath: "static/images/tabbar/home.png",
                selectedIconPath: "static/images/tabbar/home_selected.png",
                text: "首页"
            },
            {
                iconPath: "/static/tabbar/article.png",
                selectedIconPath: "/static/tabbar/articleH.png",
                text: '资讯',
                pagePath: "/pages/article/article"
                pagePath: "pages/groupChat/groupChat",
                iconPath: "static/images/tabbar/demo.png",
                selectedIconPath: "static/images/tabbar/demo_selected.png",
                text: "聊天"
            },
            {
                iconPath: "/static/tabbar/workbench.png",
                selectedIconPath: "/static/tabbar/workbenchH.png",
                text: '工作台',
                count: 2,
                isDot: false,
                pagePath: "/pages/business/business"
                pagePath: "pages/manage/manage",
                text: "工作台",
                iconPath: "static/tabbar/workbench.png",
                selectedIconPath: "static/tabbar/workbenchH.png"
            },
            {
                iconPath: "/static/tabbar/my.png",
                selectedIconPath: "/static/tabbar/my-blue.png",
                text: '我的',
                pagePath: "/pages/myself/myself"
            },
                pagePath: "pages/user/center",
                iconPath: "static/images/tabbar/user.png",
                selectedIconPath: "static/images/tabbar/user_selected.png",
                text: "我的"
            }
        ]
    },
    mutations: mutations,
    actions:actions
    actions: actions
})

export default store

 store/mutations.js

@@ -47,44 +47,99 @@
            state.avatar = data.avatar;
        }
        console.log('登入数据传输成功  开始进入连接')
		

        var url = 'ws://223.82.109.183:2086/websocket';

        uni.connectSocket({
            url: 'ws://223.82.109.183:2086/websocket'
            url: url
            // url: 'ws://192.168.0.111:2086/websocket'
        });

        var socketOpen = false;

        var heartbeatInterval = null;
        var reconnect = null;



        uni.onSocketOpen(function(res) {
            socketOpen = true;
            console.log('持续连接成功')

            if (reconnect && reconnect != null) {
                clearInterval(reconnect)
            }

            sendSocketMessage();

            // 5秒发送一次心跳
            heartbeatInterval = setInterval(() => {

                console.log('发送心跳中')

                uni.sendSocketMessage({
                    data: 'ping'
                });

            }, 5000)

        });
		


        // 监听连接失败
        uni.onSocketError(function(res) {
            console.log('WebSocket连接打开失败，请检查！');
            //停止发送心跳

            if (heartbeatInterval && heartbeatInterval != null) {
                clearInterval(heartbeatInterval)
            }
            //如果不是人为关闭的话，进行重连
            // if (!_this.isSocketClose) {}
            reconnect = setInterval(() => { // 断线重连

                console.log(`断线重连中...123`)
                // 连接
                uni.connectSocket({
                    url: url,
                });

            }, 3000)
        });




        function sendSocketMessage() {
            var data = {
                        // type: state.puserName,
                        id: state.puserID,
                        type: 'login'
                    }
                // type: state.puserName,

                id: state.puserID,
                type: 'login'
            }

            if (socketOpen) {
                uni.sendSocketMessage({
                    data: JSON.stringify(data)
                });
            }
        }
		

        uni.onSocketMessage(function(res) {
            console.log(res.data);
            var data  = JSON.parse(res.data)
            var data = JSON.parse(res.data)
            if (data.type == 'video') {
                // this.receiveVideo('Receiver', );
                console.log('进入接受 跳转',data.type)
                console.log('进入接受 跳转', data.type)
                uni.navigateTo({
                    url: '../videoCall/videoCall?state=Receiver&type=' + data.type +'&room=' + data.roomId + '&name=' + data.name + '&faqiid=' + data.faqiid
                    url: '../videoCall/videoCall?state=Receiver&type=' + data.type + '&room=' + data
                        .roomId + '&name=' + data.name + '&faqiid=' + data.faqiid
                });
            }
            // console.log('收到服务器内容：' + res.data);
        });
		


        //储存用户
        WxStorage.set("init", "true");
        WxStorage.set("name", data.userName);

 vue.config.js

@@ -12,7 +12,7 @@
    //       '/api': {
    //         //本地服务接口地址
    //         // target: 'http://localhost',
    //         // target: 'http://192.168.0.114:81',//钟W
            // target: 'http://192.168.0.114:81',//钟W
    //         target: 'http://192.168.0.109:81',//tangW
    //         // target: 'http://192.168.0.104:80',//唐N
    //         //远程演示服务地址,可用于直接启动项目