cbz/page_index/pages/index/newDetail.vue

<template>
	<view class="content">
		<view class="tile">{{pageData.title}}</view>
		<view class="hflex acenter " style="box-sizing: border-box;padding: 0 30rpx;">
			<view class="img_box">
				<image :src="pageData.user.avatar" mode="aspectFill" class="avatar"></image>
				<view class="type">V</view>
			</view>
			<view class="text_style1">{{pageData.user.username}}</view>
		</view>
		<!-- <image :src="pageData.img" class="img" v-if="pageData.image"></image> -->
		<u-parse :content="pageData.content" style="box-sizing: border-box;padding: 0 30rpx;"></u-parse>
		<!-- <video :src="pageData.video" play-btn-position="center" class="video" v-if="pageData.video"></video> -->
		<view class="date">发布于{{pageData.create_time}}</view>
		<view class="comment">
			<view class="comment_title">评论{{comment.total?comment.total:''}}</view>
			<view v-if="comment.total == 0" class="hflex acenter jcenter comment_none">暂无评论</view>
			<view v-else>
				<block v-for="(item,index) in comment.data" :key="index">
					<view class="hflex">
						<image :src="item.user.headimg" class="headimg"></image>
						<view class="comment_right">
							<view class="comment_name">{{item.uer.name}}</view>
							<view class="comment_content">{{item.content}}</view>
							<view class="comment_date">{{item.create_time}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="bottom hflex acenter jbetween">
			<view class="hflex acenter" @click="getLike">
				<image src="/static/images/comment/dianzan1.png" class="dianzan" v-if="!pageData.is_liked"></image>
				<image src="/static/images/comment/dianzan2.png" class="dianzan" v-else></image>
				<view class="dz_text">{{!pageData.is_liked?'点赞':pageData.likes_count}}</view>
			</view>
			<view class="hflex acenter ">
				<u-input v-model="message" border="none" placeholder="我来说两句" shape="circle"></u-input>
				<image src="/static/images/comment/comment.png" class="comment_icon" @click="send"></image>
				<view class="dz_text">{{comment.total == 0?'评论':comment.total}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageData: {
				},
				message: '',
				name: '船百知官方账号',
				comment: [],
				id: '',
				page: 1,
				limit: 10,
				total: 10
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.getData()
		},
		
		methods: {
			getData() {
				$api.req({
					url: '/data/api.Xw/show',
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageData = res.data
						that.getComment()
					}
				})
			},
			getComment() {
				$api.req({
					url: '/data/api.Xw/comments',
					data: {
						id: that.id,
						page: that.page,
						limit: that.limit
					}
				}, function(res) {
					if(res.code == 1) {
						that.comment = res.data
						that.total = res.data.total
					}
				})
			},
			getLike() {
				if(that.pageData.is_liked) {
					that.pageData.is_liked = 0
					that.pageData.likes_count -=1
				} else {
					that.pageData.is_liked = 1
					that.pageData.likes_count +=1
				}
				$api.req({
					url: '/data/api.Xw/like',
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})
			},
			send() {
				$api.req({
					url: '/data/api.Xw/comment',
					method: 'POST',
					data: {
						id: that.id,
						content: that.message
					}
				}, function(res) {
					if(res.code == 1) {
						that.message = ""
						$api.info(res.info)
						that.getComment()
					}
				})
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		position: relative;
		background: url('../../../static/images/comment/background.png') no-repeat;
		background-size: 100%;
		.tile {
			box-sizing: border-box;
			padding: 24rpx 30rpx;
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
			line-height: 56rpx;
		}
		.img_box {
			width: 56rpx;
			height: 56rpx;
			position: relative;
			.avatar {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
			}
			.type {
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
				width: 28rpx;
				height: 28rpx;
				background: #506DFF;
				border-radius: 12rpx 4rpx 12rpx 4rpx;
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				line-height: 28rpx;
			}
		}
		.text_style1 {
			margin-left: 16rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #222222;
			line-height: 36rpx;
		}
		.box {
			margin: 24rpx 30rpx;
			height: 116rpx;
			background: #F4F4F4;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 24rpx 28rpx;
			.box_icon {
				width: 56rpx;
				height: 68rpx;
			}
			.down {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: #506DFF;
			}
		}
		.date {
			// margin-bottom: 186rpx;
			box-sizing: border-box;
			padding: 0 30rpx 40rpx;
			border-bottom: 1rpx solid #F5F5F5;
			font-size: 26rpx;
			font-weight: 400;
			color: #989898;
			line-height: 18px;
		}
		.comment {
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 30rpx;
			.comment_title {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				padding-bottom: 24rpx;
			}
			.comment_none {
				width: 100%;
				font-size: 32rpx;
				font-weight: 400;
				color: #AFAFAF;
				line-height: 44rpx;
				// padding-top: 24rpx;
			}
			.headimg {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}
			.comment_right {
				width: calc(100% - 88rpx);
				margin-left: 20rpx;
				padding: 0 0 20rpx;
				border-bottom: 1rpx solid #F2F2F2;
			}
			.comment_name {
				font-size: 24rpx;
				font-weight: 500;
				color: #222222;
				line-height: 34rpx;
			}
			.comment_content {
				font-size: 24rpx;
				font-weight: 400;
				color: #222222;
				line-height: 34rpx;
				padding: 16rpx 0 12rpx;
			}
			.comment_date {
				font-size: 20rpx;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
			}
		}
		.bottom {
			width: 100%;
			z-index: 9;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 20rpx 74rpx;
			.dianzan {
				width: 48rpx;
				height: 48rpx;
			}
			.u-input {
				background: #F4F4F4 !important;
				width: 410rpx;
				height: 72rpx;
				margin-right: 16rpx;
				padding: 0 32rpx !important;
			}
			.dz_text {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
				padding-left: 8rpx;
			}
			.comment_icon {
				width: 48rpx;
				height: 48rpx;
			}
			.btn {
				width: 510rpx;
				height: 80rpx;
				background: #506DFF;
				border-radius: 42rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
		.cCanvas {
			position: absolute;
			top: 188rpx;
			left: 50rpx;
			background-color: #fff;
			z-index: 100;
			border-radius: 20rpx;
		}
		.share_content {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100vw;
			height: 100vh;
			background: rgba(0,0,0,0.5);
			backdrop-filter: blur(5px);
			.share_box {
				margin: 148rpx auto;
				width: 650rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 0 40rpx;
				.box_bottom {
					width: 100%;
					padding: 34rpx 0 16rpx;
					border-top: 1rpx dashed #C3C3C3;
					
					.bottom_left1 {
						font-size: 32rpx;
						font-weight: 500;
						color: #222222;
						line-height: 44rpx;
						padding-bottom: 20rpx;
						
					}
					.bottom_left2 {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 32rpx;
					}
					.bottom_right {
						width: 136rpx;
						height: 136rpx;
					}
				}
			}
			.canvas {
				position: absolute;
				top: 188rpx;
				left: 50rpx;
				width: 650rpx;
				min-height: 494rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
			}
			.share_bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 388rpx;
				background: #F5F7FF;
				border-radius: 40rpx 40rpx 0px 0px;
				.bottom_item {
					width: 33%;
					margin: 50rpx 0 90rpx;
					border: none !important;
					background-color: #F5F7FF !important;
					
					
					.item_icon {
						width: 76rpx;
						height: 76rpx;
					}
					.item_text {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
						margin-top: 12rpx;
					}
				}
				button::after {
					border: none !important;
				}
				.share_cancel {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
				}
			}
		}
		.img {
			width: 100%;
			height: 320rpx;
			border-radius: 24rpx;
			margin: 40rpx 0 32rpx;
		}
		.video {
			width: 100%;
			height: 400rpx;
			border-radius: 28rpx;
			margin: 20rpx 0;
		}
	}
</style>