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 ceshiList" :key="item.id">
				<view class="item-left">
					<image src="" mode=""></image>
				</view>
				<view class="item-right">
					<view class="item-title clamp">{{item.title}}</view>
					<view class="item-content clamp2">{{item.content}}</view>
					<view class="item-status">捐赠进度<text>{{item.jindu}}%</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>

	export default {
		data() {
			return {
				areas: ['沙市区红十字会','荆州区红十字会','石首区红十字会','洪湖区红十字会','松滋区红十字会','监利区红十字会','公安县红十字会','江陵县红十字会'],
				area: '',
				statuss: ['全部','进行中','已结束'],
				status: '全部',
				ceshiList: [
					{
						id: '1',
						title: '夏天里的清凉夏天里的清凉夏天里的清凉夏天里的清凉夏天里的清凉',
						content: '荆州市阳光孤儿院成立于2021年，荆州市红 十字会向社会募集各种空调荆州市阳光孤儿院成立于2021年，荆州市红 十字会向社会募集各种空调',
						status: 0,
						jindu: 99
					},
					{
						id: '2',
						title: '夏天里的清凉',
						content: '荆州市阳光孤儿院成立于2021年，荆州市红 十字会向社会募集各种空调荆州市阳光孤儿院成立于2021年，荆州市红 十字会向社会募集各种空调',
						status: 1,
						jindu: 100
					},
					{
						id: '3',
						title: '夏天里的清凉',
						content: '荆州市阳光孤儿院成立于2021年，荆州市红 十字会向社会募集各种空调荆州市阳光孤儿院成立于2021年，荆州市红 十字会向社会募集各种空调',
						status: 0,
						jindu: 20
					},
				]
				
			}
		},
		methods: {
			bindAreaChange(e) {
				console.log(e.target)
				this.area = this.areas[e.target.value]
			},
			bindStatusChange(e) {
				console.log(e.target)
				this.status = this.statuss[e.target.value]
			},
			join(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/donate/donateDetail?id=' +id
				})
				console.log('dddddddddd')
			}
		}
	}
</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>