jp-xqjy/pages/news/detalis.vue

<template>
	<view>
		<u-navbar ></u-navbar>
		<view class="article">
			<view class="article-tit" v-text="detail.title">
			
			</view>
			<view class="article-row">
				<view class="article-time"  v-text="detail.createTime" ></view>
				<view class="article-see">
					<u-icon custom-prefix="custom-icon" name="eye-line"></u-icon>
					<span v-text="detail.visitorsNum"> </span>
				</view>
			</view>
			<view class="article-con" v-html="detail.content" :style="{fontSize:myFontSize+'px'}">
				 
			</view>
 			
			<view class="article-foot">
				<view class="u-flex">
					<view class="article-btn" @click="fontSizeUp1()">
						<u-icon custom-prefix="custom-icon" name="zoom-in-line"></u-icon>
						<span>放大</span>
					</view>
					<view class="article-btn" @click="fontSizeDown2()">
						<u-icon custom-prefix="custom-icon" name="zoom-out-line"></u-icon>
						<span>缩小</span>
					</view>
				</view>

				<view class="article-btn" @click="scrollTop()">
					<u-icon custom-prefix="custom-icon" name="align-top"></u-icon>
					<span>回顶</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/news.js'
	
	export default {
		data() {
			return {
				myFontSize:14,
				pageTitle: '文章详情',
				isLoading: false,
				id: '',
				detail: {
					title:"",
					createTime:"",
						visitorsNum:"",
							content:"",
				},
			}
		
		},
		onLoad(op) {
			
			this.id =op.id;
			this.getDetail();
			var myFontSize=this.carhelp.get("news-info-fontsize")
			if(myFontSize){
				this.myFontSize=myFontSize
			}
			
		},
		methods: {
			fontSizeUp1(){
				if(this.myFontSize>=28){
					uni.showToast({
						title: "当前已为最大字体"
					})
					return
				}
				this.myFontSize=this.myFontSize+2
				this.carhelp.set("news-info-fontsize",this.myFontSize)
			},
			fontSizeDown2(){
				if(this.myFontSize<=12){
					uni.showToast({
					
						title: "当前已为最小字体"
					})
					return
				}
				this.myFontSize=this.myFontSize-2
				this.carhelp.set("news-info-fontsize",this.myFontSize)
				
			},
			scrollTop(){
				uni.pageScrollTo({
					scrollTop: 0,
						duration: 300
				})
			},
			
			getDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
			    API.newsdetail({id:this.id}).then(response => {
			       
			        this.detail = response.data;
					uni.hideLoading()
			
			    }).catch(error => {
			       uni.showToast({
			       
			       	title: error,icon: "none"
			       })
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.article{
		padding: 15px;
		.article-tit{
			font-size: 20px;
			margin-bottom:10px;
		}
		.article-row{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #888;
			font-size: 12px;
			border-bottom: 1px solid #F1F1F1;
			padding-bottom: 15px;
			.article-time{}
			.article-see{
				span{
					margin-left:3px;
				}
			}
		}
		.article-con{
			padding: 15px 0 35px;
			font-size: 14px;
			line-height: 28px;
			img{
				width: 100%;
				margin: 10px 0;
			}
		}
		
		.article-foot{
			height: 50px;
			position:fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			border-top: 1px solid #f7f7f7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:0 15px;
			.article-btn{
				background: #E5E7EA;
				padding:6px 10px;
				color: #606875;
				border-radius: 8px;
				span{
					margin-left: 3px;
				}
			}
			.u-flex .article-btn{
				margin-right: 10px;
			}
		}
	}
</style>