好友功能完善

zengh

2021-08-18 92ce829b01b8de06a6fd4840bff309330aa50731

好友功能完善

 pages.json

@@ -94,6 +94,12 @@
            }
        },
        {
            "path" : "pages/groupChat/addFriend",
            "style" : {
                "navigationStyle" : "custom"
            }
        },
        {
            "path": "pages/securityStaff/exhibition",
            "style": {
                "navigationBarTitleText": "保安管理",

 pages/groupChat/addFriend.vue

New file
@@ -0,0 +1,240 @@
<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="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> -->
            <view v-if="fempty" class="friendEmpty">
                <u-empty text="无搜索结果" mode="list"></u-empty>
            </view>
            <view class="requestr" v-for="(item, index) in requestList" :key="index">
                <view class="request-top">
                    <view class="reject btn"></view>
                    <view class="header-img">
                        <image :src="item.avatar" mode="" class="header-img" />
                    </view>
                    <view @click="aggree(item)" class="aggree btn">申请</view>
                </view>

                <view class="request-center">
                    <view class="title">{{ item.realName }}</view>
                    <view class="time">联系方式：{{ item.phone}}</view>
                </view>

                <view class="notic">
                    <text>留言：</text>
                    <u-input placeholder="请输入留言" v-model="item.bz"/>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
    import datas from '@/debugdate/debugdate.js'
    import filter from '@/config/filter.js'
    import WxStorage from "../../static/lib/wxStorage.js"
    export default {
        onLoad(option) {
        },
        data() {
            return {
                requestList: [],
                fempty:false,
                fvalue:"",
            };
        },

        methods: {
            // 返回键
            backOne() {
                uni.navigateBack({
                    delta: 1
                })
            },
            _FriendRequest() {
                this.requestList = datas.firendsRequest()
            },
            aggree(item) {
                var that = this;
                var date = that.currTime();
                uni.request({
                    url: this.$store.state.piAPI + "/friend/submit",
                    method: "POST",
                    data: {
                        applicant:WxStorage.get("ids"),
                        type: 0,
                        friend:item.friendid,
                        bz:item.bz,
                        time:date
                    },
                    success: (res) => {
                        uni.showToast({
                            title: '申请成功',
                            icon: "none",
                            duration: 1000
                        });
                    }
                });
            },
            currTime(){
                var date = new Date();
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var s = (date.getSeconds() < 10 ? '0' + date.getSeconds(): date.getSeconds());
                return Y + M + D + h + m + s;
            },
            search(value){
                var that = this;
                uni.request({
                    url: this.$store.state.piAPI + "/friend/addFriend",
                    method: "GET",
                    data: {
                        applicant: value,
                    },
                    success: (res) => {
                        var resdata = res.data.data.records;
                        for (var i = 0; i < resdata.length; i++) {
                            if (resdata[i].avatar == null || resdata[i].avatar == "") {
                                resdata[i].avatar = "http://s16s652780.51mypc.cn/img/bg/img-logo.png";
                            }
                        }
                        that.requestList = resdata;
                        if(resdata.length == 0){
                            that.fempty = true;
                        }else{
                            that.fempty = false;
                        }
                    }
                });
            },
			
        },
        filters: {
            date(time) {
                return filter.date(time)
            }
        }
    }
</script>

<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;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

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

        .requestr {
            margin-top: 112rpx;
            padding: 32upx;
            background: rgba(255, 255, 255, 1);
            border-radius: 20upx;
            box-shadow: 0px 24rpx 64rpx -8rpx rgba(0, 0, 0, .1);

            .request-top {
                display: flex;
                flex-direction: row;

                .btn {
                    flex: none;
                    width: 160rpx;
                    height: 64rpx;
                    background: rgba(255, 93, 91, .1);
                    border-radius: 40rpx;
                    text-align: center;
                    font-size: 32upx;
                    font-weight: 400;
                    line-height: 64rpx;
                }

                .reject {
                    color: rgba(255, 93, 91, 1);
                    background-color: rgba(255, 255, 255, 0.1);
                }

                .aggree {
                    color: rgba(39, 40, 50, 1);
                    background-color: rgba(255, 228, 49, 1);
                }

                .header-img {
                    margin-top: -52rpx;
                    flex: auto;
                    text-align: center;

                    image {
                        width: 144rpx;
                        height: 144rpx;
                        border-radius: 50%;
                    }
                }

            }

            .request-center {
                text-align: center;
                padding-top: 20rpx;
                padding-bottom: 40rpx;

                .title {
                    font-size: 36rpx;
                    font-weight: 500;
                    color: rgba(39, 40, 50, 1);
                    line-height: 50rpx;
                }

                .time {
                    font-size: 24upx;
                    color: rgba(39, 40, 50, 0.4);
                    line-height: 34rpx;
                }

            }

            .notic {
                font-size: 28upx;
                color: rgba(39, 40, 50, 1);
                line-height: 40rpx;
                padding: 10px 32upx;
                border-radius: 20upx;
                background: rgba(243, 244, 246, 1);
            }
        }

    }
</style>

 pages/groupChat/friendrequest.vue

@@ -1,6 +1,6 @@
<template>
    <view class="content">
		

        <view class="top-bar">
            <view class="top-bar-left" @tap="backOne">
                <view class="back-img">
@@ -8,39 +8,35 @@
                </view>
            </view>
            <view class="top-bar-center">
                <text class="title">好友请求</text>
                <text class="title">好友申请</text>
            </view>
            <view class="top-bar-right">
                <view class="pice"></view>
            </view>
        </view>
		
        <view class="main">
			
            <view class="requestr" v-for="(item, index) in requestList"
                                                         :key="index">
				
            <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">

                <view class="request-top">
                    <view class="reject btn">拒绝</view>
                    <view @click="reject(item)" class="reject btn">拒绝</view>
                    <view class="header-img">
                        <image :src="item.head"
                                     mode="" 
                                     class="header-img"/>
                        <image :src="item.avatar" mode="" class="header-img" />
                    </view>
                    <view class="aggree btn">同意</view>
                    <view @click="aggree(item)" class="aggree btn">同意</view>
                </view>
				

                <view class="request-center">
                    <view class="title">{{ item.name }}</view>
                    <view class="time">{{ item.date | date }}</view>
                    <view class="title">{{ item.realName }}</view>
                    <view class="time">{{ item.time | date }}</view>
                </view>
				

                <view class="notic">
                    <text>留言：</text>
                    <text>{{ item.message }}</text>
                    <text>{{ item.bz }}</text>
                </view>
            </view>
			

        </view>
    </view>
</template>
@@ -48,19 +44,18 @@
<script>
    import datas from '@/debugdate/debugdate.js'
    import filter from '@/config/filter.js'
    import WxStorage from "../../static/lib/wxStorage.js"
    export default {
        onLoad(option) {
            friendApplication();
            this.friendApplication();
        },
        data() {
            return {
                requestList: []
            };
        },
        async onLoad() {
            this._FriendRequest()
        },
        methods:{

        methods: {
            // 返回键
            backOne() {
                uni.navigateBack({
@@ -70,7 +65,7 @@
            _FriendRequest() {
                this.requestList = datas.firendsRequest()
            },
            friendApplication(){
            friendApplication() {
                //获取所有好友申请
                uni.request({
                    url: this.$store.state.piAPI + "/friend/friendApplication",
@@ -79,46 +74,98 @@
                        applicant: WxStorage.get("ids")
                    },
                    success: (res) => {
                        var resdata = res.data.data;
                        debugger
                        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";
                            }
                        }
                        this.requestList = resdata;
                    }
                });
            },
            aggree(item) {
                var that = this;
                uni.request({
                    url: this.$store.state.piAPI + "/friend/submit",
                    method: "POST",
                    data: {
                        id: item.id,
                        type: 1
                    },
                    success: (res) => {
                        uni.showToast({
                            title: '操作成功',
                            icon: "none",
                            duration: 1000
                        });
                        that.friendApplication();
                    }
                });
            },
            reject(item) {
                var that = this;
                uni.request({
                    url: this.$store.state.piAPI + "/friend/submit",
                    method: "POST",
                    data: {
                        id: item.id,
                        type: 2
                    },
                    success: (res) => {
                        uni.showToast({
                            title: '操作成功',
                            icon: "none",
                            duration: 1000
                        });
                        that.friendApplication();
                    }
                });
            }
        },
        filters:{
        filters: {
            date(time) {
             return    filter.date(time)
                return filter.date(time)
            }
        }
    }
</script>

<style lang="scss">
@import '../../common/style/common.scss';
    @import '../../common/style/common.scss';

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

    .friendEmpty {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

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

        .requestr {
            margin-top: 112rpx;
            padding: 32upx;
            background: rgba(255, 255, 255, 1);
            border-radius: 20upx;
            box-shadow: 0px 24rpx 64rpx -8rpx rgba(0, 0, 0, .1);
			

            .request-top {
                display: flex;
                flex-direction: row;
				

                .btn {
                    flex: none; 
                    flex: none;
                    width: 160rpx;
                    height: 64rpx;
                    background: rgba(255, 93, 91, .1);
@@ -128,59 +175,60 @@
                    font-weight: 400;
                    line-height: 64rpx;
                }
				

                .reject {
                    color: rgba(255,93,91,1);
                    color: rgba(255, 93, 91, 1);
                    background-color: rgba(255, 93, 91, .1);
                }
				

                .aggree {
                    color: rgba(39,40,50,1);
                    background-color: rgba(255,228,49,1);
                    color: rgba(39, 40, 50, 1);
                    background-color: rgba(255, 228, 49, 1);
                }
				

                .header-img {
                    margin-top: -52rpx;
                    flex: auto;
                    text-align: center;

                    image {
                        width: 144rpx;
                        height: 144rpx;
                        border-radius: 50%;
                    }
                }
				

            }
			

            .request-center {
                text-align: center;
                padding-top: 20rpx;
                padding-bottom: 40rpx;
				

                .title {
                    font-size: 36rpx;
                    font-weight: 500;
                    color: rgba(39,40,50,1);
                    color: rgba(39, 40, 50, 1);
                    line-height: 50rpx;
                }
				

                .time {
                    font-size: 24upx;
                    color: rgba(39,40,50,0.4);
                    color: rgba(39, 40, 50, 0.4);
                    line-height: 34rpx;
                }
				

            }
			

            .notic {
                font-size: 28upx;
                color: rgba(39,40,50,1);
                color: rgba(39, 40, 50, 1);
                line-height: 40rpx;
                padding: 10px 32upx;
                border-radius: 20upx;
                background: rgba(243,244,246,1);
                background: rgba(243, 244, 246, 1);
            }
        }
		

    }
</style>

 pages/groupChat/groupChat.vue

@@ -6,9 +6,9 @@

        <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;left: -20rpx;" :is-fixed="false" :border-bottom="false" :is-back="false"
            <u-navbar style="position: relative;left: -18rpx;" :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>
                <image @click="addFriend" slot="right" src="../../static/add.png" class="message-icon" mode="widthFix"></image>
            </u-navbar>
            <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>
@@ -216,6 +216,11 @@
                uni.navigateTo({
                    url: '/pages/groupChat/friendrequest?'
                });
            },
            addFriend(){
                uni.navigateTo({
                    url: '/pages/groupChat/addFriend?'
                });
            }
        },
        mounted() {
@@ -337,7 +342,7 @@
    }

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

 static/add.png

 static/wjg.png