hire-wx-houxuanren/pagesC/luntan-info.vue

<template>
	<view class="luntan-info">
		<view class="luntan-top">
			<view class="top-user u-flex u-row-between">
				<image class="user-head" @click="touser" :src="detail.userinfo.avatar" mode=""></image>
				<view class="user-center u-flex-1 u-flex-col">
					<text>{{detail.userinfo.name || ''}}</text>
					<text>{{detail.userinfo.company_name ? detail.userinfo.company_name.name : ''}}</text>
				</view>
				<text class="guanzhu-btn" @click="guanzhu(detail)">{{detail.is_follow ? '已关注' : '关注'}}</text>
			</view>
			<view class="luntan-text">
				{{detail.content || ''}}
			</view>
			<view class="luntan-img u-flex u-row-between u-flex-wrap" v-if="detail.images">
				<image :src="a" v-for="(a,b) in detail.images.split(',')" :key="b" @click="$openimage(detail.images.split(','),b)" mode="aspectFill"></image>
				<view style="width: 214rpx;"></view>
			</view>
			<view class="quanzi-box u-flex" v-if="detail.circle" @click="toquanzi">
				<image src="../static/images/quanzi.png" mode=""></image>
				<text>{{detail.circle.title}}</text>
			</view>
			<view class="top-down u-flex">
				<text>{{detail.createtime || ''}}</text>
				<text>{{detail.read || 0}}阅读</text>
			</view>
		</view>
		<u-gap height="20" bg-color="#F6F6F6"></u-gap>
		<view class="luntan-pinglun">
			<view class="pinglun-title">
				评论 {{pinglunlist.length}}
			</view>
			<view class="pinglun-item u-flex u-col-top" v-for="(item,index) in pinglunlist" :key="index">
				<image class="user-img" :src="item.userinfo.avatar" mode=""></image>
				<view class="pinglun-right u-flex-1">
					<view class="pinglun-user u-flex u-row-between">
						<view class="pinglun-user-center u-flex-1 u-flex-col">
							<text>{{item.userinfo.name || '暂无昵称'}}</text>
							<text>{{item.userinfo.company_name.name}}</text>
						</view>
						<view class="pinglun-dianzan u-flex" @click="dianzanpinglun(item)">
							<image v-if="item.user_is_like == 0" src="../static/images/dianzan2.png" mode=""></image>
							<image v-else src="../static/images/dianzan1.png" mode=""></image>
							<text :style="{color:item.user_is_like == 0 ? '#777777' : '#0C66C2'}">{{item.like}}</text>
						</view>
					</view>
					<view class="pinglun-text">
						{{item.content}}
					</view>
					<view class="pinglun-time u-flex">
						<text>{{$u.timeFrom(new Date(item.createtime.replace(/-/g, "/")).getTime())}}</text>
						<text @click="huifuitem(item)">回复</text>
					</view>
					<view v-if="item.children && item.children.length > 0">
						<view class="pinglun-item u-flex u-col-top" v-for="(a,b) in item.children" :key="b">
							<image class="user-img" :src="a.userinfo.avatar" mode=""></image>
							<view class="pinglun-right u-flex-1">
								<view class="pinglun-user u-flex u-row-between">
									<view class="pinglun-user-center u-flex-1 u-flex-col u-row-center">
										<text>{{a.userinfo.name}}</text>
										<text>{{a.userinfo.company_name.name}}</text>
									</view>
									<view class="pinglun-dianzan u-flex" @click="dianzanpinglun(a)">
										<image v-if="a.user_is_like == 0" src="../static/images/dianzan2.png" mode=""></image>
										<image v-else src="../static/images/dianzan1.png" mode=""></image>
										<text :style="{color:a.user_is_like == 0 ? '#777777' : '#0C66C2'}">{{a.like}}</text>
									</view>
								</view>
								<view class="pinglun-text">
									{{a.content}}
								</view>
								<view class="pinglun-time u-flex">
									<text>{{$u.timeFrom(new Date(a.createtime.replace(/-/g, "/")).getTime())}}</text>
									<!-- <text>回复</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="safe-area-inset-bottom"></view>
		<view class="pinglun-input">
			<view class="pingnum-down-btn u-flex u-row-between">
				<text class="input" @click="showinput = true">发表一下你的想法….</text>
				<view class="u-flex-col u-col-center btn-item">
					<image src="../static/images/pinglun.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<text> {{total_count}}</text>
				</view>
				<view class="u-flex-col u-col-center btn-item" @click="dianzan(detail)">
					<image v-if="detail.is_like" src="../static/images/dianzan.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					<image v-else src="../static/images/dianzan3.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					<text>{{detail.like_count || 0}}</text>
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<view class="huifu-input u-flex-col u-row-right" v-if="showinput" @click="showinput = false">
			<input @click.stop type="text" :focus="showinput" v-model="content" @confirm="huifu" :adjust-position="false" placeholder="回复" confirm-type="send" :confirm-hold="true">
			<view :style="{height:inputheight + 'px'}"></view>
		</view>
	</view>
</template>

<script>
	import {commentlike,articlelike,follow,articlecomment,readcomment,articledetails} from "@/units/inquire.js"
	export default {
		data() {
			return {
				showinput: false,
				inputheight: 0,
				id: '',
				detail: {
					userinfo: {}
				},
				pinglunlist: [],
				content: '',
				page: 1,
				total: 0,
				total_count: 0,
				pinglundetail: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdetail()
			this.getpinglun()
			uni.onKeyboardHeightChange(e => {
				this.inputheight = e.height
				if (e.height == 0) {
					this.showinput = false
				}
			})
		},
		onReachBottom() {
			if (this.pinglunlist.length != this.total) {
				this.page++
				this.getpinglun()
			}
		},
		methods: {
			dianzanpinglun(item) {
				uni.showLoading({
					mask: true,
					title: '请稍后'
				})
				commentlike({
					id: item.id
				}).then(res => {
					if (res.code == 1) {
						item.user_is_like = item.user_is_like == 0 ? 1 : 0
						if (item.user_is_like == 1) {
							item.like++
						} else {
							item.like--
						}
					}
				})
			},
			toquanzi() {
				uni.navigateTo({
					url: "/pagesC/quanzi-info?id=" + this.detail.circle_id
				})
			},
			touser() {
				uni.navigateTo({
					url: "/pagesC/my-luntan?id=" + this.detail.uid
				})
			},
			guanzhu(item) {
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				follow({
					type: 1,
					id: item.uid
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						this.detail.is_follow = this.detail.is_follow ? null : {}
					}
				})
			},
			dianzan(item) {
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				
				articlelike({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						item.is_like = item.is_like ? null : {}
						if (item.is_like) {
							item.like_count++
						} else {
							item.like_count--
						}
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			huifuitem(item) {
				this.pinglundetail = item
				this.showinput = true
			},
			huifu() {
				if (!this.content) {
					this.$u.toast("请输入内容")
					return
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				articlecomment({
					id: this.id,
					content: this.content,
					comment_id: this.pinglundetail.id
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						this.pinglundetail = {}
						this.content = ''
						this.showinput = false
						setTimeout(() => {
							this.page = 1
							this.pinglunlist = []
							this.getpinglun()
						}, 800)
					}
				})
			},
			getpinglun() {
				readcomment({
					id: this.id,
					start_loca: this.page,
					is_all: 1
				}).then(res => {
					this.total = res.data.total
					this.total_count = res.data.total_count
					this.pinglunlist = this.pinglunlist.concat(res.data.data)
				})
			},
			getdetail() {
				articledetails({
					id: this.id
				}).then(res => {
					this.detail = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.luntan-info {
		.huifu-input {
			position: fixed;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 100vh;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.5);

			input {
				width: 750rpx;
				box-sizing: border-box;
				height: 124rpx;
				padding: 0 32rpx;
				font-size: 30rpx;
				border-radius: 28rpx 28rpx 0 0;
				background-color: #fff;
			}
		}

		.pinglun-input {
			position: fixed;
			bottom: 0;
			z-index: 99;
			left: 0;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 0rpx 0.4rpx rgba(0, 0, 0, 0.05);
			width: 750rpx;

			.pingnum-down-btn {
				padding: 20rpx 32rpx;

				.btn-item {
					image {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 6rpx;
					}

					text {
						font-size: 20rpx;
						font-family: ArialMT;
						color: #777777;
					}
				}

				.input {
					width: 494rpx;
					line-height: 68rpx;
					background: #F6F6F6;
					border-radius: 38rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B8B8B8;
					padding: 0 32rpx;
				}
			}
		}

		.luntan-pinglun {
			padding: 0 32rpx;

			.pinglun-item {


				.pinglun-right {

					.pinglun-time {
						margin-bottom: 28rpx;

						text:first-child {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;
							margin-right: 24rpx;
						}

						text:nth-child(2) {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #222222;
						}
					}

					.pinglun-text {
						padding: 0 36rpx 0 0;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-bottom: 20rpx;
					}

					.pinglun-user {
						margin-bottom: 24rpx;

						.pinglun-dianzan {
							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 4rpx;
							}

							text {
								font-size: 24rpx;
								font-family: ArialMT;
							}
						}



						.pinglun-user-center {
							height: 68rpx;

							text:first-child {
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #222222;
							}

							text:nth-child(2) {
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #818389;
							}
						}
					}
				}

				.user-img {
					width: 68rpx;
					height: 68rpx;
					border-radius: 100rpx;
					margin-right: 16rpx;
				}

			}

			.pinglun-title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 112rpx;
			}
		}

		.luntan-top {
			padding: 0 32rpx;

			.top-down {
				height: 82rpx;
				font-size: 24rpx;
				font-family: ArialMT;
				color: #888888;

				text {
					margin-right: 32rpx;
				}
			}

			.quanzi-box {
				height: 50rpx;
				background: #F6F6F6;
				border-radius: 28rpx;
				padding: 0 20rpx;
				display: inline-flex;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #555555;
				}
			}

			.luntan-img {
				image {
					width: 214rpx;
					height: 214rpx;
					margin-bottom: 20rpx;
					border-radius: 12rpx;
				}
			}

			.luntan-text {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.top-user {
				height: 130rpx;

				.user-head {
					width: 72rpx;
					height: 72rpx;
					border-radius: 100rpx;
				}

				.guanzhu-btn {
					width: 112rpx;
					line-height: 48rpx;
					border-radius: 24rpx;
					border: 1rpx solid #0C66C2;
					text-align: center;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #0C66C2;
				}

				.user-center {
					margin: 0 16rpx;

					text:first-child {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
						margin-bottom: 4rpx;
					}

					text:last-child {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #818389;
					}
				}
			}
		}
	}
</style>