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

<template>
  <view class="container">
    <!-- 顶部 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>
          <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'

export default {
  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: ['学习类', '生活类', '运动类', '其他']
    }
  },
  onShow() {
    const role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    this.isParent = role === 'parent'
    this.currentUserId = uni.getStorageSync('userId')
    this.currentMemberId = uni.getStorageSync('currentMemberId') || uni.getStorageSync('currentChildId')
    this.checkMembership()
    this.loadInitialData()
  },
  methods: {
    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 })
        this.familyMembers = membersRes.data || []
        if (!this.currentMemberId && this.familyMembers.length > 0) {
          var first = this.familyMembers[0]
          this.currentMemberId = first && first.id ? first.id : null
        }
        this.loadTodayTasks()
        this.loadPendingTasks()
        this.loadCreatedTasks()
      } catch (e) {
        console.error('加载数据失败', e)
      } finally {
        this.loading = false
      }
    },
    async loadPendingTasks() {
      try {
        const res = await getMyPendingTasks(this.currentMemberId)
        this.pendingTasks = res.data || []
      } catch (e) {
        console.error('加载待接受任务失败', e)
      }
    },
    async loadTodayTasks() {
      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 {
        const res = await completeTaskApi(task.id, this.currentMemberId, '')
        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.currentMemberId).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 code = 'schulte'
        try {
          if (task.actionConfig) {
            var cfg = JSON.parse(task.actionConfig)
            if (cfg.gameCode) code = cfg.gameCode
          }
        } catch (e) {}
        uni.navigateTo({ url: '/pages/games/' + code + '?taskId=' + taskId })
      } else if (at === 'focus') {
        uni.navigateTo({ url: '/pages/focus/index?taskId=' + taskId })
      } else if (at === 'survey') {
        uni.navigateTo({ url: '/pages/assessment/survey-questionnaire?taskId=' + taskId })
      } else if (at === 'article') {
        uni.navigateTo({ url: '/pages/article-center/article-detail?taskId=' + taskId })
      } else if (at === 'activity') {
        uni.navigateTo({ url: '/pages/activity/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.currentMemberId, '', 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()
        if (res.data) {
          uni.showToast({ title: '已接受任务', icon: 'success' })
          this.loadPendingTasks()
          this.loadTodayTasks()
        } else {
          uni.showToast({ title: '接受失败', icon: 'none' })
        }
      }).catch(e => {
        uni.hideLoading()
        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()
        if (res.data) {
          uni.showToast({ title: '已拒绝', icon: 'success' })
          this.loadPendingTasks()
        } else {
          uni.showToast({ title: '操作失败', icon: 'none' })
        }
      }).catch(e => {
        uni.hideLoading()
        uni.showToast({ title: '操作失败', icon: 'none' })
      })
      this.showRejectModalFlag = false
    },
    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
    },
    formatTime(dateStr) {
      if (!dateStr) return ''
      const date = parseDate(dateStr)
      if (!date) return ''
      return `${date.getMonth()+1}月${date.getDate()}日 ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}`
    },
    statusLabel(status) {
      const map = {
        'pending': '待审核',
        'assigned': '待接受',
        'in_progress': '进行中',
        'completed': '已完成',
        'rejected': '已拒绝',
        'overdue': '已过期',
        'cancelled': '已取消'
      }
      return map[status] || status
    }
  }
}
</script>

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

.tab-bar {
  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;
  font-weight: 500;
}

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

.tab-badge {
  position: absolute;
  top: 8rpx;
  right: 30rpx;
  background: #FF4D4F;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 20rpx;
  min-width: 32rpx;
  text-align: center;
}

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

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

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

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

.task-left {
  flex: 1;
}

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

.task-meta {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

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

.creator, .assignee {
  color: #999;
  font-size: 24rpx;
}

.deadline {
  color: #999;
  font-size: 24rpx;
}

.status-tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  background: #f0f0f0;
  color: #666;
}

.status-assigned {
  background: #FFF7ED;
  color: #F97316;
}

.status-in_progress {
  background: #ECFDF5;
  color: #10B981;
}

.status-rejected {
  background: #FEF2F2;
  color: #EF4444;
}

.task-right {
  margin-left: 20rpx;
}

.btn-complete, .btn-accept {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 26rpx;
  padding: 12rpx 30rpx;
  border-radius: 30rpx;
  border: none;
}

.btn-reject {
  background: #fff;
  color: #EF4444;
  font-size: 26rpx;
  padding: 12rpx 30rpx;
  border-radius: 30rpx;
  border: 2rpx solid #EF4444;
  margin-left: 16rpx;
}

.task-actions {
  display: flex;
  align-items: center;
}

.completed-badge {
  color: #52C41A;
  font-size: 26rpx;
}

.review-badge {
  color: #D97706;
  font-size: 26rpx;
}

.lock-badge {
  color: #B0B0B0;
  font-size: 26rpx;
}

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

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

.input-tip {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.input-textarea {
  width: 100%;
  height: 240rpx;
  background: #F7F7F7;
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}

.minigame-badge {
  font-size: 28rpx;
  margin-left: 10rpx;
}

.member-badge {
  display: inline-block;
  font-size: 20rpx;
  color: #B45309;
  background: #FEF3C7;
  border: 1rpx solid #F59E0B;
  border-radius: 8rpx;
  padding: 2rpx 12rpx;
  margin-left: 12rpx;
  vertical-align: middle;
}

.empty {
  text-align: center;
  color: #999;
  padding: 100rpx 0;
  font-size: 28rpx;
}

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

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  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;
}

.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;
}

.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 checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.form-item label {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 28rpx;
  color: #333;
  padding: 18rpx 28rpx;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  background: #fafafa;
  transition: all 0.25s ease;
}

.form-item label.label-checked {
  border-color: #F97316;
  background: #FFF7ED;
  color: #F97316;
}

.form-item label:active {
  transform: scale(0.97);
}

.form-item input, .form-item .picker {
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  padding: 24rpx 28rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
  background: #fafafa;
  min-height: 88rpx;
  transition: all 0.25s ease;
}

.form-item input:focus {
  border-color: #F97316;
  background: #fff;
  box-shadow: 0 0 0 4rpx rgba(249, 115, 22, 0.1);
}

.form-item .picker {
  color: #333;
}

.textarea {
  min-height: 160rpx;
  width: 100%;
  box-sizing: border-box;
  font-size: 28rpx;
  padding: 24rpx 28rpx;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  background: #fafafa;
  transition: all 0.25s ease;
}

</style>