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.title}}</text>
          </view>
          <view class="task-desc">
            <text class="task-label">任务描述：</text>
            <text class="task-content">{{task.description}}</text>
          </view>
          <view class="task-rewards">
            <text class="task-label">任务奖励：</text>
            <view class="reward-list">
              <view v-for="(reward, rIndex) in task.rewards" :key="rIndex" class="reward-item">
                <view class="reward-box">
                  <image :src="reward.icon" class="reward-icon"></image>
                </view>
                <text class="reward-text">{{reward.text}}</text>
              </view>
            </view>
          </view>
          <view class="task-footer">
            <text class="task-date">{{task.date}}</text>
            <view 
              :class="['task-button', task.status === 'completed' ? 'completed' : 'uncompleted']"
              @click="handleTaskAction(task)"
            >
              {{task.status === 'completed' ? '完成任务' : '未完成'}}
            </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
    }
  },
  data() {
    return {
      tasks: [
        {
          title: '负债累累的冒险家',
          description: '终极目标就是偿还移民的债务，做一个无债一身轻的玩家',
          rewards: [
            {
              icon: '/static/icons/coin.png',
              text: '金币×3000'
            },
            {
              icon: '/static/icons/exp.png',
              text: '经验×3000'
            },
            {
              icon: '/static/icons/blueprint.png',
              text: '升级房屋图纸×1'
            }
          ],
          date: '2024/04/08',
          status: 'completed'
        },
        {
          title: '负债累累的冒险家',
          description: '终极目标就是偿还移民的债务，做一个无债一身轻的玩家',
          rewards: [
            {
              icon: '/static/icons/coin.png',
              text: '金币×3000'
            },
            {
              icon: '/static/icons/exp.png',
              text: '经验×3000'
            },
            {
              icon: '/static/icons/blueprint.png',
              text: '升级房屋图纸×1'
            }
          ],
          date: '2024/04/08',
          status: 'available'
        },
        {
          title: '负债累累的冒险家',
          description: '终极目标就是偿还移民的债务，做一个无债一身轻的玩家',
          rewards: [
            {
              icon: '/static/icons/coin.png',
              text: '金币×3000'
            },
            {
              icon: '/static/icons/exp.png',
              text: '经验×3000'
            },
            {
              icon: '/static/icons/blueprint.png',
              text: '升级房屋图纸×1'
            }
          ],
          date: '2024/04/08',
          status: 'available'
        }
      ]
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
    handleTaskAction(task) {
      if (task.status === 'completed') {
        // 处理完成任务的逻辑
        uni.showToast({
          title: '任务已完成！',
          icon: 'success'
        })
      } else {
        // 处理领取任务的逻辑
        // uni.showToast({
        //   title: '已领取任务',
        //   icon: 'success'
        // })
      }
    }
  }
}
</script> 



<style lang="scss">
@import './TaskDialog.scss';
</style>