rtim/pages/points/myTask.vue

<template>
  <view class="my-task-container">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="nav-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <text class="nav-title">我的任务</text>
      <view class="nav-right"></view>
    </view>

    <!-- 选项卡区域 -->
    <view class="tabs-wrap">
      <u-tabs 
        :list="tabList" 
        :current="currentTab" 
        @change="tabChange"
        lineWidth="40rpx"
        lineHeight="6rpx"
        lineColor="#FF5A1F"
        :inactiveStyle="{
          fontSize: '30rpx',
          color: '#999',
          lineHeight: '80rpx',
        }"
        :activeStyle="{
          fontWeight: 600,
          fontSize: '32rpx',
          color: '#333',
          lineHeight: '80rpx',
        }"
        itemStyle="flex: 1; height: 88rpx;"
        :scrollable="false"
      ></u-tabs>
    </view>

    <!-- 任务列表区域 -->
    <scroll-view scroll-y class="task-list-scroll" @scrolltolower="loadMore">
      <view class="task-list">
        <!-- 任务项 1 -->
        <view class="task-item">
          <image class="task-img" src="@/static/image/points/icon_cash_task.png" mode="aspectFill"></image>
          <view class="task-info">
            <view class="task-title">新人必做任务易上手</view>
            <view class="task-time">03-12 15:38前提交</view>
            <view class="task-bottom">
              <view class="status-badge passed">已通过</view>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 任务项 2 -->
        <view class="task-item">
          <image class="task-img" src="@/static/image/points/icon_cash_task.png" mode="aspectFill"></image>
          <view class="task-info">
            <view class="task-title">新人必做任务易上手</view>
            <view class="task-time">03-12 15:38前提交</view>
            <view class="task-bottom">
              <view class="status-badge passed">已通过</view>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 任务项 3 -->
        <view class="task-item">
          <image class="task-img" src="@/static/image/points/icon_cash_task.png" mode="aspectFill"></image>
          <view class="task-info">
            <view class="task-title">新人必做任务易上手</view>
            <view class="task-time">03-12 15:38前提交</view>
            <view class="task-bottom">
              <view class="status-badge passed">已通过</view>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 底部提示 -->
        <view class="loading-more">没有更多了</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 1, // 默认选中"已通过"
      tabList: [
        { name: '进行中' },
        { name: '已通过' },
        { name: '未通过' }
      ]
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    tabChange(item) {
      this.currentTab = item.index;
      // TODO: 切换标签时重新加载对应状态的数据
    },
    loadMore() {
      console.log('触底加载更多数据...');
      // TODO: 实现上拉加载逻辑
    }
  }
};
</script>

<style lang="scss" scoped>
.my-task-container {
  height: 100vh;
  background-color: #F7F8FA; /* 背景色偏淡蓝 */
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏固定 */
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 80rpx 30rpx 20rpx; /* 适配状态栏高度 */
  background-color: transparent; /* 背景透明融入全局 */
  flex-shrink: 0;
  background-color: #fff;
}

.nav-left, .nav-right {
  width: 60rpx;
  display: flex;
  align-items: center;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
}

/* Tabs 区域固定 */
.tabs-wrap {
  background-color: transparent;
  flex-shrink: 0;
  padding: 0 40rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
}

/* 列表滚动区域占满剩余空间 */
.task-list-scroll {
  flex: 1;
  height: 0; /* 配合 flex:1 实现滚动 */
}

.task-list {
  padding: 0 30rpx 40rpx;
}

.task-item {
  display: flex;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
}

.task-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 20rpx;
  flex-shrink: 0;
  background-color: #f5f5f5; /* 占位色 */
}

.task-info {
  flex: 1;
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.task-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 8rpx;
}

.task-time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: auto;
}

.task-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.status-badge {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 6rpx;
}

.status-badge.passed {
  color: #27C282;
  background-color: #E2F6EC;
}

.task-reward-wrap {
  display: flex;
  align-items: baseline;
}

.task-reward {
  font-size: 32rpx;
  color: #FF5A1F;
  font-weight: bold;
}

.task-reward-unit {
  font-size: 24rpx;
  color: #FF5A1F;
  margin-left: 4rpx;
}

.loading-more {
  text-align: center;
  color: #999;
  font-size: 24rpx;
  padding: 20rpx 0;
}
</style>