ec.uniapp-master/pages/discover/discoverdetails.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" title="详情"></lf-nav>
		<view class="lf-p-32">
			<view class="lf-flex">
				<view class="tag-father">
					<image :src="discover_details.user.avatar" mode="aspectFill" class="head-img"></image>
					<view class="head-tag">V</view>
				</view>
				<view class="lf-flex-column lf-m-l-20">
					<view>
						<text class="lf-font-32 lf-color-black lf-font-bold lf-m-r-15">{{discover_details.user.nick_name}}</text>
						<text class="lf-iconfont icon-xiangyou lf-color-777 lf-text-vertical" style="font-size: 18rpx;"></text>
					</view>
					<view class="lf-font-24 lf-color-777 lf-m-t-15">{{discover_details.updated_at}}</view>
				</view>
			</view>
			<view class="lf-font-28 lf-color-333 lf-m-t-20">
				{{discover_details.content}}
			</view>
			<view class="lf-flex-wrap lf-m-t-20">
				<image v-for="(item,index) in discover_details.attachs" class="qzone-img" :src="item.url" mode="aspectFill"></image>
			</view>
			<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
				<view class="lf-row-center" @click="addLike(discover_details.id)">
					<text class="lf-iconfont icon-xihuanlike lf-color-price" v-if="discover_details.is_like"></text>
					<text class="lf-iconfont icon-xihuan" v-else></text>
					<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.likes_count}}</text>
				</view>
				<view class="lf-row-center">
					<text class="lf-iconfont icon-chakan"></text>
					<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.view_count}}</text>
				</view>
				<view class="lf-row-center">
					<text class="lf-iconfont icon-pinglun-"></text>
					<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.comments_count}}</text>
				</view>
			</view>
		</view>
		<self-line/>
		<!-- 评论 -->
		<view class="comment" v-if="discover_details.comments.length != 0">
			<view class="lf-color-555 lf-font-24">共 {{discover_details.comments_count}}条评论</view>
			<!-- 评论开始 -->
			<view v-for="(commentitem,commentindex) of commentList">
				<view class="lf-m-t-20" @click="applyComment(commentitem.user.id)" v-if="!commentitem.to_user">
					<view class="lf-flex">
						<view>
							<image class="comment-img" :src="commentitem.user.avatar" mode="aspectFill"></image>
						</view>
						<view class="lf-flex-column lf-m-l-20">
							<view class="lf-color-999 lf-font-24">{{commentitem.user.nick_name}}</view>
							<view>
								<view class="lf-color-black lf-line-2" style="max-width:550rpx;">{{commentitem.content}}<text class="lf-color-999 lf-font-24 lf-m-l-10">{{commentitem.created_at}}</text></view>
							</view>
						</view>
						<view class="lf-m-l-32" style="position: absolute;right:33rpx;">
							<view>
								<text class="lf-iconfont icon-shoucang"></text>
							</view>
							<view class="lf-color-555 lf-font-24">10</view>
						</view>
					</view>
				</view>
				<view class="comment-replay" v-else>
					<view class="lf-flex">
						<view class="lf-flex lf-m-t-30">
							<view>
								<image class="comment-img" :src="commentitem.user.avatar" mode="aspectFill"></image>
							</view>
							<view class="lf-flex-column lf-m-l-20">
								<view class="lf-flex">
									<view class="lf-color-999 lf-font-24 lf-m-r-10">{{commentitem.user.nick_name}}</view>
									<view class="lf-row-center" style="max-width: 446rpx;">
										<text class="lf-color-333 lf-m-r-10">回复</text>
										<text class="lf-font-24 lf-color-999">{{commentitem.to_user.nick_name}}:</text>
									</view>
								</view>
								<view>
									<text class="lf-font-26 lf-color-black lf-m-l-10">{{commentitem.content}}</text>
									<text class="lf-color-999 lf-font-24 lf-m-l-10">{{commentitem.created_at}}</text>
								</view>
							</view>
						</view>
						<view class="lf-m-t-30" style="position: absolute;right:33rpx;">
							<view>
								<text class="lf-iconfont icon-shoucang"></text>
							</view>
							<view class="lf-color-555 lf-font-24">10</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lf-font-24 lf-color-777 lf-row-center lf-m-t-40" style="align-items: center;" v-else>
			暂无评论,友好的评论两句吧~
		</view>
		<!-- 底部tab -->
		<view class="comment-tab">
			<view>
				<input class="rom-search" type="text" @confirm="sendComment(discover_details.id)" :cursor-spacing="8" v-model="comment" placeholder="说点什么" />
			</view>
			<view class="lf-row-center">
				<view class="lf-row-center lf-m-r-35" @click="addLike(discover_details.id)">
					<text class="lf-iconfont icon-xihuanlike lf-color-price" v-if="discover_details.is_like"></text>
					<text class="lf-iconfont icon-xihuan" v-else></text>
					<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.likes_count}}</text>
				</view>
				<view class="lf-row-center lf-m-r-35">
					<text class="lf-iconfont icon-chakan"></text>
					<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.view_count}}</text>
				</view>
				<view class="lf-row-center lf-m-r-35">
					<text class="lf-iconfont icon-pinglun-"></text>
					<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.comments_count}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				discover_id: 0,
				discover_details: '',
				is_like: false,
				comment: '',
				commentList: []
			}
		},
		onLoad(e) {
			this.discover_id = e.discover_id;
			this.getDiscoverDetails();
			this.getCommentList();
		},
		methods: {
			//获取评论列表
			getCommentList() {
				this.$http
				    .post({
				        api: 'api/discover/comment/list',
						data: {
							discover_id: this.discover_id,
							user_id: 1
						},
						header: {
						   Authorization: `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjczYTViNTA1NDNlYmNmMjFkNmZiMGJlNzc0NmJmMDE4MDc3MTRkY2Y1MjBiMjM3MGQyZDAyYzQxMTlmMDU4ZTkwMTUxNDQwOTk4MjJhODFhIn0.eyJhdWQiOiIzIiwianRpIjoiNzNhNWI1MDU0M2ViY2YyMWQ2ZmIwYmU3NzQ2YmYwMTgwNzcxNGRjZjUyMGIyMzcwZDJkMDJjNDExOWYwNThlOTAxNTE0NDA5OTgyMmE4MWEiLCJpYXQiOjE2MzExNjk1MDIsIm5iZiI6MTYzMTE2OTUwMiwiZXhwIjoxNjYyNzA1NTAyLCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.p0YoIC_bhOxIOugYxDQTOFIK9t2ORiHQq9H6JWzdByBJKWkFDBisKaXZJvzn1HdU5cjNQnHaBfWpG1Ed15cQlB2LdpXxxc38iaaGW2J6WhlLhVkehloii-TtlZTOeqNrpAHbSe5DRrmm_L07Llm9wr1T1A6pP3MhzdHiZ9d6748j3_cJjK4CJUl3WfYRTaozLFlI00OCW4zzGfgivSighjSFyhqMoHnQ2iSoeWdcJnYpXzXQdc5AXvXOt6eIIa7o2F6Ma1tUseTYVijEVfngdfd21JI1eH6tHrSqUItkQHAart9o74dJn9micI3WrN5yEBXgzemqWkQGV4QzFHLyd3wk-XvP1s2GhCeWlJZOQADzgzhLoxzFUbgM5xULWHp3yfpePGISlM4ZpBwTHcqQt1i_UkNX_zCxa3RYQbZFDfWW0-UPbvHw40t5BY6X7nTPMhPjPGnnPq18jyYBrWBbC9vBWs2o2IHAe5VlkHtmy_v5fymFJLfFzS784Nxp2qPJFWxI7IfrpNckHxohhs5LoieQivw2MyU2shFOUjgwe0xQgyg6UBg5PwNknGTTmzYdavCM4BiQ7moqOuoI15ccIEmc_uMiuLVEfDPlzejP9PQv6mj6IlkJ8HSu4KZU-LxKmtLnGeEwMjVAZBIhsOwzMkaMF1nZ70pgv2YYwBQyVVs`
						},
				    })
				    .then(res => {
				        if (res.data.code == 200) {
				            if (res.data.status) {
				        		this.commentList = res.data.data.data.reverse();
								console.log('当前评论列表',this.commentList)
				            } else {
				                wx.showModal({
				                    content: res.data.message || '请下拉页面刷新重试',
				                    showCancel: false
				                });
				            }
				        } else {
				            wx.showModal({
				                content: res.data.message || '请下拉页面刷新重试',
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			},
			applyComment(touserid) {
				this.$http
				    .post({
				        api: 'api/discover/comment',
						data: {
							discover_id: this.discover_id,
							content: this.comment,
							to_user_id: touserid
						},
						header: {
						   Authorization: `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjczYTViNTA1NDNlYmNmMjFkNmZiMGJlNzc0NmJmMDE4MDc3MTRkY2Y1MjBiMjM3MGQyZDAyYzQxMTlmMDU4ZTkwMTUxNDQwOTk4MjJhODFhIn0.eyJhdWQiOiIzIiwianRpIjoiNzNhNWI1MDU0M2ViY2YyMWQ2ZmIwYmU3NzQ2YmYwMTgwNzcxNGRjZjUyMGIyMzcwZDJkMDJjNDExOWYwNThlOTAxNTE0NDA5OTgyMmE4MWEiLCJpYXQiOjE2MzExNjk1MDIsIm5iZiI6MTYzMTE2OTUwMiwiZXhwIjoxNjYyNzA1NTAyLCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.p0YoIC_bhOxIOugYxDQTOFIK9t2ORiHQq9H6JWzdByBJKWkFDBisKaXZJvzn1HdU5cjNQnHaBfWpG1Ed15cQlB2LdpXxxc38iaaGW2J6WhlLhVkehloii-TtlZTOeqNrpAHbSe5DRrmm_L07Llm9wr1T1A6pP3MhzdHiZ9d6748j3_cJjK4CJUl3WfYRTaozLFlI00OCW4zzGfgivSighjSFyhqMoHnQ2iSoeWdcJnYpXzXQdc5AXvXOt6eIIa7o2F6Ma1tUseTYVijEVfngdfd21JI1eH6tHrSqUItkQHAart9o74dJn9micI3WrN5yEBXgzemqWkQGV4QzFHLyd3wk-XvP1s2GhCeWlJZOQADzgzhLoxzFUbgM5xULWHp3yfpePGISlM4ZpBwTHcqQt1i_UkNX_zCxa3RYQbZFDfWW0-UPbvHw40t5BY6X7nTPMhPjPGnnPq18jyYBrWBbC9vBWs2o2IHAe5VlkHtmy_v5fymFJLfFzS784Nxp2qPJFWxI7IfrpNckHxohhs5LoieQivw2MyU2shFOUjgwe0xQgyg6UBg5PwNknGTTmzYdavCM4BiQ7moqOuoI15ccIEmc_uMiuLVEfDPlzejP9PQv6mj6IlkJ8HSu4KZU-LxKmtLnGeEwMjVAZBIhsOwzMkaMF1nZ70pgv2YYwBQyVVs`
						},
				    })
				    .then(res => {
				        if (res.data.code == 200) {
				            if (res.data.status) {
				        		this.$msg('回复成功').then(() => {
									console.log('更新回复列表')
								})
				            } else {
				                wx.showModal({
				                    content: res.data.message || '请下拉页面刷新重试',
				                    showCancel: false
				                });
				            }
				        } else {
				            wx.showModal({
				                content: res.data.message || '请下拉页面刷新重试',
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			},
			sendComment(id) {
				this.$http
				    .post({
				        api: 'api/discover/comment',
						data: {
							discover_id: id,
							content: this.comment,
							to_user_id: 0
						},
						header: {
						   Authorization: `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImFhNDcwZDYxZGRjODNhMjYxM2M3NzQ4MzFiNzYyYmUzMzgwZTA0ZGMyN2EzMjQyNmI4YWM5YjBlMDBlMGFlZGVkZTQ2OGZlMWU2M2Q3ODJkIn0.eyJhdWQiOiIzIiwianRpIjoiYWE0NzBkNjFkZGM4M2EyNjEzYzc3NDgzMWI3NjJiZTMzODBlMDRkYzI3YTMyNDI2YjhhYzliMGUwMGUwYWVkZWRlNDY4ZmUxZTYzZDc4MmQiLCJpYXQiOjE2MzE2MTMxNjksIm5iZiI6MTYzMTYxMzE2OSwiZXhwIjoxNjYzMTQ5MTY5LCJzdWIiOiI2Iiwic2NvcGVzIjpbXX0.B9vW9urpv4KlYYMLRV0tN6iZNvlhgCeaO31pZC0ZQTIZx4aahhDb7wAw9yZH0_fHHcn6GXu95O6MPI2jzgCOXcNygHV-gztxBGUiRhg-Qb9NraAZEzXpqEgQKHvbqr6NSmnu1Kx_oT6tmWFmYtXQn5Pi6lxtUCfiDGYZItQDdiORAly6BvkgQjaLsNCLMvO1dhRN3nvM3giR5nI0zmJVNbwwfIfH9Vp8uicr7la5aL_EoZnkVJRrd0WOZCOs2U5zzQJLwnwknkWXBS6sWy0wJCVd0lXJwDitsE8i0r8OchnAWW_Jq12O5frYwrhfe9DEl0CvTz6em72_YbFlC0PB63z19QGnccWBj1pl2bU9Ti_K7-9f-Kn8ZKnt03AmYmN77YaNqOwMutlifI7_ZKRRcQ45ivxtgeLaLtFPJ6pJ3bhYu8IjIUER9zzrWLa785eWbuMsE3rPfnU7XAxXriYa7TGvo2mtz3_b9hJL3fBp3Ll3TTOPcoRraN922Xd7dxfiE9wdPI9SIvwzu_fqm5xh-xaaqJUhSvRSzWODsdJQW5NSl08jHFIr-anEXbjThMtk1HX_r6X742fzncuLMNSnYvkoDIe0X4fzfjp25sV27b0cUodzsCbKyyC8aZDbRuQ6n1TxiGxUBnivXkBSKxXLiWjDRThRZ-AhRRC6IRzmTOo`
						},
				    })
				    .then(res => {
				        if (res.data.code == 200) {
				            if (res.data.status) {
				        		this.$msg('评论成功').then(() => {
									console.log('更新评论列表')
								})
				            } else {
				                wx.showModal({
				                    content: res.data.message || '请下拉页面刷新重试',
				                    showCancel: false
				                });
				            }
				        } else {
				            wx.showModal({
				                content: res.data.message || '请下拉页面刷新重试',
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			},
			addLike(id) {
				this.$http
				    .post({
				        api: 'api/discover/like',
						data: {
							discover_id: id
						},
						header: {
						   Authorization: `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjczYTViNTA1NDNlYmNmMjFkNmZiMGJlNzc0NmJmMDE4MDc3MTRkY2Y1MjBiMjM3MGQyZDAyYzQxMTlmMDU4ZTkwMTUxNDQwOTk4MjJhODFhIn0.eyJhdWQiOiIzIiwianRpIjoiNzNhNWI1MDU0M2ViY2YyMWQ2ZmIwYmU3NzQ2YmYwMTgwNzcxNGRjZjUyMGIyMzcwZDJkMDJjNDExOWYwNThlOTAxNTE0NDA5OTgyMmE4MWEiLCJpYXQiOjE2MzExNjk1MDIsIm5iZiI6MTYzMTE2OTUwMiwiZXhwIjoxNjYyNzA1NTAyLCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.p0YoIC_bhOxIOugYxDQTOFIK9t2ORiHQq9H6JWzdByBJKWkFDBisKaXZJvzn1HdU5cjNQnHaBfWpG1Ed15cQlB2LdpXxxc38iaaGW2J6WhlLhVkehloii-TtlZTOeqNrpAHbSe5DRrmm_L07Llm9wr1T1A6pP3MhzdHiZ9d6748j3_cJjK4CJUl3WfYRTaozLFlI00OCW4zzGfgivSighjSFyhqMoHnQ2iSoeWdcJnYpXzXQdc5AXvXOt6eIIa7o2F6Ma1tUseTYVijEVfngdfd21JI1eH6tHrSqUItkQHAart9o74dJn9micI3WrN5yEBXgzemqWkQGV4QzFHLyd3wk-XvP1s2GhCeWlJZOQADzgzhLoxzFUbgM5xULWHp3yfpePGISlM4ZpBwTHcqQt1i_UkNX_zCxa3RYQbZFDfWW0-UPbvHw40t5BY6X7nTPMhPjPGnnPq18jyYBrWBbC9vBWs2o2IHAe5VlkHtmy_v5fymFJLfFzS784Nxp2qPJFWxI7IfrpNckHxohhs5LoieQivw2MyU2shFOUjgwe0xQgyg6UBg5PwNknGTTmzYdavCM4BiQ7moqOuoI15ccIEmc_uMiuLVEfDPlzejP9PQv6mj6IlkJ8HSu4KZU-LxKmtLnGeEwMjVAZBIhsOwzMkaMF1nZ70pgv2YYwBQyVVs`
						},
				    })
				    .then(res => {
				        if (res.data.code == 200) {
				            if (res.data.status) {
				        		this.getHotActivity();
				            } else {
				                wx.showModal({
				                    content: res.data.message || '请下拉页面刷新重试',
				                    showCancel: false
				                });
				            }
				        } else {
				            wx.showModal({
				                content: res.data.message || '请下拉页面刷新重试',
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			},
			getDiscoverDetails() {
				this.$http
				    .post({
				        api: 'api/discover/detail',
						data: {
							id: this.discover_id,
							user_id: 1
						},
				    })
				    .then(res => {
				        if (res.data.code == 200) {
				            if (res.data.status) {
								this.discover_details = res.data.data;
								this.is_like = Boolean(res.data.data.is_like) || false;
				        		console.log(this.is_like);
				            } else {
				                wx.showModal({
				                    content: res.data.message || '请下拉页面刷新重试',
				                    showCancel: false
				                });
				            }
				        } else {
				            wx.showModal({
				                content: res.data.message || '请下拉页面刷新重试',
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			}
		}
	}
</script>

<style scoped lang="scss">
	.tag-father {
		position: relative;
	}
	.head-tag {
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 24rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #15716E;
		border: 1rpx solid #FFFFFF;
		position: absolute;
		left: 66rpx;
		top: 70rpx;
		z-index: 99;
	}
	/deep/.input-placeholder{
		color: #aaa;
		font-size: 28rpx;
	}
	.rom-search {
		width: 279rpx;
		height: 70rpx;
		background: #F4F8F8;
		border-radius: 35rpx;
		padding-left: 30rpx;
		font-size: 28rpx;
	}
	.comment-tab {
		padding: 0  0 0 32rpx;
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		align-items: center;
		width: 100%;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		z-index: 99;
		background-color: white;
	}
	.comment-replay {
		margin-left: 96rpx;
		margin-top: 28rpx;
	}
	.comment-img {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
	}
	.comment{
		width: 100%;
		height: max-content;
		background-color: white;
		border-radius: 5rpx;
		box-sizing: border-box;
		padding: 32rpx;
		font-size: 28rpx;
		color: #777777;
		padding-bottom: 120rpx;
	}
	.qzone-img {
		position: relative;
		width: 220rpx;
		height: 220rpx;
		border-radius: 10rpx;
		margin-right: 12rpx;
		&:nth-child(3n) {
			margin-right: 0;
		}
		&:nth-child(n + 4) {
			margin-top: 12rpx;
		}
	}
	.head-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
</style>