uniapp-ZHSQ/packages/user/pointsSign/index.vue

<template>
	<view class="container" :style="{paddingTop: top + 'px'}">
		<u-navbar title="签到积分" leftIconColor="#FFFFFF" titleStyle="color: #FFFFFF" bgColor="transparent" leftIconSize="20px"
			:autoBack="true" />

		<view class="header">
			<view class="header_left">
				<view class="left_detail" @click="headerPointsClick">
					<image class="gold_icon"
						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/401463152_31.png" mode="" />
					<text class="points">{{pointsNum}}</text>
					<u-icon color="#FFFFFF" name="arrow-right" />
				</view>
				<view class="tomorrow_sign">明日签到+1</view>
			</view>
			<view class="header_right">
				<image class="rigth_icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/QIANDAO.png"
					mode="" />
			</view>
		</view>
		<view class="main">
			<image class="center_icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_311.png"
				mode="" />
			<view class="center_header">
				<view class="signed">本期已签到<text>{{checkedData}}</text>天</view>
				<view class="center_time">{{starteTime}}~{{endTime}}</view>
			</view>
			<view class="points_detail">
				<view class="day_detail" v-for="(item, index) in pointsList" :key="index" @click="headerSignClick">
					<view :class="['item', item.today && 'red_border']">
						<view v-if="item.isSign" :class="['points_time', !item.isSign && 'color_red']">{{item.time}}</view>
						<view v-if="!item.isSign" :class="['points_time', !item.isSign && 'color_red']">+{{item.points}}</view>
						<image class="points_icon" v-if="item.isSign"
							src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/Group_518.png" mode="" />
						<image class="points_icon" wx:else
							src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/401463152_31.png" mode="" />
					</view>
					<view class="day_time">{{index +1}}天</view>
				</view>
			</view>
		</view>
		<footer />
	</view>
</template>

<script>
	import {
		request,
		menuButtonInfo,
		NavgateTo
	} from '../../../utils';
	import {
		apiArr
	} from '../../../api/user';
	export default {
		data() {
			return {
				top: 0,
				starteTime: '',
				endTime: '',
				points: [{
						time: '01.29',
						state: true,
					},
					{
						time: '+2',
						state: false,
					},
					{
						time: '+3',
						state: false,
					},
					{
						time: '+4',
						state: false,
					},
					{
						time: '+5',
						state: false,
					},
					{
						time: '+6',
						state: false,
					},
					{
						time: '+7',
						state: false,
					},
					{
						time: '+1',
						state: false,
					},
					{
						time: '+2',
						state: false,
					},
					{
						time: '+3',
						state: false,
					},
					{
						time: '+4',
						state: false,
					},
					{
						time: '+5',
						state: false,
					},
					{
						time: '+6',
						state: false,
					},
					{
						time: '+7',
						state: false,
					},
					{
						time: '+1',
						state: false,
					},
					{
						time: '+2',
						state: false,
					},
					{
						time: '+3',
						state: false,
					},
					{
						time: '+4',
						state: false,
					},
					{
						time: '+5',
						state: false,
					},
					{
						time: '+6',
						state: false,
					},
					{
						time: '+7',
						state: false,
					},
					{
						time: '+1',
						state: false,
					},
					{
						time: '+2',
						state: false,
					},
					{
						time: '+3',
						state: false,
					},
					{
						time: '+4',
						state: false,
					},
					{
						time: '+5',
						state: false,
					},
					{
						time: '+6',
						state: false,
					},
					{
						time: '+7',
						state: false,
					},
					{
						time: '+1',
						state: false,
					},
					{
						time: '+2',
						state: false,
					},
				],
				pointsList: [],
				checkedData: 0,
				pointsNum: 0,
			}
		},
		methods: {
			async getIntegral() {
				const res = await request(apiArr.signIntegral, 'POST', {});
				this.pointsNum = res.integral
			},

			async init() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				this.getIntegral();
				const res = await request(apiArr.signCycle, 'POST', {});
				const {
					start_time,
					end_time,
					day_num
				} = res;
				const starteTime = start_time.substring(0, 10);
				const endTime = end_time.substring(0, 10);


				this.starteTime = starteTime;
				this.endTime = endTime;
				await this.getGridList(starteTime, day_num);
				await this.getSignList(starteTime, endTime, day_num);

				uni.hideLoading();
			},

			getGridList(startTime, dayNum) {
				// 获取当前日期
				const today = new Date();

				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
				const day = String(today.getDate()).padStart(2, '0');
				const todayString = `${year}-${month}-${day}`;


				// 将日期字符串转换为 Date 对象
				const startDate = new Date(startTime);

				const dayList = Array.from({
					length: dayNum
				}, (_, index) => {
					// 创建一个新的 Date 对象，表示当前的天数
					const currentDate = new Date(startDate);
					currentDate.setDate(startDate.getDate() + index);

					const currentDateString = currentDate.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD


					// 检查当前日期是否是今天
					const isToday = currentDateString === todayString;

					// 格式化当前日期为 MM.DD
					const formattedDate = (`0${currentDate.getMonth() + 1}`).slice(-2) + '.' + (`0${currentDate.getDate()}`)
						.slice(-2);
					return {
						time: formattedDate,
						date: currentDateString,
						points: 1,
						today: isToday,
					}
				});
				this.pointsList = dayList;
			},

			async getSignList(startTime, endTime, dayNum) {
				const res = await request(apiArr.signList, 'POST', {
					page_num: 1,
					page_size: dayNum,
					sign_date: [startTime, endTime]
				});
				const newRes = res.rows.map((item) => {
					return {
						...item,
						day: item.day.substring(0, 10),
					}
				});
				const updatedList = this.pointsList.map(item => {
					// 使用 some 检查 已签到列表 中是否有匹配的日期
					const isSign = newRes.some(dayObj => dayObj.day === item.date);

					// 返回一个新的对象，包含原始字段和已签到的 isSign 字段
					return {
						...item,
						isSign: isSign
					};
				});

				this.checkedData = res.total;
				this.pointsList = updatedList;
			},


			headerPointsClick() {
				NavgateTo('/packages/user/points/index')
			},


		},
		onLoad() {
			const meun = menuButtonInfo();
			this.top = meun.height + meun.top;
			this.init();
		}
	}
</script>

<style>
	@import url("./index.css");
</style>