paopaoShop/pages/index/sign1.vue

<template>
	<view center>
		<view class="title">天天领现金</view>
		<view class="main after" v-if="signTrue">
			<image class="main-bg" src="../../static/img/money-ok.png" mode=""></image>
			<view class="num">
				{{day_integral}}
			</view>
		</view>
		<view class="main before" v-if="!signTrue">
			<image class="main-bg" src="../../static/img/money-bg.png" mode=""></image>
			<view class="btn" @click="integral()">立即领取</view>
		</view>
		<view class="info-box flex">
			<view class="info-item">
				<view class="info-num">{{ sum_integral }}</view>
				<view class="info-font">获得金额</view>
			</view>
			<view class="info-item">
				<view class="info-num">{{ allSign }}</view>
				<view class="info-font">领取天数</view>
			</view>
		</view>
	</view>
</template>

<script>
import calendar from '../../components/ss-calendar/ss-calendar.vue';
import { signList, integral, signUser } from '@/api/functionalUnit.js';
export default {
	components: {
		calendar
	},
	data() {
		return {
			money: '', //保存当前月份
			year: '', //保存当前年份
			day: '', //保存当前日期
			signList: [], //签到日子列表
			actionDay: 0, //连续签到天数
			allSign: 0, //累计签到
			sum_integral: 0, //累计获得积分
			day_integral: '', //今天签到的钱
			signTrue: false
		};
	},
	onLoad() {
		this.signUser();
		this.getData();
	},
	methods: {
		// 获取当前时间
		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; //累计总积分
			});
		},
		// 签到
		integral() {
			console.log(111);
			integral({})
				.then(e => {
					console.log(e);
					this.day_integral = e.data.integral, //今天获取的金额
						// 改为已签到
					this.signTrue = true;
					this.actionDay++;
					// 保存签到成功
					this.signList.push(this.day);
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
page,
.center {
	height: auto;
	min-height: 100%;
	background: #ffdfd4;
}
.title {
	padding-top: 66rpx;
	text-align: center;
	font-size: 94rpx;
	font-family: SourceHanSansCN;
	font-weight: bold;
	color: #c85138;
}
.after {
	padding-top: 230rpx;
}
.before {
	padding-top: 590rpx;
}
.main {
	width: 750rpx;
	height: 926rpx;
	position: relative;
	.main-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 926rpx;
	}
	.num {
		line-height: 1;
		text-align: center;
		font-size: 122rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #EB2749;
		opacity: 0.9;
	}
	.btn {
		position: relative;
		margin: 0 auto;
		z-index: 10;
		width: 420rpx;
		height: 76rpx;
		background: linear-gradient(180deg, #fce9a8 0%, #fecd75 100%);
		box-shadow: 0px 16rpx 16rpx 0px rgba(159, 20, 63, 0.3), 0px 2rpx 6rpx 0px #fef5d3;
		border-radius: 38rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #cb0908;
		line-height: 76rpx;
		text-align: center;
	}
}
.info-box {
	margin: 24rpx auto 0;
	padding: 22rpx 0;
	width: 640rpx;
	height: 160rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	.info-item {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right: 1px solid #efefef;
		line-height: 1;
		.info-num {
			font-size: 50rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.info-font {
			margin-top: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			opacity: 0.6;
		}
	}
}
</style>