vue-insagent-app/pages/index/checkIn.vue

<template>
	<view class="page">
		<view class="headers">
			<view class="dis a-c j-start">
				<u-icon name="arrow-left" size="40" color="#000" @tap="back"></u-icon>
				<text style="margin:auto;">签到有礼</text>
			</view>
		</view>
		<view class="content">
			<view class="growthValue">
				<text>{{growthValue}}</text>
				<text>成长值</text>
			</view>
			<view class="checkIn">
				<view class="header dis a-c ">
					<text>2024年11月</text>
					<image src="../../static/image/index/checkIn-img/checkIn.png" mode=""></image>
				</view>
				<view class="mockData dis f-c">
					<view class="dis a-c j-s labelHeader">
						<text>签到日历</text>
						<text>连续签到7天后，每天得2成长值</text>
					</view>
					<view class="dis a-c j-s">
						<view class="dis f-c a-c" v-for="(item,index) in checkINList" :key="index">
							<text class="dateName">{{item.weekDay}}</text>
							<view class="checkInDate"
								:style="{background:item.time=='今'?'linear-gradient( 180deg, #FF9345 0%, #FED7A1 100%)':item.time>getdatevalue?'#FFF7D3':item.isMissedSignIn?'#F4F4F4':'#FFF9EC',color:item.time=='今'?'#fff':item.isMissedSignIn?'#C5C5C5':'#F1AA29'}">
								<text>{{item.time}}</text>
								<image
									:src="item.isMissedSignIn?'../../static/image/index/checkIn-img/icon1.png':item.checkInShow?'../../static/image/index/checkIn-img/icon3.png':'../../static/image/index/checkIn-img/icon2.png'"
									mode=""></image>
							</view>
						</view>
					</view>
					<button type="primary" :disabled="disabled" class="check-btn" :class="{'bg-hover-color':disabled}"
						@click="checkbtn">{{disabled?'已签到':'签到'}}
					</button>
				</view>
			</view>
			<view class="advertisement">
				<text class="title">守护您的健康</text>
				<view class="dis a-c j-s textBlock">
					<view class="dis a-c j-s">
						<image src="../../static/image/index/checkIn-img/frame1.png" mode=""></image>
						<view>成年人生活压力大， 健康风险不断攀升</view>
					</view>
					<view class="dis a-c j-s">
						<image src="../../static/image/index/checkIn-img/frame2.png" mode=""></image>
						<view>不幸患大病将面临巨 额治疗费与收入损失</view>
					</view>
				</view>
				<view class="insuranceText dis f-c">
					<text class="description">配置重疾险，确诊配一大笔钱，治病养病都不愁</text>
					<text class="insuranceText-title">健康福 ·重疾险（保1年）</text>
					<image class="tag" src="../../static/image/index/checkIn-img/frame3.png" mode=""></image>
					<view class="content-block dis f-c">
						<view class="dis a-c j-s">
							<image src="../../static/image/index/checkIn-img/frame4.png" mode=""></image>
							<view class="dis f-c">
								<text>最高可赔</text>
								<text>50万</text>
							</view>
							<view class="dis f-c">
								<text>疾病保障</text>
								<text>180种</text>
							</view>
							<view class="dis f-c">
								<text>赔付方式</text>
								<text>确诊赔付</text>
							</view>
						</view>
						<view class="dis a-c j-s  mt-2 mb-1">
							<view class="dis a-end">
								<text>27.0</text>
								<text>元起</text>
							</view>
							<view class="btn dis a-c j-c">
								去看看
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				growthValue: "25",
				checkINList: [],
				getdatevalue: "",
				disabled: false,
			}
		},
		onShow() {},
		async onLoad() {
			const currentWeekDays = await this.getCurrentWeekDays();
			this.checkINList = currentWeekDays;
			const today = new Date();
			this.getdatevalue = today.getDate();
		},
		methods: {
			checkbtn() {
				this.checkINList.map(val => {
					if (val.time == '今') {
						val.checkInShow = true;
						this.disabled = true;
						uni.showToast({
							icon: 'none',
							title: "已签到"
						})
					}
					return val;
				})

			},
			/**
			 * @param  {boolean} checkInShow  是否签到
			 * @param  {boolean} isMissedSignIn  是否漏签
			 * @param  {string} weekDay  日期代名词
			 */
			getCurrentWeekDays() {
				const today = new Date();
				const checkINList = [{
						weekDay: "一",
						checkInShow: false,
						isMissedSignIn: false,
					},
					{
						weekDay: "二",
						checkInShow: false,
						isMissedSignIn: false,

					},
					{
						weekDay: "三",
						checkInShow: false,
						isMissedSignIn: false,
					},
					{
						weekDay: "四",
						checkInShow: false,
						isMissedSignIn: false,
					},
					{
						weekDay: "五",
						checkInShow: false,
						isMissedSignIn: false,
					},
					{
						weekDay: "六",
						checkInShow: false,
						isMissedSignIn: false,
					},
					{
						weekDay: "日",
						checkInShow: false,
						isMissedSignIn: false,
					},
				];

				// 获取今天是星期几 (0-6) 其中 0 代表星期日，6 代表星期六
				const dayOfWeek = today.getDay();

				// 计算今天是本周第几天（将 Sunday 从 0 转为 7，便于计算）
				const startOfWeek = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;

				// 获取本周的七天
				for (let i = 0; i < 7; i++) {
					const currentDate = new Date(today);
					currentDate.setDate(today.getDate() + startOfWeek + i);

					// 检查当前日期是否是今天
					if (currentDate.toDateString() === today.toDateString()) {
						checkINList[i].time = "今"; // 将今天的 time 替换为 "今天"
					} else {
						checkINList[i].time = currentDate.getDate(); // 其他日期保持原有
					}
				}

				return checkINList;
			},
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		background-image: url('/static/image/index/checkIn-img/back.png');
		background-size: 100% 100%;
		padding: 110px 14px 0;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 50px 16px 14px;
		height: auto;
		background: transparent;

		text {
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}
	}

	.content {
		.growthValue {
			text:first-child {
				color: #63300D;
				font-size: 72rpx;
				font-weight: bold;
			}

			text:last-child {
				color: #553B22;
				font-size: 28rpx;
				margin-left: 12rpx;
			}
		}

		.checkIn {
			background: linear-gradient(180deg, #FFFBF7 0%, #FEFEFE 100%);
			border-radius: 6px;

			.header {
				height: 72rpx;
				background: #FFF6DD;
				box-shadow: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.5);
				border-radius: 6px 6px 0px 0px;
				position: relative;
				color: #C68948;
				font-size: 14px;
				padding: 16rpx 24rpx;
				font-weight: bold;

				image {
					width: 220rpx;
					height: 220rpx;
					position: absolute;
					bottom: 0;
					right: 25rpx;

				}
			}

			.mockData {
				padding: 20rpx 24rpx;

				.labelHeader {
					text:first-child {
						color: #553B22;
						font-size: 32rpx;
						font-weight: bold;

					}

					text:last-child {
						color: #553B22;
						font-size: 22rpx;
					}
				}

				.dateName {
					color: #B3B4B5;
					font-size: 32rpx;
				}

				.checkInDate {
					width: 77rpx;
					border-radius: 10px;
					margin-top: 18rpx;
					position: relative;
					padding: 20rpx 20rpx 60rpx;
					font-size: 32rpx;
					font-weight: bold;

					image {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						left: 0;
						right: 0;
						bottom: -30rpx;
						margin: auto;
					}
				}

				.check-btn {
					width: 412rpx;
					height: 76rpx;
					background: linear-gradient(90deg, #FFDBAF 0%, #F9C88E 100%);
					border-radius: 56rpx;
					margin: 68rpx auto 0;
					color: #553B22;
					font-size: 32rpx;
					font-weight: bold;
				}

				.bg-hover-color {
					opacity: 0.7;
				}
			}
		}

		.advertisement {
			background: linear-gradient(180deg, #FFF9E8 0%, #FEFEFE 100%);
			border-radius: 6px;
			padding: 25rpx;
			margin-top: 32rpx;

			.title {
				color: #553B22;
				font-size: 32rpx;
				font-weight: bold;
			}

			.textBlock {

				>view {
					width: 50%;
					padding: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;

					}

					view {
						width: 75%;
						color: #A17352;
						font-size: 20rpx;
					}
				}
			}

			.insuranceText {
				background: linear-gradient(150deg, #FFE3C0 0%, #FFEFC4 100%);
				border-radius: 10px;
				padding: 24rpx 24rpx 0;

				.description {
					color: #CE7711;
					font-size: 22rpx;
				}

				.insuranceText-title {
					color: #553B22;
					font-size: 28rpx;
					font-weight: bold;
				}

				.tag {
					width: 340rpx;
					height: 47rpx;
					margin-left: -30rpx;
				}

				.content-block {
					padding-top: 10px;


					>view:first-child {
						padding-right: 20px;

						image {
							width: 100rpx;
							height: 100rpx;
						}

						view {
							text:first-child {
								color: #A47210;
								font-size: 20rpx;
							}

							text:last-child {
								color: #A47210;
								font-size: 24rpx;
								font-weight: bold;
							}
						}
					}

					>view:last-child {
						view:first-child {
							text:first-child {
								color: #FB731B;
								font-size: 44rpx;
								font-weight: bold;
								line-height: 1;
							}

							text:last-child {
								color: #FB731B;
								font-size: 20rpx;
								margin-left: 6rpx;
							}
						}
					}
				}

				.btn {
					width: 254rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #FD794E 0%, #FF5F05 100%);
					box-shadow: inset 2rpx 2rpx 8rpx 0rpx #FCFCFC;
					border-radius: 78rpx;
					border: 1px solid;
					border-image: linear-gradient(180deg, rgba(251, 114, 41, 1), rgba(250, 97, 15, 1));
					color: #fff;
					font-weight: bold;
				}
			}
		}
	}
</style>