[抖火客户端]

pages/index/details.vue

@@ -0,0 +1,165 @@
+<template>
+	<view class="content">
+		<view class="title">
+			{{articleData.title}}
+		</view>
+		<view class="see">
+			<view class="seeTips" v-for="(item, index) in articleData.categories" :key="index">
+				{{item.title}}
+			</view>
+			<view class="seeTime">
+				{{articleData.created_at}}
+			</view>
+			<view class="seeName">
+				<image src="@/static/imgs/collect.png" mode="widthFix"></image><text>{{articleData.clicks}}</text>
+			</view>
+		</view>
+		<view class="brief" v-if="articleData.sub_title">
+			<image src="@/static/imgs/detailsImg.png"  mode="widthFix"></image>{{articleData.sub_title}}
+		</view>
+		<view class="subject">
+			<rich-text :nodes="articleContent"></rich-text>
+		</view>
+		<view class="collect">
+			<view class="collect-btn" :class="{active : articleData.isFavorite}" @click="favoriteClick">
+				<image :src="articleData.isFavorite ? '/static/imgs/collect_active.png' : '/static/imgs/collect.png'" mode="widthFix"></image>
+				<text>{{articleData.isFavorite ? '已收藏' : '收藏'}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { articleBrief, collect } from '@/apis/interfaces/index'
+	export default {
+		data() {
+			return {
+				articleData   : '',  // 文章详情
+				articleContent: '',  // 文章内容
+			}
+		},
+		onShow() {
+			// 获取文章列详情
+			this.articleInfo();
+		},
+		methods: {
+			// 文章列详情
+			articleInfo(page) {
+			    articleBrief(this.$Route.query.id).then(res => {
+					this.articleData   = res
+					this.articleContent= res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
+			    }).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon: "none"
+					})
+				})
+			},
+			
+			// 收藏
+			favoriteClick() {
+				collect(this.$Route.query.id).then(res => {
+					// 获取文章列详情
+					this.articleInfo();
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon: "none"
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		padding: $padding;
+		box-sizing: border-box;
+	}
+	
+	.title {
+		font-size: $title-size + 8;
+		line-height: 58rpx;
+	}
+	
+	.see {
+		margin: $margin 0 $margin + 10;
+		display: flex;
+		font-size: $title-size-sm - 2;
+		line-height: 40rpx;
+		position: relative;
+		.seeTips {
+			color: #686868;
+			background-color: #ececec;
+			padding: 0 10rpx;
+			border-radius: $radius-sm - 4;
+			margin-right: $margin;
+		}
+		.seeName {
+			position: absolute;
+			right: 0;
+			top: 0;
+			display: flex;
+			image {
+				width: 30rpx;
+				height: 30rpx;
+				margin: 7rpx 10rpx 0 0;
+			}
+		}
+		.seeTime {
+			color: #cfcfcf;
+		}
+	}
+	.brief {
+		font-size: $title-size-sm;
+		margin: $margin 0;
+		background-color: #f5f5f5;
+		border-radius: $radius-sm - 4;
+		padding: $padding $padding + 10;
+		box-sizing: border-box;
+		line-height: 42rpx;
+		text-align: justify;
+		display: flex;
+		image {
+			width: 34rpx;
+			height: 34rpx;
+			margin-right: 20rpx;
+			margin-top: 8rpx;
+		}
+	}
+	.subject {
+		font-size: $title-size-lg;
+		line-height: 48rpx;
+	}
+	.collect {
+		position: fixed;
+		right: 0;
+		bottom: 30rpx;
+		z-index: 9;
+		width: 100%;
+		text-align: center;
+		.collect-btn {
+			background-color: #f5f5f5;
+			border-radius: $radius * 3;
+			height: 80rpx;
+			display: inline-block;
+			text-align: center;
+			margin: 0 auto;
+			padding: 0 $padding + 10;
+			line-height: 80rpx;
+			font-size: $title-size-m;
+			color: #000000;
+			&.active {
+				background-color: $mian-color;
+				color: #ffffff;
+			}
+			image {
+				width: 36rpx;
+				height: 36rpx;
+				margin: 0 10rpx 0 0;
+				vertical-align: -6rpx;
+			}
+		}
+	}
+</style>