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>