jzred/pages/donate/donate.vue

<template>
	<view class="donate-wrapper">
		<view class="top-select flex" style=" position: relative; z-index: 99;">
			<view class="">选择地区</view>
			<picker @change="bindAreaChange" :range="areas" range-key="name">
				<view class="area select" :class="{ action: area }">{{ area || '点击选择地区' }}</view>
			</picker>
			<picker @change="bindStatusChange" :range="statuss">
				<view class="status select" :class="{ action: status }">{{ status }}</view>
			</picker>
		</view>
		<scroll-view scroll-y="true" :style="{ height: height }" class="item-wrapper" >
			<!-- <view class="item-wrapper"> -->
			<empty v-if="showList.length === 0"></empty>
			<template>
				<view class="item flex" v-for="item in showList" >
					<view class="item-left"><image :src="item.img" mode=""></image></view>
					<view class="item-right">
						<view class="item-title clamp">{{ item.title }}</view>
						<view class="item-content clamp2">{{ item.info }}</view>
						<view class="item-status">
							捐赠进度
							<text>{{ item.project_progress }}%</text>
						</view>
						<view class="item-btn" :class="{ 'btn-active': item.status === 0 }" @click="join(item.id)">{{ item.status === 0 ? '我要捐赠' : '已结束' }}</view>
					</view>
				</view>
			</template>
			

			<!-- </view> -->
			
		</scroll-view>
		
	</view>
</template>

<script>
import empty from '../../components/empty.vue';
import { getProjectList, getProjectInfo, getAllArea } from '../../api/money.js';
export default {
	components: {
		empty
	},
	data() {
		return {
			areas: [],
			area: '',
			select_area: 0,
			area_id: 0,
			statuss: ['全部', '进行中', '已结束'],
			status: '全部',
			select_status: 0,
			list: [],
			height: 0
			// showList: []
		};
	},
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.item-wrapper').boundingClientRect();
				query.exec(function(res) {
					console.log(res, 'ddddddddddddd');
					_this.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.height);
				});
			},
			fail: res => {}
		});
	},
	computed: {
		showList() {
			let obj = this;
			if (obj.list.length === 0) {
				return [];
			} else {
				if (obj.select_area === 0) {
					if (obj.select_status === 0) {
						return obj.list;
					} else if (obj.select_status === 1) {
						return obj.list.filter(item => {
							return item.status !== 4;
						});
					} else {
						return obj.list.filter(item => {
							return item.status === 4;
						});
					}
				} else {
					if (obj.select_status === 0) {
						return obj.list.filter(item => {
							return item.project_area === obj.select_area;
						});
					}else if(obj.select_status === 1){
						 return obj.list.filter(item => {
							return item.project_area === obj.select_area && item.status !== 4 
						});
					}else {
						return obj.list.filter(item => {
							return item.project_area === obj.select_area && item.status === 4 
						});
					}
				}
			}
		}
	},
	onLoad() {
		this.loadDate();
		// this.showList = this.list;
		this.getAllArea();
	},
	methods: {
		bindAreaChange(e) {
			console.log(e.target);
			this.area = this.areas[e.target.value].name;
			this.select_area = this.areas[e.target.value].id;
		},
		bindStatusChange(e) {
			console.log(e.target);
			this.status = this.statuss[e.target.value];
			if (this.status == '已结束') {
				this.select_status = 4;
			}else if(this.status == '全部'){
				this.select_status = 0;
			}else {
				this.select_status = 1;
				console.log(this.select_status,'this.select_status+++++++++++++')
			}
			// if (this.status !== this.statuss[e.target.value]) {
			// 	this.status = this.statuss[e.target.value];
			// 	if(this.status == '全部') {
			// 		this.showList = this.list
			// 	}else if(this.status == '进行中'){
			// 		this.showList = this.list.map( item => {
			// 			return item
			// 		})
			// 	}
			// }
		},
		join(id) {
			console.log(id);
			uni.navigateTo({
				url: '/pages/donate/donateDetail?id=' + id
			});
			console.log('dddddddddd');
		},
		loadDate() {
			getProjectList({
				page: 1,
				limit: 10000
			}).then(({ data }) => {
				// console.log(res,'+++++++++++++++++')
				let list = [];
				data.list.map(item => {
					getProjectInfo({
						id: item.id
					}).then(res => {
						let data = JSON.parse(res.msg);
						// console.log( data.project_progress,'999999999999999')
						item.project_progress = data.project_progress;
						item.info = item.info.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, '').replace(/<[^>]+>/g, '');
						console.log(item);
						this.list.push(item);
						return item;
					});
				});
				console.log(this.list, '5555555');
			});
		},
		getAllArea() {
			getAllArea().then(({ data }) => {
				console.log(data, '6666666666');
				this.areas = data;
			});
		},
		isShow(item) {
			let obj = this;
			if (obj.select_area === 0) {
				if (obj.select_status === 0) {
					return true;
				} else {
					return item.status === obj.select_status ? true : false;
				}
			} else {
				if (obj.select_status === 0) {
					return obj.select_area === item.project_area ? true : false;
				} else {
					return obj.select_area === item.project_area && item.status === obj.select_status ? true : false;
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.donate-wrapper {
	padding-top: 25rpx;
}
.top-select {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	height: 63rpx;
	line-height: 63rpx;
	padding: 0 20rpx 0 19rpx;
	margin-bottom: 20rpx;
	.select {
		padding-left: 40rpx;
		background: #ffffff;
		border-radius: 5rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 63rpx;
		position: relative;
		&::after {
			content: '';
			width: 0;
			height: 0;
			border-left: 10rpx solid transparent;
			border-right: 10rpx solid transparent;
			border-top: 10rpx solid #808080;
			position: absolute;
			right: 30rpx;
			bottom: 26rpx;
		}
	}
	.area {
		width: 355rpx;
		height: 63rpx;
		margin: 0 10rpx 0 24rpx;
	}
	.status {
		width: 204rpx;
		height: 63rpx;
	}
	.action {
		color: #000;
	}
}
.item-wrapper {
	padding: 0 20rpx;
	.item {
		width: 710rpx;
		height: 280rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0rpx rgba(50, 50, 52, 0.06);
		border-radius: 8rpx;
		padding: 40rpx 20rpx;
		margin-bottom: 20rpx;
		.item-left {
			width: 190rpx;
			height: 200rpx;
			border-radius: 10rpx;
			image {
				width: 190rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.item-right {
			padding-left: 22rpx;
			position: relative;
			.item-title {
				width: 316rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
				line-height: 1;
				padding-bottom: 14rpx;
			}
			.item-content {
				width: 416rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 1.5;
			}
			.item-status {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 1.5;
				position: absolute;
				left: 22rpx;
				bottom: 0;
				text {
					color: #e80000;
					font-weight: bold;
				}
			}
			.item-btn {
				width: 160rpx;
				height: 60rpx;
				background: #f2f2f2;
				border-radius: 30px;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 60rpx;
				text-align: center;
				position: absolute;
				right: -42rpx;
				bottom: -9rpx;
			}
			.btn-active {
				background: #fa7e67;
				color: #fff;
				box-shadow: 0px 2px 20px 0px rgba(250, 126, 103, 0.5);
			}
		}
	}
}
</style>