HHSLinkSLink/HSLink-app/pages/tabbar/homepage/data-details.vue

<template>
	<view class="page">
		<view class="top">
			<view class="title">
				{{noticeInfo.title}}
			</view>
			<view class="label">
				{{noticeInfo.label}}
			</view>
			<view class="author-and-time">
				<view class="author" @tap="goToUserInfo(noticeInfo)" style="padding: 0;">
					{{noticeInfo.author_name}}
				</view>
				<view class="time">
					{{noticeInfo.create_time}}
				</view>
			</view>
			<view class="content">
				<textarea placeholder="请输入文章内容"
							v-model="noticeInfo.content"
							auto-height="true"
							disabled="true"
				></textarea>
			</view>
		</view>
		<view class="feedback">
			<view class="reading-volume">
				阅读 {{noticeInfo.read_number}}
			</view>
			<view class="fabulous">
				<uni-fav 	:checked="noticeInfo.isCollection === 0 ? false : true" 
							:class="noticeInfo.isCollection === 0 ? 'grey' : 'blue'"
							class="favBtn" 
							circle="true" 
							bg-color="#FFFFFF"
							bg-color-checked="#1296DB" 
							@tap="collection(noticeInfo.isCollection)"></uni-fav>
			</view>
		</view>
		<view class="no-message" v-if="isMessage === true && noMessage === true"  @tap="addMessage">
			写留言
		</view>
		<view class="leave-message" v-if="noMessage === false">
			<view class="message-title">
				<view class="left">
					精选留言
				</view>
				<view class="right" @tap="addMessage">
					写留言
				</view>
			</view>
			<view class="one-message" v-for="(item,index) in messageList" :key="index">
				<view class="left">
					<view class="header-photo">
						<avatar :userName="item.real_name" size="50"></avatar>
					</view>
					<view class="message">
						<view class="name">
							{{item.real_name}}
						</view>
						<view class="message-content">
							{{item.content}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="messageDialog ? 'show' : ''" :style="[{'margin-top': -InputBottom/2+'px'}]">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="title-content bg-white">留言</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<input type="text"  :adjust-position="false" 
										:focus="false" 
										v-model="messageContent" 
										@focus="InputFocus" 
										@blur="InputBlur"
										placeholder="请输入留言"/>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="clickPromptConfirm">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js';
	import uniFav from '@/components/uni-fav/uni-fav.vue';
	import avatar from "@/pages/components/avatar/avatar.vue";
	export default {
		components: {
			avatar,
			uniFav
		},
		data() {
			return {
				//键盘高度
				InputBottom: 0,
				//文章信息
				noticeInfo: {},
				//文章ID
				noticeId: '',
				//有无留言
				noMessage: false,
				//留言列表
				messageList: [],
				//留言窗口
				messageDialog: false,
				//留言内容
				messageContent: '',
				//是否有留言功能
				isMessage: true
			}
		},
		onLoad(option) {
			this.noticeId = option.noticeId;
			this.isMessage = option.isMessage || true;
		},
		onReady() {
			
		},
		async mounted() {
			await this.getMessageList();
			await this.updateReadNumber();
		},
		onPullDownRefresh () {
			uni.startPullDownRefresh();
		},
		methods: {
			/**
			 * 浏览量+1
			 */
			updateReadNumber() {
				request.post("/hs/updateReadNumber",{
					noticeId: this.noticeInfo.id,
					number: Number(this.noticeInfo.read_number)+1
					}).then(res=>{
						console.log("浏览量+1",res);
						if (res.data > 0) {
							this.getMessageList()
						} else {
							uni.showToast({
								icon: "none",
								title: "服务器出了小差，请稍后再试"
							})
						}
					},err => {
						console.log("err",err)
					})
			},
			/**
			 * 收藏
			 */
			collection(option) {
				const URL = {
					"0": "/hs/addCollection",
					"1": "/hs/cancelCollection",
				}
				request.post(URL[option],{
					noticeId: this.noticeInfo.id,
					userId: uni.getStorageSync("userInfo").user_id,
					}).then(res=>{
						console.log("收藏/取消收藏",res);
						if (res.data > 0) {
							this.getMessageList()
						}
					},err => {
						console.log("err",err)
					})
			},
			/**
			 * 调整弹框高度
			 */
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			/**
			 * 关闭留言窗口
			 */
			hideModal() {
				this.messageDialog = false;
			},
			/**
			 * 跳转人员页面
			 * @param {Object} item
			 */
			goToUserInfo(item) {
				if (item.author_id === uni.getStorageSync("userInfo").user_id) {
					uni.switchTab({
					    url: '/pages/tabbar/my/my'
					});
				} else {
					uni.navigateTo({
						url: `/pages/person-info-page/person-info-page?userId=${item.author_id}`
					})
				}
			},
			/**
			 * 点击留言弹出输入框确定
			 */
			clickPromptConfirm() {
				if (this.messageContent === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入留言，亲'
					})
				} else {
					request.post('/hs/addMessage',{
						noticeId: this.noticeInfo.id,
						userId: uni.getStorageSync("userInfo").user_id,
						content: this.messageContent
						}).then(res=>{
							console.log("新增留言结果",res);
							if (res.data === 1) {
								this.messageDialog = false;
								uni.showToast({
									icon: 'loading',
									title: '留言成功',
								});
								setTimeout(()=>{
									this.getMessageList();
								},1000);
							}
						},err=>{
							console.log("err",err);
					})
				}
			},
			/** 
			 * 获取留言 
			 */
			getMessageList() {
				return request.post('/hs/getOneContent',{
					id: this.noticeId,
					userId: uni.getStorageSync("userInfo").user_id
					}).then(res=>{
					this.noMessage = res.data.message.length === 0 ? true : false;
					this.noticeInfo = res.data.content;
					this.messageList = res.data.message;
					console.log("一条数据数据",res);
				},err=>{
					console.log("err",err);
				});
			},
			/**
			 * 新增留言（打开弹框）
			 */
			addMessage() {
				this.messageDialog = true;
			}
			
		}
	}
</script>

<style scoped>
	.blue{
		border: 1rpx solid #1296DB!important;
	}
	.grey{
		border: 1rpx solid #989898!important;
	}
	.title-content{
		width: calc(100% - 200rpx);
		text-align: center;
	}
	.padding-xl input{
		background-color: #FFFFFF;
		text-align: left;
	}
	.one-message{
		margin-bottom: 20rpx;
	}
	.page .top, .one-message{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	.content {
		background-color: #F1F1F1;
		width: 100%;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	textarea{
		text-indent: 32rpx;
		line-height: 1.5;
		width: 100%;
		height: 100%;
	}
	.message-title .left{
		color: #a7a7a7;
	}
	.message-title .right{
		color: #1296DB;
	}
	.message-title{
		padding: 20rpx;
		display: flex;
		flex-flow: wrap;
		justify-content: space-between;
	}
	.message .name{
		color: #a7a7a7;
		margin-bottom: 10rpx;
	}
	.left .message{
		margin-left: 32rpx;
	}
	.one-message .left{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.one-message{
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
		align-items: center;
	}
	.no-message{
		text-align: center;
		padding: 20rpx 0;
	}
	.reading-volume, .fabulous, .no-message, .message-fabulous{
		color: #1296DB;
	}
	.fabulous image, .message-fabulous image{
		width: 36rpx;
		height: 36rpx;
		display: inline-block;
	}
	.label{
		margin: 20rpx 0;
		border-radius: 10rpx;
		width: 4rem;
		font-size: 30rpx;
		text-align: center;
		color: #ff9041;
		border: 1rpx solid #ff9041;
	}
	.content{
		padding: 20rpx!important;
	}
	.feedback{
		padding: 20rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}
	.author-and-time, .feedback{
		display: flex;
	}
	.author{
		color: #08ACEE;
	}
	.time{
		color: #a5a5a5;
	}
	.author, .time, .reading-volume, .fabulous{
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	.title{
		padding: 20rpx 0;
		font-size: 36rpx;
	}
	
</style>