MoeNovaClient/pages/isLand/TaskDialog.vue

<template>
  <custom-dialog :visible="visible" title="" content-width="720rpx" background-color="transparent" closeImg="/static/island/UI/btn_close.png" closeImgTop="0rpx" @close="onClose">
    <view class="task-board">
      <view class="board-title">
        <view class="title-dot"></view>
        <text>任务看板</text>
        <view class="title-dot"></view>
      </view>
      <view class="task-cards-container">
        <view v-for="(task, index) in tasks" :key="index" class="task-card">
          <view class="task-header">
            <text class="task-label">任务目标：</text>
            <text class="task-content">{{task.name}}</text>
          </view>
          <view class="task-desc">
            <text class="task-label">任务描述：</text>
            <text class="task-content">{{task.content}}</text>
          </view>
          <view class="task-rewards">
            <text class="task-label">任务奖励：</text>
            <view class="reward-list">
              <view v-for="(prize, pIndex) in task.prize_list" :key="pIndex" class="reward-item">
                <view class="reward-box">
                  <image :src="prize.shop.image || '/static/island/items/default.png'" class="reward-icon"></image>
                </view>
                <text class="reward-text">{{prize.shop.name.length > 3 ? prize.shop.name.substring(0, 3) + '' : prize.shop.name}}x{{ prize.num }}</text>
              </view>
            </view>
          </view>
          <view class="task-footer">
            <text class="task-date">{{task.create_time}}</text>
            <view 
              :class="['task-button', 
                task.state === 1 ? 'completed' : 
                task.state === 2 ? 'completed' : 
                'uncompleted']"
              @click="handleTaskAction(task)"
            >
              {{task.state === 1 ? '已完成' : 
                task.state === 2 ? '领取奖励' : 
                '未完成'}}
            </view>
          </view>
          <view class="card-divider"></view>
        </view>
      </view>
    </view>
  </custom-dialog>
</template>

<script>
import CustomDialog from '@/components/CustomDialog/CustomDialog.vue'

export default {
  name: 'TaskDialog',
  components: {
    CustomDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'main'
    }
  },
  data() {
    return {
      tasks: [],
      loading: false
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.fetchTaskData()
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
    // 获取任务数据
    async fetchTaskData() {
      if (this.loading) return
      this.loading = true
      
      try {
        uni.request({
          url: this.$apiHost + '/Game/get_task_list',
          method: 'GET',
          data: {
            uuid: getApp().globalData.uuid,
            type: this.type
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'sign': getApp().globalData.headerSign,
          },
          success: (res) => {
            console.log("任务数据:", res.data)
            if (res.data && res.data.code === 0) {
              this.tasks = res.data.list || []
            } else {
              uni.showToast({
                title: res.data?.msg || '获取任务数据失败',
                icon: 'none'
              })
            }
          },
          fail: (err) => {
            console.error('获取任务数据异常', err)
            uni.showToast({
              title: '网络异常，请重试',
              icon: 'none'
            })
          },
          complete: () => {
            this.loading = false
          }
        })
      } catch (error) {
        console.error('获取任务数据异常', error)
        uni.showToast({
          title: '网络异常，请重试',
          icon: 'none'
        })
        this.loading = false
      }
    },
    handleTaskAction(task) {
      if (task.state === 1) {
        // 处理已完成任务的逻辑
        uni.showToast({
          title: '任务已完成！',
          icon: 'success'
        })
      } else if (task.state === 2) {
        // 处理领取奖励的逻辑
        this.receiveTaskReward(task)
      } else {
        // 处理未完成任务的逻辑
        uni.showToast({
          title: '任务未完成',
          icon: 'none'
        })
      }
    },
    // 领取任务奖励
    async receiveTaskReward(task) {
      try {
        uni.request({
          url: this.$apiHost + '/Game/get_task_list',
          method: 'GET',
          data: {
            uuid: getApp().globalData.uuid,
            type: this.type,
            act: 'get',
            task_id: task.id
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'sign': getApp().globalData.headerSign,
          },
          success: (res) => {
            if (res.data && res.data.code === 0) {
              uni.showToast({
                title: '领取成功！',
                icon: 'success'
              })
              // 刷新任务列表
              this.fetchTaskData()
            } else {
              uni.showToast({
                title: res.data?.msg || '领取失败',
                icon: 'none'
              })
            }
          },
          fail: (err) => {
            console.error('领取奖励异常', err)
            uni.showToast({
              title: '网络异常，请重试',
              icon: 'none'
            })
          }
        })
      } catch (error) {
        console.error('领取奖励异常', error)
        uni.showToast({
          title: '网络异常，请重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss">
@import './TaskDialog.scss';
.task-button {
  &.can-receive {
    background-color: #FFD700;
    color: #000;
  }
}
</style>