jzred/pages/donate/donateDetail.vue

<template>
	<view class="detail">
		<view class="top">
			<image src="../../static/images/bgi2.png" mode=""></image>
			<view class="title clamp">夏天的清凉阳光孤儿院物资爱心捐赠活动</view>
			<view class="tip">
				<view class=""></view>
				基本信息
			</view>
			<view class="base-info">
				<view class="item">
					<text>捐赠进度</text>
					<text class="status">30%</text>
				</view>
				<view class="item">
					<text>创立时间</text>
					2021年6月10日
				</view>
				<view class="item">
					<text>开始时间</text>
					2021年6月10日
				</view>
				<view class="item">
					<text>结束时间</text>
					2021年6月10日
				</view>
			</view>
			<view class="dynamic flex">
				<view class="left">实时动态</view>
				<view class="right flex">
					<view>捐赠时间：2021年06月10日</view>
					<view>
						捐赠人：
						<text>李**</text>
					</view>
					<view class="clamp" style="width: 500rpx;">捐赠数量：帐篷[100]顶,帐篷[100]顶,帐篷[100]顶，帐篷[100]顶</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-nav flex">
				<view class="nav-item" v-for="(item, index) in navList" :key="index" :class="{ active: currentIndex === index }" @click="navClick(index)">{{ item }}</view>
			</view>
		</view>

		<view v-if="currentIndex === 0">
			<view class="item-detail" ref="swiperItemOne">
				<view class="tip">
					<view class=""></view>
					捐赠介绍
				</view>
				<view class="item-content">内容介绍内容介绍内容介绍内容介绍内容介绍内容介绍， 内容介绍内容介绍内容介绍内。</view>
				<view class="tip">
					<view class=""></view>
					项目需求
				</view>
				<view class="item-needs">
					<view class="need-item">
						<view class="">
							帐篷类（帐篷）：
							<text>500</text>
							顶
						</view>
						<view class="">
							最低需求捐赠数：
							<text>500</text>
							顶
						</view>
						<view class="">
							物资捐赠要求：
							<text>全新</text>
						</view>
					</view>
					<view class="need-item">
						<view class="">
							帐篷类（帐篷）：
							<text>500</text>
							顶
						</view>
						<view class="">
							最低需求捐赠数：
							<text>500</text>
							顶
						</view>
						<view class="">
							物资捐赠要求：
							<text>全新</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="feedback">
			<view class="feedback-nav">
				<view class="nav-item" :class="{'action': navCurrentIndex === 0}" @click="lookmore(0)">全部</view>
				<view class="nav-item" :class="{'action': navCurrentIndex === 1}" @click="lookmore(1)">已成功</view>
				<view class="nav-item nav-item-err" :class="{'action': navCurrentIndex === 2}" @click="lookmore(2)">已失败</view>
			</view>
			<view class="feedback-content">
				<view class="overall" v-if="navCurrentIndex === 0">
					<view class="title">
						项目整体反馈
					</view>
					<view class="content">
						截止2021年6月10日，荆州市红十字会已将捐赠的消毒液1120瓶和帐篷200顶，500箱矿泉水全数发往阳光福利院。
					</view>
				</view>
				<view class="feedback-item">
					<view class="item-top">
						<image src="" mode=""></image>
						<view class="item-name-time">
							<view class="item-name">荆州捐赠</view>
							<view class="item-time">2021年06月10日 22:25:14</view>
						</view>
					</view>
					<view class="item-content">
						<text>荆州XXXX有限分公司</text>2021年6月10日，荆州市红十字会已将贵公司捐赠的消毒液1120瓶和帐篷200顶，发往阳光福利院。
					</view>
				</view>
			</view>
		</view>
		<view class="btn-wrapper flex">
			<view class="btn1 btn" @click="navTo('/pages/donate/progress')">
				实时进展
			</view>
			<view class="btn2 btn" @click="want()">
				我要捐款
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view  class="type-box">
				<view class="box-title">捐款类型</view>
				<view class="box-tip">请选择您的捐赠身份类型</view>
				<view class="box-btn" @click="chooseType(1)">
					<image src="" mode=""></image>
					<view class="btn-title" >
						个人捐赠
					</view>
					<view class="qq" :class="{'action': jxType === 1}">
						<view class="yx">
							
						</view>
					</view>
				</view>
				<view class="box-btn" @click="chooseType(0)">
					<image src="" mode=""></image>
					<view class="">
						企业(团队)捐赠
					</view>
					<view class="qq"  :class="{'action': jxType === 0}">
						<view class="yx">
						</view>
					</view>
				</view>
				<view class="qr" @click="qr()">
					确认
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navList: ['捐赠详情', '捐赠反馈'],
			currentIndex: 0,
			swiperHeight: 0,
			navCurrentIndex: 0,
			jxType: 0,
		};
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		navClick(index) {
			this.currentIndex = index;
		},
		lookmore(index) {
			this.navCurrentIndex = index
		},
		want() {
			this.$refs.popup.open()
		},
		chooseType(index) {
			this.jxType = index
		},
		qr() {
			this.$refs.popup.close()
			this.navTo('/pages/donate/idonate?type=' + this.jxType )
		}
		
	}
};
</script>

<style lang="scss" scoped>
page {
	width: 100%;
}
.top {
	height: 863rpx;
	background-color: #fff;
	border-top: 1rpx solid #f6f6f6;
	padding-top: 33rpx;
	margin-bottom: 20rpx;
	image {
		display: block;
		width: 680rpx;
		height: 375rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		background-color: red;
	}
	.title {
		width: 580rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 1;
		padding-top: 28rpx;
		padding-left: 42rpx;
		margin-bottom: 39rpx;
	}
	.base-info {
		font-size: 27rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 1;
		display: flex;
		padding: 0 56rpx;
		flex-wrap: wrap;
		.item {
			width: 50%;
			padding-bottom: 40rpx;
			.status {
				color: red;
				font-weight: bold;
			}
			text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				display: inline-block;
				margin-right: 15rpx;
			}
		}
	}
	.dynamic {
		width: 666rpx;
		height: 111rpx;
		background: #efefef;
		border-radius: 10rpx;
		margin: 5rpx auto 0;
		.left {
			width: 115rpx;
			height: 111rpx;
			background: #5c93fc;
			border-radius: 10rpx 0px 0px 10rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 34rpx;
			padding: 22rpx 29rpx;
			margin-right: 15rpx;
		}
		.right {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 1;
			padding: 12rpx 0;
			flex-direction: column;
			justify-content: space-between;
			text {
				color: red;
				font-weight: bold;
			}
		}
	}
}
.content {
	.content-nav {
		height: 82rpx;
		background: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 82rpx;
		justify-content: space-around;
		.active {
			border-bottom: 4rpx solid #fa7e67;
			color: #fa7e67;
			font-weight: bold;
		}
	}
}
.tip {
	margin-left: 42rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	line-height: 1;
	margin-bottom: 34rpx;
	view {
		display: inline-block;
		width: 4rpx;
		height: 30rpx;
		background: #fa7e67;
		border-radius: 2rpx;
		margin-right: 9rpx;
		position: relative;
		bottom: -2rpx;
	}
}
.btn-wrapper {
	.btn {
		width: 50%;
		text-align: center;
		height: 99rpx;
		line-height: 99rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
	.btn1 {
		background-color: #f7c03e;
	}
	.btn2 {
		background-color: #fa7e67;
	}
}
.item-detail {
	padding-top: 42rpx;
	.item-content {
		padding: 0 78rpx 0 48rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 44rpx;
		margin-bottom: 32rpx;
	}
	.item-needs {
		.need-item {
			width: 666rpx;
			height: 150rpx;
			background: #f3f3f3;
			border-radius: 10rpx;
			margin: 0 auto;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 10rpx;
			padding-top: 20rpx;
			padding-left: 13rpx;
			line-height: 1;
			view {
				margin-bottom: 15rpx;
				text {
					color: #e80000;
				}
			}
		}
	}
}
.feedback {
	padding: 25rpx 41rpx 36rpx;
	.feedback-nav {
		margin-bottom: 20rpx;
		.nav-item {
			display: inline-block;
			width: 100rpx;
			height: 55rpx;
			background: #FDCBC2;
			box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			margin-right: 20rpx;
			text-align: center;
			line-height: 55rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.nav-item-err {
			color: #999999;
			background: #F1F1F0;
		}
		.action {
			background: #FA7E67;
			color: #fff;
		}
	}
	.feedback-content {
		.overall {
			.title {
				width: 667rpx;
				height: 75rpx;
				background: #FA7E67;
				box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx 10rpx 0px 0px;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 75rpx;
				padding-left: 17rpx;
			}
			.content {
				padding: 33rpx 36rpx 43rpx 30rpx;
				width: 667rpx;
				background-color: #fff;
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 0px 0px 10rpx 10rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 42rpx;
			}
		}
		.feedback-item {
			margin: 20rpx auto;
			// display: flex;
			background-color: #fff;
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 10rpx 10rpx 10rpx;
			.item-top {
				height: 118rpx;
				border-radius: 10px 10px 0 0;
				border-bottom: 1px solid #ECECEC;
				padding: 25rpx 0 0 17rpx;
				display: flex;
				image {
					width: 77rpx;
					height: 77rpx;
					border-radius: 50%;
					background-color: red;
					margin-right: 12rpx;
				}
				.item-name-time {
					.item-name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 35rpx;
					}
					.item-time {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 50rpx;
					}
				}
			}
			.item-content {
				padding: 25rpx 47rpx 40rpx 30rpx;
				border-radius: 0 0 10rpx 10rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999;
				line-height: 42rpx;
				text {
					color: #E80000;
					font-weight: bold;
				}
			}
		}
	}
}
.type-box {
	width: 542rpx;
	height: 575rpx;
	// background: linear-gradient(0deg, rgba(249, 98, 105, 0.06), rgba(255, 255, 255, 0.06));
	border-radius: 20rpx;
	background-color: #fff;
	position: relative;
	.box-title {
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 1;
		padding-top: 77rpx;
	}
	.box-tip {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 1;
		padding-top: 12rpx;
		margin-bottom: 43rpx;
	}
	.box-btn {
		margin: 0 auto;
		width: 460rpx;
		height: 95rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f3efef;
		position: relative;
		image {
			height: 43rpx;
			width: 43rpx;
			background-color: red;
			margin-right: 15rpx;
		}
		.qq {
			width: 32rpx;
			height: 32rpx;
			border: 1px solid #808080;
			opacity: 0.5;
			border-radius: 50%;
			position: absolute;
			right: 0;
		}
		.action {
			border-color: #FA7E67;
			// position: relative;
			.yx {
				
				width: 20rpx;
				height: 20rpx;
				background: #FA7E67;
				// border: 1px solid #FA7E67;
				border-radius: 50%;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
	}
	.qr {
		width: 460rpx;
		height: 71rpx;
		background: #FA7E67;
		box-shadow: 0px 16rpx 16rpx 0px rgba(250, 126, 103, 0.5);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 71rpx;
		margin: 62rpx auto 0;
	}
}
</style>