开发文章详情页信息组件

detail.vue

<template>
	<view class="common-list animated fadeInLeft fast">
		<!-- 左边头像 -->
		<view class="common-list-l">
			<image :src="item.userpic" mode="widthFix" lazy-load></image>
		</view>
		<!-- 右边内容 -->
		<view class="common-list-r">
			<!-- 作者 -->
			<view class="author-area">
				<view>{{item.username}}
					<tagSexAge :sex="item.sex" :age="item.age"></tagSexAge>
				</view>
				<view class="icon iconfont icon-zengjia guanzhu" v-if="!isguanzhu" @tap="guanzhu">关注</view>
			</view>
			
			<view class="common-list-r-time">26天前</view>
			
			<!-- 标题 -->
			<view class="title-area">{{item.title}}</view>
			<!-- 图片 -->
			<view class="image-area u-f-ajc" style="flex-direction: column;">
				<!-- 图片 -->
				<block v-for="(pic, index) in item.morepic" :key="index">
						<image style="margin-bottom: 15rpx;"  :src="pic" mode="widthFix" lazy-load @tap="imgdetail(index)"></image>
				</block>
				<!-- 视频 -->
				<template v-if="item.video">
					<view class="common-list-play icon iconfont icon-bofang">
					</view>
					<view class="common-list-playinfo">{{item.video.loopnum}} 次播放 {{item.video.long}}</view>
				</template>
				<!-- 分享 -->
				<view class="common-list-share u-f" v-if="item.share">
					<image :src="item.share.titlepic" mode="widthFix" lazy-load></image>
					<view>{{item.share.title}}</view>
				</view>
			</view>
			<!-- 其它信息 -->
			<view class="address-area">
				<view>{{item.path}}</view>
				<view>
					<view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view>
					<view class="icon iconfont icon-pinglun1">{{item.commentnum}}</view>
					<view class="icon iconfont icon-dianzan1">{{item.goodnum}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tagSexAge from '../common/tag-sex-age.vue'
	export default {
		components: {
			tagSexAge
		},
		props: {
			item: Object
		},
		data() {
			return {
				isguanzhu: this.item.isguanzhu
			}
		},
		methods: {
			guanzhu() {
				this.isguanzhu = true
				uni.showToast({
					title: '关注成功'
				})
			},
			// 图片预览
			imgdetail(index) {
				uni.previewImage({
					current:index,
					urls:this.item.morepic
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../common/list.less';
	.common-list {
		border-bottom: 1rpx solid #eee;
		.common-list-r {
			border-bottom: 0;
			.common-list-r-time {
				color: #ccc;
				font-size: 26rpx;
				}
		}
	}
</style>