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 && 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" @click="touser"></image>
					<view class="user-name">{{detail.user.username}}</view>
				</view>
				<view class="user-btn hflex acenter jcenter" v-if="detail.user.id != userid" @click="toFollow">
					<image src="./static/like.png" mode="aspectFill"></image>
					<text>{{detail.is_follow == 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" @click="show_jubao = true">
						<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>
		<u-popup :show="show_jubao" @close="toclose" mode="bottom" :round="10">
			<view class="popu1">
				<view class="title hflex acenter jbetween">
					<text>内容描述</text>
					<u-icon name="close" color="#000000" size="14" @click="toclose"></u-icon>
				</view>
				<u--textarea v-model="jubao" placeholder="请对您举报的内容进行文字描述"></u--textarea>
				<view class="title">
					<text>辅助图片</text>
				</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="9"
					width="160rpx" height="160rpx">
					<view class="upload-bg hflex acenter jcenter">
						<u-icon name="plus" color="#CCCCCC" size="20"></u-icon>
					</view>
				</u-upload>
				<view class="btn" :class="jubao != '' ? 'btn2' : ''" @click="tojubao">确定</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,
				fileList1: [],
				jubao: '',
				show_jubao: false,
				login: false,
			}
		},
		onLoad(option) {
			this.userid = uni.getStorageSync('userid')
			this.login = uni.getStorageSync('token') ? true: false
			console.log(this.userid);
			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: {
			touser() {
				uni.navigateTo({
					url: '/pageC/otherInfo?id=' + this.detail.user.id
				})
			},
			toFollow() {
				if(!this.login) {
					$api.info('请先登录')
					return
				}
				var that = this
				$api.req({
					url: 'user/' + that.detail.user.id + '/follow',
					method: 'post'
				}, function(res) {
					$api.info(res.msg)
					that.getdata()
				})
			},
			tojubao() {
				if(!this.login) {
					$api.info('请先登录')
					return
				}
				var that = this
				let image = []
				if(that.fileList1.length>0) {
					for(var i=0;i<that.fileList1.length;i++) {
						image.push(that.fileList1[i].url)
					}
				}
				$api.req({
					url: 'report',
					method: 'post',
					data: {
						source_type: that.type,
						source_id: that.id,
						content: that.jubao,
						images: image
					}
				}, function(res) {
					$api.info('举报成功')
					that.toclose()
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $api.config.baseUrl + 'upload/image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							setTimeout(() => {
								resolve(data.data.url)
							}, 1000)
						}
					});
				})
			},
			copy() {
				let text = $api.config.luck
				if(this.type == 'info') {
					text += 'news?id=' + this.id
				} else if(this.type == 'articles') {
					text += 'Articles?id=' + this.id
				} else if(this.type == 'video') {
					text += 'videos?id=' + this.id + '&type=common'
				}
				uni.setClipboardData({
					data: text,
					success() {
						uni.$u.toast('复制成功')
					}
				})
			},
			open() {
				this.show = true
			},
			toclose() {
				this.show = false
				this.show_jubao = false
			},
			tocollect() {
				if(!this.login) {
					$api.info('请先登录')
					return
				}
				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
				if(!this.login) {
					$api.info('请先登录')
					return
				}
				$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;

		.popu1 {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			box-sizing: border-box;
			padding: 0 28rpx;

			.title {
				padding: 36rpx 0 28rpx;
				width: 100%;

				text {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
			}

			.u-textarea {
				width: 694rpx;
				height: 236rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
				padding: 28rpx 20rpx !important;
				box-sizing: border-box;
				border: none;
			}

			.upload-bg {
				width: 160rpx;
				height: 160rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
			}

			.btn2 {
				opacity: 1 !important;
			}

			.btn {
				margin: 156rpx 0 54rpx;
				width: 694rpx;
				height: 88rpx;
				background: #00B0B0;
				border-radius: 44rpx;
				opacity: 0.2;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}

		.popu {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 82rpx 30rpx;

			.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: 30rpx 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>