renshou/office/detail/detail.vue

<template>
	<view v-if="isShowView">
		<view class="user ddflex" @click="toUserHomePage(detail.userDTO)">
			<image :src="detail.userDTO.avatar?detail.userDTO.avatar:'/static/images/def_head.png'" mode="aspectFill" class="userimg"></image>
			<view class="fflex">
				<view class="namea ddflex">
					<view class="name fflex ddflex">
						{{ detail.userDTO.nickName }}
						<image v-if="detail.userDTO.levelGrade > 0" src="../../static/images/vip_tag.png" class="vip-tag"></image>
					</view>
					<view class="time">{{ detail.time }}</view>
				</view>
				<view class="area" v-if="detail.userDTO.cityName">{{ detail.userDTO.provinceName }} {{ detail.userDTO.cityName }}</view>
			</view>
		</view>
		<view class="con">
			<!-- //提问 -->
			<view v-if="detail.type == 2" class="des tovers">
				<view class="wen">提问</view>
				{{ removeHtml(detail.content) }}
			</view>
			<view class="des" v-else><rich-text :nodes="detail.content"></rich-text></view>
			<view class="video" v-if="detail.isHaveVideo && config.open_community_video == 1">
				<video :src="detail.url" :show-center-play-btn="false" :controls="detail.isControls" :autoplay="detail.isControls" id="myVideo" @pause="videoPause" @ended="videoEnded"></video>
				<view class="video-play ddflex" @click="videoPlay()" v-if="detail.isShowPlayBtn"><image src="../../static/images/play.png"></image></view>
			</view>
			<view class="imgbox ddflex" v-if="!detail.isHaveVideo&&detail.url">
				<image mode="aspectFill" v-for="(it, idx) in styleImgList(detail.url)" :src="it" @click="previewImgss(styleImgList(detail.url), idx)" :key="idx"></image>
			</view>

			<view :class="'vote-box' + (detail.qyPoll.isEnd ? ' ends' : '')" v-if="detail.qyPoll">
				<view class="vote-tit">{{ detail.qyPoll.title }}</view>
				<block v-if="detail.qyPoll.isVote == 1">
					<!-- 已投 -->
					<view class="vote-list end">
						<view :class="'lis ddflex  ' + (itpy.isVote == 1 ? 'active' : '')" v-for="(itpy, idex) in styleList(detail.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" @tap="submitPolls(idex)">我是选项</view> -->
						<view class="lis" @click="submitPolls(idx)" v-for="(itp, idx) in styleList(detail.qyPoll.optionJson)" :key="idx">{{ itp.name }}</view>
					</view>
				</block>
				<view class="vote-can" v-if="detail.qyPoll.isEnd">
					<text>{{ detail.qyPoll.voteCount }}人参与</text>
					投票已结束
				</view>
			</view>
			<view class="que ddflex" v-if="detail.question" @click="jumpUrl('/learn/topic/index?questId=' + detail.question.id)">
				<!-- <image src="../../static/images/ht_ico1.png" class="st-ico"></image> -->
				<view class="fflex"><rich-text :nodes="detail.question.title" class="tovers"></rich-text></view>
				<!-- <image src="../../static/images/ht_ico2.png" class="st-rico"></image> -->
			</view>
			<!-- <view class="cates ddflex" v-if="detail.question && detail.question.cateName">
				<text>{{ detail.question.cateName }}</text>
			</view> -->
			<view class="ddflex" v-if="detail.qyDialogu">
				<view class="topic ddflex" @click="jumpUrl('/topics/detail/detail?topicId=' + detail.qyDialogu.id)">
					<image src="../../static/images/topic.png"></image>
					<view class="fflex tover">{{ detail.qyDialogu.title }}</view>
				</view>
			</view>
			<view class="ds ddflex">
				<view class="loca ddflex fflex" @click="jumpUrlPoi(detail,'/office/poi/index')" v-if="detail.poiName"><image :src="picUrlss+'office_images/loca.png'"></image><text v-if="detail.poiDistance > 0">{{detail.poiDistance ? detail.poiDistance < 1000 ? detail.poiDistance+'m' : (detail.poiDistance/1000).toFixed(1)+'km' : ''}}</text>{{detail.poiName}}</view>
				<view class="ddflex" style="justify-content: flex-end;">
					<view>{{ detail.count.browseCount }}次浏览</view>
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" hover-class="none" class="opt-share ddflex">
						<image src="../../static/images/share.png"></image>
						分享
					</button>
					<!-- #endif -->

					<!-- #ifdef APP-PLUS -->
					<view class="opt-share ddflex" @click="appToShare()">
						<image src="../../static/images/share.png"></image>
						分享
					</view>
					<!-- #endif -->
				</view>
			</view>
			<block v-if="detail.type==10||detail.type==11">
				<view v-if="detail.type==10" class="ddflex step-box" style="justify-content: space-between;" @click="jumpUrl('/exercise/record/record?userId=' + detail.userId)">
					<view>
						<view class="step-date">{{detail.wxRun.step}}</view>
						<view class="step-label">步数</view>
					</view>
					<view>
						<view class="step-date">{{detail.wxRun.index}}</view>
						<view class="step-label" style="text-align: right;">名次</view>
					</view>
				</view>
				<view v-if="detail.type==11" class="ddflex step-box" style="justify-content: space-between;" @click="jumpUrl('/match/activityDetail/activityDetail?id=' + detail.matchContent.id)">
					<image class="step-pic" :src="detail.matchContent.pic" mode="aspectFill"></image>
					<view class="fflex">
						<view class="step-title tovers">{{detail.matchContent.title}}</view>
						<view class="ddflex" style="justify-content: space-between;margin-top: 10rpx;">
							<view class="step-price">{{detail.matchContent.endTime}}</view>
							<view  class="step-btn">查看</view>
						</view>
					</view>
				</view>
			</block>
			<view v-if="detail.userGroupId" class="ddflex step-box" style="padding: 25rpx 21rpx;" @click="jumpUrl('/office/team/index?id=' + detail.userGroupId)">
				<image style="width: 24rpx;height: 24rpx;margin-right: 13rpx;" src="../../static/images/link.png"></image>
				<view style="font-weight: 500;color: #999999;">Team：</view>
				<view>{{detail.userGroupTitle}}</view>
			</view>
			<block v-else>
				<view class="product" v-if="detail.products && detail.products.length > 0">
					<view scroll-x="true" :class="'pro-view' + (detail.products.length == 1 ? ' pro-view1' : '')">
						<view class="li" v-for="(item, index) in detail.products" :key="index" @click="toProductDetail(item)">
							<view class="ddflex">
								<image :src="item.pic + '?x-oss-process=style/w375'" mode="aspectFill" class="pic"></image>
								<view class="fflex">
									<view class="title tovers">{{ item.title }}</view>
									<view class="opt ddflex">
										<view class="money">￥{{ item.salePrice }}</view>
										<view class="pro-btn">购买</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<!-- <view class="shares ddflex">
				<button open-type="share" class="share-btn ddflex">
					<image src="../static/images/wechat.png"></image>
					微信好友
				</button>
				<button open-type="share" class="share-btn ddflex">
					<image src="../static/images/wechat_1.png"></image>
					朋友圈
				</button>
			</view> -->
		</view>
		<view class="line"></view>
		<view class="comments">
			<view class="tits">
				评论
				<text>({{ detail.count.commentCount }})</text>
			</view>
			<view class="list" v-if="commentList && commentList.length > 0">
				<view class="li ddflex" v-for="(item, index) in commentList" :key="index">
					<image
						:src="item.userDTO.avatar ? item.userDTO.avatar : '/static/images/def_head.png'"
						mode="scaleToFill"
						class="userimg"
						@click="toUserHomePage(item.userDTO)"
					></image>
					<view class="fflex">
						<view class="c-user ddflex">
							<view class="fflex" @click="toUserHomePage(item.userDTO)">
								<view class="name fflex ddflex">
									{{ item.userDTO.nickName }}
									<text class="lz" v-if="item.userDTO.isLandlord == 1">楼主</text>
								</view>
								<view class="area" v-if="item.userDTO.cityName">{{ item.userDTO.provinceName }} {{ item.userDTO.cityName }}</view>
							</view>
							<view class="zan ddflex" @click="submitFabulous(2, item.id, index)">
								<image :src="'../../static/images/' + (item.isPraise == 1 ? 'like_h' : 'like') + '.png'"></image>
								{{ item.praiseNO }}
							</view>
						</view>
						<view class="c-des">{{ item.content }}</view>
						<view class="sta ddflex">
							<view class="reply ddflex" @click="showReply(item, '', index)">
								回复
								<image src="../../static/images/rico1.png"></image>
							</view>
							<view class="time">{{ item.time }}</view>
						</view>
						<view class="replys" v-if="item.plist && item.plist.length > 0">
							<view class="lis" @click="showReply(item, itm, index)" v-for="(itm, idx) in item.plist" :key="idx">
								<text>{{ itm.userDTO.nickName }}</text>
								<text class="lz" v-if="itm.userDTO.isLandlord == 1">楼主</text>
								<block v-if="itm.toUserDTO && itm.toUserDTO.nickName">
									回复
									<text>{{ itm.toUserDTO.nickName }}</text>
									<text class="lz" v-if="itm.toUserDTO.isLandlord == 1">楼主</text>
								</block>
								: {{ itm.content }}
							</view>
							<!-- @click="jumpUrl('/office/comments/comments')" -->
							<view class="check" @click="loadMoreComment(item, index)" v-if="item.commentsNo > 3 && item.plist.length < item.commentsNo">
								查看全部{{ item.commentsNo - item.plist.length }}条回复
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<image :src="picUrlss + 'empty_kt.png'"></image>
				<text>暂无评论</text>
			</view>
		</view>
		<view class="bot ddflex" v-if="!isShowReply">
			<view class="c-ipt fflex ddflex" @click="showReply()">
				<image src="../static/images/pl_ico.png"></image>
				<view class="ipt">说点什么吧</view>
			</view>
			<view class="bot-btn" @click="submitFabulous(5)">
				<image :src="'../static/images/' + (detail.isCollection == 1 ? 'collect_h' : 'collect') + '.png'"></image>
				<view>收藏</view>
			</view>
			<view class="bot-btn" @click="submitFabulous(2)">
				<image :src="'../../static/images/' + (detail.isPraise == 1 ? 'like_h' : 'like') + '.png'"></image>
				<view>点赞</view>
				<text class="num">{{ detail.count.fabulousCount < 99 ? detail.count.fabulousCount : '99+' }}</text>
			</view>
			<view class="bot-btn" @click="showReply()">
				<image src="../static/images/comment.png"></image>
				<view>评论</view>
				<text class="num">{{ detail.count.commentCount < 99 ? detail.count.commentCount : '99+' }}</text>
			</view>
		</view>
		<view class="ceng" v-if="isShowReply" @click="hideReply()"></view>
		<view class="bot1 ddflex" v-if="isShowReply">
			<view class="reply-sr ddflex fflex">
				<input
					v-model="commentContent"
					:placeholder="checkUserDTO ? '回复' + checkUserDTO.nickName : '输入的内容'"
					placeholder-class="placeholder"
					class="ipt fflex"
					focus="true"
				/>
				<view class="submit" @click="submitComment()">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const util = require('../../utils/util.js');
const requsetmessage = require('../../utils/requestmessage.js');
const QQMapWX = require("../../utils/qqmap.js");
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			isShowView: false,
			isShowReply: false,
			isLoad: true,
			form: {
				page: 1,
				limit: 10
			},
			moreCommentForm: {
				page: 0,
				limit: 20
			},
			contentId: '', //动态id
			detail: '', //动态详情
			commentList: '', //评论详情
			commentContent: '',
			commentType: 1, //1评论动态，2回复外层评论，3回复二级评论
			checkConmmentItem: '',
			checkUserDTO: '',
			checkPositionIndex: '', //选中的下标
			checkItm: '',
			isNews: false, //是否从消息列表进入
			commentId: '',
			isSubmit: false,
			videoContext: '',
			config: {},
			pois: '',
			currentPoi: {}
		};
	},
	onLoad(opt) {
		this.contentId = opt.contentId;
		if (opt.isNews) {
			this.isNews = true;
			this.commentId = opt.commentId;
		}
		if(req.getStorage('loctionAddressMap')){
			this.pois = {
				poiLongitude: req.getStorage('loctionAddressMap').location.lng,
				poiLatitude: req.getStorage('loctionAddressMap').location.lat
			}
			this.getDetail();
		}else{
			QQMapWX.initMap();
			req.getLocation(res => {
				const to = {
					latitude: res.latitude,
					longitude: res.longitude
				};
				QQMapWX.reverseGeocoder(to, resp => {
					if(resp){
						resp.pois.map(it=>{
							it.poiName = it.title;
							it.poiAddress = it.address;
							it.poiLongitude = it.location.lng;
							it.poiLatitude = it.location.lat
							return it;
						})
						this.pois = resp.pois[0];
					}
					this.getDetail();
				});
			});
		}
		this.getCommentList();
	},
	onShow() {
		this.config = JSON.parse(req.getStorage('configRes'))
	},

	onShareAppMessage() {
		var url = '/office/detail/detail?contentId=' + this.contentId;
		var img = '';
		if (this.detail.url) {
			var imgList = this.detail.url.split(',');
			img = imgList[0];
		} else {
		}
		return {
			title: util.removeHtml(this.detail.content),
			imageUrl: img,
			path: url
		};
	},

	onReachBottom() {
		this.form.page++;
		this.getCommentList();
	},

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

		styleList(json) {
			var obj = JSON.parse(json);
			return obj;
		},

		styleImgList(str) {
			if (str) {
				var imgList = str.split(',');
				return imgList;
			} else {
				return [];
			}
		},

		jumpUrl(url) {
			if (!req.isLogins(true)) {
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		
		jumpUrlPoi(item,url){
			this.currentPoi = item;
			uni.navigateTo({
				url: url
			})
		},

		toUserHomePage(userObj) {
			if (userObj.isApiUser != 1) {
				//不是后台用户，则可跳转
				this.jumpUrl('/topics/home/home?userId=' + userObj.id);
			}
		},

		showReply(conmmentItem, itm, position) {
			if (!req.isLogins(true)) {
				return;
			}
			this.commentContent = '';
			this.isShowReply = true;
			this.checkConmmentItem = conmmentItem;
			if (itm) {
				this.checkItm = itm; //二级评论
				this.checkUserDTO = itm.userDTO;
			}
			this.checkPositionIndex = position;
			if (!conmmentItem) {
				this.commentType = 1;
			} else {
				if (!itm.userDTO) {
					this.commentType = 2;
				} else {
					this.commentType = 3;
				}
			}
		},
		hideReply() {
			this.isShowReply = false;
		},

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

		toProductDetail(item) {
			if (!req.isLogins(true)) {
				return;
			}
			if (item.actId) {
				app.globalData.openPage('group/detail/detail?id=' + item.id + '&groupId=' + item.actId);
			} else {
				app.globalData.openPage('product/detail/detail?id=' + item.id);
			}
		},
		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;
		},
		getDetail() {
			let params = {
				id: this.contentId
			}
			if(this.pois){
				params.poiLatitude = this.pois.poiLatitude;
				params.poiLongitude = this.pois.poiLongitude;
			}
			req.getRequest('/api/v3/moments/info', params, data => {
				if (data.qyPoll && data.qyPoll.isEnd) {
					data.qyPoll.voteCount = this.sum(JSON.parse(data.qyPoll.optionJson));
				}
				if(data.url){
					let h = data.url.substring(data.url.lastIndexOf('.') + 1)
					if(h.indexOf('mp4')>-1||h.indexOf('MP4')>-1){
						console.log('视频',h,h.indexOf('mp4'),h.indexOf('MP4'))
						data.isHaveVideo = true
						data.isControls = false
						data.isShowPlayBtn = true
					}
				}
				this.detail = data;
				this.isShowView = true;
				if (this.isNews) {
					this.getUpdateIsSee();
				}
			});
		},
		getUpdateIsSee() {
			let params = {
				id: this.commentId
			};
			req.postRequest('/api/v3/fabulous/updateIsSee', { id: this.commentId }, res => {});
		},

		//获取评论列表
		getCommentList() {
			if (!this.isLoad) return false;
			this.isLoad = false;
			let form = this.form;
			form.momentsId = this.contentId;
			form.type = 3;
			form.isQueryPid = 1;
			req.getRequest('/api/v3/fabulous/list', form, data => {
				if (data && data.length >= 10) {
					this.isLoad = true;
				}
				if (this.form.page > 1) {
					data = this.commentList.concat(data);
				}
				this.commentList = data;
			});
		},

		loadMoreComment(item, index) {
			if (!req.isLogins(true)) {
				return;
			}
			this.moreCommentForm.page++;
			var dataPram = this.moreCommentForm;
			dataPram.type = 3;
			dataPram.pid = item.id;
			req.getRequest('/api/v3/fabulous/listV1', dataPram, data => {
				if (this.moreCommentForm.page == 1) {
					this.commentList[index].plist = [];
				}
				this.commentList[index].plist = this.commentList[index].plist.concat(data);
			});
		},

		//提交点赞、取消点赞；收藏、取消收藏
		submitFabulous(type, pid, commentIndex) {
			if (!req.isLogins(true)) {
				return;
			}
			var dataP = {};
			dataP.type = type; //1，观看 ，2点赞，3评论，4分享，5收藏
			if (pid) {
				dataP.pid = pid;
			}
			dataP.momentsId = this.contentId;
			req.postRequestLoding('/api/v3/fabulous/save', dataP, data => {
				if (type == 2) {
					//点赞
					if (pid) {
						//评论点赞点赞
						if (this.commentList[commentIndex].isPraise == 1) {
							this.commentList[commentIndex].isPraise = 0;
							this.commentList[commentIndex].praiseNO--;
						} else {
							this.commentList[commentIndex].isPraise = 1;
							this.commentList[commentIndex].praiseNO++;
						}
					} else {
						//动态点赞
						if (this.detail.isPraise == 1) {
							//已赞
							this.detail.isPraise = 0;
							this.detail.count.fabulousCount--;
						} else {
							this.detail.isPraise = 1;
							this.detail.count.fabulousCount++;
						}
					}
				} else if (type == 5) {
					//收藏
					if (this.detail.isCollection == 1) {
						this.detail.isCollection = 0;
					} else {
						this.detail.isCollection = 1;
					}
				}
			});
		},

		//提交评论
		async submitComment() {
			console.log('this.isSubmit==', this.isSubmit);
			if (this.isSubmit) return false;
			var dataP = {};
			dataP.type = 3;
			if (this.commentContent) {
				dataP.content = this.commentContent;
			} else {
				req.msg('请输入评论内容');
				return;
			}
			//1评论动态，2回复外层评论，3回复二级评论
			if (this.commentType == 2) {
				dataP.pid = this.checkConmmentItem.id;
			} else if (this.commentType == 3) {
				dataP.pid = this.checkConmmentItem.id;
				dataP.replyId = this.checkItm.id;
				dataP.toUserId = this.checkUserDTO.id;
			}
			//为提问时，需要加匿名参数
			if (this.detail.type == 2) {
				dataP.momentsType = 2; //匿名
			}
			dataP.momentsId = this.contentId;
			this.isSubmit = true;
			// await requsetmessage.remindIntegral().then(res => {});
			req.postRequestLoding('/api/v3/fabulous/save', dataP, data => {
				this.detail.count.commentCount++;
				req.msg('评论成功');
				this.hideReply();
				if (this.commentType == 1) {
					//在评论列表首位插入
					this.commentList.splice(0, 0, data);
				} else {
					//在评论列表二级列表末尾处插入
					this.commentList[this.checkPositionIndex].plist.push(data);
				}
				setTimeout(res => {
					this.isSubmit = false;
				}, 200);
			});
		},

		//提交投票
		submitPolls(pollIndex) {
			if (!req.isLogins(true)) {
				return;
			}
			if (this.detail.qyPoll.isEnd) return req.msg('投票已结束');
			var dataP = {};
			dataP.pollId = this.detail.qyPoll.id;
			var pollObjList = JSON.parse(this.detail.qyPoll.optionJson);
			dataP.pollOptionCode = pollObjList[pollIndex].code;
			req.postRequest('/api/v3/poll/saveDetails', dataP, data => {
				req.msg('投票成功');
				//图片完之后要将该投票的对象返回，便于做渲染%
				this.detail.qyPoll = data;
			});
		},

		appToShare() {
			console.log('数据>>>>');

			var img = '';
			if (this.detail.url) {
				var imgList = this.detail.url.split(',');
				img = imgList[0] + '?x-oss-process=style/w375';
			} else {
				let config = JSON.parse(req.getStorage('configRes'));
				img = config.share_pic;
			}

			console.log('数据>>>>', img);
			var text = util.removeHtml(this.detail.content);
			console.log('数据>>>>', text);
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: img,
				title: text,
				summary: text,
				miniProgram: {
					id: req.public.miniProgramGh_id,
					path: 'office/detail/detail?contentId=' + this.contentId,
					type: 0,
					webUrl: 'http://www.lemonban.com'
				},
				success: ret => {
					console.log(ret);
				},
				fail: ret => {
					console.log(ret);
				}
			});
		},
		videoPlay(){
			var that = this;
			this.detail.isControls = true
			this.detail.isShowPlayBtn = false
			var videoContext = uni.createVideoContext('myVideo') // 对应的视频id
			videoContext.play()
		},
		videoPause(index){
			this.detail.isControls = false
			this.detail.isShowPlayBtn = true
		},
		videoEnded(index){
			this.detail.isControls = false
			this.detail.isShowPlayBtn = true
		}
	}
};
</script>

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