app_ancientSayings/pages/signInBookCurrency/index.vue

<template>
	<view class="signInBookCurrency_content">
		<u-navbar bgColor="transparent" leftIconColor="#fff" @leftClick="navbarLeftClick" />
		<view class="signInBookCurrency_header_bag"></view>
		<view class="signIn_list_box">
			<view class="list_box_body">
				<view class="list_box_body_sign_tips">
					<view class="_sign_tips_header">
						<text>已连续签到</text>
						<text class="_sign_tips_header_num">{{totalNum}}</text>
						<text>天 </text>
					</view>
				</view>
				<view class="_body_sign_tips_box">
					<view :class="['_body_sign_tips_box_item',m.status == 1 ? 'active':'']" v-for="m in signInList"
						:key="m">
						<view v-if="m.status == 1" class="_box_item_sign_in_success">
							<image class="is_image" src="/static/images/sign_in_success.png"></image>
						</view>
						<view v-else class="_box_item_coin">
							<image class="is_image" src="/static/images/_coin.png" />
						</view>
						<view class="_box_item_coin_num">
							{{m.egold}}
						</view>
					</view>
				</view>
			</view>
			<view class="sign_tips_button" @tap="handelSignIn">
				<text v-if="signInFlag">已签到，点击前往看书</text>
				<text v-else>点击签到领取福利</text>
			</view>
		</view>
		<u-transition :show="transitionShow" mode="fade" duration="1000">
			<view class="transition_sign_box">
				<view class="transition_sign_box_calendar">
					<image class="is_image" src="../../static/images/sign_in_calendar.png"></image>
				</view>
				<view class="transition_sign_box_text">
					<!-- <text>领取</text>
					<text>10</text>
					<text>书币</text> -->
					{{signInMsg}}
				</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
	// const transitionCustomStyle =

	export default {
		data() {
			return {
				signInFlag: false,
				transitionShow: false,
				signInList: [],
				totalNum: 0,
				signInMsg: ''
			}
		},
		onShow() {
			this.getSignIn()
		},
		methods: {
			handelSignIn() {
				const signInFlag = this.signInFlag;
				if (signInFlag) {
					uni.navigateTo({
						url: `pages/bookCity/bookCity/index`,
					})
				} else {
					uni.showLoading({
						title: '加载中...'
					});
					const parameter = {
						custom: {
							token: true
						}
					}
					uni.$u.http.post('/startSignin', {}, parameter).then((res) => {
						uni.hideLoading();
						if (res.status == 1) {
							const {
								list,
								totalNum,
								daycheck
							} = res.data;
							this.signInMsg = res.msg;
							this.transitionShow = true;
							setTimeout(() => {
								this.transitionShow = false
							}, 2000);
							this.getSignIn();
						}
					}).catch((err) => {
						uni.hideLoading();
						console.log(err, "========")
					})
				}
			},
			navbarLeftClick() {
				uni.navigateBack();
				
			},
			getSignIn() {
				uni.showLoading({
					title: '加载中...'
				});
				const parameter = {
					custom: {
						token: true
					}
				}
				uni.$u.http.post('/getSigInfo', {}, parameter).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						const {
							list,
							totalNum,
							daycheck
						} = res.data;
						this.signInList = list;
						this.totalNum = totalNum;
						this.signInFlag = daycheck == 1 ? true : false;
					}
				}).catch((err) => {
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}

	.is_image {
		width: 100%;
		height: 100%;
	}

	.signInBookCurrency_content {
		width: 100%;

		.signInBookCurrency_header_bag {
			position: fixed;
			width: 100%;
			height: 536rpx;
			background: url("/static/images/signInBookCurrency_header_bag.png") no-repeat;
			background-size: 100% 100%;
		}

		.signIn_list_box {
			position: relative;
			top: 460rpx;
			left: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 32rpx;
			width: 100%;
			box-sizing: border-box;

			.list_box_body {
				width: 100%;
				background: #fff;
				box-sizing: border-box;
				padding: 40rpx 0 40rpx 28rpx;
				border-radius: 24rpx;

				._sign_tips_header {
					display: flex;
					font-size: 34rpx;
					color: #222222;
					line-height: 1;

					._sign_tips_header_num {
						margin: 0 8rpx;
						color: #FE9800;
					}
				}

				._body_sign_tips_box {
					display: flex;
					justify-content: center;
					width: 100%;
					flex-wrap: wrap;

					._body_sign_tips_box_item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 134rpx;
						height: 178rpx;
						background-color: #FFB423;
						border-radius: 16rpx;
						margin-right: 30rpx;
						margin-top: 44rpx;

						._box_item_coin {
							width: 72rpx;
							height: 72rpx;
						}

						._box_item_coin_num {
							font-size: 28rpx;
							color: #FFFFFF;
							margin-top: 16rpx;
						}

						._box_item_sign_in_success {
							width: 62rpx;
							height: 42rpx;
						}
					}

					._body_sign_tips_box_item.active {
						background-color: #FFCD6C;
					}
				}
			}

			.sign_tips_button {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 604rpx;
				height: 102rpx;
				line-height: 1;
				margin-top: 40rpx;
				background: linear-gradient(to left, #FE5139, #F19138);
				font-size: 38rpx;
				color: #ffffff;
				border-radius: 51rpx;
			}
		}

		.transition_sign_box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: fixed;
			top: 50%;
			left: 50%;
			width: 372rpx;
			height: 282rpx;
			background-color: rgba(20, 20, 20, 0.6);
			transform: translate(-50%, -60%);
			border-radius: 18rpx;

			.transition_sign_box_calendar {
				width: 200rpx;
				height: 200rpx;
			}

			.transition_sign_box_text {
				font-size: 34rpx;
				line-height: 1;
				color: #FFFFFF;
			}
		}
	}
</style>