liaotian/pages/circle/circle.vue

<template>
    <view id="moments" class="page">

        <view class="home-pic">
            <image :src="photo(my_data.circle_img)" @tap="uploadBefore" style="width: 100vw;height:65vw;"></image>
            <view class="home-pic-base">
                <view class="top-pic">
                    <image class="header" :src="image_cache(myPhoto)" @tap.stop="goDetails(my_data.id)"
                        :lazy-load="true" />
                </view>
                <view class="top-name">{{ my_data.nickname }}</view>
            </view>
        </view>

        <view class="new_msg" style="color: #333333;" @tap="goCircleChat" v-if="no_reader_msg">你有<view
                style="color: #ff0000;display: inline;">{{no_reader_msg}}条</view>新的消息</view>

        <view class="moments__post1" v-for="(post,index) in posts" :key="index" :id="'post-'+index">
            <view class="moments__post">
                <view class="post-left">
                    <image class="post_header" :src="image_cache(post.header_image)" @tap="goDetails(post.userid)"
                        :lazy-load="true" />
                </view>

                <view class="post_right">
                    <view class="post-username" @tap="goDetails(post.uid)">{{post.username}}</view>
                    <view id="paragraph" class="paragraph" @tap="init_input()">{{post.content.text}}</view>

                    <!-- 相册 -->
                    <view class="thumbnails" v-if="post.type == 0" @tap="init_input()">
                        <view :class="post.content.value.length === 1 ? 'my-gallery' : 'thumbnail' "
                            v-for="(image, index_images) in post.content.value" :key="index_images">
                            <image class="gallery_img" :lazy-load="true" mode="aspectFill"
                                :src="image_cache(staticPath  + image)" :data-src="image"
                                @tap="previewImage(index,index_images)" />
                        </view>
                    </view>

                    <!-- 资料条 -->
                    <view class="toolbar">
                        <view class="timestamp">{{ post.timestamp }}
                            <view class="delete" v-if="post.userid==myid" @tap="circle_delete(index)">删除</view>
                        </view>
                        <view class="like" @tap="like(index)">
                            <image
                                :src="post.islike === 0 ? '../../static/push/circle/islike.png' : '../../static/push/circle/like.png'"
                                :lazy-load="true" />
                        </view>
                        <view class="comment" @tap="comment(index)">
                            <image src="../../static/push/circle/comment.png" :lazy-load="true"></image>
                        </view>
                    </view>
                    <!-- 赞／评论区 -->
                    <view class="post-footer">
                        <view class="footer_content" v-if="post.like.length">
                            <image class="liked" src="../../static/push/circle/liked.png" :lazy-load="true"></image>
                            <view class="nickname" v-for="(user,index_like) in post.like" :key="index_like"
                                @tap="goDetails(user.uid)">
                                {{(index_like ? ',' : '' ) + user.username}}
                            </view>
                        </view>
                        <view class="footer_content" v-for="(comment,comment_index) in post.comment"
                            :key="comment_index" @tap="reply(index,comment_index)">

                            <view class="comment-nickname" style="word-break:break-all;line-height: 40upx;">
                                {{comment.username + comment.reply + ': '}}
                                <text class="comment-content">
                                    {{comment.content}}


                                </text>
                                <view class="delete" style="float: right;" v-if="comment.uid==myid"
                                    @tap="comment_delete(index,comment_index)">删除</view>
                            </view>

                        </view>


                    </view>

                </view>


            </view>


            <!-- 结束 post -->
        </view>
        <view class="foot" style="z-index: 999999;" v-show="showInput">

            <chat-input @send-message="send_comment" @blur="blur" :focus="focus"
                :placeholder="input_placeholder"></chat-input>
            <!-- <chat-input @send-message="send_comment" @blur="blur" :placeholder="input_placeholder"></chat-input> -->
        </view>
        <view class="loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
        <yk-authpup ref="WRITE_EXTERNAL_STORAGE" type="top" @changeAuth="changeAuth"
            permissionID="WRITE_EXTERNAL_STORAGE"></yk-authpup>  
    </view>

</template>

<script>
    import ykAuthpup from "@/components/yk-authpup/yk-authpup";
    import {
        mapState
    } from 'vuex';
    import chatInput from './circle/chat_input.vue'; //输入消息框
    import _data from "../../library/_data.js"

    import api from "../../library/index.js"
    import action from "../../library/action.js"
    import config from "../../config.js"
    import helper from "../../library/helper.js"
    export default {
        components: {
            chatInput,
            ykAuthpup
        },
        data() {
            return {
                my_data: {},
                user_id: 0,

                posts: [],
                index: '',
                comment_index: '',
                input_placeholder: '评论', //占位内容
                focus: false, //是否自动聚焦输入框
                is_reply: false, //回复还是评论
                showInput: false, //评论输入框
                screenHeight: '', //屏幕高度(系统)
                platform: '',
                windowHeight: '', //可用窗口高度(不计入软键盘)
                loadMoreText: "加载中...",
                showLoadMore: false,
                is_more: false,
                no_reader_msg: uni.getStorageSync('data_circle_tips') ? uni.getStorageSync('data_circle_tips') : 0,
                loaddata: [],
                myid: uni.getStorageSync('access_token'),
                userinfo: uni.getStorageInfoSync('userInfo'),
                page: 1,
            }
        },
        created() {
            this.my_data = {
                id: uni.getStorageSync('access_token'),
                nickname: this.userinfo.nickname,
                photo: '../../static/logo.png',
                circle_img: '../../static/img/default_circle_img.jpg',
            }
        },
        computed: {
            myPhoto() {
                return this.my_data.photo;
            },
            circleImg() {

                return this.my_data.circle_img;
            },
            staticPath() {
                return config.imgUri;
            },

            imgRan() {
                return Math.random();
            },

        },
        onLoad(option) {
            // let _this = this;

            // uni.getSystemInfo({ //获取设备信息
            // 	success: (res) => {
            // 		_this.screenHeight = res.screenHeight;
            // 		_this.platform = res.platform;
            // 	}
            // });
            //this.onGetData();
            this.onshowlisten();
        },
        onShow() {


            var _this = this;
            this.getUserInfo();
            var circle_data = _data.cache('circle_data');


            // console.log('onshow');
            /** 加载本地缓存数据，让页面秒速渲染出来 */
            if (circle_data) {
                setTimeout(function() {
                    _this.setCircleData(circle_data);
                }, 10);
                _this.pullDownRefresh();

            } else {
                _this.setCircleData([]);
                _this.pullDownRefresh();
            }


            console.log('+++');
        },
        onUnload() {
            this.$socket.off('data_circle_tips');
            this.$socket.off('circle_push');
            uni.offWindowResize(); //取消监听窗口尺寸变化
            this.max = 0,
                this.data = [],
                this.loadMoreText = "加载更多",
                this.showLoadMore = false;
        },


        onReachBottom() { //监听上拉触底事件
            let _this = this;
            _this.showLoadMore = true;
            if (_this.is_more) {
                return;
            }
            this.page++;

            this.onGetData();
        },
        onPullDownRefresh() { //监听下拉刷新动作
            if (_data.data('no_reader_circle') || _data.data('no_reader_circle_chat_num')) {
                this.posts = [];
                _data.data('circle_data', []);
            }
            this.pullDownRefresh();
        },
        onNavigationBarButtonTap(e) { //监听标题栏点击事件
            if (e.index == 0) {
                this.navigateTo('./circle/send');
            }
        },
        methods: {
            photo(path) {
                if (path.indexOf('http') <= -1) return path;
                else return this.image_cache(path)

            },
            onshowlisten() {
                this.no_reader_msg = uni.getStorageSync('data_circle_tips') ? uni.getStorageSync('data_circle_tips') :
                0;
                action.setStatusTips();
                _data.data('no_reader_circle', 0);

                // 监听窗口尺寸变化,窗口尺寸不包括底部导航栏
                uni.onWindowResize((res) => {
                    if (this.platform === 'ios') {
                        this.windowHeight = res.size.windowHeight;
                        this.adjust();
                    } else {
                        if (this.screenHeight - res.size.windowHeight > 60 && this.windowHeight <= res.size
                            .windowHeight) {
                            this.windowHeight = res.size.windowHeight;
                            this.adjust();
                        }
                    }
                });


                this.$socket.on('circle_push', (res) => { //更新朋友圈消息
                    action.circleUpate(res.data);
                    this.posts = _data.cache('circle_data');
                })



                /** 监听朋友圈动态提示 */
                this.$socket.on('data_circle_tips', function(res) {
                    if (!isNaN(res.data)) {
                        _this.no_reader_msg = res.data;
                    };
                    uni.setStorageSync('data_circle_tips', res.data);
                    action.setStatusTips();
                });
            },
            uploadBefore() {
                // #ifdef APP-PLUS
                if (plus.os.name == 'Android') {
                    return this.$refs['WRITE_EXTERNAL_STORAGE'].open()
                } else {
                    this.upload()
                }
                // #endif
                // #ifdef H5
                this.upload()
                // #endif
            },
            changeAuth() {
                this.upload()
            },
            upload(e) {


                uni.chooseImage({
                    sourceType: ['album'],
                    success: (chooseImageRes) => {
                        uni.showLoading();
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        helper.uploadFiles(tempFilePaths, 'image', {
                            type: 'avatar'
                        }).then(res => {

                            this.my_data.circle_img = res;
                            //  console.log(res);
                            var avatar = res.replace(config.imgUri, '');
                            api.changeProfile({
                                circle_img: avatar,
                                id: this.my_data.id
                            }).then(res => {
                                uni.hideLoading()
                                this.$toast('更新成功').then(() => {

                                });


                            });
                        })
                    }
                });

            },
            onGetData() {
                let time = 0;
                let circle_data11 = _data.localData('circle_data');

                if (circle_data11.length > 0) {
                    time = circle_data11[0].time;
                }
                let that = this;

                // _data.localData('circle_data',[])
                api.getCircleList({
                    userid: uni.getStorageSync('access_token'),
                    page: this.page
                }).then(res => {

                    if (this.page == 1) _data.addData('circle_data', res.data)
                    //  console.log(circle_data);
                    that.setCircleData(res.data);
                    //	uni.$emit('data_circle_data',circle_data);
                    if (res.data.length < 10) {
                        this.loadMoreText = '没有更多数据了';
                        this.is_more = true;
                        this.showLoadMore = true;
                    }

                })

            },

            setCircleData(data) {
                var list11 = [];
                var len = data.length;
                let circle_data11 = _data.localData('circle_data');

                if (circle_data11.length > 0 && this.page > 1) {
                    var time = circle_data11[circle_data11.length - 1].time;
                }


                // if(len>20) len=20;
                for (var i = 0; i < len; i++) {
                    var item = data[i];
                    if (item.like == false) item.like = [];
                    if (item.comment == false) item.comment = [];
                    item.timestamp = action.timestampFormat(item.time);
                    item.islike = this.setisLike(uni.getStorageSync('access_token'), item.like);
                    if (item.time < time || this.page == 1) list11.push(item);
                }
                if (this.page == 1) {
                    this.posts = list11;
                } else this.posts.push(...list11);
            },

            setisLike(id, data) {
                if (data.length == 0 || data == []) return 0;
                for (var i = 0; i < data.length; i++) {
                    if (data[i].uid == id) return 1;
                }
                return 0;
            },


            goCircleChat() {
                _data.data('no_reader_circle_chat_num', 0);
                this.navigateTo('./circle_chat_details');
            },
            getUserInfo() {
                let _this = this;
                api.getUserInfo({
                    friend_uid: uni.getStorageSync('access_token')
                }).then(res => {
                    _this.my_data.id = res.data.id;
                    _this.my_data.nickname = res.data.nickname;
                    var photo = res.data.avatar;
                    if (photo.indexOf('http') <= -1) photo = config.imgUri + photo;
                    _this.my_data.photo = photo;
                    if (res.data.circle_img != null) {
                        this.my_data.circle_img = this.image_cache(res.data.circle_img);

                    }

                })
            },

            pullDownRefresh() {
                var _this = this;
                //初始化数据


                // this.onGetData();

                setTimeout(function() {
                    _this.onGetData();
                }, 100);


                uni.stopPullDownRefresh(); //停止下拉刷新
                /** 取消好友动态提示 */
                _data.data('no_reader_circle', 0);
            },
            goDetails(user_id) {
                this.navigateTo('../friend/detail?id=' + user_id);
            },
            navigateTo(url) {
                uni.navigateTo({
                    url: url
                });
            },
            socket_push(id, action, userid, issend) {
                let data = {
                    type: 'circle_push',
                    id: id,
                    action: action,
                    fromid: uni.getStorageSync('access_token'),
                    userid: userid,
                    issend: issend
                }
                this.$socket.send(data);
            },
            circle_delete(index) {
                let _this = this
                uni.showModal({
                    title: '提示',
                    content: '确定要删除吗？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '删除',
                    success: res => {
                        if (res.confirm) {
                            var id = _this.posts[index].id;
                            api.CircleDelete({
                                id: id
                            }).then(res => {
                                if (res.data == 1) {
                                    _this.posts.splice(index, 1);
                                    _data.localData('circle_data', _this.posts);
                                    _this.socket_push(_this.posts[index].id, 'delete', _this.posts[
                                        index].userid, 0);
                                } else {
                                    uni.showModal({
                                        title: '网络连接失败'
                                    })
                                }
                            })
                        }
                    }
                });
            },

            comment_delete(index, index1) {
                let _this = this
                var id = _this.posts[index].id;
                console.log(id);
                uni.showModal({
                    title: '提示',
                    content: '确定要删除吗？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '删除',
                    success: res => {
                        if (res.confirm) {

                            api.CommentDelete({
                                id: id,
                                index: index1
                            }).then(res => {
                                if (res.data == 1) {
                                    this.socket_push(_this.posts[index].id, 'delete', _this.posts[
                                        index].userid, 0);
                                    _this.posts[index].comment.splice(index1, 1);

                                    _data.localData('circle_data', _this.posts);

                                } else {
                                    uni.showModal({
                                        title: '网络连接失败'
                                    })
                                }
                            })
                        }
                    }
                });
            },
            like(index) {

                let _this = this,
                    is_like = (_this.posts[index].islike ? 0 : 1);
                // console.log( _this.posts[index]);
                var data = {
                    id: _this.posts[index].id,
                    userid: uni.getStorageSync('access_token')
                };

                api.setCircleLike(data).then(res => {
                    var data = res.data;
                    _this.posts[index].islike = data.action;
                    if (data.action) {

                        _this.posts[index].like.push({
                            "uid": _this.my_data.id,
                            "username": _this.my_data.nickname,
                        });
                    } else {
                        let likes = [];
                        for (let i = 0, j = _this.posts[index].like.length; i < j; i++) {

                            if (parseInt(_this.posts[index].like[i].uid) == parseInt(uni.getStorageSync(
                                    'access_token'))) {
                                _this.posts[index].like.splice(i, 1);
                                break;
                            }
                        }

                    }
                    _data.localData('circle_data', _this.posts);
                    this.socket_push(_this.posts[index].id, 'like', _this.posts[index].userid, data.action);
                })



            },
            comment(index) {
                if (this.showInput) {
                    this.showInput = false;
                    this.focus = false;
                    this.index = '';
                } else {
                    this.showInput = true; //调起input框
                    this.focus = true;
                    this.index = index;
                }
            },
            adjust() { //当弹出软键盘发生评论动作时,调整页面位置pageScrollTo


            },
            reply(index, comment_index) {
                this.is_reply = true; //回复中
                this.showInput = true; //调起input框
                let replyTo = this.posts[index].comment[comment_index].username;
                this.input_placeholder = '回复' + replyTo;
                this.index = index; //post索引
                this.comment_index = comment_index; //评论索引
                this.focus = true;
            },
            blur: function() {
                //this.init_input();
            },
            send_comment: function(message) {
                let _this = this,
                    is_posts_obj = this.posts[this.index],
                    chat_user_id = is_posts_obj.userid,
                    reply = '';
                if (chat_user_id == undefined) chat_user_id = 0
                if (this.is_reply) {
                    let is_reply_obj = is_posts_obj.comment[this.comment_index];
                    chat_user_id = is_reply_obj.uid;
                    if (is_posts_obj.userid != chat_user_id) {
                        reply = '回复' + is_reply_obj.username;
                    }
                }
                var data = {
                    message,
                    id: is_posts_obj.id,
                    chat_user_id,
                    reply: reply,
                    uid: uni.getStorageSync('access_token')
                }


                api.setCircleComment(data).then(res => {
                    is_posts_obj.comment.push({
                        "uid": _this.my_data.id,
                        'reply': reply,
                        "username": _this.my_data.nickname,
                        "content": message
                    });
                    _this.init_input();
                    _data.localData('circle_data', _this.posts);
                    this.socket_push(_this.posts[this.index].id, 'comment', _this.posts[this.index].userid,
                        1);
                })


            },
            init_input() {
                this.showInput = false;
                this.focus = false;
                this.input_placeholder = '评论';
                this.is_reply = false;
            },
            previewImage(index, image_index) {
                let data = this.posts[index],
                    images_all = [];
                for (let i = 0, j = data.content.value.length; i < j; i++) {
                    images_all.push(this.image_cache(data.content.value[i]));
                }
                var current = images_all[image_index];
                uni.previewImage({
                    current: current,
                    urls: images_all
                });
            },
            goPublish() {
                uni.navigateTo({
                    url: './circle/send',
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            }
        },
        watch: {

        },
    }
</script>

<style scoped>
    @import url("../../static/css/circle.css");

    .new_msg {
        text-align: center;
        color: #333333;
        font-size: 32upx;
    }

    .inputbox {
        clear: both;
        width: 100%;
        display: flex;
    }

    .delete {
        display: inline-block;
        padding: 0px 20upx;
        color: #2319dc;
        font-size: 24upx;
    }
</style>