horzi_rai_wxa/pages/applyInterview/applyInterview.vue

<template>
	<view class="container applyInterview-container">
		<view class="apply-ul" v-if="haveData">
			<view class="apply-ltem" v-for="(item,index) in interViewList" :key="index" @click="goDetail(item.ArticleId)">
				<view class="item-left">
					<text class="title text_twoLine">{{item.Title}}</text>
					<text class="text_twoLine desc">{{item.Body}}</text>
					<text class="item-num" v-if="item.ExpertNumber">专家编号{{item.ExpertNumber}}</text>
					<view class="company text_twoLine" v-if="item.ExpertBackground">{{item.ExpertBackground}}</view>
					<text class="view-item" v-if="item.InterviewTime">访谈时间：{{item.InterviewTime}}</text>
				</view>
				<u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
				<u-tag :text="item.Status" :type="applyStatus.get(item.Status)" mode="plain" class="tag"/>
			</view>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" v-if="totalPage>1"/>
		</view>
		<view class="nodata" v-else>
			<image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
			<text>暂时没有访谈申请的内容</text>
		</view>
	</view>
</template>

<script>
	import { Mine } from '@/config/api.js'
	import { Throttle } from '@/config/util.js'
	export default {
		data() {
			return {
				refresh:false,//正在下拉
				status:'loadmore',
				pageSize:10,
				page_no:1,
				haveData:true,
				loadText:{
					loadmore: '上拉加载更多',
					loading: '加载中',
					nomore: '已经到底了'
				},
				interViewList:[],
				applyStatus:new Map([
					['待访谈','error'],
					['待邀请','primary'],
					['已完成','success'],
					['已取消','info']
				]),
				totalPage:'',
			};
		},
		onLoad() {
			this.getInterList();
		},
		methods:{
			/* 获取列表 */
			getInterList() {
				Mine.getInterview({
					PageSize: this.pageSize,
					CurrentIndex: this.page_no
				}).then(res => {
					if(res.Ret === 200) {
						this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
						this.totalPage = res.Data.Paging.Pages;//总页数
						res.Data.List && res.Data.List.forEach(item => {
							item.InterviewTime = item.InterviewTime.substr(0,3) == '000' ? '' : item.InterviewTime;
						})
						if(this.page_no === 1) {
							this.interViewList = res.Data.List || [];
							this.haveData = this.interViewList.length ? true : false
							if(this.refresh) {
								uni.stopPullDownRefresh();
								this.refresh = false;
							} 
						}else {
							this.interViewList = this.interViewList.concat(res.Data.List)
						}
					}
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url:'/pages/reportDetail/reportDetail?id=' + id
				})
			}
		},
		/* 触底 */
		onReachBottom: Throttle(function() {
			if(this.status === 'nomore') return ;
			this.status = 'loading';
			this.page_no++;
			this.getInterList();
		}),
		/* 下拉刷新 */
		onPullDownRefresh: Throttle(function() {
			this.page_no = 1;
			this.refresh = true;
			this.getInterList()
		}),
	}
</script>

<style lang="scss" scoped>
.applyInterview-container {
	background-color: #F7F7F7;
	.apply-ul {
		padding: 5rpx 0;
		.apply-ltem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 34rpx;
			background: #fff;
			margin-bottom: 4rpx;
			color: #4A4A4A;
			position: relative;
			.title,.desc,.item-num,.company,.view-item {
				max-width: 605rpx;
			}
			.title {
				font-size: 34rpx;
			}
			.desc,.company {
				margin: 20rpx 0 30rpx;
			}
			.desc,.view-item {
				color: #B2B2B2;
			}
			.tag {
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
}
</style>