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

<template>
	<view class="page-container">
        <navbar title="任务中心" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="task-center">

			<!-- 账户剩余 -->
			<view class="account-balance">
				<view class="balance-label">账户剩余</view>
				<view class="balance-value"><text class="num">{{ maxVote }}</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 clockList" 
					:key="day" 
					class="checkin-day" 
					:class="{ active: day.commonSignLog }">
						<view class="day-label" 
						:class="{ bold: day.commonSignLog }">
							{{ day.title }}
						</view>
						<image class="ticket-img"
							:src="day.image"
							mode="aspectFit" />
						<view class="ticket-num">+ {{ day.num }}</view>
					</view>
				</view>
				<button class="checkin-btn" :class="{ 'checked-btn': isSign }" :disabled="isSign"
					@click="clickSignTask">
					{{ isSign ? '已签到' : '签到得奖励' }}
				</button>
			</view>
			<!-- 更多任务 -->
			<view class="more-tasks">
				<view class="more-header">更多任务</view>
				<view class="task-list">
					<view class="task-item" v-for="(task, idx) in list" :key="idx"
						:class="{ 'no-border': idx === tasks.length - 1 }">
						<view class="task-info">
							<view class="task-title">{{ task.title }}</view>
							<view class="task-desc">推荐票 +{{ task.num }}</view>
						</view>
						<button class="get-btn" :class="{ 'received-btn': task.commonTaskLog }" 
						:disabled="task.commonTaskLog"
							@click="clickMoreTask(task.id)">
							{{ task.commonTaskLog ? '已领取' : '去领取' }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import mixinsList from '@/mixins/list.js'
	export default {
        mixins: [mixinsList],
		components: {
		},
		data() {
			return {
				checkedDays: 3, // 已签到天数
				tasks: [{
						title: '观看视频广告',
						received: false
					},
					{
						title: '每日首阅三个章节',
						received: false
					},
					{
						title: '每日首条评论',
						received: false
					},
				],
				clockList : [],
				isChecked: false, // 新增：签到按钮状态
				maxVote : 0,
                mixinsListApi : '',
			}
		},
		computed : {
			isSign(){
				let taskId = 0
				this.clockList.forEach(n => {
					if(!n.commonSignLog){
						taskId = n.id
					}
				})
				return !taskId
			},
		},
		onShow() {
			this.getMyRecommendTicketNum()
			this.getSignTaskList()
			this.getMoreTaskList()
		},
		methods: {
			getMyRecommendTicketNum(){
				this.$fetch('getMyRecommendTicketNum')
				.then(res => {
					this.maxVote = res
				})
			},
			getSignTaskList(){
				this.$fetch('getSignTaskList', {
					token : uni.getStorageSync('token')
				})
				.then(res => {
					this.clockList = res
				})
			},
			getMoreTaskList(){
				this.$fetch('getMoreTaskList', {
					token : uni.getStorageSync('token')
				})
				.then(res => {
					this.list = res
				})
			},
			async clickSignTask(){
				let taskId = 0
				
				for (var index = 0; index < this.clockList.length; index++) {
					var element = this.clockList[index];
					if(!element.commonSignLog){
						taskId = element.id
						break
					}
				}
				
				if(!taskId){
					uni.showToast({
						title: '已全部签到',
						icon: 'none'
					})
					return
				}
				
				await this.$fetch('clickSignTask', {
					taskId,
				})
				uni.showToast({
					title: '签到成功',
					icon: 'none'
				});
				this.getSignTaskList()
				this.getMyRecommendTicketNum()
			},
			async clickMoreTask(taskId){
				await this.$fetch('clickMoreTask', {
					taskId,
				})
				uni.showToast({
					title: '领取成功',
					icon: 'none'
				});
				this.getMoreTaskList()
				this.getMyRecommendTicketNum()
			},
			handleCheckin() {
				if (this.checkedDays < 8) {
					this.checkedDays++;
					this.isChecked = true;
					uni.showToast({
						title: '签到成功',
						icon: 'none'
					});
				} 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>