discounts-minapp/study/community/detail.vue

<template>
	<view class="detail">
		<view class="zs-header" :style="{height:statusBarHeight+navBareight +'px'}" @click="back">
			<image class="back" src="@/static/back-btn.png" mode=""></image>
			<view class="author-info">
				<image class="head" :src="info.head" mode=""></image>
				<view class="user-name">
					{{info.userName}}
				</view>
			</view>
		</view>
		<!-- <image class="banner" :class="[tall?'tall':'']" :src="info.src" mode=""></image> -->
		
		<view class="container" :style="{paddingTop:statusBarHeight+navBareight +'px'}">
			
			<view class="content">
				<view class="title">
					{{info.communityTitle}}
				</view>
				<rich-text class="rich-text" :nodes="info.communityDetail"></rich-text>
				<!-- <view class="text">
					“跨过这片海，我们终究会相遇”
					这个季节，澜洲岛的海风很舒服
					既不热，也不太凉，穿连衣裙只刚刚好
					
					和朋友一起从重庆自驾。到涸洲岛
					自由省愚，自驾的感觉太棒啦!
					给姐妹疆们分享一下
					我的涸洲岛自驾6 日行程
					就这样玩，绝绝子~
				</view> -->
				
				<view class="time-box">
					<view class="time">
						{{info.createTime}}
					</view>
					<view class="address">
						四川
					</view>
				</view>
			</view>
			
			<!-- 评论列表 -->
			<view class="comment">
				<view class="title">
					共3条评论
				</view>
				<zs-list mt="0" @load="loadMore" :status="status">
					<view class="comment-item" v-for="(item,index) in list" :key="index">
						<image class="head" :src="item.head" mode=""></image>
						<view class="info">
							<view class="user-name">
								{{item.userName}}
							</view>
							<view class="comment-text">
								{{item.content}}
							</view>
							<view class="time-box">
								<view class="time">
									{{item.createTime}}
								</view>
								<view class="address">
									{{item.ip}}
								</view>
							</view>
						</view>
						<view class="reply">
							回复
						</view>
					</view>
				</zs-list>
				
			</view>
			
		</view>
		
		<view class="operate-box">
			<view class="input-box">
				<image class="write" src="../../static/write.png" mode=""></image>
				<input confirm-type="send" class="input" type="text" placeholder="说点什么吧..." v-model="text" @confirm="send" />
			</view>
			<view class="box">
				<view class="icon-box">
					<image class="icon" @click="handleLike" :src="info.isLike?require('../../static/like.png'):require('../../static/unLike.png')" mode=""></image>
					<view class="num">
						999
					</view>
				</view>
				<view class="icon-box">
					<image class="icon" src="../../static/comment.png" mode=""></image>
					<view class="num">
						999
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {detail,likes,getLikes} from '@/api/study.js';
	export default {
		data() {
			return {
				id:0,
				text:'',
				info:{
					communityTitle:'',
					createTime:'',
					head:'',
					userName:'',
					communityDetail:'',
					likeCount:'',
					viewedCount:'',
					isLike:false,
				},
				tall:false,
				statusBarHeight:20,//顶部状态栏高度
				navBareight: 45,//导航栏高度
				status: 'noMore',
				list:[
					{
						head:require('../../static/logo.png'),
						userName:'李老师',
						content:'继续加油哦，看好你！',
						createTime:'2023-08-29 21:13:56 ',
						ip:'成都市',
					}
				]
			}
		},
		methods: {
			getLikes(){
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				if(!userInfo) return this.info.isLike = false
				let userId = userInfo.userId
				getLikes({communityItemId:this.id,userId}).then(res=>{
					if(res.state == 'Success'){
								
					}
				})
			},
			handleLike(){
				// if(uni.getStorageSync('token')){
				// 	likes({communityItemId:this.id,}).then(res=>{
				// 		if(res.state == 'Success'){
							
				// 		}
				// 	})
				// }else{
					
				// }
			},
			send(val){
				console.log(val);
				this.list.push({
						head:require('../../static/logo.png'),
						userName:'李老师',
						content:val.detail.value,
						createTime:uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
						ip:'成都市',
				})
			},
			back(){
				var pages = getCurrentPages();
				if(pages.length == 1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack();
				}
			},
			loadMore() {
				
			},
			detail(tabId){
				detail({tabId}).then(res=>{
					if(res.state == 'Success'){
						this.info.communityTitle = res.content.communityTitle
						this.info.createTime = res.content.createTime
						this.info.likeCount = res.content.likeCount
						this.info.viewedCount = res.content.viewedCount
						this.info.communityDetail = res.content.communityDetail.replace(/<img/gi, '<img class="img_class" ')
						console.log(this.info);
					}
				})
			}
		},
		onLoad(options) {
			this.id = options.id
			this.detail(options.id)
			let that = this
			const eventChannel = this.getOpenerEventChannel();
			if(JSON.stringify(eventChannel) !=='{}'){
				eventChannel.on('detail', function(data) {
					that.info.userName = '官方'
					that.info.head = data.publishLogo || require('../../static/logo.png')
					
				})
			}
		},
		created() {
			//获取手机系统信息 -- 状态栏高度
			let {
				statusBarHeight,
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			//去除
			//#ifndef H5 || MP-ALIPAY ||APP-PLUS
			//获取小程序胶囊的高度
			let {
				top,
				bottom,
				left
			} = uni.getMenuButtonBoundingClientRect()
			//高度 =（胶囊底部高低-状态栏高度）+（胶囊顶部高度-状态栏内的高度）
			this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight)
			//#endif
		
		}
	}
</script>

<style lang="scss" >
.detail{
	.zs-header{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		background: #fff;
		z-index: 999;
		display: flex;
		align-items: flex-end;
		box-sizing: border-box;
		padding: 6px 6px 0 20rpx;
		transition: background .3s ease-in-out;
		
		.back {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			bottom: 10px;
			left: 20rpx;
		}
		.author-info{
			display: flex;
			align-items: center;
			margin-left: 40rpx;
			.head{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
			.user-name{
				font-weight: bold;
				color: #222222;
				font-size: 28rpx;
				margin-left: 12rpx;
			}
		}
		
	}
	.banner{
		width: 100%;
		height: 750rpx;
	}
	.banner.tall{
		height: 1000rpx;
	}
	
	.container{
		padding: 0 30rpx;
		.content{
			border-bottom: 1rpx solid #F0F0F0;
			.title{
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
				margin: 28rpx 0;
				
			}
			.rich-text{
				color: #222222;
				.img_class{
					max-width: 100%!important;
				}
			}
			.text{
				color: #222222;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.time-box{
				display: flex;
				align-items: center;
				font-size: 20rpx;
				color: #AAAAAA;
				margin: 28rpx 0;
				.address{
					margin-left: 16rpx;
				}
			}
		}
		
		.comment{
			.title{
				font-weight: bold;
				color: #222222;
				font-size: 24rpx;
				margin: 28rpx 0 20rpx;
			}
			.comment-item{
				display: flex;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #F0F0F0;
				.head{
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					align-self: flex-start;
				}
				.info{
					flex: 1;
					margin-left: 22rpx ;
					.user-name{
						color: #AAAAAA;
						font-size: 24rpx;
					}
					.comment-text{
						color: #222222;
						font-size: 24rpx;
						margin-top: 12rpx;
					}
					.time-box{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #AAAAAA;
						margin: 12rpx 0;
						.address{
							margin-left: 16rpx;
						}
					}
				}
				.reply{
					color: #CCCCCC;
					font-size: 24rpx;
				}
			}
		}
	}
	.operate-box{
		position: fixed;
		bottom: 0%;
		left: 0%;
		padding: 30rpx 30rpx 60rpx;
		background: #fff;
		width: 100%;
		border-top: 1rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		.input-box{
			width: 376rpx;
			height: 60rpx;
			background: #F6F6F6;
			border-radius: 30rpx;
			position: relative;
			.write{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 50%;
				left: 24rpx;
				transform: translateY(-50%);
			}
			.input{
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				padding-left: 80rpx;
				box-sizing: border-box;
				color: #AAAAAA;
				font-size: 28rpx;
			}
		}
		.box{
			flex: 1;
			display: flex;
			align-items: center;
			margin-left: 26rpx;
			.icon-box{
				display: flex;
				align-items: center;
				flex: 1;
				.icon{
					width: 40rpx;
					height: 40rpx;
				}
				.num{
					color: #222222;
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
}
</style>