GuangYuYuan-app/src/points/components/task-list/task-list.vue

<template>
  <view class="task-list-container">
    <view class="task-list-header">
      <text class="task-list-title">做任务赚积分</text>
    </view>
    <!-- 加载状态 -->
    <view v-if="loading" class="task-list-loading">
      <u-loading-icon text="加载中..." mode="circle"></u-loading-icon>
    </view>
    <!-- 任务数据 -->
    <view v-else-if="taskData && taskData.length > 0">
      <view class="task-list">
        <view 
          v-for="(task,index) in taskData"
          :key="index"
          class="task-item">
          <view class="task-item-left">
            <view class="task-icon">
              <ImageItem :src="getTaskIcon(task.taskName)" />
            </view>
            <view class="task-info">
              <view class="task-name">{{ task.taskName }}</view>
              <view class="task-reward">
                <ImageItem src="/static/points/point.png"/>
                <text>+{{ task.rewardPoints }}</text>
              </view>
            </view>
          </view>
          <view class="task-item-right">
            <text class="progress-text">{{ task.completedCount }}/{{ task.triggerValue }}</text>
            <button 
              :class="Number(task.completedCount) >= Number(task.triggerValue) ? 'task-btn' : 'no-task-btn'"
              @click.stop="handleTask(task)"
              :disabled="Number(task.completedCount) >= Number(task.triggerValue)">
              {{Number(task.completedCount) >= Number(task.triggerValue) ? '已完成' : '去完成' }}
            </button>
          </view>
        </view>
      </view>
      <view class="more-tasks" @click="handleMoreTasks">赚更多积分 ></view>
    </view>
    <!-- 空状态 -->
    <view v-else class="task-list-empty">暂无任务活动</view>
  </view>
</template>

<script>
import ImageItem from "@/components/swiper/components/image.vue";
import { handleServiceShare } from '@/utils/share'
export default {
  components: { ImageItem },
  props: {
    taskData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 任务类型配置
      taskConfig: {
        order: {
          icon: '/static/points/task_order.png',
          action: this.handleOrderTask
        },
        merchant: {
          icon: '/static/points/task_shop.png',
          action: this.handleMerchantTask
        },
        dynamic: {
          icon: '/static/points/task_trend.png',
          action: this.handleDynamicTask
        },
        service: {
          icon: '/static/points/task_wx.png',
          action: this.handleServiceTask
        },
        recharge: {
          icon: '/static/points/task_account.png',
          action: this.handleRechargeTask
        }
      }
    }
  },
  methods: {
    // 获取任务图标
    getTaskIcon(taskName) {
      if (taskName.includes('订单')) return this.taskConfig.order.icon;
      if (taskName.includes('商户')) return this.taskConfig.merchant.icon;
      if (taskName.includes('动态')) return this.taskConfig.dynamic.icon;
      if (taskName.includes('服务号')) return this.taskConfig.service.icon;
      if (taskName.includes('充值')) return this.taskConfig.recharge.icon;
      return '';
    },

    // 处理任务点击
    handleTask(task) {
      if (task.completedStatus === 1) return;

      if (task.taskName.includes('订单')) {
        this.taskConfig.order.action();
      } else if (task.taskName.includes('商户')) {
        this.taskConfig.merchant.action();
      } else if (task.taskName.includes('动态')) {
        this.taskConfig.dynamic.action();
      } else if (task.taskName.includes('服务号')) {
        this.taskConfig.service.action();
      } else if (task.taskName.includes('充值')) {
        this.taskConfig.recharge.action();
      }
    },

    // 处理订单任务
    handleOrderTask() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },

    // 处理商户任务
    handleMerchantTask() {
      uni.switchTab({
        url: '/pages/identify/identify'
      });
    },

    // 处理动态任务
    handleDynamicTask() {
      uni.switchTab({
        url: '/pages/discover/discover'
      });
    },

    // 处理服务号任务
    handleServiceTask() {
      // 调用微信服务号分享功能
      handleServiceShare({
        title: '广誉远 - 关注服务号123123',
        desc: '关注广誉远服务号，获取更多积分和优惠123123123',
        link: window.location.href,
        imgUrl: '/static/points/task_wx.png'
      });
    },

    // 处理账号充值任务
    handleRechargeTask() {
      uni.navigateTo({
        url: '/pages/my/pay'
      });
    },

    // 处理查看更多任务
    handleMoreTasks() {
      uni.navigateTo({
        url: '/points/pointInfo/taskList'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.task-list-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  height: 360rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  
  .task-list-header {
    margin-bottom: 26rpx;
    
    .task-list-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .task-list-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 230rpx;
  }
  
  .task-list {
    .task-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .task-item-left {
        display: flex;
        align-items: center;
        
        .task-icon {
          width: 72rpx;
          height: 72rpx;
          margin-right: 18rpx;
          
          image {
            width: 72rpx;
            height: 72rpx;
          }
        }
        
        .task-info {
          .task-name {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            line-height: 28rpx;
            margin-bottom: 12rpx;
          }
          
          .task-reward {
            display: inline-flex;
            height: 32rpx;
            background: #FBF2E1;
            border-radius: 22rpx;
            padding-right: 12rpx;
            
            image {
              width: 32rpx;
              height: 32rpx;
              margin-right: 4rpx;
            }
            
            text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #FF9F00;
              line-height: 32rpx;
            }
          }
        }
      }
      
      .task-item-right {
        display: flex;
        flex-direction: row;
        .progress-text{
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #999999;
          line-height: 28rpx;
          margin-right: 8rpx;
          margin-top: 10rpx;
        }
        .task-btn {
          height: 48rpx;
          background: #EEEEEE;
          border-radius: 98rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #999999;
          line-height: 48rpx;
          border: 1px solid #EEEEEE;
        }
        
        .no-task-btn {
          height: 48rpx;
          background: #03C1B8;
          border-radius: 98rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 48rpx;
        }
      }
    }
  }
  
  .more-tasks {
    text-align: center;
    font-weight: 500;
    font-size: 28rpx;
    color: #999999;
  }
  
  .task-list-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 230rpx;
    color: #8f9ca2;
    font-size: 28rpx;
  }
}
</style>