liaotian/pages/circle/mycircle.vue

<template>


    <view id="moments" class="page">
        <view class="back" @tap="back()">
            <image src="../../static/img/back.png"></image>
        </view>
        <view class="home-pic">
            <image :src="my_data.circle_img" @tap="upload" 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="sign" v-if="my_data.signature">{{my_data.signature}}</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">
                    <text class="post-username" @tap="goDetails(post.uid)">{{post.username}}</text>
                    <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_cache(image)"
                                @tap="previewImage(index,index_images)" />
                        </view>
                    </view>

                    <!-- 资料条 -->
                    <view class="toolbar">
                        <view class="timestamp">{{ timestamp(post.time) }}
                            <view class="delete" v-if="post.userid==meid" @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>
                            <text class="nickname" v-for="(user,index_like) in post.like" :key="index_like"
                                @tap="goDetails(user.uid)">
                                {{(index_like ? ',' : '' ) + user.username}}
                            </text>
                        </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==meid"
                                    @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>
    </view>

</template>

<script>
    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
        },
        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: '',
                page: 1,
                meid: uni.getStorageSync('access_token'),


            }
        },
        created() {
            this.my_data = {
                id: uni.getStorageSync('access_token'),
                nickname: this.$store.state.userinfo.nickname,
                photo: '../../static/logo.png',
                circle_img: '../../static/img/default_circle_img.jpg',
                signature: '',
            }
        },
        computed: {
            myPhoto() {
                return this.my_data.photo + '?_=' + this.imgRan;
            },
            circleImg() {

                return this.my_data.circle_img;
            },
            staticPath() {
                return config.imgUri;
            },
            staticPhoto() {
                return _data.staticPhoto();
            },
            imgRan() {
                return Math.random();
            },
            


        },
        onLoad(option) {
            let _this = this;
            this.myid = option.id;

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

        },
        onShow() {

            let _this = this;

            _this.pullDownRefresh();


            // 监听窗口尺寸变化,窗口尺寸不包括底部导航栏




        },
        onUnload() {


            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() { //监听下拉刷新动作

            this.pullDownRefresh();
        },
        onNavigationBarButtonTap(e) { //监听标题栏点击事件
            if (e.index == 0) {
                this.navigateTo('./circle/send');
            }
        },
        methods: {
            back() {
                uni.navigateBack();
            },
            photo(path) {
                if (path.indexOf('http') <= -1) path = config.imgUri + path;
                return path;
            },
            timestamp(time) {
                return action.timestampFormat(time);
            },
            upload(e) {
                if (this.myid != uni.getStorageSync('access_token')) return false;

                uni.chooseImage({
                    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 that = this;

                api.getMyCircle({
                    page: this.page,
                    userid: this.myid
                }).then(res => {
                    this.posts.push(...res.data);
                    if (res.data.length < 20) {
                        this.loadMoreText = '没有更多数据了';
                        this.is_more = true;
                    } else {

                        this.page++;
                    }

                })

            },

            setCircleData(data) {
                var list11 = [];
                for (var i = 0; i < data.length; 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);

                    list11.push(item);
                }

                this.posts = 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: this.myid
                }).then(res => {
                    _this.my_data.id = res.data.id;
                    _this.my_data.nickname = res.data.nickname;

                    _this.my_data.photo = res.data.avatar;
                    if (res.data.circle_img != null) {
                        this.my_data.circle_img = this.image_cache(res.data.circle_img);

                    }

                    this.my_data.signature = res.data.sign;
                })
            },

            pullDownRefresh() {
                let _this = this;
                //初始化数据
                this.getUserInfo();
                this.onGetData();

                uni.stopPullDownRefresh();
            },
            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.socket_push(_this.posts[index].id, 'delete', _this.posts[
                                        index].userid, 0);
                                    _this.posts.splice(index, 1);

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

            comment_delete(index, index1) {
                let _this = this
                var id = _this.posts[index].id;
                console.log(index1);
                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.posts[index].comment.splice(index1, 1);

                                    _this.socket_push(_this.posts[index].id, 'delete', _this.posts[
                                        index].userid, 0);
                                } 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;
                            }
                        }

                    }

                    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;
                }
            },

            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();

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

    .sign {
        display: block;
        padding-right: 190upx;
        margin-top: -65upx;
        min-height: 50upx;
        line-height: 50upx;
        font-size: 24upx;
        color: #666;

        text-align: right;
    }

    .back {
        position: fixed;
        top: 50upx;
        left: 10upx;
        z-index: 10000;
        height: 150upx;
        width: 150upx;
    }

    .back image {
        height: 40upx;
        width: 20upx;
        margin-left: 20upx;
    }
</style>