rtim/pages/points/cashTask.vue

<template>
  <view class="cash-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">
        <u-icon name="search" size="20" color="#333" v-if="false"></u-icon>
      </view>
    </view>
	<!-- 搜索栏 -->
	<view class="search-bar-wrap">
	  <u-search 
	    placeholder="查找任务" 
	    v-model="keyword" 
	    :showAction="false" 
	    bgColor="#f9f9f9"
	    height="32"
	    searchIcon="search"
	    searchIconSize="20"
	    searchIconColor="#999"
	    placeholderColor="#999"
	    :inputStyle="{ fontSize: '28rpx' }"
	  ></u-search>
	</view>
    <!-- 分类 Tabs 区域 -->
    <view class="tabs-wrap">
      <view class="tabs-scroll">
        <u-tabs 
          :list="tabList" 
          :current="currentTab" 
          @change="tabChange"
		  lineWidth="40rpx"
		  lineHeight="12rpx"
		  :lineColor="`url(${lineBg}) 40rpx 12rpx`"
         :inactiveStyle="{
         	fontSize: '28rpx',
         	color: '#666',
         	lineHeight: '80rpx',
             flexShrink: 0,
         }"
         :activeStyle="{
         	fontWeight: 600,
         	fontSize: '32rpx',
         	color: '#000',
         	lineHeight: '80rpx',
         	flexShrink: 0,
         }"
         itemStyle="margin: 6rpx 0"
        >
          <view slot="right" class="tabs-more" style="padding: 0 20rpx;" @click="toggleListLayout">
            <u-icon :name="isGridLayout ? 'list' : 'grid'" size="24" color="#999"></u-icon>
          </view>
        </u-tabs>
      </view>
    </view>

    <!-- 任务列表区域 -->
    <scroll-view scroll-y class="task-list-scroll" @scrolltolower="loadMore">
      <view :class="['task-list', isGridLayout ? 'task-list-grid' : '']">
        <!-- 任务项 1 -->
        <view class="task-item">
          <image class="task-img" src="@/static/image/points/icon_cash_task.png" mode="aspectFit"></image>
          <view class="task-info">
            <view class="task-title">新人必做任务易上手</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-bottom">
              <text class="task-stat">128人已赚<text class="divider">|</text>剩余10单</text>
              <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="aspectFit"></image>
          <view class="task-info">
            <view class="task-title">下载指定软件</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-bottom">
              <text class="task-stat">128人已赚<text class="divider">|</text>剩余10单</text>
              <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="aspectFit"></image>
          <view class="task-info">
            <view class="task-title">加微信群</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-bottom">
              <text class="task-stat">128人已赚<text class="divider">|</text>剩余10单</text>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 任务项 4 -->
        <view class="task-item">
          <image class="task-img" src="@/static/image/points/icon_cash_task.png" mode="aspectFit"></image>
          <view class="task-info">
            <view class="task-title">下载指定软件</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-bottom">
              <text class="task-stat">128人已赚<text class="divider">|</text>剩余10单</text>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 任务项 5 -->
        <view class="task-item">
          <image class="task-img" src="@/static/image/points/icon_cash_task.png" mode="aspectFit"></image>
          <view class="task-info">
            <view class="task-title">淘宝写好评</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-bottom">
              <text class="task-stat">128人已赚<text class="divider">|</text>剩余10单</text>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>
		
      </view>
    </scroll-view>
  </view>
</template>

<script>
	const lineBg = "/static/image/hall/hall_on_icon.png";
export default {
  data() {
    return {
		lineBg,
      currentTab: 0,
      keyword: '',
      isGridLayout: false,
      tabList: [
        { name: '推荐' },
        { name: '简单好做' },
        { name: '高额赏金' },
        { name: '注册下载' },
        { name: '加群其他' }
      ]
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    tabChange(item) {
      this.currentTab = item.index;
    },
    toggleListLayout() {
      this.isGridLayout = !this.isGridLayout;
    },
    loadMore() {
      console.log('加载更多数据');
    }
  }
};
</script>

<style lang="scss" scoped>
.cash-task-container {
  height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}
.search-bar-wrap {
  position: relative;
  z-index: 1;
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60rpx 30rpx 20rpx; /* 适配状态栏高度 */
  background-color: #fff;
}

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

.nav-right {
  justify-content: flex-end;
}

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

.tabs-wrap {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: relative;
}

.tabs-scroll {
  width: 100%;
}

.tab-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding: 0 10rpx;
}

.tab-text {
  font-size: 30rpx;
  color: #666;
}

.active-text {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.custom-indicator {
  position: absolute;
  bottom: 10rpx;
  width: 50rpx;
  height: 12rpx;
}

.indicator-img {
  width: 100%;
  height: 100%;
}

.tabs-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 88rpx;
  background-color: #fff;
  position: relative;
}

.tabs-more::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20rpx;
  height: 60rpx;
  background: linear-gradient(to right, rgba(242, 245, 255, 0), #fff);
  margin-left: -20rpx;
}

.task-list-scroll {
  flex: 1;
  height: 0; /* 配合 flex:1 实现滚动 */
  background-color: #F5F7FA;
}

.task-list {
  padding: 20rpx 30rpx;
}

/* 列表模式样式 */
.task-item {
  display: flex;
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.task-img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 20rpx;
  flex-shrink: 0;
  background-color: #f5f5f5;
}

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

.task-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 网格模式样式 */
.task-list-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.task-list-grid .task-item {
  width: 48%;
  flex-direction: column;
  padding: 0;
  margin-bottom: 30rpx;
  overflow: hidden;
  background-color: #fff;
  border-radius: 20rpx;
}

.task-list-grid .task-img {
  width: 100%;
  height: 330rpx;
  border-radius: 20rpx 20rpx 0 0;
}

.task-list-grid .task-info {
  margin-left: 0;
  padding: 20rpx;
}

.task-list-grid .task-title {
  margin-bottom: 16rpx;
}

.task-list-grid .task-tags {
  display: none; /* 网格模式下隐藏标签，或者根据需要调整 */
}

.task-list-grid .task-bottom {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.task-list-grid .task-stat {
  font-size: 20rpx;
}

.task-list-grid .task-stat .divider,
.task-list-grid .task-stat text:last-child {
  display: none; /* 简化统计信息展示 */
}

.task-list-grid .task-stat::after {
  content: '价值:9.90元'; /* 这里可以绑定实际数据 */
  color: #999;
  font-size: 20rpx;
  margin-left: 10rpx;
}
.task-list-grid .task-reward-wrap{
	background-color: #FF5A1F;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}
.task-list-grid .task-reward,
.task-list-grid .task-reward-unit {
  font-size: 24rpx;
  color: #fff;
}

.task-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12rpx;
}

.tag {
  font-size: 20rpx;
  color: #647294;
  background-color: #F5F7FA;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  margin-right: 12rpx;
  margin-bottom: 8rpx;
}

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

.task-stat {
  font-size: 22rpx;
  color: #999;
}

.divider {
  margin: 0 16rpx;
  color: #E5E6EB;
}

.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;
  font-weight: normal;
}
</style>