renshou/office/index - 副本/index.vue

<template>
	<view>
		<!-- <view class="top" :style="'height:' + systems.barHeight + 'rpx;'">
			<view class="topc ddflex" :style="'line-height:' + systems.navigationHeight + 'rpx;margin-top:' + systems.ktxStatusHeight + 'rpx;'">
				<view :class="'li' + (currentTab == 0 ? ' active' : '')" @click="tabClick(0)">聊一聊</view>
				<view :class="'li' + (currentTab == 1 ? ' active' : '')" @click="tabClick(1)">树洞</view>
			</view>
		</view>
		<view :style="'height:' + systems.barHeight + 'rpx;'"></view> -->
		<block v-if="currentTab == 0">
			<view class="t-con">
				<scroll-view scroll-x="true" class="t-cons">
					<view class="item">
						<navigator url="/topics/index/index" hover-class="none" class="tits ddflex">
							<image src="../../static/images/hot.png" class="hot"></image>
							<view class="more ddflex">
								更多
								<image src="../../static/images/rico1.png"></image>
							</view>
						</navigator>
						<view class="item-list">
							<view class="li ddflex" v-for="(item, index) in hotTopicList" :key="index" @click="jumpUrl('/topics/detail/detail?topicId=' + item.id)">
								<text class="num">{{ index + 1 }}</text>
								<view class="fflex tover">{{ item.title }}</view>
								<text>{{ item.participantsNO }}参与</text>
							</view>
						</view>
					</view>
					<view class="item">
						<navigator url="/office/voteList/voteList" hover-class="none" class="tits ddflex">
							<image src="../../static/images/pk_ic.png" class="hot"></image>
							<view class="more ddflex">
								更多
								<image src="../../static/images/rico1.png"></image>
							</view>
						</navigator>
						<view class="item-list">
							<view class="li ddflex" v-for="(item, index) in hotPollList" :key="index" @click="jumpUrl('/office/detail/detail?contentId=' + item.momentsId)">
								<text class="num">{{ index + 1 }}</text>
								<view class="fflex tover">{{ item.title }}</view>
								<text>{{ item.participantsNO }}参与</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="tab ddflex">
				<view :class="'li ' + (pType == 1 ? 'active' : '')" @click="swiPType(1)">综合</view>
				<view :class="'li ' + (pType == 2 ? 'active' : '')" @click="swiPType(2)">最新</view>
				<view :class="'li ' + (pType == 5 ? 'active' : '')" @click="swiPType(5)">热门</view>
			</view>
			<view class="list" v-if="officeList && officeList.length > 0">
				<view class="li" v-for="(item, index) in officeList" :key="index">
					<view class="user ddflex">
						<image :src="item.userDTO.avatar" mode="aspectFill" class="userimg" @click="jumpUrl('/topics/home/home?userId=' + item.userDTO.id)"></image>
						<view class="fflex">
							<view class="namea ddflex">
								<view class="name fflex ddflex" @click="jumpUrl('/topics/home/home?userId=' + item.userDTO.id)">
									{{ item.userDTO.nickName }}
									<image v-if="item.userDTO.levelGrade > 0" src="../../static/images/vip_tag.png" class="vip-tag"></image>
								</view>
								<view class="time">{{ item.time }}</view>
							</view>
							<view class="area" @click="jumpUrl('/topics/home/home?userId=' + item.userDTO.id)" v-if="item.userDTO.cityName">
								{{ item.userDTO.provinceName }} {{ item.userDTO.cityName }}
							</view>
						</view>
					</view>
					<!-- 分享的动态 -->
					<block v-if="item.source">
						<view class="link ddflex" @click="jumpUrlDetail(item)">
							<block v-if="item.url&&item.url.length>0">
								<image
									mode="aspectFill"
									v-if="idx == 0"
									v-for="(it, idx) in item.url"
									:src="it ? it : '../../static/images/lj_img.png'"
									:key="idx"
								></image>
							</block>
							<view class="fflex tover"><rich-text :nodes="item.content"></rich-text></view>
						</view>
					</block>
					<!-- 非分享的动态 -->
					<block v-else>
						<view class="des tovers"><rich-text @click="jumpUrlDetail(item)" :nodes="item.content"></rich-text></view>
						<!-- //如果有投票，就不显示图片 -->
						<view class="imgbox ddflex" @click="jumpUrlDetail(item)" v-if="!item.qyPoll"><!-- @click="previewImgss(item.url, idx)" -->
							<block v-if="item.url&&item.url.length>0">
								<image mode="aspectFill" v-for="(it, idx) in item.url" :src="it" :key="idx"></image>
							</block>
						</view>
						<!-- 话题 -->
						<view class="ddflex" v-if="item.qyDialogu">
							<view class="topic ddflex" @click="jumpUrl('/topics/detail/detail?topicId=' + item.qyDialogu.id)">
								<image src="../../static/images/topic.png"></image>
								{{ item.qyDialogu.title }}
							</view>
						</view>
						<!-- 投票 -->
						<view :class="'vote-box' + (item.qyPoll.isEnd ? ' ends' : '')" v-if="item.qyPoll">
							<view class="vote-tit">{{ item.qyPoll.title }}</view>
							<block v-if="item.qyPoll.isVote == 1">
								<view class="vote-list end" @click="jumpUrlDetail(item)">
									<view :class="'lis ddflex  ' + (itpy.isVote == 1 ? 'active' : '')" v-for="(itpy, idex) in JSON.parse(item.qyPoll.optionJson)" :key="idex">
										<view class="percent" :style="'width:' + parseFloat(itpy.proportion) + '%;'"></view>
										<view class="fflex">{{ itpy.name }}</view>
										<view>{{ parseFloat(itpy.proportion) + '%' }}</view>
									</view>
								</view>
							</block>
							<block v-else>
								<view class="vote-list">
									<view class="lis" v-for="(itpy, idex) in JSON.parse(item.qyPoll.optionJson)" :key="idex" @click="submitPoll(item, index, idex)">
										{{ itpy.name }}
									</view>
								</view>
							</block>
							<view class="vote-can" v-if="item.qyPoll.isEnd"><text>{{item.qyPoll.voteCount}}人参与</text>投票已结束</view>
						</view>
					</block>
					<view class="opt ddflex" v-if="!item.source">
						<view class="fflex" @click="jumpUrlDetail(item)">{{ item.count.browseCount }}次浏览</view>
						<view class="ddflex" @click="submitFabulous(2, item.id, index)">
							<image :src="'../../static/images/' + (item.isPraise == 1 ? 'like_h' : 'like') + '.png'"></image>
							{{ item.count.fabulousCount < 99 ? item.count.fabulousCount : '99+' }}
						</view>
						<view class="ddflex" @click="jumpUrlDetail(item)">
							<image src="../../static/images/comment.png"></image>
							{{ item.count.commentCount < 99 ? item.count.commentCount : '99+' }}
						</view>
						<button open-type="share" class="opt-share ddflex">
							<image src="../../static/images/share.png"></image>
							分享
						</button>
					</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<image :src="picUrlss + 'empty_jl.png'"></image>
				<text>暂无动态</text>
			</view>

			<view class="create" @click="createJump('/office/news/news?newsType=1')">
				<image src="../../static/images/create.png"></image>
				发布
			</view>
			<!-- <view class="ceng" v-if="isShowbtn" @click="hideBtn"></view>
		<view class="side ddflex" v-if="isShowbtn">
			<navigator url="/office/news/news?newsType=1" hover-class="none" class="li">
				<image src="../../static/images/ll_dt.png"></image>
				<view>动态</view>
			</navigator>
			<navigator url="" hover-class="none" class="li">
				<image src="../../static/images/ll_cz.png"></image>
				<view>创作</view>
			</navigator>
		</view> -->
		</block>
		<block v-if="currentTab == 1">
			<view class="dong-t">
				<view class="bang">
					<image src="../../static/images/bang.png" class="bang-img"></image>
					<view class="tiwen ddflex">
						<view class="fflex">
							<view>30万+妈妈为你贴心解答</view>
							<view>1000+育儿导师护航</view>
						</view>
						<view @click="createJump('/office/news/news?newsType=2')" class="twbtn ddflex">
							点我提问
							<image src="../../static/images/rico2.png"></image>
						</view>
					</view>
					<swiper class="bang-c" autoplay="true" vertical="true" interval="3000" v-if="hotTopHoleOfficeList && hotTopHoleOfficeList.length > 0">
						<swiper-item v-for="(item, index) in hotTopHoleOfficeList" :key="index">
							<view class="bang-wen ddflex" @click="jumpUrlDetail(item)">
								<image :src="item.userDTO.avatar" mode="aspectFill"></image>
								<view class="fflex">{{ removeHtml(item.content) }}</view>
							</view>
						</swiper-item>
					</swiper>
					<!-- <view class="bang-wen ddflex">
						<image src="../../static/images/userimg.png" mode="aspectFill"></image>
						<view class="fflex">宝贝最近学习状态持续下降，导致学习成绩下降很快，我该怎么办？</view>
					</view> -->
				</view>
			</view>
			<view class="tab ddflex">
				<view :class="'li ' + (holeType == 1 ? 'active' : '')" @click="swiHoleType(1)">综合</view>
				<view :class="'li ' + (holeType == 2 ? 'active' : '')" @click="swiHoleType(2)">最新</view>
				<view :class="'li ' + (holeType == 5 ? 'active' : '')" @click="swiHoleType(5)">热门</view>
				<!-- <view class="li">求助</view> -->
				<view :class="'li ' + (holeType == 6 ? 'active' : '')" @click="swiHoleType(6)">精华</view>
			</view>
			<view class="list" v-if="holeOfficeList && holeOfficeList.length > 0">
				<view class="li" v-for="(item, index) in holeOfficeList" :key="index">
					<view class="user ddflex">
						<image :src="item.userDTO.avatar" mode="aspectFill" class="userimg" @click="jumpUrl('/topics/home/home?userId=' + item.userDTO.id)"></image>
						<view class="fflex">
							<view class="namea ddflex">
								<view class="name fflex ddflex" @click="jumpUrl('/topics/home/home?userId=' + item.userDTO.id)">
									{{ item.userDTO.nickName }}
									<image v-if="item.userDTO.levelGrade > 0" src="../../static/images/vip_tag.png" class="vip-tag"></image>
								</view>
								<view class="time">{{ item.time }}</view>
							</view>
							<view class="area" @click="jumpUrl('/topics/home/home?userId=' + item.userDTO.id)" v-if="item.userDTO.cityName">
								{{ item.userDTO.provinceName }} {{ item.userDTO.cityName }}
							</view>
						</view>
					</view>
					<!-- 分享的动态 -->
					<block v-if="item.source">
						<view class="link ddflex" @click="jumpUrlDetail(item)">
							<block v-if="item.url">
								<image
									mode="aspectFill"
									v-if="idx == 0"
									v-for="(it, idx) in item.url.split(',')"
									:src="it ? it : '../../static/images/lj_img.png'"
									:key="idx"
								></image>
							</block>
							<view class="fflex tover"><rich-text :nodes="item.content"></rich-text></view>
						</view>
					</block>
					<!-- 非分享的动态 -->
					<block v-else>
						<view class="des tovers" @click="jumpUrlDetail(item)">
							<view class="wen">提问</view>
							{{ removeHtml(item.content) }}
						</view>
						<!-- //如果有投票，就不显示图片 -->
						<view class="imgbox ddflex" @click="jumpUrlDetail(item)" v-if="!item.qyPoll"><!-- @click="previewImgss(item.url.split(','), idx)" -->
							<block v-if="item.url">
								<image mode="aspectFill" v-for="(it, idx) in item.url.split(',')" :src="it" :key="idx"></image>
							</block>
						</view>
						<!-- 话题 -->
						<view class="ddflex" v-if="item.qyDialogu">
							<view class="topic ddflex" @click="jumpUrl('/topics/detail/detail?topicId=' + item.qyDialogu.id)">
								<image src="../../static/images/topic.png"></image>
								{{ item.qyDialogu.title }}
							</view>
						</view>
						<!-- 投票 -->
						<block v-if="item.qyPoll">
							<view class="vote-tit">{{ item.qyPoll.title }}</view>
							<block v-if="item.qyPoll.isVote == 1">
								<view class="vote-list end" @click="jumpUrlDetail(item)">
									<view :class="'lis ddflex  ' + (itpy.isVote == 1 ? 'active' : '')" v-for="(itpy, idex) in JSON.parse(item.qyPoll.optionJson)" :key="idex">
										<view class="percent" :style="'width:' + parseFloat(itpy.proportion) + '%;'"></view>
										<view class="fflex">{{ itpy.name }}</view>
										<view>{{ parseFloat(itpy.proportion) + '%' }}</view>
									</view>
								</view>
							</block>
							<block v-else>
								<view class="vote-list">
									<view class="lis" v-for="(itpy, idex) in JSON.parse(item.qyPoll.optionJson)" :key="idex" @click="submitPoll(item, index, idex)">
										{{ itpy.name }}
									</view>
								</view>
							</block>
						</block>
					</block>
					<view class="opt ddflex" v-if="!item.source">
						<view class="fflex" @click="jumpUrlDetail(item)">{{ item.count.browseCount }}次浏览</view>
						<view class="ddflex" @click="submitFabulous(2, item.id, index)">
							<image :src="'../../static/images/' + (item.isPraise == 1 ? 'like_h' : 'like') + '.png'"></image>
							{{ item.count.fabulousCount < 99 ? item.count.fabulousCount : '99+' }}
						</view>
						<view class="ddflex" @click="jumpUrlDetail(item)">
							<image src="../../static/images/comment.png"></image>
							{{ item.count.commentCount < 99 ? item.count.commentCount : '99+' }}
						</view>
						<button open-type="share" class="opt-share ddflex">
							<image src="../../static/images/share.png"></image>
							分享
						</button>
					</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<image :src="picUrlss + 'empty_jl.png'"></image>
				<text>暂无动态</text>
			</view>
			<view class="edit" @click="showBtn()"><image src="../../static/images/edit.png"></image></view>
			<view class="ceng" v-if="isShowbtn" @click="hideBtn"></view>
			<view class="side ddflex" v-if="isShowbtn">
				<view @click="createJump('/office/news/news?newsType=2')" class="li">
					<image src="../../static/images/sd_tw.png"></image>
					<view>提问</view>
				</view>
				<navigator url="/office/diary/diary" hover-class="none" class="li">
					<image src="../../static/images/sd_rj.png"></image>
					<view>日记</view>
				</navigator>
			</view>
		</block>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			systems: {},
			currentTab: -1,
			isShowbtn: false,
			isLoad: true,
			form: {
				page: 1,
				limit: 10
			},
			pType: 1, //排序： 1综合, 2最新,3浏览最多,4评论最多,5热门
			isHoleLoad: true,
			holeForm: {
				page: 1,
				limit: 10
			},
			holeType: 1, //排序： 1综合, 2最新,3浏览最多,4评论最多,5热门
			hotTopicList: [],
			hotPollList: [],
			officeList: [], //聊一聊
			hotTopHoleOfficeList: [], //树洞滚动
			holeOfficeList: [] //树洞
		};
	},
	onLoad() {
		this.tabClick(0);
	},
	onHide() {
		this.isShowbtn = false;
	},
	onReachBottom() {
		if (this.currentTab == 1) {
			this.holeForm.page++;
		} else {
			this.form.page++;
		}
		this.getOfficeList();
	},
	methods: {
		tabClick(idx) {
			if (this.currentTab == idx) {
				return false;
			}
			this.currentTab = idx;
			if (this.currentTab == 1) {
				this.isHoleLoad = true;
				this.holeForm.page = 1;
				this.topHoleOfficeList();
				this.getOfficeList();
			} else {
				this.isLoad = true;
				this.form.page = 1;
				this.getHotTopic();
				this.getHotPoll();
				this.getOfficeList();
			}
		},

		//聊一聊切换排序类型
		swiPType(type) {
			this.isLoad = true;
			this.form.page = 1;

			this.pType = type;

			this.getOfficeList();
		},

		//树洞切换排序
		swiHoleType(type) {
			this.isHoleLoad = true;
			this.holeForm.page = 1;
			this.holeType = type;
			this.getOfficeList();
		},

		//预览图片
		previewImgss(picUrls, index) {
			//预览合同图片
			var src = picUrls[index];
			let imgs = picUrls;
			uni.previewImage({
				current: src, // 当前显示图片的http链接
				urls: imgs
			});
		},

		showBtn() {
			if (!req.isLogins(true)) {
				return;
			}
			this.isShowbtn = true;
		},
		hideBtn() {
			this.isShowbtn = false;
		},

		removeHtml(content) {
			return util.removeHtml(content);
		},

		createJump(url) {
			if (!req.isLogins(true)) {
				return;
			}
			this.jumpUrl(url);
		},

		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},

		jumpUrlDetail(item) {
			if (item.source) {
				this.jumpUrl('/office/detail/detail?contentId=' + item.source);
			} else {
				this.jumpUrl('/office/detail/detail?contentId=' + item.id);
			}
		},

		getHotTopic() {
			var dataPram = {
				page: 1,
				limit: 4,
				attr: 2
			};
			req.getRequest('/api/v3/dialogue/list', dataPram, data => {
				this.hotTopicList = data;
			});
		},

		getHotPoll() {
			var dataPram = {
				page: 1,
				limit: 4,
				attr: 2
			};
			req.getRequest('/api/v3/poll/pollList', dataPram, data => {
				this.hotPollList = data;
			});
		},

		topHoleOfficeList() {
			var pramData = {};
			//1 聊一聊 ，2 提问
			pramData.type = 2;
			pramData.page = 1;
			pramData.limit = 5;
			pramData.orderType = 5;
			req.getRequest('/api/v3/moments/list', pramData, data => {
				this.hotTopHoleOfficeList = data;
			});
		},
		sum(arr) {
		    var s = 0;
		    for (var i=arr.length-1; i>=0; i--) {
				if(arr[i].count){
					s += Number(arr[i].count);
				}
		    }
		    return s;
		},
		getOfficeList() {
			let that = this;
			var pramData = {};
			//1 聊一聊 ，2 提问
			pramData.type = parseInt(this.currentTab) + 1;
			if (this.currentTab == 1) {
				//树洞
				pramData.page = this.holeForm.page;
				pramData.limit = this.holeForm.limit;
				if (this.holeType == 5) {
					//热门
					pramData.isEssence = 2;
				} else if (this.holeType == 6) {
					//精华
					pramData.isEssence = 1;
				} else {
					pramData.orderType = this.holeType;
				}
			} else {
				//聊一聊
				pramData.page = this.form.page;
				pramData.limit = this.form.limit;
				if (this.pType == 5) {
					//热门
					pramData.isEssence = 2;
				} else {
					pramData.orderType = this.pType;
				}
			}
			if (this.currentTab == 1) {
				if (!this.isHoleLoad) return false;
				this.isHoleLoad = false;
			} else {
				if (!this.isLoad) return false;
				this.isLoad = false;
			}
			req.getRequest('/api/v3/moments/list', pramData, data => {
				if (this.currentTab == 1) {//树洞
					if (data && data.length >= 10) {
						this.isHoleLoad = true;
					}
					if (this.holeForm.page > 1) {
						data = this.holeOfficeList.concat(data);
					} else {
						this.holeOfficeList = [];
					}
					this.holeOfficeList = data;
				} else {//聊一聊
					if(data&&data.length > 0){
						data.map(it=>{
							if(it.qyPoll && it.qyPoll.isEnd){
								it.qyPoll.voteCount = that.sum(JSON.parse(it.qyPoll.optionJson))
							}
							if(it.url){
								it.url = it.url.split(',');
							}
							return it;
						})
					}
					if (data && data.length >= 10) {
						this.isLoad = true;
					}
					if (this.form.page > 1) {
						data = this.officeList.concat(data);
					} else {
						this.officeList = [];
					}
					this.officeList = data;
				}
			});
		},
		//提交点赞、取消点赞；收藏、取消收藏
		submitFabulous(type, id, index) {
			if (!req.isLogins(true)) {
				return;
			}
			var dataP = {};
			dataP.type = type; //1，观看 ，2点赞，3评论，4分享，5收藏
			dataP.momentsId = id;
			req.postRequestLoding('/api/v3/fabulous/save', dataP, data => {
				if (this.currentTab == 0) {
					if (type == 2) {
						//动态点赞
						if (this.officeList[index].isPraise == 1) {
							//已赞
							this.officeList[index].isPraise = 0;
							this.officeList[index].count.fabulousCount--;
						} else {
							this.officeList[index].isPraise = 1;
							this.officeList[index].count.fabulousCount++;
						}
					}
				} else {
					if (type == 2) {
						//动态点赞
						if (this.holeOfficeList[index].isPraise == 1) {
							//已赞
							this.holeOfficeList[index].isPraise = 0;
							this.holeOfficeList[index].count.fabulousCount--;
						} else {
							this.holeOfficeList[index].isPraise = 1;
							this.holeOfficeList[index].count.fabulousCount++;
						}
					}
				}
			});
		},

		//提交投票
		submitPoll(item, pIndex, pollIndex) {
			if(item.qyPoll.isEnd) return false;
			var dataP = {};
			// dataP.id = item.id;
			dataP.pollId = item.qyPoll.id;
			var pollObjList = JSON.parse(item.qyPoll.optionJson);
			dataP.pollOptionCode = pollObjList[pollIndex].code;
			req.postRequest('/api/v3/poll/saveDetails', dataP, data => {
				req.msg('投票成功');
				//图片完之后要将该投票的对象返回，便于做渲染%
				this.officeList[pIndex].qyPoll = data;
				req.saveBehaviorNew(item.id,10,5)
			});
		}
	},
	created() {
		const systemInfo = uni.getSystemInfoSync();
		// px转换到rpx的比例
		let pxToRpxScale = 750 / systemInfo.windowWidth;
		let systems = {
			ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
			navigationHeight: 44 * pxToRpxScale // 导航栏的高度
		};
		systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
		this.systems = systems;
	}
};
</script>

<style>
@import './index.css';
</style>