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" range-key="name">
				<view class="status select" :class="{ action: status }">{{ status }}</view>
			</picker>
		</view>
		<scroll-view scroll-y="true" :style="{ height: height }" class="item-wrapper" @scrolltolower="loadDate">
			<!-- <view class="item-wrapper"> -->
			<empty v-if="list.length === 0  "></empty>
			<template>
				<view class="item flex" v-for="item in list" @click="join(item.id)" :key="item.id">
					<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*100 }}%</text>
						</view>
						<view class="item-btn" :class="{ 'btn-active': item.status == 1 }">
							{{ item.status == 2 ? '已结束' : item.status == 0?'未开始':'我要捐赠'}}</view>
					</view>
				</view>
			</template>
			<uni-load-more :status="loadingType"></uni-load-more>

			<!-- </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: [{
					id: 0,
					name: '市本级'
				}],
				area: '',
				select_area: null,
				area_id: 0,
				statuss: [{
					id: -2,
					name: '全部'
				}, {
					id: 1,
					name: '进行中'
				}, {
					id: 2,
					name: '已结束'
				}],
				status: '全部',
				select_status: -2,
				list: [],
				height: 0,
				loadingType: 'more',
				page: 1,
				loaded: false,
				limit: 5
				// showList: []
			};
		},
		onReady(res) {
			this.getHeight()
		},
		onShow() {
			// console.log(this.list.length,'********************************************444')
			// location.reload()

		},
		computed: {

		},
		onLoad() {
			console.log('****************************************')
			this.loadDate();
			// this.showList = this.list;
			this.getAllArea();

		},
		methods: {
			bindAreaChange(e) {
				console.log(e.target);
				this.area = this.areas[e.target.value].name;
				if (this.select_area !== this.areas[e.target.value].id) {
					this.page = 1
					this.loadingType = 'more'
					this.loaded = false
					this.select_area = this.areas[e.target.value].id;
				}
				this.list = []
				uni.showLoading({
					title: '加载中...'
				})
				this.loadDate()


			},
			bindStatusChange(e) {
				console.log(e.target);
				this.status = this.statuss[e.target.value].name;
				if (this.select_status !== this.statuss[e.target.value].id) {
					this.page = 1
					this.loadingType = 'more'
					this.loaded = false
					this.select_status = this.statuss[e.target.value].id;
				}
				this.list = []
				uni.showLoading({
					title: '加载中...'
				})
				this.loadDate()
				// 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() {
				if (this.loadingType === 'noMore') {
					return
				}
				getProjectList({
					project_area: this.select_area,
					page: this.page,
					status: this.select_status,
					limit: this.limit
				}).then(({
					data
				}) => {
					console.log(data, '+++++++++++++++++999+++++++++++++++++++')
					// this.list.push(data.list)
					this.page++;
					// console.log(this.page)
					let list = [];
					list = data.list.map(item => {
						getProjectInfo({
							id: item.id
						}).then(res => {
							// let data = JSON.parse(res.msg);
							let data = res.data
							console.log(res, '9999999999999999999999999999999999999999')
							item.project_progress = data.project_progress;
							item.info = item.info.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, '')
								.replace(/<[^>]+>/g, '');
							console.log(item);
							this.list.push(item);
							console.log(this.list, '/////////////////////////////////////');
							return item;
						});
					});
					// this.list.push(list)
					uni.hideLoading()
					console.log(this.list.length, '5555555');

					if (this.limit == data.list.length) {
						this.loadingType = 'more';
						return
					} else {
						this.loadingType = 'noMore';
					}
					this.$set(this, 'loaded', true);
				});
			},
			getAllArea() {
				getAllArea().then(({
					data
				}) => {
					console.log(data, '6666666666');
					this.areas = this.areas.concat(data);
				});
			},
			isShow() {
				console.log()
			},
			getHeight() {
				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 => {}
				});
			}
		}
	};
</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>