yixiang/pageA/info-detail.vue

<template>
	<view class="info-detail">
		<u-navbar :title="title" :autoBack="true" placeholder>
			<view class="u-nav-slot" slot="right">
				<u-icon name="more-dot-fill" size="22" @click="open"></u-icon>
			</view>
		</u-navbar>
		<view class="cover">
			<image :src="detail.image" mode="aspectFill" v-if="type == 'info' || type == 'article'"></image>
			<view class="video hflex acenter jbetween" v-if="type == 'video'">
				<image :src="detail.image" mode="aspectFill" class="img"></image>
				<text class="text_hide2">{{detail.video_title}}</text>
				<image src="../static/images/arrow-right.png" mode="aspectFill" class="icon"></image>
			</view>
			<view v-if="type == 'post'">
				<u-swiper :indicator="true" indicatorMode="dot" :list="detail.images" height="452rpx" radius="12rpx" v-if="detail.images.length > 0">
				</u-swiper>
			</view>
			<view class="title" v-if="detail.title">{{detail.title}}</view>
			<view class="user hflex acenter jbetween" v-if="detail.user">
				<view class="hflex acenter" >
					<image :src="detail.user.avatar" mode="aspectFill"></image>
					<view class="user-name">{{detail.user.username}}</view>
				</view>
				<view class="user-btn hflex acenter jcenter" v-if="detail.user.id == userid">
					<image src="./static/like.png" mode="aspectFill"></image>
					<text>{{item.is_like == 0 ? '关注' : '已关注'}}</text>
				</view>
			</view>
			<view class="detail">
				<u-parse :content="detail.content"></u-parse>
			</view>
			<view class="time hflex jend">发布于{{detail.created_at}}</view>
			<view class="circle hflex acenter" v-if="detail.topic_id != 0 && detail.topic">
				<text>{{detail.topic.title}}</text>
			</view>
			<comment-list :show_jianpan="show_jianpan" :type="type" :id="detail.id" :user="detail.user" v-if="detail.user"></comment-list>
		</view>
		<view style="height: 166rpx;"></view>
		<view class="bottom hflex acneter jbetween">
			<u--input v-model="comment" border="none" placeholder="添加新评论"></u--input>
			<view class="hflex acenter jbetween bottom-right">
				<view class="vflex acenter jbetween bottom-item" @click="tolike">
					<image src="/static/images/dianzan.png" mode="aspectFill" v-if="detail.is_like == 0"></image>
					<image src="/static/images/dianzan2.png" mode="aspectFill" v-else></image>
					<text>{{detail.like_count || 0}}</text>
				</view>
				<view class="vflex acenter jbetween bottom-item">
					<image src="/static/images/pinglun.png" mode="aspectFill"></image>
					<text>{{detail.comment_count || 0}}</text>
				</view>
				<view class="vflex acenter jbetween bottom-item" @click="tocollect">
					<image src="/static/images/shoucang.png" mode="aspectFill" v-if="detail.is_collect == 0"></image>
					<image src="/static/images/shoucang2.png" mode="aspectFill" v-else></image>
					<text>{{detail.collect_count || 0}}</text>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" :round="10" @close="toclose">
			<view class="popu">
				<view class="top hflex acenter">
					<view class="vflex acenter jcenter top-item" @click="copy">
						<view class="img-bg vflex acenter jcenter">
							<image src="@/static/images/lianjie.png" mode="aspectFill"></image>
						</view>
						<text>复制链接</text>
					</view>
					<view class="vflex acenter jcenter top-item">
						<view class="img-bg vflex acenter jcenter" style="background: #E9E9E9;">
							<image src="/pageA/static/warn.png" mode="aspectFill"></image>
						</view>
						<text>举报</text>
					</view>
				</view>
				<view class="btn hflex acenter jcenter" @click="toclose">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import commentList from '@/components/comment/index.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			commentList
		},
		data() {
			return {
				id: '',
				detail: {},
				title: '资讯',
				comment: '',
				show_jianpan: false,
				type: '',
				userid: '',
				show: false
			}
		},
		onLoad(option) {
			this.userid = uni.getStorageSync('id')
			if(option.id) {
				this.id = option.id
			}
			if(option.type) {
				this.type = option.type
				if(this.type == 'info') {
					this.title = '资讯'
				}
				if(this.type == 'article') {
					this.title = '文章'
				}
				if(this.type == 'video') {
					this.title = '视频'
				}
				if(this.type == 'post') {
					this.title = '论坛'
				}
			}
			this.getdata()
			uni.onKeyboardHeightChange(this.onKeyboardHeightChange);
		},
		onUnload() {
		  uni.offKeyboardHeightChange(this.onKeyboardHeightChange);
		},
		methods: {
			copy() {
				
				uni.setClipboardData({
					data: '/pageA/info-detail?id=' + this.id + '&type=' + this.type,
					success() {
						uni.$u.toast('复制成功')
					}
				})
			},
			open() {
				this.show = true
			},
			toclose() {
				this.show = false
			},
			tocollect() {
				var _this = this
				$api.req({
					url: 'collect',
					method: 'POST',
					data: {
						source_type: _this.type,
						source_id: _this.id
					}
				}, function(res) {
					if(res.code == 10000) {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							_this.getdata()
						},800)
					}
				})
			},
			tolike() {
				var _this = this
				$api.req({
					url: 'like',
					method: 'POST',
					data: {
						source_type: _this.type,
						source_id: _this.id
					}
				}, function(res) {
					if(res.code == 10000) {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							_this.getdata()
						},800)
					}
				})
			},
			onKeyboardHeightChange(e) {
				const { height, duration } = e;
				if(height > 0) {
					this.show_jianpan = true
				} else {
					this.show_jianpan = false
				}
			},
			getdata() {
				var _this = this
				$api.req({
					url: _this.type + '/' + _this.id,
					method: 'GET',
					/* data: {
						id: this.id
					} */
				}, function(res) {
					_this.detail = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.info-detail::v-deep {
		background: #FFFFFF;
		min-height: 100vh;
		.popu {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 82rpx 0;
			.btn {
				padding: 24rpx 0 0;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #444444;
			}
			.top {
				padding-bottom: 40rpx;
				border-bottom: 1px solid #F7F7F7;
				.top-item {
					padding: 0 0 0 108rpx;
					.img-bg {
						width: 96rpx;
						height: 96rpx;
						background: #00B0B0;
						border-radius: 50%;
						image {
							width: 36rpx;
							height: 36rpx;
						}
					}
					text {
						padding: 16rpx 0 0;
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #444444;
					}
					
				}
				
			}
		}
		.bottom {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0,0,0,0.1);
			padding: 14rpx 24rpx 80rpx;
			box-sizing: border-box;
			.bottom-right {
				.bottom-item {
					margin-left: 38rpx;
					height: 72rpx;
					image {
						width: 40rpx;
						height: 38rpx;
					}
					text {
						padding-top: 8rpx;
						font-size: 20rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: #7C7C7C;
					}
				}
			}
			.u-input {
				background: #F5F5F5;
				border-radius: 40rpx;
				width: 446rpx !important;
				height: 72rpx ;
				padding: 0 32rpx !important;
			}
			
		}
		.cover {
			width: 100%;
			.video {
				width: 100%;
				box-sizing: border-box;
				padding: 28rpx;
				// height: 182rpx;
				background: #F5F5F5;
				.img {
					width: 224rpx;
					height: 126rpx;
				}
				text {
					font-size: 28rpx;
					font-family: SFPro, SFPro;
					font-weight: 500;
					color: #333333;
					width: 354rpx;
				}
				.icon {
					width: 24rpx;
					height: 24rpx;
				}
			}
			image {
				width: 100%;
			}
			.title {
				padding: 28rpx 32rpx;
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
			}
			.user {
				padding: 0 28rpx 30rpx;
				image {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
				}
				.user-name {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #333333;
					padding-left: 20rpx;
				}
				.user-btn {
					width: 140rpx;
					height: 60rpx;
					background: #00B0B0;
					border-radius: 30rpx;
					image {
						width: 36rpx;
						height: 36rpx;
					}
					text {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						padding-left: 8rpx;
					}
				}
			}
			.detail {
				padding: 0 28rpx;
			}
			.time {
				padding: 32rpx 28rpx;
				font-size: 28rpx;
				font-family: SFPro, SFPro;
				font-weight: 400;
				color: #999999;
			}
			.circle {
				margin: 0 28rpx 48rpx;
				background: rgba(0, 176, 176, .1);
				border-radius: 34rpx;
				padding: 14rpx 20rpx;
				max-width: max-content;
				image {
					width: 40rpx;
					height: 40rpx;
				}
				text {
					font-size: 28rpx;
					font-family: AppleColorEmoji;
					color: #00B0B0;
				}
			}
		}
	}
</style>