novel-front-app/pages_order/novel/Translation.vue

<template>
	<view class="page-container">
		<view class="task-center">
			<uv-navbar title="任务中心" :autoBack="true" fixed placeholder titleStyle="color: #222; font-weight: 500;"
				:border="false" :bgColor="'#fff9e2'">
				<template #left>
					<BackArrow :size="56" color="#222" @back="goBack" />
				</template>
			</uv-navbar>
			<view class="navbar-placeholder"></view>
			<!-- 账户剩余 -->
			<view class="account-balance">
				<view class="balance-label">账户剩余</view>
				<view class="balance-value"><text class="num">9</text> <text class="unit">张 推荐票</text></view>
			</view>
			<!-- 打卡得奖励 -->
			<view class="checkin-section">
				<view class="section-header">
					<text>打卡得奖励</text>
					<view class="record-btn">打卡记录</view>
				</view>
				<view class="checkin-grid">
					<view v-for="day in 8" :key="day" class="checkin-day" :class="{ active: day <= checkedDays }">
						<view class="day-label" :class="{ bold: day <= checkedDays }">第{{ day }}天</view>
						<image class="ticket-img"
							src="https://tse1-mm.cn.bing.net/th/id/OIP-C.pca_tFb6ZjyDNdQYgFvi0wHaE7?w=219&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"
							mode="aspectFit" />
						<view class="ticket-num">+1</view>
					</view>
				</view>
				<button class="checkin-btn" :class="{ 'checked-btn': isChecked }" :disabled="isChecked"
					@click="handleCheckin">
					{{ isChecked ? '已签到' : '签到得奖励' }}
				</button>
			</view>
			<!-- 更多任务 -->
			<view class="more-tasks">
				<view class="more-header">更多任务</view>
				<view class="task-list">
					<view class="task-item" v-for="(task, idx) in tasks" :key="idx"
						:class="{ 'no-border': idx === tasks.length - 1 }">
						<view class="task-info">
							<view class="task-title">{{ task.title }}</view>
							<view class="task-desc">推荐票 +1</view>
						</view>
						<button class="get-btn" :class="{ 'received-btn': task.received }" :disabled="task.received"
							@click="handleReceive(idx)">
							{{ task.received ? '已领取' : '去领取' }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uvNavbar from '@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue'
	import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue'
	import BackArrow from './components/BackArrow.vue'
	export default {
		components: {
			uvNavbar,
			uvIcon,
			BackArrow
		},
		data() {
			return {
				checkedDays: 3, // 已签到天数
				tasks: [{
						title: '观看视频广告',
						received: false
					},
					{
						title: '每日首阅三个章节',
						received: false
					},
					{
						title: '每日首条评论',
						received: false
					},
				],
				isChecked: false, // 新增：签到按钮状态
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			handleCheckin() {
				if (this.checkedDays < 8) {
					this.checkedDays++;
					this.isChecked = true;
					uni.showToast({
						title: '签到成功',
						icon: 'success'
					});
				} else {
					this.isChecked = true;
					uni.showToast({
						title: '已全部签到',
						icon: 'none'
					});
				}
			},
			handleReceive(idx) {
				this.tasks[idx].received = true;
				uni.showToast({
					title: '领取成功',
					icon: 'success'
				});
			},
		},
	}
</script>

<style scoped lang="scss">
	.page-container {
		height: 100vh;
		overflow: hidden;
	}

	.task-center {
		background: #f8f8f8;
		height: 100vh;
		padding-bottom: 40rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.navbar-placeholder {
		height: 100rpx;
	}

	.account-balance {
		background: linear-gradient(90deg, #ffe16b, #ffd700);
		border-radius: 20rpx;
		margin: 24rpx 24rpx 0 24rpx;
		padding: 24rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		color: #333;

		.balance-label {
			font-weight: 500;
		}

		.balance-value {
			font-weight: bold;
			color: #bfa100;

			.num {
				font-size: 24rpx;
			}

			.unit {
				font-size: 22rpx;
			}
		}
	}

	.checkin-section {
		background: #fff;
		border-radius: 20rpx;
		margin: 24rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.08);
		border: 4rpx solid #ffe16b;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: 600;
			margin-bottom: 24rpx;

			.record-btn {
				background: #d6ff4b;
				color: #383938;
				border-radius: 24rpx;
				padding: 6rpx 28rpx;
				font-size: 24rpx;
			}
		}

		.checkin-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 18rpx;
			margin-bottom: 32rpx;

			.checkin-day {
				width: 22%;
				background: #f7f7f7;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 18rpx 0 10rpx 0;
				border: 2rpx solid #f0f0f0;

				&.active {
					background: #d6ff4b !important;
					border-color: #b6e900 !important;

					.day-label,
					.ticket-num {
						color: #222 !important;
						font-weight: bold;
					}
				}

				.day-label {
					font-size: 24rpx;
					font-weight: 600;
					height: 90rpx;
					margin-bottom: 8rpx;
					color: #333;

					&.bold {
						font-weight: bold;
					}
				}

				.ticket-img {
					width: 48rpx;
					height: 36rpx;
					margin-bottom: 6rpx;
					display: flex;
				}

				.ticket-num {
					font-size: 22rpx;
					color: #bfa100;
				}
			}
		}

		.checkin-btn {
			width: 600rpx;
			background: linear-gradient(90deg, #ffe16b, #ffd700);
			color: #333;
			font-size: 30rpx;
			border-radius: 46rpx;
			padding: 18rpx 0;
			font-weight: bold;
			margin-top: 8rpx;
			transition: background 0.2s;
		}
	}

	.checked-btn {
		background: linear-gradient(90deg, #e0e0e0, #bdbdbd) !important;
		color: #444 !important;
		cursor: not-allowed;
	}

	.more-tasks {
		background: #faffea;
		border-radius: 20rpx;
		margin: 0 24rpx;
		padding: 24rpx 24rpx 8rpx 24rpx;
		margin-top: 100rpx;

		.more-header {
			font-size: 28rpx;
			color: #bfa100;
			font-weight: 600;
			margin-bottom: 18rpx;
		}

		.task-list {
			.task-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				border-radius: 0;
				margin: 0;
				padding: 18rpx 20rpx 10rpx 20rpx;
				border-bottom: 1rpx solid #f2f2f2;

				.task-info {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					flex: 1;
					min-width: 0;
					margin-top: 30rpx;

					.task-title {
						font-size: 26rpx;
						color: #222;
						font-weight: bold;
					}

					.task-desc {
						font-size: 20rpx;
						color: #bbb;
						margin-top: 4rpx;
					}
				}

				.get-btn {
					background: #ffd700;
					color: #fff;
					font-size: 24rpx;
					border-radius: 24rpx;
					padding: 0 28rpx;
					font-weight: bold;
					border: none;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: none;
					white-space: nowrap;
					margin-left: 18rpx;
					transition: background 0.2s;
				}

				.received-btn {
					background: linear-gradient(90deg, #e0e0e0, #bdbdbd) !important;
					color: #444 !important;
					cursor: not-allowed;
				}

				&.no-border {
					border-bottom: none;
				}
			}
		}
	}
</style>