cfc/cfc-frontend/pages/tasks/tasks.vue

<template>
  <view class="container">
    <!-- 顶部：家庭成员选择（选择谁就展示谁的任务） -->
    <FamilyMemberStrip
      v-if="familyMembers.length > 0"
      :members="familyMembers"
      :selectedMemberId="currentMemberId"
      :isParent="isParent"
      @select="onFamilyMemberSelect"
    />

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
        <text class="tab-text">待接受</text>
        <text class="tab-badge" v-if="pendingTasks.length > 0">{{ pendingTasks.length }}</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'today' }" @click="switchTab('today')">
        <text class="tab-text">今日任务</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'created' }" @click="switchTab('created')">
        <text class="tab-text">我创建的</text>
      </view>
    </view>

    <!-- 待接受任务 -->
    <view class="task-list" v-if="activeTab === 'pending'">
      <view class="task-item assigned" v-for="task in pendingTasks" :key="task.id">
        <view class="task-left">
          <view class="task-title">
            {{ task.title }}
            <text v-if="task.memberOnly === 1" class="member-badge">会员任务</text>
          </view>
          <view class="task-meta">
            <text class="points">+{{ task.points }}分</text>
            <text class="creator">创建人：{{ task.creatorName || '家人' }}</text>
            <text class="deadline">截止 {{ formatTime(task.deadline) }}</text>
          </view>
        </view>
        <view class="task-actions">
          <button class="btn-accept" @click="acceptTask(task)">接受</button>
          <button class="btn-reject" @click="showRejectModal(task)">拒绝</button>
        </view>
      </view>
      <view class="empty" v-if="!loading && pendingTasks.length === 0">
        <text>暂无待接受任务</text>
      </view>
    </view>

    <!-- 今日任务 -->
    <view class="task-list" v-if="activeTab === 'today'">
      <view class="task-item" v-for="task in todayTasks" :key="task.id" :class="{ completed: task.status === 'completed', locked: task.status === 'locked' }">
        <view class="task-left">
          <view class="task-title">
            {{ task.title }}
            <text v-if="task.memberOnly === 1" class="member-badge">会员任务</text>
            <text v-if="task.category === '小游戏类'" class="minigame-badge">🎮</text>
            <text v-if="task.actionType === 'cart' || task.actionType === 'order'" class="minigame-badge">🛒</text>
            <text v-if="task.actionType === 'focus'" class="minigame-badge">⏱️</text>
            <text v-if="task.actionType === 'survey'" class="minigame-badge">📝</text>
            <text v-if="task.actionType === 'article'" class="minigame-badge">📖</text>
            <text v-if="task.actionType === 'activity'" class="minigame-badge">🎯</text>
            <text v-if="task.requireInput === 1" class="minigame-badge">✍️</text>
          </view>
          <view class="task-meta">
            <text class="points">+{{ task.points }}分</text>
            <text class="deadline">截止 {{ formatTime(task.deadline) }}</text>
          </view>
          <!-- 进度型任务：展示进度条 -->
          <view class="progress-wrap" v-if="task.isDailyProgress === 1">
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: getProgressPercent(task) + '%' }"></view>
            </view>
            <text class="progress-text">{{ task.progress || 0 }}/{{ task.targetValue || 1 }}</text>
          </view>
          <text v-if="task.status === 'locked'" class="lock-tip">🔒 需先完成前置任务后解锁</text>
        </view>
        <view class="task-right" v-if="task.status === 'pending' || task.status === 'in_progress'">
          <button class="btn-complete" @click="handleTaskAction(task)">{{ getActionLabel(task) }}</button>
        </view>
        <view class="completed-badge" v-else-if="task.status === 'completed'">已完成</view>
        <view class="review-badge" v-else-if="task.status === 'pending_review'">待审核</view>
        <view class="lock-badge" v-else>🔒 未解锁</view>
      </view>
      <view class="empty" v-if="!loading && todayTasks.length === 0">
        <text>暂无今日任务</text>
      </view>
    </view>

    <!-- 我创建的任务 -->
    <view class="task-list" v-if="activeTab === 'created'">
      <view class="task-item" v-for="task in createdTasks" :key="task.id">
        <view class="task-left">
          <view class="task-title">
            {{ task.title }}
            <text v-if="task.memberOnly === 1" class="member-badge">会员任务</text>
          </view>
          <view class="task-meta">
            <text class="points">+{{ task.points }}分</text>
            <text class="assignee">{{ task.executorName || '未分配' }}</text>
            <text class="status-tag" :class="'status-' + task.status">{{ statusLabel(task.status) }}</text>
          </view>
        </view>
      </view>
      <view class="empty" v-if="!loading && createdTasks.length === 0">
        <text>暂无创建的任务</text>
      </view>
    </view>

    <!-- 添加任务按钮 -->
    <button v-if="activeTab === 'today' && isParent" class="add-btn" @click="showAddModal = true">
      + 添加任务
    </button>

    <!-- 拒绝确认弹窗 -->
    <view class="modal-mask" v-if="showRejectModalFlag" @click="showRejectModalFlag = false">
      <view class="modal" @click.stop>
        <view class="modal-title">确认拒绝</view>
        <view class="modal-content">
          <text>拒绝后，创建人对你的信任度和亲密度将各减1分，沟通质量各加1分。</text>
        </view>
        <view class="modal-btns">
          <button @click="showRejectModalFlag = false">取消</button>
          <button class="btn-primary" @click="confirmReject">确认拒绝</button>
        </view>
      </view>
    </view>

    <!-- 填写式完成弹窗 -->
    <view class="modal-mask" v-if="showInputModal" @click="closeInputModal">
      <view class="modal modal-large" @click.stop>
        <view class="modal-title">完成任务</view>
        <view class="modal-content">
          <text class="input-tip">{{ activeInputTask && activeInputTask.title }}</text>
          <textarea
            v-model="inputContent"
            class="input-textarea"
            placeholder="请填写完成内容（如：今天完成了...）"
            :maxlength="500"
          ></textarea>
        </view>
        <view class="modal-btns">
          <button @click="closeInputModal">取消</button>
          <button class="btn-primary" :disabled="!inputContent" @click="submitWithInput">提交完成</button>
        </view>
      </view>
    </view>

    <!-- 创建任务弹窗 -->
    <view class="modal-mask" v-if="showAddModal" @click="showAddModal = false">
      <view class="modal modal-large" @click.stop>
        <view class="modal-title">创建任务</view>

        <view class="form-item">
          <view class="form-label">任务标题 <text class="required">*</text></view>
          <input v-model="newTask.title" placeholder="请输入任务标题" />
        </view>

        <view class="form-item">
          <view class="form-label">任务内容</view>
          <textarea v-model="newTask.description" placeholder="请输入任务描述" class="textarea" />
        </view>

        <view class="form-item">
          <view class="form-label">类型 <text class="required">*</text></view>
          <picker mode="selector" :range="categories" @change="onCategoryChange">
            <view class="picker">{{ newTask.category || '请选择类型' }}</view>
          </picker>
        </view>

        <view class="form-item">
          <view class="form-label">积分 <text class="required">*</text></view>
          <input v-model="newTask.points" type="number" placeholder="1-10" />
        </view>

        <view class="form-item">
          <view class="form-label">截止时间 <text class="required">*</text></view>
          <picker mode="datetime" :value="newTask.deadline" @change="onDeadlineChange">
            <view class="picker">{{ newTask.deadline || '选择截止时间' }}</view>
          </picker>
        </view>

        <view class="form-item">
          <view class="form-label">分配给 <text class="required">*</text></view>
          <checkbox-group @change="onFamilyMemberSelectChange">
            <label v-for="member in familyMembers" :key="member.id" :class="{ 'label-checked': newTask.memberIds.includes(String(member.id)) }">
              <checkbox :value="String(member.id)" :checked="newTask.memberIds.includes(String(member.id))" />
              <text>{{ member.nickname }}</text>
            </label>
          </checkbox-group>
        </view>

        <view class="modal-btns">
          <button @click="showAddModal = false">取消</button>
          <button class="btn-primary" @click="createTask">创建</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMyPendingTasks, acceptTask as acceptTaskApi, rejectTask as rejectTaskApi, getTodayTasks, completeTask as completeTaskApi, startTask as startTaskApi, createTask as createTaskApi, getFamilyMemberList, getMyMembership } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'

export default {
  components: { FamilyMemberStrip },
  data() {
    return {
      activeTab: 'today',
      loading: false,
      pendingTasks: [],
      todayTasks: [],
      createdTasks: [],
      isParent: false,
      isMember: false,
      currentMemberId: null,
      currentUserId: null,
      familyMembers: [],
      showAddModal: false,
      showRejectModalFlag: false,
      rejectTaskId: null,
      showInputModal: false,
      activeInputTask: null,
      inputContent: '',
      newTask: {
        title: '',
        description: '',
        category: '',
        points: 2,
        deadline: '',
        memberIds: []
      },
      categories: ['学习类', '生活类', '运动类', '其他']
    }
  },
  onLoad(options) {
    if (options && options.tab) {
      this.activeTab = options.tab
    }
    if (options && options.memberId) {
      var mid = parseInt(options.memberId, 10)
      if (!isNaN(mid)) {
        this.currentMemberId = mid
        uni.setStorageSync('currentMemberId', mid)
        uni.setStorageSync('currentChildId', mid)
      }
    }
  },
  onShow() {
    const role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    this.isParent = role === 'parent'
    this.currentUserId = uni.getStorageSync('userId')
    if (this.currentMemberId == null) {
      var cached = uni.getStorageSync('currentMemberId') || uni.getStorageSync('currentChildId')
      if (cached !== '' && cached != null) {
        var n = parseInt(cached, 10)
        this.currentMemberId = isNaN(n) ? cached : n
      }
    }
    this.checkMembership()
    this.loadInitialData()
  },
  methods: {
    onFamilyMemberSelect(member) {
      if (!member || member.id == null) return
      var id = typeof member.id === 'number' ? member.id : parseInt(member.id, 10)
      if (isNaN(id)) id = member.id
      if (this.currentMemberId === id) return
      this.currentMemberId = id
      uni.setStorageSync('currentMemberId', id)
      uni.setStorageSync('currentChildId', id)
      this.loadTodayTasks()
      this.loadPendingTasks()
    },
    resolveTaskMemberId(task) {
      if (task && task.familyMemberId) return task.familyMemberId
      if (task && task.childId) return task.childId
      return this.currentMemberId
    },
    checkMembership() {
      getMyMembership().then(res => {
        const m = res.data || {}
        this.isMember = !!(m.levelCode && m.levelCode !== 'FREE')
      }).catch(() => {})
    },
    switchTab(tab) {
      this.activeTab = tab
      if (tab === 'pending') this.loadPendingTasks()
      else if (tab === 'today') this.loadTodayTasks()
      else if (tab === 'created') this.loadCreatedTasks()
    },
    async loadInitialData() {
      this.loading = true
      try {
        const membersRes = await getFamilyMemberList({ visibleOnly: true })
        var raw = (membersRes && membersRes.data) || []
        this.familyMembers = Array.isArray(raw) ? raw : []
        this.ensureSelectedMemberFromRaw(this.familyMembers)
        if (!this.currentMemberId) {
          this.todayTasks = []
          this.pendingTasks = []
        } else {
          this.loadTodayTasks()
          this.loadPendingTasks()
        }
        this.loadCreatedTasks()
      } catch (e) {
        console.error('加载数据失败', e)
      } finally {
        this.loading = false
      }
    },
    ensureSelectedMemberFromRaw(raw) {
      var members = raw || []
      if (members.length === 0) {
        this.currentMemberId = null
        return
      }
      if (this.currentMemberId != null) {
        var cur = String(this.currentMemberId)
        for (var i = 0; i < members.length; i++) {
          if (members[i] && String(members[i].id) === cur) {
            // 统一成数字，保证 FamilyMemberStrip 选中态 === 比较成立
            var n = parseInt(members[i].id, 10)
            this.currentMemberId = isNaN(n) ? members[i].id : n
            return
          }
        }
      }
      var first = members[0]
      var fid = first && first.id != null ? first.id : null
      if (fid != null) {
        var pn = parseInt(fid, 10)
        this.currentMemberId = isNaN(pn) ? fid : pn
        uni.setStorageSync('currentMemberId', this.currentMemberId)
        uni.setStorageSync('currentChildId', this.currentMemberId)
      } else {
        this.currentMemberId = null
      }
    },
    async loadPendingTasks() {
      if (!this.currentMemberId) {
        this.pendingTasks = []
        return
      }
      try {
        const res = await getMyPendingTasks(this.currentMemberId)
        this.pendingTasks = res.data || []
      } catch (e) {
        console.error('加载待接受任务失败', e)
      }
    },
    async loadTodayTasks() {
      if (!this.currentMemberId) {
        this.todayTasks = []
        return
      }
      try {
        const res = await getTodayTasks(this.currentMemberId)
        this.todayTasks = res.data || []
      } catch (e) {
        console.error('加载今日任务失败', e)
      }
    },
    async loadCreatedTasks() {
      try {
        const res = await getTodayTasks(this.currentUserId)
        this.createdTasks = res.data || []
      } catch (e) {
        console.error('加载创建的任务失败', e)
      }
    },
    async completeTask(task) {
      if (task.memberOnly === 1 && !this.isMember) {
        uni.showModal({
          title: '会员任务',
          content: '该任务是会员专属任务，开通会员后即可完成',
          confirmText: '去开通',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/membership/index' })
            }
          }
        })
        return
      }
      try {
        var memberId = this.resolveTaskMemberId(task)
        const res = await completeTaskApi(task.id, memberId, '')
        if (res.data && res.data.needReview) {
          uni.showToast({ title: '已提交，待审核', icon: 'none' })
        } else {
          uni.showToast({ title: `获得 ${res.data.pointsEarned} 积分`, icon: 'success' })
        }
        this.loadTodayTasks()
      } catch (e) {
        console.error('完成任务失败', e)
      }
    },
    /** 按钮文案：按 action_type / start_required / require_input 分派 */
    getActionLabel(task) {
      if (task.startRequired === 1 && task.status !== 'in_progress') return '开始'
      if (task.requireInput === 1) return '填写完成'
      var at = task.actionType
      if (at === 'minigame') return '开始游戏'
      if (at === 'focus') return '开始专注'
      if (at === 'survey') return '去填写'
      if (at === 'article') return '去阅读'
      if (at === 'activity') return '去报名'
      if (at === 'cart' || at === 'order') return '去购物'
      return '完成'
    },
    /** 统一任务动作入口：开始/联动跳转/填写/直接完成 */
    handleTaskAction(task) {
      var self = this
      // 前置锁定任务不可操作
      if (task.status === 'locked') {
        uni.showToast({ title: '需先完成前置任务', icon: 'none' })
        return
      }
      // 两阶段：先开始，再按 action_type 跳转联动页面
      if (task.startRequired === 1 && task.status !== 'in_progress') {
        uni.showLoading({ title: '开始中...' })
        startTaskApi(task.id, this.resolveTaskMemberId(task)).then(function(res) {
          uni.hideLoading()
          if (res && res.code === 200 && res.data) {
            uni.showToast({ title: '已开始', icon: 'success' })
            self.navigateByAction(task)
            self.loadTodayTasks()
          } else {
            uni.showToast({ title: (res && res.message) || '开始失败', icon: 'none' })
          }
        }).catch(function() {
          uni.hideLoading()
          uni.showToast({ title: '开始失败', icon: 'none' })
        })
        return
      }
      // 填写式完成
      if (task.requireInput === 1) {
        this.activeInputTask = task
        this.inputContent = ''
        this.showInputModal = true
        return
      }
      // 已开始的两阶段任务或普通任务：直接完成
      this.completeTask(task)
    },
    /** 按 action_type 跳转联动页面 */
    navigateByAction(task) {
      var at = task.actionType
      var taskId = task.id
      if (at === 'minigame') {
        var cfg = {}
        try { cfg = typeof task.actionConfig === 'string' ? JSON.parse(task.actionConfig || '{}') : (task.actionConfig || {}) } catch (e) {}
        var gameId = cfg.gameId || ''
        uni.navigateTo({ url: '/pages/games/index?taskId=' + taskId + (gameId ? '&gameId=' + gameId : '') })
      } else if (at === 'focus') {
        uni.navigateTo({ url: '/pages/games/focus-timer?taskId=' + taskId })
      } else if (at === 'survey') {
        uni.navigateTo({ url: '/pages/survey/index?taskId=' + taskId })
      } else if (at === 'article') {
        uni.navigateTo({ url: '/pages/article-center/index?taskId=' + taskId })
      } else if (at === 'activity') {
        uni.navigateTo({ url: '/pages/activity/list?taskId=' + taskId })
      } else if (at === 'cart' || at === 'order') {
        uni.navigateTo({ url: '/pages/shop/cart?taskId=' + taskId })
      }
    },
    closeInputModal() {
      this.showInputModal = false
      this.activeInputTask = null
      this.inputContent = ''
    },
    async submitWithInput() {
      var task = this.activeInputTask
      if (!task || !this.inputContent) return
      try {
        const res = await completeTaskApi(task.id, this.resolveTaskMemberId(task), '', this.inputContent, 'text')
        if (res.data && res.data.needReview) {
          uni.showToast({ title: '已提交，待审核', icon: 'none' })
        } else {
          uni.showToast({ title: `获得 ${res.data.pointsEarned} 积分`, icon: 'success' })
        }
        this.closeInputModal()
        this.loadTodayTasks()
      } catch (e) {
        console.error('提交填写内容失败', e)
        uni.showToast({ title: '提交失败', icon: 'none' })
      }
    },
    acceptTask(task) {
      if (task.memberOnly === 1 && !this.isMember) {
        uni.showModal({
          title: '会员任务',
          content: '该任务是会员专属任务，开通会员后即可接受',
          confirmText: '去开通',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/membership/index' })
            }
          }
        })
        return
      }
      uni.showLoading({ title: '接受中...' })
      acceptTaskApi(task.id, this.currentMemberId).then(res => {
        uni.hideLoading()
        uni.showToast({ title: '已接受', icon: 'success' })
        this.loadPendingTasks()
        this.loadTodayTasks()
      }).catch(e => {
        uni.hideLoading()
        console.error('接受失败', e)
        uni.showToast({ title: '接受失败', icon: 'none' })
      })
    },
    showRejectModal(task) {
      this.rejectTaskId = task.id
      this.showRejectModalFlag = true
    },
    confirmReject() {
      uni.showLoading({ title: '拒绝中...' })
      rejectTaskApi(this.rejectTaskId, this.currentMemberId).then(res => {
        uni.hideLoading()
        this.showRejectModalFlag = false
        uni.showToast({ title: '已拒绝', icon: 'success' })
        this.loadPendingTasks()
      }).catch(e => {
        uni.hideLoading()
        console.error('拒绝失败', e)
        uni.showToast({ title: '拒绝失败', icon: 'none' })
      })
    },
    statusLabel(status) {
      const map = {
        pending: '待完成',
        assigned: '待接受',
        in_progress: '进行中',
        completed: '已完成',
        pending_review: '待审核',
        rejected: '已拒绝',
        overdue: '已过期',
        cancelled: '已取消',
        locked: '未解锁'
      }
      return map[status] || status
    },
    formatTime(t) {
      if (!t) return ''
      var d = parseDate(t)
      if (!d) return String(t).substring(0, 16)
      var y = d.getFullYear()
      var m = String(d.getMonth() + 1).padStart(2, '0')
      var day = String(d.getDate()).padStart(2, '0')
      var h = String(d.getHours()).padStart(2, '0')
      var min = String(d.getMinutes()).padStart(2, '0')
      return y + '-' + m + '-' + day + ' ' + h + ':' + min
    },
    getProgressPercent(task) {
      var progress = task.progress || 0
      var target = task.targetValue || 1
      if (target <= 0) return 0
      var pct = Math.round((progress / target) * 100)
      return pct > 100 ? 100 : pct
    },
    async createTask() {
      if (!this.newTask.title) {
        uni.showToast({ title: '请输入标题', icon: 'none' })
        return
      }
      if (!this.newTask.category) {
        uni.showToast({ title: '请选择类型', icon: 'none' })
        return
      }
      if (this.newTask.memberIds.length === 0) {
        uni.showToast({ title: '请选择分配对象', icon: 'none' })
        return
      }
      try {
        await createTaskApi({
          title: this.newTask.title,
          description: this.newTask.description,
          category: this.newTask.category,
          points: parseInt(this.newTask.points) || 2,
          deadline: this.newTask.deadline ? new Date(this.newTask.deadline).getTime() : null,
          executorType: 'member',
          memberIds: this.newTask.memberIds.map(id => Number(id))
        })
        uni.showToast({ title: '创建成功', icon: 'success' })
        this.showAddModal = false
        this.resetNewTask()
        this.loadCreatedTasks()
        this.loadPendingTasks()
      } catch (e) {
        console.error('创建任务失败', e)
        uni.showToast({ title: '创建失败', icon: 'none' })
      }
    },
    resetNewTask() {
      this.newTask = {
        title: '',
        description: '',
        category: '',
        points: 2,
        deadline: '',
        memberIds: []
      }
    },
    onCategoryChange(e) {
      this.newTask.category = this.categories[e.detail.value]
    },
    onDeadlineChange(e) {
      this.newTask.deadline = e.detail.value
    },
    onFamilyMemberSelectChange(e) {
      this.newTask.memberIds = e.detail.value || []
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx 30rpx 120rpx;
  background: #f5f7fa;
  min-height: 100vh;
}

.tab-bar {
  margin-top: 16rpx;
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  border-radius: 12rpx;
  position: relative;
}

.tab-item.active {
  background: linear-gradient(135deg, #F97316, #FB923C);
}

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

.tab-item.active .tab-text {
  color: #fff;
  font-weight: 600;
}

.tab-badge {
  position: absolute;
  top: 8rpx;
  right: 20rpx;
  background: #EF4444;
  color: #fff;
  font-size: 20rpx;
  min-width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  border-radius: 14rpx;
  padding: 0 6rpx;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}

.task-item.completed {
  opacity: 0.7;
}

.task-item.locked {
  opacity: 0.55;
}

.task-item.assigned {
  border-left: 6rpx solid #F97316;
}

.task-left {
  flex: 1;
  min-width: 0;
  padding-right: 20rpx;
}

.task-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
}

.member-badge {
  font-size: 20rpx;
  color: #F97316;
  background: #FFF7ED;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
  margin-left: 8rpx;
}

.minigame-badge {
  margin-left: 8rpx;
  font-size: 24rpx;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  font-size: 24rpx;
  color: #999;
}

.points {
  color: #F97316;
  font-weight: 500;
}

.deadline, .creator, .assignee {
  color: #999;
}

.lock-tip {
  display: block;
  margin-top: 8rpx;
  font-size: 22rpx;
  color: #9CA3AF;
}

.progress-wrap {
  display: flex;
  align-items: center;
  margin-top: 12rpx;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background: #F3F4F6;
  border-radius: 6rpx;
  overflow: hidden;
  margin-right: 12rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 6rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 22rpx;
  color: #F97316;
  white-space: nowrap;
}

.task-right {
  flex-shrink: 0;
}

.btn-complete {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 26rpx;
  padding: 0 28rpx;
  height: 64rpx;
  line-height: 64rpx;
  border-radius: 32rpx;
  border: none;
}

.task-actions {
  display: flex;
  gap: 12rpx;
  flex-shrink: 0;
}

.btn-accept {
  background: #10B981;
  color: #fff;
  font-size: 24rpx;
  padding: 0 24rpx;
  height: 56rpx;
  line-height: 56rpx;
  border-radius: 28rpx;
  border: none;
}

.btn-reject {
  background: #F3F4F6;
  color: #666;
  font-size: 24rpx;
  padding: 0 24rpx;
  height: 56rpx;
  line-height: 56rpx;
  border-radius: 28rpx;
  border: none;
}

.completed-badge, .review-badge, .lock-badge {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.completed-badge {
  background: #ECFDF5;
  color: #10B981;
}

.review-badge {
  background: #FFF7ED;
  color: #F97316;
}

.lock-badge {
  background: #F3F4F6;
  color: #9CA3AF;
}

.status-tag {
  font-size: 22rpx;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
  background: #F3F4F6;
  color: #666;
}

.status-pending { background: #FFF7ED; color: #F97316; }
.status-completed { background: #ECFDF5; color: #10B981; }
.status-pending_review { background: #FEF3C7; color: #D97706; }
.status-assigned { background: #EEF2FF; color: #6366F1; }
.status-in_progress { background: #DBEAFE; color: #2563EB; }
.status-rejected { background: #FEE2E2; color: #EF4444; }
.status-locked { background: #F3F4F6; color: #9CA3AF; }

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0;
  color: #9CA3AF;
  font-size: 28rpx;
}

.add-btn {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 40rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 30rpx;
  border-radius: 44rpx;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.35);
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: #fff;
  border-radius: 28rpx;
  padding: 40rpx;
  width: 85%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
}

.modal-large {
  width: 90%;
}

.modal-title {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  text-align: center;
  color: #333;
}

.modal-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30rpx;
  text-align: center;
}

.input-tip {
  display: block;
  margin-bottom: 16rpx;
  color: #333;
  font-weight: 500;
}

.input-textarea {
  width: 100%;
  min-height: 180rpx;
  padding: 20rpx;
  background: #F9FAFB;
  border-radius: 12rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.modal-btns {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}

.modal-btns button {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 28rpx;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.modal-btns button:first-child {
  background: #f5f5f5;
  color: #666;
}

.btn-primary {
  background: linear-gradient(135deg, #F97316, #FB923C) !important;
  color: #fff !important;
}

.form-item {
  margin-bottom: 28rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 14rpx;
  font-weight: 500;
}

.form-label .required {
  color: #F97316;
}

.form-item input,
.form-item .picker,
.form-item .textarea {
  width: 100%;
  padding: 20rpx;
  background: #F9FAFB;
  border-radius: 12rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-item .textarea {
  min-height: 140rpx;
}

.form-item checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.form-item label {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 20rpx;
  background: #F9FAFB;
  border-radius: 12rpx;
  font-size: 26rpx;
}

.form-item label.label-checked {
  background: #FFF7ED;
  color: #F97316;
}
</style>