yixiang/components/list-info/index.vue

<template>
	<view class="list-info" @click="toinfo">
		<view class="info-header hflex acenter jbetween">
			<view class="hflex acenter">
				<image :src="data.user.avatar" v-if="data.user.avatar" mode="aspectFill" class="headera-avatar" @click.stop="touser"></image>
				<view class="avatar-right">
					<view class="name hflex acenter">
						<text>{{data.user.username}}</text>
						<!-- <image src="@/static/images/zuozhe1.png" v-if="data.type == 1" mode="aspectFill"
							class="type-icon"></image>
						<image src="@/static/images/zuozhe2.png" v-if="data.type == 2" mode="aspectFill"
							class="type-icon"></image>
						<image src="@/static/images/zuozhe3.png" v-if="data.type == 3" mode="aspectFill"
							class="type-icon"></image> -->
					</view>
					<view class="time">{{data.published_at}}</view>
				</view>
			</view>
			<view class="" style="padding: 20rpx 20rpx;" @click.stop="show_more = true">
				<u-icon name="more-dot-fill" color="#777777" size="20"></u-icon>
			</view>
		</view>
		<view class="info-content" v-if="type == 'post' || data.source_type == 'post'">
			<u-swiper :indicator="true" indicatorMode="dot" :list="data.images" height="452rpx" radius="12rpx"
				v-if="data.images.length > 0">
			</u-swiper>
			<u-swiper :indicator="true" indicatorMode="dot" :list="data.source.images" height="452rpx" radius="12rpx"
				v-else-if="data.source.images.length > 0">
			</u-swiper>
			<view class="text_hide3" v-if="data.content" style="margin: 20rpx 0 0;">{{data.content}}</view>
			<view class="text_hide3" v-else-if="data.source.content" style="margin: 20rpx 0 0;">{{data.source.content}}</view>
		</view>
		<view class="info-content" v-else>
			
			<image :src="data.image" mode="aspectFill" class="content-img" v-if="data.image"></image>
			<image :src="data.source.image" mode="aspectFill" class="content-img" v-if="data.source.image"></image>
			<view class="content-title" v-if="data.title">{{data.title}}</view>
			<view class="content-title" v-else-if="data.source.title">{{data.source.title}}</view>
			<view class="text_hide3" v-if="data.content">
				<u-parse :content="data.content" class="text_hide3" ></u-parse>
			</view>
			<u-parse :content="data.source.content" class="text_hide3" v-else-if="data.source.content"></u-parse>
			<!-- <rich-text class="text_hide3" :nodes="data.content" v-if="data.content"></rich-text>
			<rich-text class="text_hide3" :nodes="data.source.content" v-if="data.source.content"></rich-text> -->
		</view>
		<view class="info-circle hflex acenter" v-if="data.topic_id != 0 && data.topic">
			<!-- <image :src="data.circle.img" mode="aspectFill"></image> -->
			<text>{{data.topic.title}}</text>
		</view>
		<view class="info-bottom hflex acenter jbetween" v-if="type != 'post' || data.source_type != 'post'">
			<view class="hflex acenter">
				<text>{{data.like_count || 0}}喜欢 · </text>
				<text>{{data.comment_count || 0}}评论</text>
			</view>
		</view>
		<view class="info-bottom hflex acenter jbetween" v-if="type =='post' || data.source_type == 'post'">
			<view class="hflex acenter">
				<image src="@/static/images/dianzan.png" mode="aspectFill" v-if="!data.is_like"
					@click.stop="tolike(data)"></image>
				<image src="@/static/images/dianzan2.png" mode="aspectFill" v-else @click.stop="tolike(data)"></image>
				<text class="num" @click.stop="tolike(data)">{{data.like_count}}</text>
				<image src="@/static/images/pinglun.png" mode="aspectFill"></image>
				<text class="num">{{data.comment_count}}</text>
				<image src="@/static/images/shoucang.png" mode="aspectFill" v-if="!data.is_collect"
					@click.stop="tocollect(data)"></image>
				<image src="@/static/images/shoucang2.png" mode="aspectFill" v-else @click.stop="tocollect(data)">
				</image>
				<text class="num" @click.stop="tocollect(data)">{{data.collect_count}}</text>
			</view>
			<image src="@/static/images/fenxiang.png" mode="aspectFill" @click.stop="openShare(data)"></image>
		</view>
		<u-popup :show="show_more" @close="toclose">
			<view class="popu hflex acenter">
				<view class="vflex acenter jcenter top-item" @click="show_jubao = true" v-if="data.user.id != userid">
					<view class="img-bg vflex acenter jcenter" style="background: #E9E9E9;">
						<image src="@/static/images/warn.png" mode="aspectFill"></image>
					</view>
					<text>举报</text>
				</view>
				<view class="vflex acenter jcenter top-item" @click="delItem" v-if="data.user.id == userid">
					<view class="img-bg vflex acenter jcenter" style="background: #E9E9E9;">
						<image src="@/static/images/warn.png" mode="aspectFill"></image>
					</view>
					<text>删除</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show_share" @close="toclose">
			<view class="popu_share">
				<view class="list hflex acenter jaround">
					<view class="item vflex acenter jcenter" @click="shareWX">
						<image src="@/static/images/wx.png" mode="aspectFill"></image>
						<text>微信</text>
					</view>
					<view class="item vflex acenter jcenter" @click="sharePYQ">
						<image src="@/static/images/pyq.png" mode="aspectFill"></image>
						<text>朋友圈</text>
					</view>
					<view class="item vflex acenter jcenter" @click="copy">
						<view class="img-bg vflex acenter jcenter">
							<image src="@/static/images/lianjie.png" mode="aspectFill"></image>
						</view>
						<text>复制链接</text>
					</view>
				</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 $api from '@/static/js/api.js'
	export default {
		props: {
			data: {
				typeof: Object,
				default: {}
			},
			type: {
				typeof: String,
				default: ''
			}
		},
		data() {
			return {
				show_more: false,
				show_jubao: false,
				show_share: false,
				share: {},
				jubao: '',
				fileList1: [],
				userid: '',
				login: false
			}
		},
		mounted() {
			this.userid = uni.getStorageSync('userid')
			this.login = uni.getStorageSync('token') ? true : false
		},
		methods: {
			delItem() {
				var that = this
				that.show_more = false
				uni.showModal({
					title: '删除',
					content: '是否确定要删除？',
					success: function (res) {
						if (res.confirm) {
							let url = ''
							if(that.type) {
								url = that.type + '/' + that.data.id
							} else {
								url = that.data.source_type + '/' + that.data.id
							}
							$api.req({
								url: url,
								method: 'DELETE'
							}, function(res) {
								$api.info(res.msg)
								that.$emit('del',1)
							})
						}
					},
				})
				
			},
			touser() {
				uni.navigateTo({
					url: '/pageC/otherInfo?id=' + this.data.user.id
				})
			},
			tojubao() {
				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 ? that.type : that.data.source_type,
						source_id: that.data.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)
						}
					});
				})
			},
			shareWX() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					href: "",
					title: "亿象",
					summary: this.share.content,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			sharePYQ() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 1,
					summary: this.share.content,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			copy() {
				uni.setClipboardData({
					data: '/pageA/info-detail?id=' + this.share.id + '&type=post',
					success() {
						uni.$u.toast('复制成功')
					}
				})
			},
			openShare(item) {
				this.show_share = true
				this.share = item
			},
			tocollect(item) {
				var _this = this
				if(!this.login) {
					$api.info('请先登录')
					return
				}
				$api.req({
					url: 'collect',
					method: 'POST',
					data: {
						source_type: _this.type ? _this.type : _this.data.source_type,
						source_id: item.id
					}
				}, function(res) {
					if (res.code == 10000) {
						uni.$u.toast(res.msg)
						if (_this.data.is_collect == 0) {
							_this.data.is_collect = item.id
							_this.data.collect_count += 1
						} else {
							_this.data.is_collect = 0
							_this.data.collect_count -= 1
						}
					}
				})
			},
			tolike(item) {
				var _this = this
				if(!this.login) {
					$api.info('请先登录')
					return
				}
				$api.req({
					url: 'like',
					method: 'POST',
					data: {
						source_type: _this.type ? _this.type : _this.data.source_type,
						source_id: item.id
					}
				}, function(res) {
					if (res.code == 10000) {
						uni.$u.toast(res.msg)
						if (_this.data.is_like == 0) {
							_this.data.is_like = item.id
							_this.data.like_count += 1
						} else {
							_this.data.is_like = 0
							_this.data.like_count -= 1
						}
					}
				})
			},
			toclose() {
				this.show_more = false
				this.show_jubao = false
				this.show_share = false
			},
			toinfo() {
				let type = this.type ? this.type : this.data.source_type
				uni.navigateTo({
					url: '/pageA/info-detail?id=' + this.data.id + '&type=' + type
				})
				// this.$emit('toinfo',this.data)
			}
		},
	}
</script>

<style lang="scss">
	.list-info {
		padding: 28rpx;
		background: #FFFFFF;
		margin: 0 0 20rpx;

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

			.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;
				}

			}

		}

		.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_share {
			padding: 54rpx 0;

			.list {
				padding: 0 0 46rpx;
				border-bottom: 1px solid #979797;

				.item {
					image {
						width: 84rpx;
						height: 84rpx;
					}

					.img-bg {
						width: 84rpx;
						height: 84rpx;
						background: #00B0B0;
						border-radius: 50%;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					text {
						padding: 22rpx 0 0;
						font-size: 22rpx;
						color: #333333;
						line-height: 32rpx;
					}
				}
			}
		}

		.info-header {
			.headera-avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}

			.avatar-right {
				margin: 0 0 0 16rpx;

				.name {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.type-icon {
					width: 124rpx;
					height: 32rpx;
					margin: 0 0 0 12rpx;
				}

				.time {
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					padding: 4rpx 0 0;
				}
			}
		}

		.info-content {
			box-sizing: border-box;
			padding: 20rpx 0;

			.content-img {
				width: 100%;
				margin: 0 0 16rpx;
			}

			.content-title {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #222222;
				padding: 0 0 8rpx;
			}

			text {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				padding: 12rpx 0;
				box-sizing: border-box;
			}
		}

		.info-circle {
			padding: 24rpx 0 0;
			background: rgba(0, 176, 176, .1);
			border-radius: 26rpx;
			padding: 8rpx 20rpx;
			max-width: max-content;

			image {
				width: 34rpx;
				height: 34rpx;
			}

			text {
				padding: 0 0 0 5rpx;
				font-size: 24rpx;
				font-family: AppleColorEmoji;
				color: #00B0B0;
			}
		}

		.info-bottom {
			padding: 40rpx 0 0;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			text {
				font-size: 20rpx;
				font-family: SFPro, SFPro;
				font-weight: 400;
				color: #555555;
			}

			.num {

				padding: 0 50rpx 0 12rpx;
			}
		}
	}
</style>