kailin_mp/pages/score/clockin.vue

<template>
	<view>
		<view class="main_view">
			<view class="status_bar" :style="status_bar_style"><!-- 这里是状态栏 --></view>
			<view class="info_box">
				<view class="left_box">
					<view class="score_info">
						<view class="score_title">当前积分</view>
						<view class="score_current">{{ scoreInfo.score }}</view>
					</view>
					<view class="wait_info">
						<view class="wait_title">待入账积分</view>
						<view class="wait_score">{{ scoreInfo.wait_score ? scoreInfo.wait_score : 0 }}</view>
					</view>
				</view>
				<view class="right_box">
					<navigator url="/pages/score/lottery" class="lottery_enter">
						<image class="lottery_img" src="https://mall.findit.ltd/uploads/images/default/lottery_record.png" mode=""></image>
						<view class="lottery_text">点我抽奖</view>
					</navigator>
				</view>
			</view>
			<view class="clockin_box">
				<view class="box_title">{{ isMark.finish_day ? '已连续签到 ' + isMark.finish_day + ' 天' : '连续签到奖励更丰厚' }}</view>
				<view class="clockin_list">
					<view class="clockin_item" :class="item.is_finish ? 'acitve' : ''" v-for="(item, index) in clockinList" :key="index">
						<view class="what_day">第{{ item.what_day }}天</view>
						<view class="score_one" v-if="index == 0 || index == 1 || index == 3 || index == 5">
							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
						</view>
						<view class="score_tow" v-if="index == 2 || index == 4">
							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
						</view>
						<view class="score_the" v-if="index == 6">
							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
						</view>
						<view class="give_score">+{{ item.reward }}</view>
					</view>
				</view>
				<button class="clockin_btn" :class="isMark.is_clockin ? 'active' : ''" @click="toClockin()">{{ isMark.is_clockin ? '已签到' : '签到' }}</button>
				<navigator url="/pages/score/record" class="score_record">积分记录 &gt;</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status_bar_style: {},
			clockinList: [],
			isMark: {
				finish_day: 0,
				is_clockin: 0
			},
			scoreInfo: {
				score: 0,
				use_score: 0,
				wait_score: 0
			},
			isReqing: false
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.status_bar_style = { height: menuButtonInfo.height + 'px', 'padding-top': menuButtonInfo.top + 'px' };
		// #endif
		// #ifdef MP-WEIXIN
		//分享按钮
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	onShareAppMessage(obj) {
		return {
			title: '双十一 药优惠 得积分 兑豪礼',
			path: '/pages/index/index'
		};
	},
	onShow() {
		// 请求打卡列表
		this.getClockinList();
		// 登录提示
		if (!this.$checkAccess.onlyCheckAccess()) return;
		// 请求中，不允许刷新
		if (this.isReqing) return;
		// 设置请求中
		this.isReqing = true;
		// 请求列表
		this.$http.request('/api/custom_score/get_info', this.requestParam).then((re) => {
			// 设置非请求中
			this.isReqing = false;
			// 成功结果
			if (re.code == 'success') {
				this.scoreInfo = re.data;
			}
		});
	},
	methods: {
		toClockin() {
			// 如果已经打卡
			if (this.isMark.is_clockin) return;
			// 登录提示
			if (!this.$checkAccess.alterLogin()) return;
			// 请求中，不允许刷新
			if (this.isReqing) return;
			// 设置请求中
			this.isReqing = true;
			// 请求列表
			this.$http.request('api/score_clockin/finish', {}, 'post').then((re) => {
				// 设置非请求中
				this.isReqing = false;
				// 成功结果
				if (re.code == 'success') {
					// 赋值
					this.isMark = re.data;
					// 积分更新
					this.scoreInfo.score = re.data.reward + this.scoreInfo.score;
					// 更新打卡
					for (let i in this.clockinList) {
						// 如果小于等于连续打卡天数，设置为打卡
						if (this.clockinList[i].what_day <= this.isMark.finish_day) this.clockinList[i].is_finish = 1;
					}
				}
			});
		},
		getClockinList() {
			// 请求列表
			this.$http.request('api/score_clockin/get_list', this.requestParam).then((re) => {
				// 成功结果
				if (re.code == 'success') {
					// 赋值
					this.clockinList = re.data.list;
					// 赋值
					this.isMark = re.data.is_mark;
				}
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #ffffff;
}
.main_view {
	display: block;
	height: 1000rpx;
	background: linear-gradient(to bottom, #fc335f 0%, #fb7224 50%, #ffffff 100%);
	.status_bar {
		width: 100%;
		height: 64rpx;
		display: block;
		padding-top: var(--status-bar-height);
	}
	.info_box {
		display: block;
		overflow: hidden;
		.left_box {
			float: left;
			width: 450rpx;
			.score_info {
				color: #ffffff;
				overflow: hidden;
				padding: 0rpx 35rpx;
				.score_title {
					width: 240rpx;
					height: 60rpx;
					display: block;
					font-size: 26rpx;
					line-height: 60rpx;
				}
				.score_current {
					width: 240rpx;
					height: 80rpx;
					display: block;
					font-size: 66rpx;
					line-height: 80rpx;
				}
			}
			.wait_info {
				color: #ffffff;
				display: block;
				overflow: hidden;
				padding: 0rpx 35rpx;
				margin-top: 20rpx;
				.wait_title {
					width: 240rpx;
					height: 40rpx;
					display: block;
					font-size: 24rpx;
					line-height: 40rpx;
				}
				.wait_score {
					width: 240rpx;
					height: 60rpx;
					display: block;
					font-size: 36rpx;
					line-height: 60rpx;
				}
			}
		}
		.right_box {
			float: right;
			overflow: hidden;
			margin-top: 60rpx;
			margin-right: 35rpx;
			.lottery_enter {
				display: block;
				overflow: hidden;
				text-align: center;
				.lottery_img {
					width: 150rpx;
					height: 150rpx;
					display: block;
					margin: 0 auto;
				}
				.lottery_text {
					color: #ffffff;
					height: 60rpx;
					font-size: 28rpx;
					line-height: 60rpx;
				}
			}
		}
	}
	.clockin_box {
		z-index: 9;
		display: block;
		width: 700rpx;
		height: 800rpx;
		margin: 0rpx auto;
		position: relative;
		border-radius: 40rpx;
		background-color: #ffffff;
		box-shadow: 5rpx 5rpx 2rpx 0rpx #dddddd;
		.box_title {
			height: 80rpx;
			color: #999999;
			text-align: center;
			line-height: 80rpx;
		}
		.clockin_list {
			display: block;
			overflow: hidden;
			.clockin_item {
				float: left;
				width: 145rpx;
				height: 240rpx;
				text-align: center;
				margin-left: 25rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				background-color: #f8f8f8;
				.what_day {
					display: block;
					height: 60rpx;
					font-size: 24rpx;
					line-height: 60rpx;
				}
				.score_one {
					display: block;
					height: 80rpx;
					margin: 10rpx auto;
					position: relative;
					.score_icon {
						display: block;
						width: 80rpx;
						height: 80rpx;
						margin: 0rpx auto;
					}
				}
				.score_tow {
					display: block;
					height: 80rpx;
					margin: 10rpx auto;
					position: relative;
					.score_icon {
						display: block;
						width: 80rpx;
						height: 80rpx;
						margin: 0rpx auto;
					}
					.score_icon:nth-child(1) {
						top: 0rpx;
						left: 10rpx;
						width: 80rpx;
						height: 80rpx;
						position: absolute;
					}
					.score_icon:nth-child(2) {
						top: 0rpx;
						left: 55rpx;
						width: 80rpx;
						height: 80rpx;
						position: absolute;
					}
				}
				.score_the {
					width: 200rpx;
					display: block;
					height: 100rpx;
					margin: 10rpx auto;
					position: relative;
					.score_icon {
						display: block;
						width: 80rpx;
						height: 80rpx;
						margin: 0rpx auto;
					}
					.score_icon:nth-child(1) {
						top: 15rpx;
						left: 20rpx;
						width: 80rpx;
						height: 80rpx;
						position: absolute;
					}
					.score_icon:nth-child(2) {
						top: 15rpx;
						left: 95rpx;
						width: 80rpx;
						height: 80rpx;
						position: absolute;
					}
					.score_icon:nth-child(3) {
						top: 0rpx;
						left: 60rpx;
						width: 80rpx;
						height: 80rpx;
						position: absolute;
					}
				}
				.give_score {
					display: block;
					height: 60rpx;
					font-size: 24rpx;
					line-height: 60rpx;
				}
			}
			.clockin_item:nth-child(7) {
				width: 315rpx;
			}
			.clockin_item.acitve {
				color: #ffffff;
				background-color: #e03519;
			}
		}
		.clockin_btn {
			width: 660rpx;
			color: #ffffff;
			font-size: 30rpx;
			margin: 0rpx auto;
			padding: 0rpx 0rpx;
			border-radius: 60rpx;
			background-color: #e03519;
			border: 0rpx solid transparent;
		}
		.clockin_btn.active {
			color: #ffffff;
			background-color: #aaaaaa;
		}
		.clockin_btn::after {
			border: 0rpx solid transparent;
		}
		.score_record {
			height: 80rpx;
			display: block;
			color: #999999;
			font-size: 24rpx;
			margin-top: 30rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}
}
</style>