jzred/pages/donate/donate.vue

<template>
	<view class="donate-wrapper">
		<view class="top-select flex">
			<view class="">选择地区</view>
			<picker @change="bindAreaChange" :range="areas">
				<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>
		<view class="item-wrapper">
			<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>
		</view>
	</view>
</template>

<script>
import { getProjectList, getProjectInfo ,getAllArea} from '../../api/money.js';
export default {
	data() {
		return {
			areas: ['沙市区红十字会', '荆州区红十字会', '石首区红十字会', '洪湖区红十字会', '松滋区红十字会', '监利区红十字会', '公安县红十字会', '江陵县红十字会'],
			area: '',
			area_id: 0,
			statuss: ['全部', '进行中', '已结束'],
			status: '全部',
			status_id: 0,
			list: [],
			showList: []
		};
	},
	async onLoad() {
		let a = await this.loadDate();
		this.showList = this.list;
		this.getAllArea()
	},
	methods: {
		bindAreaChange(e) {
			console.log(e.target);
			this.area = this.areas[e.target.value];
		},
		bindStatusChange(e) {
			console.log(e.target);
			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: 1000
			}).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');
			});
		},
		select(area,status) {
			if(atea!== '') {
				
			}
			
		},
		getAllArea() {
			getAllArea().then(res => {
				console.log(res,'6666666666')
			})
		}
	}
};
</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>