xhlred/pages/user/myFu.vue

<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
		
					<!-- 订单列表 -->
					<view class="fu-box" v-for="(item, index) in tabItem.orderList" :key='index' @click="toDetail(item)" v-if="item.info.title">
						<image class="fu-img" :src="item.info.image" mode="aspectFill"></image>
						<view class="fu-right">
							<view>
								<view class="fu-tit">{{ item.info.title }}</view>
								<view class="fu-text">{{ item.info.info }}</view>
							</view>
							<view class="fu-bottom" v-if="tabCurrentIndex == 2 && item.info && item.info.title">
								<!-- <text class="fu-jifen">+{{ item.info.integral }}积分</text> -->
								<view class="fu-sczl" v-if="!item.remark" @click.stop="upInfo(item.hid)">上传资料</view>
								<view class="fu-shenqing" v-if="item.status == 3">公示中</view>
							</view>
							<view class="fu-bottom" v-if="tabCurrentIndex == 3 && item.info && item.info.title">
								<!-- <text class="fu-jifen">+{{ item.info.integral }}积分</text> -->
								<view class="fu-sczl" @click.stop="upInfo(item.hid, 1)">修改资料</view>
							</view>
							<view class="fu-bottom" v-if="tabCurrentIndex !== 2 && tabCurrentIndex !== 3 && tabCurrentIndex !== 4 && item.info && item.info.title ">
								<view class="fu-shenqing">已有{{ item.info.sales }}人申请</view>
								<!-- <text class="fu-jifen">+{{ item.info.integral }}积分</text> -->
							</view>
							<view class="fu-bottom" v-if="tabCurrentIndex == 4 && item.info && item.info.title ">
								<view class="fu-shenqing"></view>
								<text class="fu-yjs">已结束</text>
							</view>
							<view class="fu-bottom" v-if="item.info && !item.info.title ">
								<view class="fu-shenqing"></view>
								<text class="fu-yjs">该项目已删除</text>
							</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
import { my_enroll } from '@/api/applyHelp.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					state: 2,
					text: '审核中',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 3,
					text: '已拒绝',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 1,
					text: '已通过',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 5,
					text: '公示中',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 4,
					text: '已结束',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
			],
		}
	},
	onLoad() {
	},
	onShow() {
		if (this.tabCurrentIndex == 0) {
			let index = this.tabCurrentIndex;
			this.navList[index].page = 1;
			this.navList[index].orderList = [];
			this.navList[index].loadingType = 'more';
			this.loadData();
		}
	},
	methods: {
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		loadData(source) {
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			if (source === 'tabChange' && navItem.loaded === true) {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			my_enroll({
				page: navItem.page,
				limit:navItem.limit,
				type: state,
			}).then(res => {
				navItem.orderList = navItem.orderList.concat(res.data.filter(word => !!word.info.title));
				navItem.page++;
				if (navItem.limit == res.data.length) {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					navItem.loadingType = 'more';
					return;
				} else {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					navItem.loadingType = 'noMore';
				}
				this.$set(navItem, 'loaded', true);
			}).catch(err => {
				console.log(err);
			});
		},
		// 上传资料
		upInfo(id, type) {
			let url = '/pages/fu/upLoadInfo?id=' + id;
			if (type) {
				url += '&type=' + type
			}
			uni.navigateTo({
				url: url
			})
		},
		// 跳转详情
		toDetail(item) {
			if (item.remark) {
				uni.navigateTo({
					url: '/pages/fu/helpDetail?id=' + item.hid
				})
			} else {
				uni.navigateTo({
					url: '/pages/fu/fuInfo?id=' + item.hid
				})
			}
				
		}
	}
}
</script>

<style lang="scss">
page {
	height: 100%;
	background: #F4F5F4;
}
.content {
	height: 100%;
	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current {
				color: $motif-color;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $motif-color;
				}
			}
		}
	}
	.swiper-box {
		height: calc(100% - 40px);
		padding: 20rpx 30rpx;
	}
	.list-scroll-content {
		height: 100%;
	}
	.fu-box {
		padding: 14rpx 20rpx 28rpx 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.fu-img {
			width: 220rpx;
			height: 182rpx;
			border-radius: 8rpx;
		}
		.fu-right {
			margin-left: 20rpx;
			width: 62%;
			.fu-tit {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.fu-text {
				margin-top: 17rpx;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: $font-sm;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.fu-bottom {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.fu-shenqing {
					font-size: 21rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FF727E;
				}
				.fu-jifen {
					padding: 0 5rpx;
					border: 1px solid #FF0000;
					border-radius: 5rpx;
					font-size: 21rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF0000;
				}
				.fu-yjs {
					font-size: 21rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #999999;
				}
				.fu-sczl {
					padding: 5rpx 17rpx;
					font-size: 21rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					background: #FF727E;
					border-radius: 23rpx;
				}
			}
		}
	}
}
</style>