changshu_other/other/detailList.vue

<template>
	<view class="content">
		<back :info="info"></back>
		<image class="header-image" :src="getHeaderImg()"></image>
		<view class="zixun">
			<!-- <view class="zixun-title">
				<view v-for="(el,ind) in title" :class="['zixun-title-name',nowId==el.id?'zixun-title-active':'']" @click="getDatas_xw(el.id)">{{el.name}}</view>
			</view> -->
			<view class="zixun-cont" v-for="el in xwlist" @click="goto('./public?id='+el.id)">
				<view class="zixun-cont-left">
					<view class="zixun-cont-left-title">
						{{el.title}}
					</view>
					<view class="zixun-cont-left-bq">
						<u-tag v-if="index<3" v-for="(item,index) in $getTag(el.channel)" class="zixun-cont-left-bq-list" border-color="#ffffff00" :text="item" bg-color="#ffffff00" color="#2BAD56"/>
					</view>
					<view class="zixun-cont-left-time" v-if="el.releaseDate !=''">{{(el.releaseDate).substr(0,19)}}</view>
				</view>
				<view class="zixun-cont-right">
					<u-image width="310rpx" height="206rpx" border-radius="10rpx" :src="el.typeImg==''?$getimg('lx-xwt.png'):$geturl(el.typeImg)"></u-image>
					<view class="zixun-cont-right-nums">
						<image class="zixun-cont-right-nums-icon" :src="$getimg('icon-gd-dz.png')"></image>
						<view class="zixun-cont-right-nums-num" style="margin-right: 36rpx;">{{el.ups}}</view>
						<image class="zixun-cont-right-nums-icon" :src="$getimg('icon-gd-ll.png')"></image>
						<view class="zixun-cont-right-nums-num">{{el.views}}</view>
					</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	var web = require('@/components/utils/request.js');
	// import pingjia from '../../components/utils/zixunpj.vue';
	export default {
		components: {
			// pingjia
		},
		data() {
			return {
				id: 75,
				infoid: 0,
				istop: false,
				
				nowId:0,
				xwlist:[],
				pageNo:1,
				totalPage:1
				
			};
		},
		onLoad(option) {
			// this.nowId= option.id;
			// this.id = option.id;
			// this.infoid = option.id;
			this.getDatas_xw(this.id);
		},
		onReachBottom() {
			if(this.totalPage>this.pageNo){
				this.pageNo++;
				this.getDatas_xw(this.nowId)
			}
		},
		methods: {
			getHeaderImg(){
				let imgurl='https://cs.tour-ma.com/r/cms/www/m/changshu/lx-xwt.png'
				return imgurl;
			},
			getDatas_xw(id){
				if(this.nowId!=id){
					this.xwlist=[];
					this.pageNo=1;
					this.totalPage=1;
				}
				this.nowId=id;
				var url = 'json/content_list.jspx?channelIds=' + id;
				var para={
					"pageNo": this.pageNo,
					"pageSize": 5,
					"channelId":id
				}
				var that = this;
				web.httpPost(that,url,para,function(res){
					let records=res.data;
					let pages=res.data;
					if(that.pageNo==1){
						that.xwlist=records;
					}else{
						that.xwlist=that.xwlist.concat(records)
					}
					that.totalPage=pages;
				})
			},
			goto(url){
				uni.navigateTo({
					url:url
				})
			},
		}
	};
</script>

<style lang="scss">
	@import '@/components/css/animate.min.css';

	.content {
		overflow: scroll;
		width: 750upx;
		background-size: 100% 100%;
		position: relative;
		top: 0;
		left: 0;

		.header-image{
			width: 750rpx;
			height: 410rpx;
		}
		.zixun{
			width: 750rpx;
			background: #fff;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 30rpx;
			&-title{
				width: 750rpx;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				height: 114rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				border-bottom: 1rpx solid #00000012;
				&-active:after{
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 140rpx;
					height: 4rpx;
					background: #04BB6D;
				}
				&-active{
					color: #04BB6D !important;
					position: relative;
				}
				&-name{
					width: 140rpx;
					height: 114rpx;
					line-height: 114rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					margin:0 40rpx;
				}
			}
			&-cont{
				width: 690rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 1rpx solid #E3E3E3;
				padding: 34rpx 0 24rpx;
				&-left{
					width: 350rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					&-title{
						font-size: 32rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #333333;
						line-height: 45rpx;
						height: 130rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						line-clamp: 3;
						-webkit-box-orient: vertical;
					}
					&-bq{
						margin-top: 24rpx;
						display: flex;flex-direction: row;
						align-items: center;
						&-list{
							background: #E9FBF7;
							border: 1rpx solid #B2DBBD;
							border-radius: 6rpx;
							font-size: 22rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #2BAD56;
							margin-right: 6rpx;
						}
					}
					&-time{
						font-size: 26rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #999999;
						line-height: 26rpx;
						margin-top: 35rpx;
					}
				}
				&-right{
					width: 310rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					&-logo{
						width: 310rpx;
						height: 206rpx;
						border-radius: 10rpx;
					}
					&-nums{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top:28rpx;
						line-height: 28rpx;
						&-icon{
							width: 30rpx;
							height: 28rpx;
							margin-right: 13rpx;
						}
						&-num{
							font-size: 24rpx;
							font-family: DIN2014;
							font-weight: 600;
							color: #333333;
						}
					}
				}
				&:last-child{
					margin-bottom: 80rpx;
				}
			}
		}
	}
</style>