renshou/office/comments/comments.vue

<template>
	<view v-if="isShow">
		<view class="con">
			<view class="cons">
				<view class="c-user ddflex">
					<image :src="params.userDTO.avatar ? params.userDTO.avatar : '../../static/images/userImg.png'" mode="scaleToFill" class="userimg" @click="toUserHomePage(params.userDTO)"></image>
					<view class="fflex" @click="toUserHomePage(params.userDTO)">
						<view class="name fflex ddflex">{{ params.userDTO.nickName }}</view>
						<view class="area" v-if="params.userDTO.cityName">{{ params.userDTO.provinceName }} {{ params.userDTO.cityName }}</view>
					</view>
					<view class="zan ddflex" @click="submitFabulous(2, params.id)">
						<image :src="'../../static/images/' + (params.isPraise == 1 ? 'like_h' : 'like') + '.png'"></image>
						{{ params.praiseNO }}
					</view>
				</view>
				<view class="c-des">{{ params.content }}</view>
				<view class="sta ddflex">
					<view class="time">{{ params.time }}</view>
					<view class="yuan" @click="jumpUrl('/office/detail/detail?contentId=' + params.momentsDto.id)">查看原动态</view>
				</view>
				<view class="replys" v-if="params.plist && params.plist.length > 0">
					<view class="lis" @click="showReply(params, itm, index)" v-for="(itm, idx) in params.plist">
						<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>
				</view>
			</view>
		</view>
		<view class="ceng" v-if="isShowReplys" @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"
				/>
				<view class="submit" @click="submitComment()">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
//获取应用实例
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const utils = require('../../utils/util.js');
export default {
	data() {
		return {
			isShow: false,
			commentId: '',
			isShowReply: true,
			isShowReplys: false,
			params: {},
			commentContent: '',
			commentType: 2, //1评论动态，2回复外层评论，3回复二级评论
			checkConmmentItem: '',
			checkUserDTO: '',
			checkPositionIndex: '' ,//选中的下标
			checkItm: '',
			commentIds: '',//二级评论id
			
			location: {},
			poiIndex: -1,
			poiList: [],
		};
	},
	onLoad(opt) {
		this.commentId = opt.commentId
		if(opt.isSecond){
			this.commentIds = opt.commentIds
		}
		this.getComments()
		this.getUpdateIsSee();
		QQMapWX.initMap();
		let location = {
			latitude: req.getStorage('loctionAddressMap').location.lat,
			longitude: req.getStorage('loctionAddressMap').location.lng
		}
		QQMapWX.reverseGeocoder(location, data => {
			this.poiList = data.pois;
			this.checkLocation(this.poiList[0],0)
		});
	},

	onShow() {
	},

	methods: {
		chooseLocation(){
			let that = this;
			uni.chooseLocation({//choosePoi不返回经纬度
				success: function (res) {
					console.log('位置名称：' , res);
					that.location = {
						poiName: res.name,
						poiAddress: res.address,
						poiLongitude: res.longitude,
						poiLatitude: res.latitude
					}
					that.reverseGeocoder(res);
				}
			});
		},
		reverseGeocoder(location) {
			QQMapWX.initMap();
			QQMapWX.reverseGeocoder(location, data => {
				this.location.poiRegionalism = data.ad_info.adcode.substring(0, 2) + "0000," + data.ad_info.adcode.substring(0, 4) +"00," + data.ad_info.adcode
				console.log('解析后的地址地址数据：', data,this.location.poiRegionalism);
			});
		},
		checkLocation(item,index){
			if(this.poiIndex == index) return false;
			this.poiIndex = index;
			this.location = {
				poiName: item.title,
				poiAddress: item.address,
				poiLongitude: item.location.lng,
				poiLatitude: item.location.lat,
				poiRegionalism: item.ad_info.adcode.substring(0, 2) + "0000," + item.ad_info.adcode.substring(0, 4) +"00," + item.ad_info.adcode
			}
		},
		getUpdateIsSee(){
			let params = {
				id: this.commentId
			}
			if(this.commentIds){
				params.id = this.commentIds
			}
			req.postRequest('/api/v3/fabulous/updateIsSee',params,res=>{})
		},
		getComments(){
			req.getRequest('/api/v3/fabulous/seeFabulousInfo',{id: this.commentId},res=>{
				this.params = res;
				this.checkConmmentItem = res;
				this.isShow = true;
			})
		},
		toUserHomePage(userObj) {
			if (userObj.isApiUser != 1) {
				//不是后台用户，则可跳转
				this.jumpUrl('/topics/home/home?userId=' + userObj.id);
			}
		},
		//提交点赞、取消点赞；收藏、取消收藏
		submitFabulous(type, pid) {
			if (!req.isLogins(true)) {
				return;
			}
			var dataP = {};
			dataP.type = type; //1，观看 ，2点赞，3评论，4分享，5收藏
			dataP.pid = pid;
			dataP.momentsId = this.params.momentsId;
			
			// 位置
			if(this.location&&this.location.poiName){
				dataP.poiName = this.location.poiName;
				dataP.poiAddress = this.location.poiAddress;
				dataP.poiLongitude = this.location.poiLongitude;
				dataP.poiLatitude = this.location.poiLatitude;
				dataP.poiRegionalism = this.location.poiRegionalism
			}
			
			req.postRequestLoding('/api/v3/fabulous/save', dataP, data => {
				this.params.isPraise = 1
			});
		},
		showReply(conmmentItem, itm, position) {
			if (!req.isLogins(true)) {
				return;
			}
			this.commentContent = '';
			this.isShowReplys = true;
			this.checkConmmentItem = conmmentItem;
			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.isShowReplys = false;
		},
		//提交评论
		submitComment() {
			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;
			}
			dataP.momentsId = this.params.momentsId;
			
			// 位置
			if(this.location&&this.location.poiName){
				dataP.poiName = this.location.poiName;
				dataP.poiAddress = this.location.poiAddress;
				dataP.poiLongitude = this.location.poiLongitude;
				dataP.poiLatitude = this.location.poiLatitude;
				dataP.poiRegionalism = this.location.poiRegionalism
			}
			
			req.postRequestLoding('/api/v3/fabulous/save', dataP, data => {
				req.msg('评论成功');
				this.hideReply();
				this.params.plist.push(data);
			});
		},
		jumpUrl(url){
			uni.navigateTo({
				url: url
			})
		}
	}
};
</script>

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