<template>
<!-- 物流圈 -->
<div id="logisticsGroup">
<div class="logisticsGroup flex column">
<div class="log_header">
<!-- <i class="iconfont icon-iconfontjiantou1" @click="goBack"></i> -->
<ul class="flex space-around">
<li :class="{'active': hobbyType == 1}" @click="changeHeader(1)">最新</li>
<li :class="{'active': hobbyType == 2}" @click="changeHeader(2)">附近</li>
<li :class="{'active': hobbyType == 3}" @click="changeHeader(3)">最热</li>
<li :class="{'active': hobbyType == 4}" @click="changeHeader(4)">视频</li>
<li class="flex itemCenter" @click="toChat">
<img src="../../../parkmall/images/toIM.png" alt="">
</li>
</ul>
</div>
<div class="classify">
<ul class="flex space-between">
<li :class="{'active': dynamicType== 5}" @click="selectClassify(5)">全部</li>
<li :class="{'active': dynamicType== 1}" @click="selectClassify(1)">杂谈</li>
<li :class="{'active': dynamicType== 2}" @click="selectClassify(2)">曝光</li>
<li :class="{'active': dynamicType== 3}" @click="selectClassify(3)">求助</li>
<li :class="{'active': dynamicType== 4}" @click="selectClassify(4)">众筹</li>
</ul>
</div>
<div class="allFlex">
<div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}" v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="50" infinite-scroll-immediate-check="false">
<v-loadmore :top-method="loadTop" :auto-fill="false" ref="loadmore">
<div class="contend" v-if="!hasEval && num">
<div class="item" v-for="(item,idx) in momentList">
<header>
<div class="layout-box media-graphic flex">
<img src="../../../parkmall/images/zs2.png" alt="" v-if="item.appUsers.faceUrl == null">
<img :src="item.appUsers.faceUrl" alt="" v-else>
<div class="box-col item-list">
<p class="ellipsis">
{{item.appUsers.name}}
</p>
<span>{{item.createTime}}</span>
</div>
<span class="ellipsis layout-address">{{item.itemAddress}}</span>
</div>
</header>
<section class="by-detail">
<div class="default-content">
{{item.itemText}}
<ul class="flex fwrap" v-if="item.imageList.length>0">
<li v-for="res in item.imageList" @click="bigImg(res.imagePath)">
<img :src="res.imagePath" alt="">
</li>
</ul>
<!-- <video class="contend_video" src="./images/video/linan.mp4" controls="controls"></video> -->
</div>
</section>
<footer class="more-detail">
<ul class="flex space-around">
<li @click="transmit(item.itemText)">
<i class="iconfont icon-icon_share"></i>
<em> 转发</em>
</li>
<li @click="commentCount(item)">
<i class="iconfont icon-pinglun"></i>
<em> {{item.itemCommentCount}}</em>
</li>
<li @click="dianzanEvent(idx,item.id)">
<i class="iconfont icon-dianzan" :class="{'active': item.likeStatus == 1}"></i>
<em :class="{'active': item.likeStatus == 1}"> {{item.itemLikeCount}}</em>
</li>
</ul>
</footer>
</div>
<div class="more_loadings" v-show="!queryLoading">
<div class="loadCircle" v-show="moreLoading&&!allLoaded"></div>
<span v-show="allLoaded">这是我的底线啦!!</span>
</div>
</div>
<logisticeEval v-if="hasEval" v-bind:evalItem="evalItem" v-on:bigImg="bigImg"></logisticeEval>
<div slot="top" class="mint-loadmore-top">
<img src="../../../parkmall/images/pullDown.gif" alt="" />
</div>
<h1 class="noData" v-if="hasData">暂无数据,快来抢占沙发吧~</h1>
</v-loadmore>
</div>
</div>
<div class="publishTip" v-if="hasPublish">
发布成功
</div>
<zoom ref="zoomImg"></zoom>
<transpond v-bind:shareTab="shareTab" v-bind:shareTitle="shareTitle" v-bind:shareUrl="shareUrl" v-on:hideTranspond="hideTranspond"></transpond>
<div class="publishBtn flex column itemCenter fCenter" @click="toPublish" v-if="!hasEval">
<i class="iconfont icon-bianji"></i>
<span>发布</span>
</div>
<xmask></xmask>
</div>
</div>
</template>
<script>
import axios from 'axios';
import base from '../../js/global.js';
import qs from 'qs';
import PhotoSwipe from '../../js/photoswipe.js';
import PhotoSwipeUI_Default from '../../js/photoswipe-ui-default.min.js';
import transpond from '../common/transpond.vue'; //微信和朋友圈转发
import zoom from '../common/bigImg.vue'; //放大图片
import xmask from '../xmask.vue';
import logisticeEval from './logisticeEval.vue'; //评论内容
import { Loadmore } from 'mint-ui';
export default {
data() {
return {
dianzanTab: 0, //点赞样式为1
options: {
index: 0,
},
shareTab: false,
momentList: [], //获取百驿圈动态内容
dynamicType: 5, //动态类型默认1（1、最新 2、附近 3、最热 4、视频 不传参数时为最新1）
hobbyType: 1, //偏好类型 （1、杂谈 2、曝光 3、求助 4、众筹 5查询全部）
hasEval: false,
num: 1,
evalItem: null, //当前评论的内容
hasPublish: false,
page: 1, //当前页码
pageSize: 6, //每页显示数
shareUrl: 'parkmall/#/logisticsGroup', //分享链接
shareTitle: null, //分享标题
scrollMode: "touch", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
moreLoading: false,
queryLoading: false,
allLoaded: false,
keyUpActive: null,
hasData: false,
}
},
methods: {
goBack() {
this.$store.state.tab = 2;
this.$router.go(-1);
// this.shareTab = true;
},
loadTop() { //组件提供的下拉触发方法
setTimeout(() => {
//下拉加载
this.$nextTick(function() {
// 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，
// 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，
// 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好
this.scrollMode = "touch";
});
this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
}, 1500)
},
loadMore() { //上拉加载
if(this.allLoaded) {
this.moreLoading = true;
return;
}
if(this.queryLoading) {
return;
}
this.moreLoading = !this.queryLoading;
this.page++;
this.getMoreMoments();
},
//切换选择
changeHeader(tab) {
this.hasEval = false;
this.hobbyType = tab;
this.getMoments();
},
// 切换分类
selectClassify(tab) {
this.hasEval = false;
this.dynamicType = tab;
this.getMoments();
},
/*放大图片*/
bigImg(src1) {
this.$refs['zoomImg'].$emit('zoomImg', src1); //触发放大图片的组件的事件
},
/*点赞事件*/
dianzanEvent(tab, idx) {
// this.momentList[tab].likeStatus = !this.momentList[tab].likeStatus;
if(this.momentList[tab].likeStatus == 1) {
this.momentList[tab].likeStatus = 0;
this.momentList[tab].itemLikeCount -= 1; /*评论数－1*/
} else {
this.momentList[tab].likeStatus = 1;
this.momentList[tab].itemLikeCount += 1; /*评论数+1*/
}
this.num
