fanghuayuexuan/pages_course/integral.vue

<template>
	<view class="integral-page">
		<view class="bg">
			<image src="https://cdn.his.cdwjyyh.com/images/integral/integral_top_bg.png" mode=""></image>
		</view>
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="https://cdn.his.cdwjyyh.com/images/back_white.png" mode=""></image>
			</view>
			<view class="header-title">我的芳华币</view>
			<view class="header-right"></view>
		</view>
		
		<!-- 芳华币余额区域 -->
		<view class="balance-section">
			<view class="balance-info">
				<view class="balance-title">我的芳华币</view>
				<view class="balance-amount">12002</view>
				<view class="balance-desc">可抵扣现金，最高享100%抵扣</view>
			</view>
			<view class="gold-coin">
				<image src="https://cdn.his.cdwjyyh.com/images/integral/integral_img.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 连续签到领芳华币 -->
		<view class="sign-section">
			<view class="sign-header">
				<view class="sign-title">连续签到领芳华币</view>
				<view class="sign-days">已连续签到 2 天</view>
			</view>
			<view class="sign-buttons">
				<view class="sign-btn active">
					<view class="sign-data">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/integral_era.png" mode="aspectFit"></image>
					<view class="sign-coin">10</view>
					</view>
					<view class="sign-day">第1天</view>
				</view>
				<view class="sign-btn active">
					<view class="sign-data">
					<image  src="https://cdn.his.cdwjyyh.com/images/integral/integral_era.png" mode="aspectFit"></image>
					<view class="sign-coin">15</view>
					</view>
					<view class="sign-day">第2天</view>
				</view>
				<view class="sign-btn">
					<view class="sign-data">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/integral_era.png" mode="aspectFit"></image>
					<view class="sign-coin">20</view>
					</view>
					<view class="sign-day">第3天</view>
				</view>
				<view class="sign-btn">
					<view class="sign-data">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/integral_era.png" mode="aspectFit"></image>
					<view class="sign-coin">25</view>
					</view>
					<view class="sign-day">第4天</view>
				</view>
				<view class="sign-btn">
					<view class="sign-data">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/integral_era.png" mode="aspectFit"></image>
					<view class="sign-coin">30</view>
					</view>
					<view class="sign-day">第5天</view>
				</view>
				<view class="sign-btn">
				<view class="sign-data">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/integral_era.png" mode="aspectFit"></image>
					<view class="sign-coin">50</view>
					</view>
					<view class="sign-day">第6天</view>
				</view>
				<view class="sign-btn special">
					<view class="sign-data">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/gift.png" mode="aspectFit"></image>
					</view>
					
					<view class="sign-day">第7天</view>
				</view>
			</view>
			<view class="sign-button">
				<text>立即签到</text>
			</view>
		</view>
		
		<!-- 福利兑换 -->
		<view class="benefits-section">
			<view class="section-title">福利兑换</view>
			<view class="benefits-grid">
				<view class="benefit-item">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/go_consultation.png" mode="aspectFit"></image>
					<view class="benefit-name">去问诊</view>
				</view>
				<view class="benefit-item">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/go_buy_medicine.png" mode="aspectFit"></image>
					<view class="benefit-name">去买药</view>
				</view>
				<view class="benefit-item">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/go_change_course.png" mode="aspectFit"></image>
					<view class="benefit-name">去诊所</view>
				</view>
				<view class="benefit-item">
					<image src="https://cdn.his.cdwjyyh.com/images/integral/go_exchange.png" mode="aspectFit"></image>
					<view class="benefit-name">去课堂</view>
				</view>
			</view>
		</view>
		
		<!-- 新人福利 -->
		<view class="new-user-section">
			<view class="section-title">新人福利</view>
			<view class="task-list">
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/member.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">10天会员限时领</view>
						<view class="task-desc">专家免费咨询 优先问诊</view>
					</view>
					<view class="task-button">去兑换</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/consult.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">专家免费咨询</view>
						<view class="task-desc">专家免费1次咨询</view>
					</view>
					<view class="task-button">去学习</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/first_order.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">首单立返</view>
						<view class="task-desc">下单返现 5000 芳华币</view>
					</view>
					<view class="task-button">去下单</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/patient_information.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">填写就诊人信息</view>
						<view class="task-desc">填写送 1000 芳华币</view>
					</view>
					<view class="task-button">去填写</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/address.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">填写收货地址</view>
						<view class="task-desc">填写送 1000 芳华币</view>
					</view>
					<view class="task-button">去填写</view>
				</view>
			</view>
		</view>
		
		<!-- 每日任务 -->
		<view class="daily-task-section">
			<view class="section-title">每日任务</view>
			<view class="task-list">
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/xfdjf.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">刷视频</view>
						<view class="task-desc">每浏览 10 秒视频发放芳华币</view>
					</view>
					<view class="task-button">去逛逛</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/xfdjf.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">看直播</view>
						<view class="task-desc">每观看 10 秒视频发放芳华币</view>
					</view>
					<view class="task-button">去观看</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/xxkc.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">学习课程</view>
						<view class="task-desc">每学习 20 秒发放芳华币</view>
					</view>
					<view class="task-button">去学习</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/ssp.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">消费得积分</view>
						<view class="task-desc">实际消费 1 元得 1 芳华币</view>
					</view>
					<view class="task-button">去逛逛</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/txyysf.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">填写用药随访</view>
						<view class="task-desc">分享健康知识 +10 芳华币/条</view>
					</view>
					<view class="task-button">去填写</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/fxjkzs.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">分享健康知识</view>
						<view class="task-desc">分享健康知识 +10 芳华币/条</view>
					</view>
					<view class="task-button">去分享</view>
				</view>
				<view class="task-item">
					<view class="task-icon">
						<image src="https://cdn.his.cdwjyyh.com/images/integral/yqhyxfl.png" mode="aspectFit"></image>
					</view>
					<view class="task-info">
						<view class="task-title">邀请好友享福利</view>
						<view class="task-desc">+200 芳华币</view>
					</view>
					<view class="task-button">去邀请</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
			return {
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
			}
		},
	methods: {
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		}
	}
}
</script>

<style lang="scss">
	.integral-page {
		background: #F5F7FA;
		min-height: 100vh;
		.bg{
			width: 100%;
			position: absolute;
			image{
			width: 100%;
			height: 682rpx;
			}
		}
		.header {
		position: relative;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.back-btn {
				width: 48rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 48rpx;
			     	height: 48rpx;
				}
			}
			
			.header-title {
				font-size: 34rpx;
				font-weight: 500;
				color: #ffffff;
			}
			
			.header-right {
				width: 60rpx;
			}
		}
		
		.balance-section {
			// height: 300rpx;
			// background: linear-gradient(135deg, #FF9A3C 0%, #FF6B00 100%);
			margin: 20rpx 30rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			position: relative;
			overflow: hidden;
			
			.balance-info {
				z-index: 1;
				
				.balance-title {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					margin-bottom: 10rpx;
				}
				
				.balance-amount {
					font-size: 60rpx;
					font-weight: bold;
					color: #FFFFFF;
					margin-bottom: 10rpx;
				}
				
				.balance-desc {
					font-size: 20rpx;
					color: rgba(255, 255, 255, 0.8);
				}
			}
			
			.gold-coin {
				z-index: 1;
				
				image {
					width: 320rpx;
					height: 304rpx;
				}
			}
		}
		
		.sign-section {
			background: #FFFFFF;
			margin: 0 30rpx 20rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			position: relative;
			z-index: 2;
			
			.sign-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				
				.sign-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}
				
				.sign-days {
					font-size: 22rpx;
					color: #FF6B00;
				}
			}
			
			.sign-buttons {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				
				.sign-btn {
					width: 80rpx;
					height: 120rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.sign-data{
						position: relative;
						width: 88rpx;
						height: 88rpx;
						image{
							width: 100%;
							height: 100%;
						}
						.sign-coin {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						font-size: 24rpx;
						font-weight: 600;
						color: #ffffff;
						margin-bottom: 5rpx;
					}
					}
					
					
					.sign-day {
						font-size: 20rpx;
						color: #999999;
						margin-top: 8rpx;
					}
					
					&.active {
						
						.sign-coin {
							color: #FF6B00;
						}
					}
					
					
				}
			}
			
			.sign-button {
				height: 80rpx;
				background: linear-gradient(135deg, #FF9A3C 0%, #FF6B00 100%);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				text {
					font-size: 28rpx;
					font-weight: 600;
					color: #FFFFFF;
				}
			}
		}
		
		.benefits-section {
			background: #FFFFFF;
			margin: 0 30rpx 20rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			
			.section-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 30rpx;
			}
			
			.benefits-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 20rpx;
				
				.benefit-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					
					image {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 10rpx;
					}
					
					.benefit-name {
						font-size: 22rpx;
						color: #666666;
					}
				}
			}
		}
		
		.new-user-section,
		.daily-task-section {
			background: #FFFFFF;
			margin: 0 30rpx 20rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			
			.section-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 30rpx;
			}
			
			.task-list {
				
				.task-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #F5F7FA;
					
					&:last-child {
						border-bottom: none;
					}
					
					.task-icon {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
					
					.task-info {
						flex: 1;
						
						.task-title {
							font-size: 24rpx;
							font-weight: 500;
							color: #333333;
							margin-bottom: 5rpx;
						}
						
						.task-desc {
							font-size: 20rpx;
							color: #999999;
						}
					}
					
					.task-button {
						width: 120rpx;
						height: 50rpx;
						background: #FF6B00;
						border-radius: 25rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>