nongxiaoyu/pages/activity/activity-detail.vue

<template>
  <view class="page-container">
    <!-- 页面滚动区域 -->
    <scroll-view class="page-scroll" scroll-y>
      <!-- 地块信息卡片 -->
      <view class="info-card">
        <view class="card-title">
          <text>地块信息</text>
        </view>
        <view class="info-item">
          <text class="info-label">地块名称</text>
          <text class="info-value">{{ formData.plotName || '东区水稻田' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">作物名称</text>
          <text class="info-value">{{ formData.crop || '水稻' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">负责人</text>
          <text class="info-value">{{ formData.manager || '张农夫' }}</text>
        </view>
      </view>

      <!-- 任务填写表单 -->
      <view class="form-card">
        <view class="card-title">
          <text>任务信息</text>
        </view>
        
        <!-- 任务名称 -->
        <view class="form-item">
          <view class="form-label required">任务名称</view>
          <input 
            v-model="formData.taskName"
            placeholder="请输入任务名称，例如：水稻田施肥"
            :disabled="pageMode === 'view'"
            class="form-input"
          />
        </view>

        <!-- 任务类型 -->
        <view class="form-item" @click="pageMode !== 'view' && showTaskTypeSelector()">
          <view class="form-label required">任务类型</view>
          <view class="select-wrapper">
            <input 
              v-model="formData.taskType"
              placeholder="请选择任务类型"
              disabled
              class="form-input select-input"
            />
            <view v-if="pageMode !== 'view'" class="select-arrow">
              <text>▼</text>
            </view>
          </view>
        </view>

        <!-- 执行时间 -->
        <view class="form-item" @click="pageMode !== 'view' && selectExecuteTime()">
          <view class="form-label required">执行时间</view>
          <view class="select-wrapper">
            <input 
              v-model="formattedExecuteTime"
              placeholder="请选择任务计划时间"
              disabled
              class="form-input select-input"
            />
            <view v-if="pageMode !== 'view'" class="select-arrow">
              <text>选择</text>
            </view>
          </view>
        </view>

        <!-- 任务说明 -->
        <view class="form-item">
          <view class="form-label">任务说明</view>
          <textarea 
            v-model="formData.taskRemark"
            placeholder="请输入任务要点，例如：每亩用肥20kg"
            :disabled="pageMode === 'view'"
            class="form-textarea"
            maxlength="200"
          ></textarea>
          <view class="char-count">{{ (formData.taskRemark || '').length }}/200</view>
        </view>

        <!-- 任务完成情况 -->
        <view class="section-divider"></view>
        <view class="section-title">
          <text>任务完成情况</text>
        </view>

        <!-- 完成状态选择 - 新建和编辑模式 -->
        <view class="form-item" v-if="pageMode === 'create' || pageMode === 'edit'">
          <view class="form-label">完成状态</view>
          <view class="radio-group">
            <view 
              class="radio-item" 
              v-for="(item, index) in completionStatusOptions" 
              :key="index"
              @click="selectCompletionStatus(item.value)"
            >
              <view class="radio-circle" :class="{'radio-checked': formData.completionStatus === item.value}">
                <view v-if="formData.completionStatus === item.value" class="radio-dot"></view>
              </view>
              <text class="radio-label">{{ item.label }}</text>
            </view>
          </view>
        </view>

        <!-- 查看模式显示完成状态 -->
        <view class="form-item" v-if="pageMode === 'view'">
          <view class="form-label">完成状态</view>
          <view class="status-completed">
            <text class="status-icon">✓</text>
            <text>已完成</text>
          </view>
        </view>

        <!-- 完成时间 -->
        <view class="form-item" v-if="formData.completionStatus === 'completed'">
          <view class="form-label" :class="{'required': (pageMode === 'create' || pageMode === 'edit') && formData.completionStatus === 'completed'}">完成时间</view>
                     <view class="select-wrapper" @click="(pageMode === 'create' || pageMode === 'edit') && formData.completionStatus === 'completed' && selectCompletionTime()">
            <input 
              v-model="formattedCompletionTime"
              placeholder="请选择实际完成时间"
              disabled
              class="form-input select-input"
            />
                         <view v-if="(pageMode === 'create' || pageMode === 'edit') && formData.completionStatus === 'completed'" class="select-arrow">
               <text>选择</text>
             </view>
          </view>
        </view>

        <!-- 完成说明 -->
        <view class="form-item" v-if="formData.completionStatus === 'completed'">
          <view class="form-label" :class="{'required': (pageMode === 'create' || pageMode === 'edit') && formData.completionStatus === 'completed'}">完成说明</view>
          <textarea 
            v-model="formData.completionDesc"
            placeholder="请输入完成说明，例如：已完成并拍照记录"
            :disabled="pageMode === 'view'"
            class="form-textarea"
            maxlength="300"
          ></textarea>
          <view class="char-count">{{ (formData.completionDesc || '').length }}/300</view>
          <view class="form-error" v-if="formErrors.completionDesc">
            {{ formErrors.completionDesc }}
          </view>
        </view>

        <!-- 现场图片 -->
        <view class="form-item" v-if="formData.completionStatus === 'completed'">
          <view class="form-label">现场图片</view>
          
          <!-- 新建和编辑模式 -->
          <view v-if="pageMode === 'create' || pageMode === 'edit'" class="image-upload">
            <view class="image-list">
              <view 
                class="image-preview" 
                v-for="(item, index) in formData.images" 
                :key="index"
                @click="previewImage(item, index)"
              >
                <image :src="item.url || item.path" mode="aspectFill"/>
                <view class="delete-btn" @click.stop="deletePic(index)">
                  <text>×</text>
                </view>
              </view>
              <view 
                v-if="formData.images.length < 6" 
                class="upload-btn" 
                @click="chooseImage"
              >
                <text class="upload-icon">+</text>
                <text class="upload-text">添加图片</text>
              </view>
            </view>
            <view class="upload-tip">最多可上传6张图片</view>
          </view>

          <!-- 查看模式 -->
          <view v-else-if="pageMode === 'view' && formData.images && formData.images.length > 0" class="image-view">
            <view class="image-list">
              <view 
                class="image-preview" 
                v-for="(item, index) in formData.images" 
                :key="index"
                @click="previewImage(item, index)"
              >
                <image :src="item.url || item.path" mode="aspectFill"/>
              </view>
            </view>
          </view>

          <!-- 无图片提示 -->
          <view v-else class="no-images">
            <text>暂无图片</text>
          </view>
        </view>
      </view>

      <!-- 底部占位 -->
      <view class="bottom-safe"></view>
    </scroll-view>

    <!-- 底部提交按钮 -->
    <view class="footer-safe" v-if="pageMode !== 'view'">
      <view class="footer-content">
        <button 
          class="submit-button"
          :class="{'loading': isSubmitting}"
          @click="submitForm"
          :disabled="isSubmitting"
        >
          {{ isSubmitting ? '提交中...' : submitButtonText }}
        </button>
      </view>
    </view>



    <!-- 遮罩层 -->
    <view v-if="showTaskTypePicker || showDateTimeSelector" class="picker-mask" @click="closePickers"></view>
    
    <!-- 任务类型选择弹窗 -->
    <view v-if="showTaskTypePicker" class="picker-popup">
      <view class="picker-header">
        <text class="picker-cancel" @click="showTaskTypePicker = false">取消</text>
        <text class="picker-title">选择任务类型</text>
        <text class="picker-confirm" @click="confirmTaskType">确定</text>
      </view>
      <view class="picker-content">
        <view 
          class="picker-item" 
          v-for="(item, index) in taskTypeOptions" 
          :key="index"
          :class="{'selected': tempTaskTypeIndex === index}"
          @click="tempTaskTypeIndex = index"
        >
          <text>{{ item.label }}</text>
          <text v-if="tempTaskTypeIndex === index" class="check-mark">✓</text>
        </view>
      </view>
    </view>

    <!-- 日期时间选择弹窗 -->
    <view v-if="showDateTimeSelector" class="picker-popup datetime-picker">
      <view class="picker-header">
        <text class="picker-cancel" @click="cancelDateTime">取消</text>
        <text class="picker-title">选择时间</text>
        <text class="picker-confirm" @click="confirmDateTime">确定</text>
      </view>
      <view class="datetime-picker-content">
        <picker-view 
          class="datetime-picker-view"
          :value="dateTimePickerValue" 
          @change="onDateTimePickerChange"
        >
          <picker-view-column v-for="(range, index) in dateTimePickerRange" :key="index">
            <view 
              class="picker-view-item" 
              v-for="(item, itemIndex) in range" 
              :key="itemIndex"
            >
              {{ item }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面模式：create-新建, edit-编辑, view-查看
      pageMode: 'create',
      
      // 选择器显示状态
      showTaskTypePicker: false,
      showDateTimeSelector: false,
      
      // 临时选择的任务类型索引
      tempTaskTypeIndex: 0,
      
      // 时间选择器相关
      currentTimeType: '', // 当前选择的时间类型
      dateTimePickerValue: [0, 0, 0, 0, 0], // 年月日时分的选择值
      dateTimePickerRange: [], // 选择器的范围数据
      
      // 表单数据
      formData: {
        // 地块基础信息
        plotName: '',
        crop: '',
        manager: '',
        
        // 任务信息
        taskName: '',
        taskType: '',
        executeTime: new Date().getTime(),
        taskRemark: '',
        
        // 完成情况
        completionStatus: 'pending',
        completionTime: new Date().getTime(),
        completionDesc: '',
        images: []
      },
      
      // 任务类型选项
      taskTypeOptions: [
        { label: '施肥', value: '施肥' },
        { label: '灌溉', value: '灌溉' },
        { label: '打药', value: '打药' },
        { label: '采摘', value: '采摘' },
        { label: '巡检', value: '巡检' },
        { label: '除草', value: '除草' },
        { label: '其他', value: '其他' }
      ],
      
      // 完成状态选项
      completionStatusOptions: [
        { label: '待完成', value: 'pending' },
        { label: '已完成', value: 'completed' }
      ],
      
      // 是否正在提交
      isSubmitting: false,
      
      // 表单验证错误
      formErrors: {
        completionDesc: ''
      }
    }
  },
  
  computed: {
    // 页面标题
    pageTitle() {
      switch (this.pageMode) {
        case 'create':
          return '新建农事任务';
        case 'edit':
          return '编辑农事任务';
        default:
          return '农事任务详情';
      }
    },
    
    // 提交按钮文字
    submitButtonText() {
      switch (this.pageMode) {
        case 'create':
          return '创建任务';
        case 'edit':
          return '保存修改';
        default:
          return '';
      }
    },
    
    // 格式化后的执行时间
    formattedExecuteTime() {
      return this.formatDateTime(this.formData.executeTime);
    },
    
    // 格式化后的完成时间
    formattedCompletionTime() {
      return this.formatDateTime(this.formData.completionTime);
    },
    
    // 任务类型标签数组
    taskTypeLabels() {
      return this.taskTypeOptions.map(item => item.label);
    },
    
    // 当前任务类型索引
    taskTypeIndex() {
      const index = this.taskTypeOptions.findIndex(item => item.value === this.formData.taskType);
      return index >= 0 ? index : 0;
    }
  },
  
  onLoad(options) {
    console.log('页面加载，接收参数:', options);
    
    // 设置页面模式
    if (options.mode) {
      this.pageMode = options.mode;
    }
    
    // 设置地块基础信息
    this.formData.plotName = decodeURIComponent(options.plotName || '东区水稻田');
    this.formData.crop = decodeURIComponent(options.crop || '水稻');
    this.formData.manager = decodeURIComponent(options.manager || '张农夫');
    
    // 如果是编辑或查看模式，填充任务数据
    if (options.taskName) {
      this.formData.taskName = decodeURIComponent(options.taskName);
      this.formData.taskType = decodeURIComponent(options.taskType || '');
      this.formData.taskRemark = decodeURIComponent(options.taskRemark || '');
      
      // 处理执行时间
      if (options.executeTime) {
        const executeTimeStr = decodeURIComponent(options.executeTime);
        if (executeTimeStr.includes('-')) {
          this.formData.executeTime = new Date(executeTimeStr + ' 09:00:00').getTime();
        } else {
          this.formData.executeTime = parseInt(executeTimeStr) || new Date().getTime();
        }
      }
      
      // 如果是已完成任务，设置完成信息
      if (options.taskStatus === 'completed') {
        this.setupCompletionData();
      }
    }
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: this.pageTitle
    });
    
    // 初始化时间选择器数据
    this.initDateTimeRange();
  },
  
  methods: {
    // 初始化时间选择器范围数据
    initDateTimeRange() {
      const currentYear = new Date().getFullYear();
      
      // 年份：当前年-5 到 当前年+5
      const years = [];
      for (let i = currentYear - 5; i <= currentYear + 5; i++) {
        years.push(i + '年');
      }
      
      // 月份：1-12月
      const months = [];
      for (let i = 1; i <= 12; i++) {
        months.push(i + '月');
      }
      
      // 日期：1-31日 (动态更新)
      const days = [];
      for (let i = 1; i <= 31; i++) {
        days.push(i + '日');
      }
      
      // 小时：0-23时
      const hours = [];
      for (let i = 0; i <= 23; i++) {
        hours.push(i.toString().padStart(2, '0') + '时');
      }
      
      // 分钟：0-59分
      const minutes = [];
      for (let i = 0; i <= 59; i++) {
        minutes.push(i.toString().padStart(2, '0') + '分');
      }
      
      this.dateTimePickerRange = [years, months, days, hours, minutes];
    },
    
    // 更新日期范围（根据选择的年月）
    updateDaysRange() {
      const yearIndex = this.dateTimePickerValue[0];
      const monthIndex = this.dateTimePickerValue[1];
      
      const baseYear = new Date().getFullYear() - 5;
      const year = baseYear + yearIndex;
      const month = monthIndex + 1;
      
      // 获取该月的天数
      const daysInMonth = new Date(year, month, 0).getDate();
      const days = [];
      for (let i = 1; i <= daysInMonth; i++) {
        days.push(i + '日');
      }
      
      this.dateTimePickerRange[2] = days;
      
      // 如果当前选择的日期超过了该月的天数，调整为该月最后一天
      if (this.dateTimePickerValue[2] >= daysInMonth) {
        this.dateTimePickerValue[2] = daysInMonth - 1;
      }
    },
    
    // 显示任务类型选择器
    showTaskTypeSelector() {
      this.tempTaskTypeIndex = this.taskTypeIndex;
      this.showTaskTypePicker = true;
    },
    
    // 确认任务类型选择
    confirmTaskType() {
      this.formData.taskType = this.taskTypeOptions[this.tempTaskTypeIndex].value;
      this.showTaskTypePicker = false;
    },
    
    // 选择执行时间
    selectExecuteTime() {
      this.currentTimeType = 'executeTime';
      this.initDateTimePicker(this.formData.executeTime);
      this.showDateTimeSelector = true;
    },
    
    // 选择完成时间
    selectCompletionTime() {
      this.currentTimeType = 'completionTime';
      this.initDateTimePicker(this.formData.completionTime);
      this.showDateTimeSelector = true;
    },
    
    // 初始化日期时间选择器
    initDateTimePicker(timestamp) {
      const date = new Date(timestamp);
      const currentYear = date.getFullYear();
      const currentMonth = date.getMonth();
      const currentDate = date.getDate();
      const currentHour = date.getHours();
      const currentMinute = date.getMinutes();
      
      const baseYear = new Date().getFullYear() - 5; // 基准年份
      
      // 设置选择器的初始值
      this.dateTimePickerValue = [
        currentYear - baseYear, // 年份索引
        currentMonth, // 月份索引（0-11）
        currentDate - 1, // 日期索引（0开始）
        currentHour, // 小时索引
        currentMinute // 分钟索引
      ];
      
      // 更新日期范围
      this.updateDaysRange();
    },
    
    // 日期时间选择器变更
    onDateTimePickerChange(e) {
      this.dateTimePickerValue = e.detail.value;
      // 当年月变更时，更新日期范围
      this.updateDaysRange();
    },
    
    // 确认时间选择
    confirmDateTime() {
      const values = this.dateTimePickerValue;
      const baseYear = new Date().getFullYear() - 5;
      const year = baseYear + values[0];
      const month = values[1];
      const date = values[2] + 1;
      const hour = values[3];
      const minute = values[4];
      
      const selectedTime = new Date(year, month, date, hour, minute).getTime();
      
      if (this.currentTimeType === 'executeTime') {
        this.formData.executeTime = selectedTime;
      } else if (this.currentTimeType === 'completionTime') {
        this.formData.completionTime = selectedTime;
      }
      
      this.showDateTimeSelector = false;
      
      uni.showToast({
        title: '时间已设置',
        icon: 'success',
        duration: 1500
      });
    },
    
    // 取消时间选择
    cancelDateTime() {
      this.showDateTimeSelector = false;
    },
    
    // 关闭所有选择器
    closePickers() {
      this.showTaskTypePicker = false;
      this.showDateTimeSelector = false;
    },
    
    // 选择完成状态
    selectCompletionStatus(value) {
      this.formData.completionStatus = value;
      if (value === 'completed') {
        this.formData.completionTime = new Date().getTime();
      }
    },
    
    // 格式化日期时间
    formatDateTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 6 - this.formData.images.length,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          console.log('选择图片成功:', res);
          
          res.tempFilePaths.forEach((path, index) => {
            const imageItem = {
              url: path,
              path: path,
              status: 'success'
            };
            this.formData.images.push(imageItem);
          });
          
          if (res.tempFilePaths.length > 0) {
            uni.showToast({
              title: `已选择${res.tempFilePaths.length}张图片`,
              icon: 'success'
            });
          }
        },
        fail: (err) => {
          console.error('选择图片失败:', err);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
    },

    // 删除图片
    deletePic(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这张图片吗？',
        success: (res) => {
          if (res.confirm) {
            this.formData.images.splice(index, 1);
            uni.showToast({
              title: '已删除',
              icon: 'none'
            });
          }
        }
      });
    },

    // 预览图片
    previewImage(item, index) {
      const urls = this.formData.images.map(file => file.url || file.path);
      uni.previewImage({
        urls: urls,
        current: index
      });
    },
    
    // 表单验证
    validateForm() {
      // 重置错误信息
      this.formErrors = {
        completionDesc: ''
      };
      
      // 基本字段验证
      if (!this.formData.taskName.trim()) {
        uni.showToast({
          title: '请输入任务名称',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.taskType) {
        uni.showToast({
          title: '请选择任务类型',
          icon: 'none'
        });
        return false;
      }
      
      // 新建和编辑模式且已完成状态下的验证
      if ((this.pageMode === 'create' || this.pageMode === 'edit') && this.formData.completionStatus === 'completed') {
        if (!this.formData.completionDesc.trim()) {
          this.formErrors.completionDesc = '请填写完成说明';
          uni.showToast({
            title: '请填写完成说明',
            icon: 'none'
          });
          return false;
        }
      }
      
      return true;
    },
    
    // 提交表单
    submitForm() {
      if (!this.validateForm()) {
        return;
      }
      
      this.isSubmitting = true;
      
      // 构建提交数据
      const submitData = {
        ...this.formData,
        taskStatus: this.formData.completionStatus || 'pending',
        imageUrls: this.formData.images.map(item => item.url || item.path)
      };
      
      console.log('提交数据:', submitData);
      
      uni.showLoading({
        title: '提交中...',
        mask: true
      });
      
      // 模拟提交过程
      setTimeout(() => {
        this.isSubmitting = false;
        uni.hideLoading();
        
        const successMessage = this.pageMode === 'create' ? '任务创建成功' : '保存修改成功';
        
        uni.showToast({
          title: successMessage,
          icon: 'success',
          duration: 1500
        });
        
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1500);
    },
    
    // 设置完成情况数据（用于编辑和查看模式）
    setupCompletionData() {
      this.formData.completionStatus = 'completed';
      this.formData.completionTime = this.formData.executeTime + 8 * 60 * 60 * 1000;
      this.formData.completionDesc = '已按要求完成任务，现场情况良好，所有步骤都按标准执行';
      this.formData.images = [
        {
          url: 'https://cdn.uviewui.com/uview/album/1.jpg',
          status: 'success'
        },
        {
          url: 'https://cdn.uviewui.com/uview/album/2.jpg',
          status: 'success'
        }
      ];
    }
  }
}
</script>

<style scoped>
.page-container {
  height: 100vh;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: column;
}

.page-scroll {
  flex: 1;
  overflow: hidden;
}

/* 地块基础信息卡片 */
.info-card {
  background: #F9F9F9;
  margin: 24rpx;
  padding: 24rpx;
  border-radius: 8rpx;
  border: 1rpx solid #E5E5E5;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #E5E5E5;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
  padding: 8rpx 0;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666666;
  flex-shrink: 0;
}

.info-value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

/* 任务填写表单 */
.form-card {
  background: #FFFFFF;
  margin: 0 24rpx 24rpx;
  padding: 24rpx;
  border-radius: 8rpx;
  border: 1rpx solid #E5E5E5;
}

.section-divider {
  height: 1rpx;
  background: #F0F0F0;
  margin: 32rpx 0 24rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

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

.form-item:last-child {
  margin-bottom: 0;
}

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

.form-label.required::before {
  content: '*';
  color: #FF6B6B;
  margin-right: 4rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  background: #F8F8F8;
  border: 1rpx solid #E5E5E5;
  border-radius: 8rpx;
  padding: 0 16rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
}

.form-input:focus {
  background: #FFFFFF;
  border-color: #3BB44A;
}

.form-input::placeholder {
  color: #CCCCCC;
}

.form-input:disabled {
  background: #F8F8F8;
  color: #999999;
}

.select-wrapper {
  position: relative;
  width: 100%;
}

.select-input {
  cursor: pointer;
}

.select-arrow {
  position: absolute;
  right: 16rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999999;
  font-size: 20rpx;
  pointer-events: none;
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  background: #F8F8F8;
  border: 1rpx solid #E5E5E5;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
  resize: none;
  line-height: 1.5;
}

.form-textarea:focus {
  background: #FFFFFF;
  border-color: #3BB44A;
}

.form-textarea::placeholder {
  color: #CCCCCC;
}

.form-textarea:disabled {
  background: #F8F8F8;
  color: #999999;
}

.char-count {
  font-size: 24rpx;
  color: #CCCCCC;
  text-align: right;
  margin-top: 8rpx;
}

.form-error {
  font-size: 24rpx;
  color: #FF6B6B;
  margin-top: 8rpx;
}

/* 单选按钮样式 */
.radio-group {
  display: flex;
  gap: 32rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-circle {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #CCCCCC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
}

.radio-circle.radio-checked {
  border-color: #3BB44A;
  background-color: #3BB44A;
}

.radio-dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #FFFFFF;
  border-radius: 50%;
}

.radio-label {
  font-size: 28rpx;
  color: #333333;
}

/* 完成状态样式 */
.status-completed {
  display: flex;
  align-items: center;
  color: #3BB44A;
  font-size: 28rpx;
}

.status-icon {
  width: 32rpx;
  height: 32rpx;
  background: #3BB44A;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
  font-size: 20rpx;
  line-height: 1;
}

/* 图片上传样式 */
.image-upload, .image-view {
  width: 100%;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-preview {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
  background: #F5F5F5;
}

.image-preview image {
  width: 100%;
  height: 100%;
}

.delete-btn {
  position: absolute;
  top: -6rpx;
  right: -6rpx;
  width: 32rpx;
  height: 32rpx;
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  line-height: 1;
}

.upload-btn {
  width: 160rpx;
  height: 160rpx;
  background: #F8F8F8;
  border: 2rpx dashed #DDDDDD;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  font-size: 32rpx;
  margin-bottom: 8rpx;
  color: #999999;
}

.upload-text {
  font-size: 24rpx;
  color: #999999;
}

.upload-tip {
  font-size: 24rpx;
  color: #999999;
  margin-top: 12rpx;
}

.no-images {
  padding: 40rpx 0;
  text-align: center;
  color: #CCCCCC;
  font-size: 28rpx;
}

/* 底部安全区域 */
.bottom-safe {
  height: 120rpx;
}

.footer-safe {
  background: #FFFFFF;
  border-top: 1rpx solid #E5E5E5;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.footer-content {
  padding: 24rpx;
}

.submit-button {
  width: 100%;
  height: 88rpx;
  background: #3BB44A;
  color: #FFFFFF;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-button:active {
  background: #2D8C3C;
}

.submit-button:disabled,
.submit-button.loading {
  background: #CCCCCC;
}

/* 选择器弹窗样式 */
.picker-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.picker-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 0 0;
  z-index: 1000;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #E5E5E5;
}

.picker-cancel, .picker-confirm {
  font-size: 30rpx;
  color: #3BB44A;
}

.picker-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.picker-content {
  max-height: 400rpx;
  overflow-y: auto;
}

.picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #F0F0F0;
  font-size: 30rpx;
  color: #333333;
}

.picker-item.selected {
  color: #3BB44A;
}

.picker-item:last-child {
  border-bottom: none;
}

.check-mark {
  color: #3BB44A;
  font-size: 28rpx;
}

/* 日期时间选择器样式 */
.datetime-picker {
  height: 60vh;
}

.datetime-picker-content {
  height: calc(100% - 100rpx);
  padding: 0;
}

.datetime-picker-view {
  width: 100%;
  height: 100%;
}

.picker-view-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  font-size: 32rpx;
  color: #333333;
}
</style>