xmt/pages/user/dydetail.vue

<template>
	<view class="content">
		<!-- 订阅号详情头部 start-->
		<view class="dy-info flex">
			<view class="user-logo">
				<image :src="info.headimg" mode=""></image>
			</view>
			<view class="user-num">
				<view class="user-name">{{ info.name }}</view>
				<!-- <view class="sub-num">发表文章：{{ info.count }}</view> -->
			</view>
			<view class="dy-btn" @click="dingYue()" :class="{ dyue: isDy }">{{ isDy ? '已订阅' : '+订阅' }}</view>
		</view>
		<!-- 订阅号详情头部 end-->
		<!-- 简介 -->
		<template v-if="info.introduce">
			<view class="jj-top">
				<text class="sh"></text>订阅号简介
			</view>
			<view class="jj-content" style="position: relative;margin-bottom: 20rpx;" @click="navto('/pages/user/dyjj?id=' + info.id)">
				<view class="" v-html="info.introduce"
					style="height: 195rpx;overflow: hidden;width: 100%;background-color: #fff;text-align: justify;padding: 20rpx;">
				</view>
				<view class="menban" style="">查看全部</view>
			</view>
		</template>
		<!-- 订阅号详情文章列表 start-->
		<!-- <empty v-if="list.loaded === true && list.length === 0"></empty> -->
		<view class="jj-top" v-if="list.length > 0">
			<text class="sh"></text>文章资讯
		</view>
		<view>
			<view class="art-list" v-for="(item, index) in list" :key="index">
				<!-- 文章图片为一 -->
				<view class="art-item-one flex art-item" v-if="item.image_input.length == 1"
					@click="goToDetail(item.id)">
					<view class="art-left flex">
						<view class="art-tit clamp2">{{ item.title }}</view>
						<view class="art-time">
							<!-- <image :src="item.image" mode="" class="hot"></image> -->
							<!-- <text class="store-name">{{ info.name }}</text> -->
							<text class="pl" v-if="item.comment !=0">{{ item.comment }}评论</text>
							<text class="creat-time">
								{{item.add_time | showTime}}
							</text>
						</view>
					</view>
					<view class="art-right">
						<image :src="item.image_input" mode=""></image>
						</image>
					</view>
				</view>
				<!-- 文章图片为零 -->
				<view class="art-item-zero flex art-item" v-if="item.image_input.length == 0"
					@click="goToDetail(item.id)">
					<view class="art-tit clamp2">{{ item.title }}</view>
					<view class="art-time">
						<!-- <image src="../../static/icon/hot.png" mode="" class="hot"></image> -->
						<!-- <text class="store-name">{{ info.name }}</text> -->
						<text class="pl" v-if="item.comment !=0">{{ item.comment }}评论</text>
						<text class="creat-time">
							{{item.add_time | showTime}}
						</text>
					</view>
				</view>
				<!-- 文章图片大于一 -->
				<view class="art-item-three art-item flex" v-if="item.image_input.length > 1"
					@click="goToDetail(item.id)">
					<view class="art-tit clamp2">{{ item.title }}</view>
					<view class="art-img-list">
						<image :src="iem" mode="" v-for="(iem, ind) in item.image_input"></image>
					</view>
					<view class="art-time">
						<!-- <image src="../../static/icon/hot.png" mode="" class="hot"></image> -->
						<!-- <text class="store-name">{{ info.name }}</text> -->
						<text class="pl" v-if="item.comment !=0">{{ item.comment }}评论</text>
						<text class="creat-time">
							{{item.add_time | showTime}}
						</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<!-- 订阅号详情文章列表 end-->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import {
		enDetails
	} from '@/api/user.js';
	import {
		timeComputed
	} from '@/utils/rocessor.js';
	import {
		dingYue
	} from '@/api/art.js';
	export default {
		components: {
			empty,
			uniLoadMore
		},
		data() {
			return {
				isDy: false,
				id: '',
				page: 1,
				limit: 10,
				list: [],
				loadingType: 'more',
				info: ''
			};
		},
		filters: {
			showTime(dateTime) {
				//dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
				dateTime = dateTime*1000
				var minute = 1000 * 60 //把分，时，天，周，半个月，一个月用毫秒表示
				var hour = minute * 60
				var day = hour * 24
				var week = day * 7
				var halfamonth = day * 15
				var month = day * 30
				var now = new Date().getTime() //获取当前时间毫秒
				var dateTimeStamp = new Date(dateTime)
				var diffValue = now - dateTimeStamp //时间差
				
				if (diffValue < 0) {
					return
				}
				var minC = diffValue / minute //计算时间差的分，时，天，周，月
				var hourC = diffValue / hour
				var dayC = diffValue / day
				var weekC = diffValue / week
				var monthC = diffValue / month
				var result = ''
				console.log(monthC,weekC,dayC,hourC,minC)
				if (monthC >= 1 && monthC <= 3) {
					result = ' ' + parseInt(monthC) + '月前'
				} else if (weekC >= 1 && weekC <= 4) {
					result = ' ' + parseInt(weekC) + '周前'
				} else if (dayC >= 1 && dayC <= 7) {
					result = ' ' + parseInt(dayC) + '天前'
				} else if (hourC >= 1 && hourC <= 24) {
					result = ' ' + parseInt(hourC) + '小时前'
				} else if (minC >= 1 && minC <= 60) {
					result = ' ' + parseInt(minC) + '分钟前'
				} else if (diffValue >= 0 && diffValue <= minute) {
					result = '刚刚'
				} else {
					var datetime = new Date()
					datetime.setTime(dateTimeStamp)
					var Nyear = datetime.getFullYear()
					var Nmonth =
						datetime.getMonth() + 1 < 10 ?
						'0' + (datetime.getMonth() + 1) :
						datetime.getMonth() + 1
					var Ndate =
						datetime.getDate() < 10 ?
						'0' + datetime.getDate() :
						datetime.getDate()
					var Nhour =
						datetime.getHours() < 10 ?
						'0' + datetime.getHours() :
						datetime.getHours()
					var Nminute =
						datetime.getMinutes() < 10 ?
						'0' + datetime.getMinutes() :
						datetime.getMinutes()
					var Nsecond =
						datetime.getSeconds() < 10 ?
						'0' + datetime.getSeconds() :
						datetime.getSeconds()
					result = Nyear + '-' + Nmonth + '-' + Ndate
				}
				return result
			},
		},
		onLoad(option) {
			this.id = option.id;
			this.loadData();
		},
		onReachBottom() {
			this.loadData()
		},
		methods: {
			goToDetail(id) {
				uni.navigateTo({
					url: '/pages/user/article?id=' + id
				})
			},
			navto(url) {
				uni.navigateTo({
					url
				})
			},
			loadData() {
				const obj = this
				if (this.loadingType == 'noMore' || this.loadingType == 'loading') {
					return
				}
				this.loadingType = 'loading'
				enDetails({
					id: this.id,
					page: this.page,
					rows: this.limit
				}).then(({
					data
				}) => {
					this.info = data.content.list[0];
					if (this.info.introduce) {
						this.info.introduce = this.info.introduce.replace(/<img/g,
							"<img style='max-width:100%;height:auto;'")
						console.log(this.info.introduce,'this.info.introduce');
					}

					if (this.info.is_sub == 1) {
						this.isDy = true;
					}
					console.log(this.info);
					// data.list.forEach(e => {
					// 	let time = timeComputed(e.add_time * 1000);
					// 	e.day = time.day;
					// 	e.hour = time.hours;
					// 	e.minutes = time.minutes;
					// 	e.seconds = time.seconds;
					// });
					this.list = this.list.concat(data.list);
					if (data.list.length === obj.limit) {
						obj.page++
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
					this.$set(obj.list, 'loaded', true);
				});
			},
			dingYue() {
				let obj = this;
				if (this.isDy) {
					uni.showModal({
						title: '提示',
						content: '是否取消关注？',
						complete(e) {
							if (e.confirm) {
								obj.isDy = !obj.isDy;
								dingYue({
									id: obj.id
								}).then(res => {
									obj.$api.msg('已取消关注');
								});
							}
						}
					});
				} else {
					obj.isDy = !obj.isDy;
					dingYue({
						id: obj.id
					}).then(res => {
						obj.$api.msg('关注成功');
					});
				}
			}

		}
	};
</script>

<style lang="scss" scoped>
	.jj {
		margin: 20rpx 30rpx;
		display: flex;
		flex-direction: column;

		.jj-title {

			font-size: 28rpx;
			font-weight: 500;


		}

		.jj-content {
			// overflow: hidden;

			// text-overflow: ellipsis;

			// display: -webkit-box;

			// -webkit-line-clamp: 4; // 控制多行的行数

			// -webkit-box-orient: vertical;
			margin-left: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 36rpx;

			.jj-xq {
				text {
					color: #03A9F4;
				}
			}
		}
	}

	.dy-info {
		width: 750rpx;
		height: 197rpx;
		background-color: #ff6d6e;
		padding: 0 30rpx;
		color: #fff;

		.user-logo {
			flex-shrink: 0;
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.user-num {
			flex-grow: 1;
			padding-left: 10rpx;
			font-size: 24rpx;
			font-weight: 500;

			// color: #999999;
			.user-name {
				font-size: 34rpx;
				font-weight: 600;
				// color: #333333;
				padding-right: 20rpx;
				padding: 0 20rpx 10rpx 0;
			}
		}

		.dy-btn {
			flex-shrink: 0;
			text-align: center;
			width: 136rpx;
			line-height: 66rpx;
			background: #fff;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ff6061;
		}
	}

	.art-list {
		background-color: #fff;
		width: 750rpx;
		font-size: 31rpx;
		font-weight: 500;
		color: #323232;
		// font-weight: bold;
	}

	.art-item {
		width: 691rpx;
		border-bottom: #e1e1e1 1px solid;
		margin: auto;

		&:last-of-type {
			border-bottom: none;
		}
	}

	.art-item-zero {
		height: 153rpx;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding: 20rpx 0;
		border-bottom: #e1e1e1 1px solid;
	}

	.art-item-one {
		height: 195rpx;
		margin: auto;
		padding: 30rpx 0 20rpx;

		.art-left {
			height: 100%;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			padding-right: 40rpx;
		}

		.art-right {
			width: 227rpx;
			height: 145rpx;
			border-radius: 10rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.art-item-three {
		height: 345rpx;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding: 30rpx 0;

		.art-img-list {
			width: 100%;
			height: 145rpx;

			// background-color: #bfa;
			// border-radius: 10px;
			image {
				width: 220rpx;
				height: 145rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.hot {
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.art-tit {
		font-size: 28rpx;
		line-height: 1.2;
	}

	.art-time {
		display: inline-block;
		font-size: 24rpx;
		font-weight: 500;
		color: #7f8699;

		text {
			margin-right: 10rpx;
		}
	}

	.jj-top {
		margin-top: 20rpx;
		line-height: 55rpx;
		background-color: #fff;
		padding-left: 20rpx;

		.sh {
			display: inline-block;
			width: 6rpx;
			height: 26rpx;
			background-color: #e50112;
			margin: 18rpx 12rpx 0 0;
			border-radius: 3rpx;
			font-size: 26rpx;
		}
	}

	.jj-content {
		.menban {
			background: #fff;
			line-height: 50rpx;
			width: 100%;
			z-index: 9;
			position: absolute;
			bottom: 0;
			text-align: center;
			background:linear-gradient(to bottom,rgba(255,255,255,0.8),rgba(255,255,255,1))
		}
	}
</style>