tongshanred/pages/fu/axjz.vue

<template>
	<view class="container">
		<scroll-view class="scroll-list" scroll-x style="margin-bottom: 10rpx;">
			<view class="scoll-box" v-for="(itemz,indez) in navList" :key="indez" :class="{ active: indez == currentIndex }" @click="tabtap1(itemz,indez)">
				<view class="scoll-name">{{ itemz.name }}</view>
			</view>
		</scroll-view>
		<scroll-view class="scroll-list" scroll-x>
			<view class="scoll-box" v-for="(ls,index) in cationList" :key="index" :class="{ active: index === tabCurrentIndex }" @click="tabtap(ls.id,index)">
				<view class="scoll-name">{{ ls.name }}</view>
			</view>
		</scroll-view>
		<swiper 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="baseURL + item.userimage" mode="aspectFill"></image>
								<text class="fu-cname">{{ item.category }}</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.apply_user_id == 0">
									<view class="fu-shenqing">已有{{ item.apply_sum }}人申请</view>
									<text class="fu-jifen">+{{ item.integral }}积分</text>
								</view>
								<view class="fu-bottom" v-else>
									<text class="fu-shenqing">资金：{{ item.amount || '暂无' }}</text>
									<view class="fu-shenqing">帮扶人：{{ item.apply_user.full_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 == 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 == 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 == 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 { getHelpList, getHelpIfy } from '@/api/help.js'
	import { one_help,  } from '@/api/index.js';
	import { getUserInfo } from '@/api/login.js';
	import { getList } from '@/api/applyHelp.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// import { map}
	export default {
		components: {
			uniLoadMore,
			empty,
		},
		data() {
			return {
				currentIndex: 0,
				navList: [{
					name: '未帮扶',
					type: 1
				},
				{
					name: '帮扶中',
					type: 2
				},
				{
					name: '公示中',
					type: 3
				},
				{
					name: '已完结',
					type: 4
				}
				],
				category_id: 0,
				tabCurrentIndex:0,
				page: 1, //当前页数
				limit: 10,//每次信息条数
				loadingType: 'more',
				list: [],
				userInfo:'',
				keyword:'',
				money:'',//捐款金额
				integral:'',//捐款积分
				cationList: [{name:'全部',id: 0}],	// 分类列表
				currentId:0,
				show: false,	// 弹窗开关
				type: 1,	// 筛选条件 1-帮扶中  2-未帮扶  3-公示中  4-已完成
			};
		},
		onLoad() {
			this.getHelpIfy();
		},
		onShow() {
			this.page = 1;
			this.loadingType = 'more';
			this.list = [];
			this.loadData();
		},
		computed: {
		...mapState(['baseURL'])
		},
		// 搜索按钮点击
		onNavigationBarButtonTap() {
			this.show = true;
		},
		watch:{
			// keyword(n, o){
			// 	this.keyword = n;
			// 	this.loadData();
			// },
		},
		methods: {
			// 获取帮扶分类
			getHelpIfy() {
				getHelpIfy().then( ({data}) => {
					this.cationList = this.cationList.concat(data)
					// this.currentId = this.cationList[0].id
					// this.loadData()
				})
			},
			// 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';
				getHelpList({
					page:obj.page,
					limit:obj.limit,
					// isrec:obj.type,
					category_id: obj.currentId,
					status: obj.type
				})
					.then(data => {
						console.log(data.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,index) {
				let obj = this;
				obj.tabCurrentIndex = index
				obj.currentId = item;
				obj.page = 1;
				obj.loadingType = 'more';
				obj.list = [];
				obj.loadData()
			},
			tabtap1(item,index) {
				console.log(item)
				this.type = item.type;
				this.currentIndex = index
				this.page = 1;
				this.loadingType = 'more';
				this.list = [];
				this.loadData()
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/fu/fuInfo?id=' + item.id
				})
				// 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>