dreamland/template/graceUI商城套装新版本/graceMallForUniapp/pages/artInfo/artInfo.nvue

<template>
	<gracePage headerBG="#FFFFFF" :customHeader="false">
		<view slot="gBody" class="grace-body">
			<!-- 标题 -->
			<text :class="['grace-art-margin', 'grace-art-title', graceSkeleton  ? 'grace-skeletons' : '']">{{article.title}}</text>
			<!-- 作者信息 -->
			<view class="grace-art-margin grace-nowrap grace-flex-vcenter">
				<view :class="['grace-art-author','grace-nowrap','grace-flex-vcenter', graceSkeleton ? 'grace-skeletons' : '']">
					<image class="grace-art-author-face" :src="article.authorFace" mode="widthFix"></image>
					<text v-if="article.authorName" class="grace-art-author-name">{{article.authorName}}</text>
				</view>
				<text class="grace-art-btn grace-bg-green">+ 关注</text>
			</view>
			<!-- 其他基本信息 -->
			<view :class="['grace-art-info-line','grace-art-margin','grace-space-between', graceSkeleton ? 'grace-skeletons' : '']">
				<text class="grace-art-info-line-text grace-icons" v-if="article.viewNumber">&#xe609; {{article.viewNumber}}</text>
				<text class="grace-art-info-line-text" v-if="article.date">发布于 : {{article.date}}</text>
			</view>
			<!-- 文章内容 -->
			<view class="grace-art-contents">
				<view v-for="(item, index) in article.contents" :key="index" 
				:class="[graceSkeleton ? 'grace-skeletons-img' : 'grace-img-in']">
					<image :src="item.content" class="grace-art-img" mode="widthFix" v-if="item.type == 'img'" :data-imgurl="item.content" @tap="prevImg"></image>
					<text :class="[graceSkeleton ? 'grace-skeletons' : 'grace-art-content']" v-if="item.type == 'text'">{{item.content}}</text>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/weexComponents/gracePage.nvue";
export default {
    data() {
    	return {
			graceSkeleton : true,
			//文章对象格式
			//{
			//	title : "标题",
			//	authorFcae : "作者头像",
			//	authorName : "作者姓名",
			//	viewNumber : "浏览次数",
			//	date       : "日期",
			//	contents   : [
			//		{type : "text", content : "文本内容"},
			//		{type : "img", content : "图片路径"},
			//		//.....
			//	]
			//}
			article : {}
		}
    },
	onLoad : function(){
		// 加载文章详情
		uni.showLoading({});
		uni.request({
			url: 'http://grace.hcoder.net/api/news/info',
			method: 'GET',
			data: {},
			success: res => {
				var news = res.data.data;
				uni.setNavigationBarTitle({title:news.title});
				// 此处先规划骨架
				var art = {contents : []};
				for(var i = 0; i < news.contents.length; i++){
					art.contents.push({'type': news.contents[i].type});
				}
				this.article =  art;
				// 骨架屏规划后延长 500 毫秒进行数据替换
				setTimeout(() => {
					this.article = news;
					this.graceSkeleton = false;
				}, 500);
			},
			fail: () => {},
			complete: () => {
				uni.hideLoading();
			}
		});
	},
	methods:{
		prevImg : function(e){
			var imgs = [];
			var currentUrl = e.currentTarget.dataset.imgurl;
			for(let i = 0; i < this.article.contents.length; i++){
				if(this.article.contents[i].type == 'img'){
					imgs.push(this.article.contents[i].content);
				}
			}
			uni.previewImage({
				urls    : imgs,
				current : currentUrl
			})
		}
	},
	components:{gracePage}
}
</script>
<style>
.grace-art-margin{margin-top:20rpx;}
.grace-art-title{font-size:38rpx; font-weight:bold; line-height:56rpx;}
.grace-skeletons{background-color:#F8F8F8; border-radius:8rpx; height:60rpx;}
.grace-skeletons-img{background-color:#F8F8F8; height:300rpx; border-radius:8rpx;}
.grace-art-author{width:700rpx; font-size:0; flex:1;}
.grace-art-author-face{width:66rpx; height:66rpx; border-radius:66rpx; margin-right:20rpx;}
.grace-art-author-name{line-height:80rpx; font-size:26rpx;}
.grace-art-btn{width:120rpx; line-height:60rpx; text-align:center; border-radius:50rpx; font-size:26rpx; margin-left:30rpx;}
.grace-art-info-line{}
.grace-art-info-line-text{font-size:22rpx; line-height:50rpx; color:#888888;}
.grace-art-contents{padding:20rpx 0;}
.grace-art-img{margin:10rpx 0; width:700rpx; height:388rpx;}
.grace-art-content{line-height:52rpx; font-size:28rpx;}
</style>