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" mode="aspectFill" class="headera-avatar"></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'">
			<u-swiper :indicator="true" indicatorMode="dot" :list="data.images" height="452rpx" radius="12rpx" v-if="data.images.length > 0">
			</u-swiper>
			<text v-if="data.content">{{data.content}}</text>
		</view>
		<view class="info-content" v-if="type != 'post'">
			<image :src="data.image" mode="aspectFill" class="content-img" v-if="data.image"></image>
			<!-- <video :src="data.image" controls enable-danmu danmu-btn class="content-img" v-if="data.video"></video> -->
			<view class="content-title" v-if="data.title">{{data.title}}</view>
			<u-parse :content="data.content" class="text_hide3"></u-parse>
		</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'">
			<view class="hflex acenter">
				<text>{{data.collect_count || 0}}喜欢 · </text>
				<text>{{data.comment_count || 0}}评论</text>
			</view>
		</view>
		<view class="info-bottom hflex acenter jbetween" v-if="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"></image>
		</view>
		<u-popup :show="show_more" @close="toclose">
			<view class="popu">
				
			</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,
			}
		},
		methods: {
			tocollect(item) {
				var _this = this
				$api.req({
					url: 'collect',
					method: 'POST',
					data: {
						source_type: _this.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
				$api.req({
					url: 'like',
					method: 'POST',
					data: {
						source_type: _this.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() {
				show_more = false
			},
			toinfo() {
				uni.navigateTo({
					url: '/pageA/info-detail?id=' + this.data.id + '&type=' + this.type
				})
				// this.$emit('toinfo',this.data)
			}
		},
	}
</script>

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