jianbing/pages/signin/signin.vue

<template>
	<view>
		<view class="signin">
			<view class="bold-700 title">每日签到</view>
			<view class="day">
				<text class="lg">已经连续签到</text>
				<text class="">{{ signDays }}天</text>
			</view>
			<view class="row-between u-m-t-32 u-m-l-24 u-m-r-24">
				<view 
					:class="[
						'sigin-day', 
						'column-center', 
						{
							'current': (currentDay == item.days && canSign == 0), 
							'normal':  ((currentDay == item.days && item.status == 1) || (currentDay != item.days && item.status == 1)), 
							'expire':  ((currentDay == item.days && item.status == 0) || (currentDay != item.days && item.status == 0))
						}
					]"
					v-for="(item, index) in signList" :key="index"
				>
					<view class="date mt10">第{{ item.days }}天</view>
					<view class="mt10">
						<!-- <u-image :src="cloudPath + 'img/icon_signin_gray.png'" width="30" height="30"></u-image> -->
						<u-image :src="signinCurrent(item)" width="30" height="30"></u-image>
					</view>
					<view class="points mt10">x{{ item.integral }}</view>
				</view>
			</view>
			<view class="u-m-t-26 signin-btn" @tap="userSignFun">
				{{ canSign == 1 ? '已签到' : '签到' }}
			</view>
		</view>
		
		<view class="bg-white ad row-between u-padding-left-20 u-padding-right-20">
			<view class="row">
				<view>
					<u-image :src="cloudPath + 'img/red-packet.png'" width="90" height="90"></u-image>
				</view>
				<view class="ml20">
					<view class="bold-600 xs">看广告获取积分</view>
					<view class="text-AE xxs u-m-t-12">每日观看5分钟最高可领取376金币</view>
				</view>
			</view>
			
			<view>
				<u-button  @click="mobileLogin" hover-class="none" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, width: '120rpx', height: '60rpx', fontSize: '28rpx'}" :plain="true" :hair-line="false" shape="circle">看广告</u-button>
			</view>
		</view>
	</view>

</template>

<script>
	import { getSignList, userSign } from "@/api/user"
	import { trottle } from '@/utils/tools.js'
	export default {
		data() {
			return {
				// 积分
				integral: 0,
				avatar: "",
				signList: [],
				showPop: false,
				canSign: 0,
				addIntegral: 0,
				addGrowth: 0,
				signDays: 0,
				makeInegral: [],
				currentDay: 0
			}
		},

		onLoad() {
			this.userSignFun = trottle(this.userSignFun, 1000, this)
		},

		onShow() {
			this.getSignListFun();
		},

		methods: {
			// 获取签到数据
			getSignListFun() {
				getSignList().then(res => {
					if (res.code == 1) {
						let {
							sign_list
						} = res.data;
						console.log("sign_list>>>", sign_list.length);
						
						this.signList = sign_list
						this.integral = res.data.user.user_integral
						this.canSign = res.data.user.today_sign // 是否可以签到 1:已签到 0:未签到
						this.signDays = res.data.user.days // 连续签到天数
						this.makeInegral = res.data.make_inegral
						
						// 如果签到天数为0的话,也指向第一天的高亮样式
						this.currentDay = this.signDays + 1
						if (this.signDays == 0) {
							this.currentDay = 1
						} else if (this.signDays > sign_list.length) {
							this.currentDay = sign_list.length
						}
					}
				});
			},


			// 用户开始签到
			userSignFun() {
				if (this.canSign == 1) {
					return;
				}

				userSign().then(res => {
					if (res.code == 1) {
						let {
							days,
							growth,
							integral
						} = res.data;

						this.addIntegral = integral;
						this.signDays = days

						this.getSignListFun();
					}
				});
			}
		},

		computed: {
			// 处理签到图片显示
			signinCurrent() {
				return (item) => {
					// 如果签到天数为0的话,也指向第一天的高亮图片
					if (this.currentDay == item.days && this.canSign == 0) {
						// 当天日期
						return `${this.cloudPath}img/icon_signin_white.png`
					} else if (item.status == 0) {
						// 未签到
						return `${this.cloudPath}img/icon_signin_gray.png`
					} else if (item.status == 1) {
						// 已签到
						return `${this.cloudPath}img/icon_signin_blue.png`
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.signin {
		height: 570rpx;
		margin: 24rpx 20rpx 0;
		background-image: url(https://jianbing-media.stnav.com/frontend/img/signin-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		
		.title {
			font-size: 40rpx;
			padding-top: 70rpx;
		}
		
		.day {
			margin-top: 72rpx;
			margin-left: 24rpx;
			
			& > text:first-child {
				color: #141414;
			}
			
			& > text:last-child {
				color: #099DF1;
				font-size: 40rpx;
				margin-left: 18rpx;
			}
		}
		
		.expire {
			background-color: #eee;
			color: #AFAFAF;
		}
		
		.normal {
			background-color: #F5F5F4;
			color: #141414;
		}
		
		.current {
			background: linear-gradient( 137deg, #099DF1 0%, #7BC7F2 100%);
			color: #141414;
		}

		.sigin-day {
			width: 80rpx;
			height: 150rpx;
			border-radius: 40rpx;
			padding: 8rpx;
			
			.date,
			.points {
				white-space: nowrap;
				font-size: 20rpx;
			}
		}
		
		.signin-btn {
			background-color: #099DF1;
			border-radius: 48rpx;
			color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 0 120rpx;
		}
	}
	
	.ad {
		height: 140rpx;
		margin: 36rpx 20rpx;
		border-radius: 18rpx;
		
		.text-AE {
			color: #AEAEAE;
		}
	}
</style>