dxh/pages/fu/axjz.vue

<template>
	<view class="container">
		<scroll-view class="scroll-list" scroll-x>
			<view class="scoll-box" v-for="(ls,index) in cationList" :key="index" :class="{ active: ls.id === currentId }" @click="tabtap(ls.id)">
				<view class="scoll-name">{{ ls.cate_name }}</view>
			</view>
		</scroll-view>
		<swiper v-if="tabCurrentIndex == 0" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<empty v-if="list.length === 0"></empty>
					<!-- 订单列表 -->
					<view >
						<view class="fu-box" v-for='(item, index) in list' :key="index" @click="toDetail(item)">
							<view class="img-box">
								<image class="fu-img" :src="item.image" mode="aspectFill"></image>
								<text class="fu-cname">{{ item.cname }}</text>
							</view>
							<view class="fu-right">
								<view>
									<view class="fu-tit">{{ item.title }}</view>
									<view class="fu-text">{{ item.info }}</view>
								</view>
								<view class="fu-bottom" v-if="item.is_show == 1">
									<view class="fu-shenqing">已有{{ item.sales }}人申请</view>
									<text class="fu-jifen">+{{ item.integral }}积分</text>
								</view>
								<view class="fu-bottom" v-if="item.is_show == 0">
									<text class="fu-shenqing">资金：{{ item.money }}</text>
									<view class="fu-shenqing">帮扶人：{{ item.name }}</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		<u-popup v-model="show" mode="right">
			<view class="popup-box">
				<view class="pop-bfu">
					<view class="bfu-btn" :class="{'checkBtn': type == 2 }" @click="shaixuan(2)">
						未帮扶
						<image class="btn-img" v-if="type == 2" src="../../static/images/icon_pick.png"></image>
					</view>
					<view class="bfu-btn" :class="{'checkBtn': type == 1 }" @click="shaixuan(1)">
						帮扶中
						<image class="btn-img" v-if="type == 1" src="../../static/images/icon_pick.png"></image>
					</view>
					<view class="bfu-btn" :class="{'checkBtn': type == 3 }" @click="shaixuan(3)">
						公示中
						<image class="btn-img" v-if="type == 3" src="../../static/images/icon_pick.png"></image>
					</view>
				</view>
				<view class="pop-bfu">
					
					<view class="bfu-btn" :class="{'checkBtn': type == 4 }" @click="shaixuan(4)">
						已完结
						<image class="btn-img" v-if="type == 4" src="../../static/images/icon_pick.png"></image>
					</view>
				</view>
				<view class="qr-btn">
					<text class="btn-qr" @click="comfim">确认</text>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import { one_help } from '@/api/index.js';
	import { getUserInfo } from '@/api/login.js';
	import { getList } from '@/api/applyHelp.js';
	export default {
		components: {
			uniLoadMore,
			empty,
		},
		data() {
			return {
				tabCurrentIndex:0,
				page: 1, //当前页数
				limit: 10,//每次信息条数
				loadingType: 'more',
				list: [],
				userInfo:'',
				keyword:'',
				money:'',//捐款金额
				integral:'',//捐款积分
				cationList: [],	// 分类列表
				currentId:0,
				show: false,	// 弹窗开关
				type: 2,	// 筛选条件 1-帮扶中  2-未帮扶  3-公示中  4-已完成
			};
		},
		onLoad() {
			this.GetCation();
		},
		onShow() {
			this.page = 1;
			this.loadingType = 'more';
			this.list = [];
			this.loadData();
		},
		// 搜索按钮点击
		onNavigationBarButtonTap() {
			this.show = true;
		},
		watch:{
			// keyword(n, o){
			// 	this.keyword = n;
			// 	this.loadData();
			// },
		},
		methods: {
			GetCation(){
				let obj = this;
				getList({})
					.then(({ data }) => {
						let res =[{
							cate_name:'全部',
							id:0
						}]
						res.unshift(0,0); 
						Array.prototype.splice.apply(data,res); 
						obj.cationList =  data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			//获取订单列表
			loadData() {
				let obj = this;
				if (obj.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				obj.loadingType = 'loading';
				one_help({
					page:obj.page,
					limit:obj.limit,
					cid:obj.currentId,
					type: obj.type
				})
					.then(data => {
						obj.list = obj.list.concat(data.data);
						obj.page++;
						if (obj.limit == data.data.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							obj.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							obj.loadingType = 'noMore';
						}
					})
			},
			//一级分类点击
			tabtap(item) {
				let obj = this;
				obj.currentId = item;
				obj.page = 1;
				obj.loadingType = 'more';
				obj.list = [];
				obj.loadData()
			},
			toDetail(item) {
				if ( item.is_show == 1 ) {
					uni.navigateTo({
						url: '/pages/fu/fuInfo?id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/fu/helpDetail?id=' + item.id
					})
				}
				
			},
			// 筛选 1-帮扶中   2-未帮扶
			shaixuan(i) {
					this.type = i;
			},
			comfim() {
				this.show = false;
				this.page = 1;
				this.loadingType = 'more';
				this.list = [];
				this.loadData()
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		.container{
			height: 100%;
		}
	}
	.swiper-box {
		height: calc(100% - 40px);
		padding: 20rpx 30rpx 0 30rpx;
		.list-scroll-content {
			height: 100%;
		   // padding-bottom: 25rpx;
		}
	}
	.scroll-list {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		background-color: #FFFFFF;
		font-size: 32rpx;
		height: 40px;
		.scoll-box {
			text-align: center;
			display: inline-block;
			margin: 0rpx 38rpx;
			// padding: 15rpx 0rpx;
			.scoll-img {
				width: 130rpx;
				height: 85rpx;
				border-radius: 100%;
				image {
					width: 85rpx;
					height: 100%;
					border-radius: 100%;
				}
			}
			.scoll-name {
				padding-top: 15rpx;
			}
			&.active {
				color: $motif-color;
				border-bottom:6rpx solid $motif-color;
			}
		}
	}
	.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;
		&:last-of-type {
			margin-bottom: 0;
		}
		.img-box {
			position: relative;
		}
		.fu-img {
			width: 220rpx;
			height: 182rpx;
			border-radius: 8rpx;
		}
		.fu-cname {
			position: absolute;
			top: 0;
			left: 0;
			background: #FF727E;
			color: #FFFFFF;
			padding: 0 10rpx;
			border-radius: 8rpx 0 8rpx 0;
			font-size: 24rpx;
		}
		.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;
				}
			}
		}
	}
	.popup-box {
		padding: 100rpx 0 100rpx 20rpx ;
		
		.pop-bfu {
			display: flex;
			margin-bottom: 30rpx;
			.bfu-btn {
				width: 140rpx;
				height: 66rpx;
				background: #EDEDED;
				border: 1px solid #EDEDED;
				font-size: $font-base;
				// padding: 10rpx 30rpx;
				margin-right: 20rpx;
				color: #FF727E;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.btn-img {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 24rpx;
					height: 24rpx;
				}
			}
			.checkBtn {
				border: 1px solid #FF727E;
				background: #FF727E;
				color: #FFFFFF;
			}
		}
		.qr-btn {
			margin-right: 20rpx;
			margin-top: 100rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.btn-qr {
				color: #FFFFFF;
				background: $motif-color;
				font-size: $font-lg;
				font-weight: 500;
				width: 200rpx;
				height: 66rpx;
				border-radius: 33rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>