xpl/pages/index/sign.vue

<template>
	<view class="center">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="content-money">
			<view class="body-title">
				<view class="goback-box" @click="toBack"><image class="goback" src="../../static/icon/fanhui.png" mode=""></image></view>
				<view class="header">每日签到</view>
			</view>
			<view class="content-bg"><image src="../../static/img/sign-bg.png" mode=""></image></view>
			<view class="sign" @click="integral()">
				<image class="sign-bg" src="../../static/img/sign-main.png" mode=""></image>
				<view class="sign-font">{{ signTrue ? '已签到' : '签到' }}</view>
			</view>
			<view class="sign-tip">今日签到可得10购物积分</view>
		</view>
		<view class="nav">
			<view class="nav-item">
				<view class="num">{{ sum_integral }}</view>
				<view class="font">获得金额</view>
			</view>
			<view class="xian"></view>
			<view class="nav-item">
				<view class="num">{{ allSign }}</view>
				<view class="font">签到天数</view>
			</view>
		</view>
		<view class="rili"><calendar class="sign-date-box" :checks="signList" checksClass="" :checkTextShow="true"></calendar></view>
		<!-- <view class="explain">
			<view class="explain-left">
				签到说明
			</view>
			<view class="explain-right">
			</view>
		</view> -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-dox"><image class="popup-logo" src="../../static/img/sign-popup.png"></image></view>
				<view class="popup-title">
					获得￥
					<text>10</text>
					现金
				</view>
				<view class="popup-tip">
					明天签到可得￥
					<text>10</text>
					现金
				</view>
				<view class="popup-btn" @click="close">知道了</view>
			</view>
			<view class="close_icon" @click="close"><image src="../../static/img/Close.png"></image></view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import calendar from '../../components/ss-calendar/ss-calendar.vue';
import { signList, integral, signUser } from '@/api/functionalUnit.js';
export default {
	components: {
		calendar,
		uniPopup
	},
	data() {
		return {
			money: '', //保存当前月份
			year: '', //保存当前年份
			day: '', //保存当前日期
			signList: [], //签到日子列表
			actionDay: 0, //连续签到天数
			allSign: 0, //累计签到
			sum_integral: 0, //累计获得积分
			signTrue: false
		};
	},
	onLoad() {
		this.signUser();
		this.getData();
		this.loadList();
	},
	methods: {
		// 点击返回 我的页面
		toBack() {
			uni.navigateBack({});
		},
		integral() {
			integral({})
				.then(e => {
					this.$refs.popup.open();
					// 改为已签到
					this.signTrue = true;
					this.actionDay++;
					// 保存签到成功
					this.signList.push(this.day);
				})
				.catch(e => {
					this.$refs.popup.open();
					console.log(e);
				});
		},
		close() {
			this.$refs.popup.close();
		},
		// 获取签到列表
		loadList() {
			let obj = this;
			let present = this.day; //保存当前天数用于后续计算
			let actionDay = 0; //用于计算活跃天数
			let arr = []; //保存返回数组；
			signList({
				page: 1,
				limit: 31
			}).then(e => {
				arr = e.data.map((e, ind) => {
					let time = e.add_time.split('-');
					let day = parseInt(time[2].replace(/^0/i, ''));
					let year = time[0];
					let month = +time[1];
					if (obj.year == year && obj.month == month) {
						return day;
					}
				});
				this.signList = arr;
				// 判断今天是否已经签到
				if (arr[0] == this.day) {
					this.signTrue = true;
				}
			});
		}, // 获取当前时间
		getData(current) {
			const date = current ? new Date(current) : new Date();
			this.year = date.getFullYear(); //保存当前年份
			this.month = date.getMonth() + 1; //保存当前月份
			this.day = date.getDate(); //保存当前日期
		},
		//获取签到用户信息
		signUser() {
			signUser({ all: 1 }).then(({ data }) => {
				this.actionDay = data.sign_num; //连续签到天数
				this.allSign = data.sum_sgin_day; //累计签到天数
				this.sum_integral = data.sum_integral; //累计总积分
			});
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	padding-bottom: 20rpx;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.content-money {
	padding-bottom: 30rpx;
	position: relative;
	height: 526rpx;
	.content-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 526rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.body-title {
		height: 80rpx;
		text-align: center;
		font-size: 35rpx;
		position: relative;
		.header {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fffeff;
			height: 80rpx;
			font-size: 36rpx;
			font-weight: 700;
			z-index: 9;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.goback-box {
			position: absolute;
			left: 18rpx;
			top: 0;
			height: 80rpx;
			display: flex;
			align-items: center;
		}

		.goback {
			z-index: 100;
			width: 34rpx;
			height: 34rpx;
		}
	}
	.sign {
		width: 200rpx;
		height: 200rpx;
		margin: 40rpx auto 0;
		text-align: center;
		position: relative;
		z-index: 10;
		.sign-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}
		.sign-font {
			position: relative;
			z-index: 11;
			line-height: 200rpx;
			font-size: 46rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
	.sign-tip {
		margin: 14rpx auto 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		position: relative;
		z-index: 10;
		text-align: center;
	}
}
.nav {
	position: relative;
	z-index: 10;
	width: 710rpx;
	height: 192rpx;
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 10rpx;
	margin: -86rpx auto 0;
	.nav-item {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: 1;
		.num {
			font-size: 56rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;
		}
		.font {
			margin-top: 28rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			opacity: 0.6;
		}
	}
	.xian {
		width: 2rpx;
		height: 152rpx;
		background-color: #efefef;
	}
}

.explain {
	margin: 20rpx auto 0;
	padding: 24rpx 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 694rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	.explain-left {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.explain-right {
		position: relative;
		bottom: 14rpx;
		right: 28rpx;
	}
	.explain-right:after,
	.explain-right:before {
		border: 12rpx solid transparent;
		border-left: 12rpx solid #fff;
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		right: -20px;
		content: ' ';
	}

	.explain-right:before {
		border-left-color: #333333;
		right: -21px;
	}
}
.popup {
	width: 560rpx;
	padding-bottom: 45rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
	text-align: center;
	line-height: 1;
	.popup-dox {
		position: relative;
		.popup-logo {
			margin: -160rpx auto 0;
			width: 400rpx;
			height: 200rpx;
		}
	}
	.popup-title {
		margin-top: 85rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #2a2a2a;
		text {
			font-size: 56rpx;
			color: #e83f30;
		}
	}
	.popup-tip {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8c8c8c;
		text {
			color: #e83f30;
		}
	}
	.popup-btn {
		margin: 58rpx auto 0;
		width: 270rpx;
		height: 66rpx;
		background: #f0c838;
		border-radius: 34rpx;
		text-align: center;
		line-height: 66rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
	}
}
.close_icon {
	width: 60rpx;
	height: 60rpx;
	margin: 88rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}
.rili {
	margin-top: 20rpx;
	padding: 0 20rpx;
}
</style>