1.0yangche/components/news/detail/detail.vue

<template>
	<view class="wrap">
		<!-- 头部 -->
		<view class="header">
			<view class="header_title">{{allData.obj.name}}</view>
			<view class="tag">
				<view class="tag_title">{{allData.obj.typeName}} {{allData.obj.date}}</view>
				<view class="look"><view class="iconfont company_top_num_icon"></view>{{allData.obj.pv}}</view>
			</view>
		</view>
		<view :class="['content',showMore == 1?'showMore':'']">
		<!-- 富文本 -->
		  <view class="show">
		    <view class="title" v-html="allData.obj.detail"></view>
		  </view>
		</view>
		<view class="news_more" @tap="lookMore">{{message}}<view class="iconfont header_bottom"></view></view>
		<view class="back"></view>
		<!-- 相关知识 -->
		<view class="news_about">
			<view class="news_about_header clear">
				<view class="news_about_lf">相关知识</view>
				<navigator hover-class="none" url="../list/list" class="news_about_rg">更多服务<view class="iconfont shuang_you"></view></navigator>
			</view>
			<view class="list">
				<view v-for="item,index in allData.detail" :key="index" class="list_item" @tap="toDetail(item)">
					<view class="news_title">{{item.name}}</view>
					<view :class="['image',item.imgs.length ===1?'one':'no_one', 'clear']">
						<image v-for="item,index in item.imgs" :key="index" :src="url + item"></image>
					</view>
					<view class="news_tag clear">
					  <view class="news_tag_lf">{{item.tag}}</view>
					  <view class="news_tag_rg">{{item.date}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				id:'',//新闻id
				allData:null,//页面数据
				url:app.globalData.url,
				showMore:0,//是否查看更多，文本折叠
				message:'查看更多',
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					id:this.id
				}
				api.getNewsDetail(data).then((res)=>{
					console.log(res);
					this.allData = res.data.data;
				})
			},
			//查看更多
			lookMore(){
				if(this.showMore == 0){
					this.showMore = 1;
					this.message = '点击收起';
				}else{
					this.showMore = 0;
					this.message = '查看更多';
				}
			},
			//跳转详情
			toDetail(item){
				uni.redirectTo({
					url:'./detail?id=' + item.id
				})
			}
		}
	}
</script>

<style scoped>
	.clear:after{
		content: "";
		display: block;
		clear: both;
	}
	page{
	  width:100%;
	  height:100%;
	}
	.header{
	  width:100%;
	  overflow: hidden;
	  padding:0 30rpx;
	  box-sizing: border-box;
	}
	.header_title{
	  font-size: 32rpx;
	  color:#2A2A2A;
	  font-weight: bold;
	}
	.tag{
	  margin-top:16rpx;
	}
	.tag_title{
	  font-size: 24rpx;
	  color:#999999;
	  display: inline-block;
	}
	.look{
	  font-size: 24rpx;
	  color:#999999;
	  display: inline-block;
	  margin-left: 40rpx;
	}
	.company_top_num_icon{
	  color:#999999;
	  font-size: 16rpx;
	  display: inline-block;
	  vertical-align:middle;
	  margin-right: 8rpx;
	}
	.content{
	  width:100%;
	  height:200rpx;
	  margin-top:20rpx;
	  padding:0 30rpx;
	  overflow: hidden;
	  box-sizing: border-box;
	}
	.showMore{
	  height: auto;
	}
	.hidden{
	  display: none;
	}
	.showMore{
	  display: block;
	}
	.title{
	  font-size: 28rpx;
	  color:#666666;
	  line-height: 48rpx;
	}
	.news_img{
	  display: block;
	  width:100%;
	  height:380rpx;
	  margin:30rpx 0 30rpx 0;
	}
	.news_more{
	  text-align: center;
	  margin-top:16rpx;
	  font-size: 24rpx;
	  color:#E77817;
	  margin-bottom: 30rpx;
	  background-color: #ffffff
	}
	.header_bottom{
	  display: inline-block;
	  font-size:24rpx;
	  margin-left: 10rpx;
	  box-sizing: border-box;
	}
	.news_about{
	  width:100%;
	  padding-bottom:100rpx;
	  overflow: hidden;
	}
	.news_about_header{
	  height:94rpx;
	  line-height: 94rpx;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  border-bottom:1px solid #f2f2f2;
	}
	.news_about_lf{
	  font-size: 30rpx;
	  color:#000000;
	  font-weight: bold;
	  float:left;
	}
	.news_about_rg{
	  float:right;
	  font-size: 24rpx;
	  color:#E77817;
	}
	.shuang_you{
	  display: inline-block;
	  font-size: 24rpx;
	}
	.list{
	  width:100%;
	  overflow: hidden;
	  padding:0 30rpx;
	  box-sizing: border-box;
	}
	.list_item{
	  width:100%;
	  padding-bottom: 26rpx;
	  border-bottom:1px solid #f2f2f2;
	}
	.news_title{
	  font-size: 32rpx;
	  color:#2a2a2a;
	  margin:22rpx 0 14rpx 0;
	}
	.one image{
	  display: block;
	  width:100%;
	  height:380rpx;
	}
	.no_one image{
	  display: block;
	  width:218rpx;
	  height:144rpx;
	  margin-right: 18rpx;
	  float:left;
	}
	.no_one image:last-child{
	  margin-right: 0;
	}
	.news_tag{
	  width:100%;
	  margin-top:12rpx;
	  font-size: 24rpx;
	  color:#999999;
	}
	.news_tag_lf{
	  float:left;
	}
	.news_tag_rg{
	  float:right;
	}
	.footer{
	  width: 100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  overflow: hidden;
	  padding:30rpx 0;
	  box-sizing: border-box;
	  position: fixed;
	  bottom:0;
	  left:0;
	}
	.footer_icon{
	  font-size: 40rpx;
	  color:#222222;
	  padding:0 92rpx;
	  display: inline-block;
	  text-align: center;
	  border-right: 1px solid #f2f2f2;
	}
	.footer_icon:last-child{
	  border-right: none;
	}
	.enter{
	  width:284rpx;
	  height:72rpx;
	  background:rgba(231,120,23,1);
	  border-radius:6rpx;
	  text-align: center;
	  line-height: 72rpx;
	  font-size: 30rpx;
	  color:#ffffff;
	  display: inline-block;
	  margin:auto 0;
	  position: absolute;
	  right:30rpx;
	  top:14rpx;
	}
</style>