exhibit-front/subPages/home/repairSubmit.vue

<template>
  <view class="repair-submit">
    <!-- 导航栏 -->
    <!-- <uv-navbar title="报修提交" :border="false" bg-color="#ffffff" title-color="#333333" /> -->
    
    <!-- 报修基本信息 -->
    <view class="repair-info">
      <view class="info-header">
        <view class="red-line"></view>
        <text class="info-title">报修基本信息</text>
      </view>
      
      <!-- 报修日期 -->
      <view class="form-item" @click="showDatePicker">
        <text class="label">报修日期</text>
        <view class="select-area">
          <text class="value" :class="{ placeholder: !malfunctionDate }">{{ malfunctionDate || '请选择' }}</text>
          <uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
        </view>
      </view>
      
      <!-- 故障紧急程度 -->
      <view class="form-item " @click="showUrgencyPicker">
        <text class="label">故障紧急程度</text>
        <view class="select-area">
          <text class="value" :class="{ placeholder: !urgency }">{{ urgency.label || '请选择' }}</text>
          <uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
        </view>
      </view>
      
      <!-- 故障情况 -->
      <view class="form-item form-item-header">
        <text class="label active">故障情况</text>
      </view>
      
      <!-- 故障情况选择 -->
      <view class="form-item" @click="showFaultPicker">
        <text class="label">故障情况</text>
        <view class="select-area">
          <text class="value" :class="{ placeholder: !malfunctionStatus }">{{ malfunctionStatus.label || '请选择' }}</text>
          <uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
        </view>
      </view>
      
      <!-- 故障情况描述 -->
      <view class="form-item">
        <text class="label">故障情况描述</text>
      </view>
      <view class="textarea-container">
        <uv-textarea 
          v-model="malfunctionDesc" 
          placeholder="请对故障情况进行描述" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>
      
      <!-- 故障图片 -->
      <view class="form-item">
        <text class="label">故障图片</text>
      </view>
      <view class="image-upload">
        <view v-for="(img, index) in malfunctionImage" :key="index" class="image-item">
          <image :src="img" mode="aspectFill" @click="previewImage(img)"></image>
          <view class="delete-btn" @click="deleteImage(index)">
            <uv-icon name="close" size="12" color="#fff"></uv-icon>
          </view>
        </view>
        <view class="upload-btn" @click="uploadImage">
          <uv-icon name="camera" size="34" color="#C70019"></uv-icon>
        </view>
      </view>
      
      <!-- 故障首次发生时间 -->
      <view class="form-item" @click="showFirstOccurTimePicker">
        <text class="label">故障首次发生时间</text>
        <view class="select-area">
          <text class="value" :class="{ placeholder: !firstDate }">{{ firstDate || '请选择' }}</text>
          <uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
        </view>
      </view>
      
      <!-- 发生频率 -->
        <view class="form-item">
          <text class="label">发生频率</text>
          <view class="radio-options">
            <view 
              v-for="(item, index) in frequencyOptions" 
              :key="index" 
              class="radio-item" 
              :class="{ active: frequency === item.value }"
              @click="selectFrequency(item.value)"
            >
              <view class="radio-dot" :class="{ active: frequency === item.value }"></view>
              <text :class="{ active: frequency === item.value }">{{ item.label }}</text>
            </view>
          </view>
        </view>
      
      <!-- 请描述与故障设备发生主要故障的具体条件 -->
      <!-- <view class="form-item">
        <text class="label">请描述与故障设备发生主要故障的具体条件</text>
      </view> -->
      <view class="textarea-container">
        <uv-textarea 
          v-model="reason" 
          placeholder="请填写说明故障发生频率的触发条件" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>
      
      <!-- 是否影响使用 -->
      <view class="form-item" @click="showImpactPicker">
        <text class="label">是否影响使用</text>
        <view class="select-area">
          <text class="value" :class="{ placeholder: !isAffectUse }">{{ isAffectUse.label || '请选择' }}</text>
          <uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
        </view>
      </view>
      
      <!-- 采取的临时措施 -->
             <!-- 故障情况 -->
      <view class="form-item form-item-header">
        <text class="label active">采取的临时措施</text>
      </view>
       <!-- <view class="form-item">
         <text class="label">是否采取临时措施</text>
       </view>
       <view class="textarea-container">
         <uv-textarea 
           v-model="malfunctionName" 
           placeholder="如有采取临时措施请填写措施说明" 
           :maxlength="200"
           :show-confirm-bar="false"
           height="60"
           border="none"
           :custom-style="{ backgroundColor: '#f5f5f5' }"
         ></uv-textarea>
       </view> -->
      
      <!-- 是否采取的对措施 -->
       <view class="form-item">
         <text class="label">是否采取的对措施</text>
         <view class="radio-options">
           <view 
             class="radio-item" 
             :class="{ active: isMeasure === '1' }"
             @click="selectMeasures('1')"
           >
             <view class="radio-dot" :class="{ active: isMeasure === '1' }"></view>
             <text :class="{ active: isMeasure === '1' }">是</text>
           </view>
           <view 
             class="radio-item" 
             :class="{ active: isMeasure === '0' }"
             @click="selectMeasures('0')"
           >
             <view class="radio-dot" :class="{ active: isMeasure === '0' }"></view>
             <text :class="{ active: isMeasure === '0' }">否</text>
           </view>
         </view>
       </view>
       <view class="textarea-container">
         <uv-textarea 
           v-model="malfunctionName" 
           placeholder="如有采取临时措施请填写措施说明" 
           :maxlength="200"
           :show-confirm-bar="false"
           height="60"
           border="none"
           :custom-style="{ backgroundColor: '#f5f5f5' }"
         ></uv-textarea>
       </view>
      
      <!-- 是否影响体验 -->
       <view class="form-item">
         <text class="label">是否影响体验</text>
         <view class="radio-options">
           <view 
             class="radio-item" 
             :class="{ active: isAffectExperience === '1' }"
             @click="selectExperience('1')"
           >
             <view class="radio-dot" :class="{ active: isAffectExperience === '1' }"></view>
             <text :class="{ active: isAffectExperience === '1' }">是</text>
           </view>
           <view 
             class="radio-item" 
             :class="{ active: isAffectExperience === '0' }"
             @click="selectExperience('0')"
           >
             <view class="radio-dot" :class="{ active: isAffectExperience === '0' }"></view>
             <text :class="{ active: isAffectExperience === '0' }">否</text>
           </view>
         </view>
       </view>
      
      <!-- 备注 -->
      <view class="form-item">
        <text class="label">备注</text>
      </view>
      <view class="textarea-container">
        <uv-textarea 
          v-model="remark" 
          placeholder="备注" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-container">
      <uv-button 
        type="primary" 
        text="立即提交" 
        :custom-style="{ backgroundColor: '#C70019', borderRadius: '25px' }"
        @click="submitRepair"
      ></uv-button>
    </view>
    
    <!-- 选择器 -->
    <uv-picker 
    confirm-color="#C70019"
      ref="urgencyPicker"
      :columns="urgencyColumns"
      keyName="label"
      @confirm="confirmUrgency"
      @cancel="cancelUrgency"
    ></uv-picker>
    
    <uv-picker 
    confirm-color="#C70019"
      ref="faultPicker"
      :columns="faultColumns"
      @confirm="confirmFault"
      @cancel="cancelFault"
    ></uv-picker>
    
    <!-- 故障首次发生时间选择器 -->
    <uv-datetime-picker
      ref="firstOccurTimePicker"
      mode="date"
        confirm-color="#C70019"
      @confirm="confirmFirstOccurTime"
    ></uv-datetime-picker>
    
    <uv-picker 
    confirm-color="#C70019"
      ref="impactPicker"
      
      :columns="impactColumns"
      @confirm="confirmImpact"
      @cancel="cancelImpact"
      keyName="label"
    ></uv-picker>
    
    <!-- 日期选择器 -->
    <uv-datetime-picker
      confirm-color="#C70019"
      ref="datePicker"
      mode="date"
      @confirm="confirmDate"
    ></uv-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
      malfunctionDate: '',
      urgency: '',
      malfunctionStatus: '',
      malfunctionDesc: '',
      malfunctionImage: [],
      firstDate: '',
      frequency: '1',
      reason: '',
      isAffectUse: '0',
      malfunctionName: '',
      isMeasure: '0',
      isAffectExperience: '0',
      remark: '',
      showpieceId: '',

      
      // 频率选项
      frequencyOptions: [
        { label: '持续性问题', value: '0' },
        { label: '间歇性问题', value: '1' }
      ],
      
      // 选择器数据
      urgencyColumns: [
        [
        { label: '一般', value: '0' },
        { label: '紧急', value: '1'}
        ]
      ],

      faultColumns: [['硬件故障', '软件故障', '网络故障', '其他']],
      impactColumns: [[
        { label: '是', value: '1' }, 
        { label: '否', value: '0' }
      ]],
    }
  },
  
  methods: {
    // 显示日期选择器
    showDatePicker() {
      this.$refs.datePicker.open()
    },
    
    // 确认日期选择
    confirmDate(e) {
      const date = new Date(e.value)
      this.malfunctionDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    
    // 显示紧急程度选择器
    showUrgencyPicker() {
      this.$refs.urgencyPicker.open()
    },
    
    // 确认紧急程度
    confirmUrgency(e) {
      this.urgency = e.value[0]
    },
    
    // 取消紧急程度选择
    cancelUrgency() {
      // 取消操作
    },
    
    // 显示故障情况选择器
    showFaultPicker() {
      this.$refs.faultPicker.open()
    },
    
    // 确认故障情况
    confirmFault(e) {
      this.malfunctionStatus = e.value[0]
    },
    
    // 取消故障情况选择
    cancelFault() {
      // 取消操作
    },
    
    // 显示故障首次发生时间选择器
    showFirstOccurTimePicker() {
      this.$refs.firstOccurTimePicker.open()
    },
    
    // 确认故障首次发生时间
    confirmFirstOccurTime(e) {
      const date = new Date(e.value)
      this.firstDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    
    // 显示影响使用选择器
    showImpactPicker() {
      this.$refs.impactPicker.open()
    },
    
    // 确认影响使用
    confirmImpact(e) {
      this.isAffectUse = e.value[0]
    },
    
    // 取消影响使用选择
    cancelImpact() {
      // 取消操作
    },
    
    // 选择频率
    selectFrequency(value) {
      this.frequency = value
    },
    
    // 选择是否采取措施
    selectMeasures(value) {
      this.isMeasure = value
    },
    
    // 选择是否影响体验
    selectExperience(value) {
      this.isAffectExperience = value
    },
    
    // 上传图片
    async uploadImage() {
      try {
        const result = await this.$utils.chooseAndUpload()
        if (result && result.success) {
          console.log(result);
          
          this.malfunctionImage.push(result.url)
        }
      } catch (error) {
        console.error('头像上传失败:', error)
        uni.showToast({
          title: '头像上传失败',
          icon: 'error'
        })
      }
    },
    
    // 删除图片
    deleteImage(index) {
      this.malfunctionImage.splice(index, 1)
    },
    
    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: this.malfunctionImage,
        current: url
      })
    },
    
    // 提交报修
    async submitRepair() {
      // 表单验证
      if (!this.urgency) {
        uni.showToast({ title: '请选择故障紧急程度', icon: 'none' })
        return
      }
      // if (!this.malfunctionStatus) {
      //   uni.showToast({ title: '请选择故障情况', icon: 'none' })
      //   return
      // }
      if (!this.malfunctionDesc.trim()) {
        uni.showToast({ title: '请填写故障情况描述', icon: 'none' })
        return
      }
      
      // 提交数据
      const formData = {
        showpieceId: this.showpieceId,
        malfunctionDate: this.malfunctionDate,
        urgency: this.urgency.value,
        malfunctionStatus: this.malfunctionStatus.id,
        malfunctionDesc: this.malfunctionDesc,
        malfunctionImage: this.malfunctionImage.join(','),
        firstDate: this.firstDate,
        frequency: this.frequency,
        reason: this.reason,
        isAffectUse: this.isAffectUse.value,
        malfunctionName: this.malfunctionName,
        isMeasure: this.isMeasure,
        isAffectExperience: this.isAffectExperience,
        remark: this.remark
      }
      
      // console.log('提交数据:', formData)
      // uni.showToast({ title: '提交成功', icon: 'success' })
      const subRes = await this.$api.exhibit.addMalfunction(formData)
      if (subRes.code === 200) {
        uni.showToast({ title: subRes.message})
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      }else{
        uni.showToast({ title: subRes.message, icon: 'none' })
      }
    }
  },
  onLoad(args) {
    this.showpieceId = args.id
  }
}
</script>

<style lang="scss" scoped>
.repair-submit {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 200rpx;
}

.repair-info {
  margin: 18rpx;
  background: #ffffff;
  border-radius: 15rpx;
  box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
  padding: 40rpx;
  
  .info-header {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    
    .red-line {
       width: 9rpx;
       height: 33rpx;
       background-color: $primary-color;
       margin-right: 7rpx;
       border-radius: 5rpx;
     }
    
    .info-title {
      font-size: 30rpx;
      font-weight: bold;
      color: $primary-text-color;
    }
  }
  
  .form-item-header {
    border-bottom: none;
    margin-top: 20rpx;
  }
  .form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
  
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      font-size: 30rpx;
      color: $primary-text-color;
      flex-shrink: 0;
      &.active {
        font-weight: bold;
        
      }
    }


    
    .value {
      font-size: 30rpx;
      color: $secondary-text-color;
      
      &.placeholder {
        color: $secondary-text-color;
      }
    }
    
    .select-area {
      display: flex;
      align-items: center;
      gap: 16rpx;
    }
  }
  
  .textarea-container {
    // margin: 16rpx 0 32rpx 0;
    // background-color: #f5f5f5;
    border-radius: 8rpx;
    // padding: 16rpx;
  }
  
  .image-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    margin: 16rpx 0;
    
    .upload-btn {
       width: 160rpx;
       height: 160rpx;
       border: 2rpx dashed $primary-color;
      //  border-radius: 8rpx;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: #fff;
     }
    
    .image-item {
      position: relative;
      width: 160rpx;
      height: 160rpx;
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
      
      .delete-btn {
        position: absolute;
        top: -12rpx;
        right: -12rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: #ff4757;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  

  

  
  .hint-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 16rpx;
  }
  
  .form-item .radio-options {
    display: flex;
    gap: 60rpx;
    
    .radio-item {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .radio-dot {
        width: 32rpx;
        height: 32rpx;
        border: 4rpx solid #ddd;
        border-radius: 50%;
        position: relative;
        
        &.active {
          border-color: $primary-color;
          color: $primary-color;
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16rpx;
            height: 16rpx;
            background-color: $primary-color;
            border-radius: 50%;
          }
        }
      }
      
      text {
        font-size: 30rpx;
        color: $secondary-text-color;
        
        &.active {
          color: $primary-color;
        }
      }
    }
  }
}

.submit-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32rpx;
  background-color: #fff;
  border-top: 2rpx solid #f0f0f0;
}
</style>