xihaigou/pages/index/sign.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" :class="{ current: is_have }" @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, my_award, get_award } 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,
			is_have: true, //是否可领
			id: ''
		};
	},
	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() {
			my_award().then(data => {
				console.log(data);
				this.sum_integral = data.data.all_get;
				this.allSign = data.data.all_out;
				if (data.data.todayAward != null) {
					this.day_integral = data.data.todayAward.award; //今天获取的金额
					this.id = data.data.todayAward.id;
					this.is_have = false;
				}
				console.log(this.is_have);
			});
		},
		// 签到
		integral() {
			if(this.is_have){
				return
			}
			console.log(111);
			get_award({}, this.id)
				.then(e => {
					console.log(e);
					// 改为已签到
					this.signTrue = true;
				})
				.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;
}
.current {
	color: #FFFFFF !important;
	background: #989898 !important;
}
.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>