exhibit-front/subPages/home/repairChange.vue

<template>
  <view class="repair-change">
    <!-- 处理内容 -->
    <view class="process-content">
      <view class="info-header">
        <view class="red-line"></view>
        <text class="info-title">处理内容</text>
      </view>
      
      <!-- 维修人 -->
      <view class="form-item">
        <text class="label">维修人</text>
        <view class="input-area">
          <input 
            v-model="processData.repairName" 
            placeholder="请填写" 
            class="input-field"
            ref="maintainerInput"
          />
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="form-item">
        <text class="label">联系方式</text>
        <view class="input-area">
          <input 
            v-model="processData.phone" 
            placeholder="请填写" 
            class="input-field"
            ref="maintainerInput"
          />
        </view>
      </view>
      
      <!-- 维修日期 -->
      <view class="form-item" @click="showDatePicker">
        <text class="label">维修日期</text>
        <view class="select-area">
          <text class="value" :class="{ placeholder: !processData.repairDate }">{{ processData.repairDate || '请选择' }}</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="processData.content" 
          placeholder="请输入处理内容" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          :textStyle="{ color: '#000' }"
          :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 getImageList(processData.image)" :key="index" class="image-item">
          <image :src="img.trim()" mode="aspectFill" @click="previewImage(img.trim())"></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">
        <text class="label">是否产生费用</text>
        <view class="radio-options">
          <view 
            class="radio-item" 
            :class="{ active: processData.isExpend === '1' }"
            @click="selectCost('1')"
          >
            <view class="radio-dot" :class="{ active: processData.isExpend === '1' }"></view>
            <text :class="{ active: processData.isExpend === '1' }">是</text>
          </view>
          <view 
            class="radio-item" 
            :class="{ active: processData.isExpend === '0' }"
            @click="selectCost('0')"
          >
            <view class="radio-dot" :class="{ active: processData.isExpend === '0' }"></view>
            <text :class="{ active: processData.isExpend === '0' }">否</text>
          </view>
        </view>
      </view>
      
      <!-- 产生费用 -->
      <view class="form-item" v-if="processData.isExpend === '1'">
        <text class="label">产生费用</text>
        <view class="input-area">
          <input 
            v-model="amount" 
            placeholder="请输入费用" 
            disabled
            class="input-field"
            ref="maintainerInput"
          />
        </view>
      </view>
      
      <!-- 费用详情表格 -->
      <view class="cost-table" v-if="processData.isExpend === '1'">
        <view class="table-header">
          <text class="header-cell">费用名称</text>
          <text class="header-cell">数量</text>
          <text class="header-cell">金额</text>
          <text class="header-cell"></text>
        </view>
        
        <view class="table-row" v-for="(item, index) in processData.costDetails" :key="index">
          <view class="cell-input">
            <uv-input 
              v-model="item.name" 
              placeholder="费用名称" 
              border="none"
              :custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }"
            ></uv-input>
          </view>
          <view class="cell-input">
            <uv-input 
              v-model="item.quantity" 
              placeholder="数量" 
              border="none"
              :custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }"
            ></uv-input>
          </view>
          <view class="cell-input">
            <uv-input 
              v-model="item.amount" 
              placeholder="金额" 
              border="none"
              :custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }"
            ></uv-input>
          </view>
          <view class="cell-action">
            <view class="action-btn delete-btn" @click="deleteCostItem(index)" v-if="processData.costDetails.length > 1">
              <uv-icon name="close" size="14" color="#fff"></uv-icon>
            </view>
            <view class="action-btn add-btn" @click="addCostItem" v-if="index === processData.costDetails.length - 1">
              <uv-icon name="plus" size="14" color="#fff"></uv-icon>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 问题是否解决 -->
      <view class="form-item">
        <text class="label">问题是否解决</text>
        <view class="radio-options">
          <view 
            class="radio-item" 
            :class="{ active: processData.isFix === '1' }"
            @click="selectResolved('1')"
          >
            <view class="radio-dot" :class="{ active: processData.isFix === '1' }"></view>
            <text :class="{ active: processData.isFix === '1' }">是</text>
          </view>
          <view 
            class="radio-item" 
            :class="{ active: processData.isFix === '0' }"
            @click="selectResolved('0')"
          >
            <view class="radio-dot" :class="{ active: processData.isFix === '0' }"></view>
            <text :class="{ active: processData.isFix === '0' }">否</text>
          </view>
        </view>
      </view>
      
      <!-- 备注 -->
      <view class="form-item">
        <text class="label">备注</text>
      </view>
      <view class="textarea-container">
        <uv-textarea 
          v-model="processData.remark" 
          placeholder="备注" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>
      
      <!-- 立即维修按钮 -->
      <view class="repair-btn-container">
        <uv-button 
          type="primary" 
          text="点击提交" 
          :custom-style="{ backgroundColor: '#C70019', borderRadius: '25px' }"
          @click="startRepair"
        ></uv-button>
      </view>
    </view>
    
    <!-- 日期选择器 -->
    <uv-datetime-picker 
      confirm-color="#C70019"
      ref="datePicker"
      v-model="timeValue"
      mode="date"
      @confirm="confirmDate"
    ></uv-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timeValue: Number(new Date()),
      id: '',
      showpieceId: '',
      
      // 处理内容（可编辑）
      processData: {
        repairName: '',
        phone: '',
        repairDate: '',
        content: '',
        image: '',
        isExpend: '0',
        costDetails: [
          { name: '', quantity: '', amount: '' }
        ],
        isFix: '0',
        remark: ''
      },
    }
  },
  
  computed: {
    // 计算总金额
    amount() {
      return this.processData.costDetails.reduce((sum, item) => {
        return sum + (Number(item.quantity) * parseFloat(item.amount || 0))
      }, 0)
    }
  },
  
  onLoad(args) {
    this.id = args.id
    this.showpieceId = args.showpieceId
  },
  
  methods: {
    // 获取图片列表
    getImageList(imageStr) {
      if (!imageStr || typeof imageStr !== 'string') {
        return []
      }
      return imageStr.split(',').filter(img => img && img.trim())
    },
    
    // 预览图片
    previewImage(img) {
      uni.previewImage({
        urls: [img],
        current: img
      })
    },
    
    // 显示日期选择器
    showDatePicker() {
      this.$refs.datePicker.open()
    },
    
    // 确认日期
    confirmDate(e) {
      this.processData.repairDate = this.$utils.formatTime(e.value)
    },
    
    // 上传图片
    async uploadImage() {
      try {
        const result = await this.$utils.chooseAndUpload()
        if (result && result.success) {
          console.log(result);
          
          // 将新图片URL添加到字符串中
          if (this.processData.image) {
            this.processData.image += ',' + result.url
          } else {
            this.processData.image = result.url
          }
        }
      } catch (error) {
        console.error('图片上传失败:', error)
        uni.showToast({
          title: '图片上传失败',
          icon: 'error'
        })
      }
    },
    
    // 删除图片
    deleteImage(index) {
      const imageList = this.getImageList(this.processData.image)
      imageList.splice(index, 1)
      this.processData.image = imageList.join(',')
    },
    
    // 选择是否产生费用
    selectCost(value) {
      this.processData.isExpend = value
      if (!value) {
        this.processData.amount = 0
        this.processData.costDetails = [{ name: '', quantity: '', amount: '' }]
      }
    },
    
    // 添加费用项
    addCostItem() {
      this.processData.costDetails.push({ name: '', quantity: '', amount: '' })
    },
    
    // 删除费用项
    deleteCostItem(index) {
      this.processData.costDetails.splice(index, 1)
    },
    
    // 选择问题是否解决
    selectResolved(value) {
      this.processData.isFix = value
    },
    
    // 立即维修
    async startRepair() {
      // 验证必填项
      if (!this.processData.repairName) {
        uni.showToast({
          title: '请输入维修人',
          icon: 'none'
        })
        return
      }
      
      if (!this.processData.phone) {
        uni.showToast({
          title: '请输入联系方式',
          icon: 'none'
        })
        return
      }
      
      if (!this.processData.repairDate) {
        uni.showToast({
          title: '请选择维修日期',
          icon: 'none'
        })
        return
      }
      
      if (!this.processData.content) {
        uni.showToast({
          title: '请输入处理内容',
          icon: 'none'
        })
        return
      }
      
      if (this.processData.isFix === null) {
        uni.showToast({
          title: '请选择问题是否解决',
          icon: 'none'
        })
        return
      }

      if (this.processData.isExpend === '1') {
        // 如果总金额为0则没有消费信息
        if (!this.amount) {
          uni.showToast({
            title: '请添加费用明细',
            icon: 'none'
          })
          return
        }
      }
      
      const tempData = {...this.processData}
      delete tempData.costDetails
      const tempDataList = [...this.processData.costDetails]
      if (this.processData.isExpend === '1') {
        tempData.expenseList = tempDataList.map(item => `${item.name},${item.quantity},${item.amount}`).join(';')
      } else {
        delete tempData.expenseList
      }
      
      const submitRes = await this.$api.exhibit.updateRepair({
        id: this.id,
        ...tempData,
        amount: this.amount
      })

      if (submitRes.code === 200) {
        uni.showToast({
          title: submitRes.message,
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 400)
      } else {
        uni.showToast({
          title: submitRes.message,
          icon: 'none'
        })
      }
    },
    async getDetail(){
      const res = await this.$api.exhibit.queryRepairById({ repairId: this.id })
      if (res.code === 200) {
        const detail = res.result
        
        // 基本信息字段映射
        this.processData.repairName = detail.repairName || ''
        this.processData.phone = detail.phone || ''
        this.processData.repairDate = detail.repairDate || ''
        this.processData.content = detail.content || ''
        this.processData.remark = detail.remark || ''
        
        // 维修状态字段映射
        this.processData.isFix = detail.isFix || '0'
        this.processData.isExpend = detail.isExpend || '0'
        
        // 处理图片字段
        if (detail.image && detail.image.trim()) {
          // 去除首尾空格，然后按逗号分割，过滤空字符串，并重新组合为字符串
          this.processData.image = detail.image.trim().split(',').filter(img => img.trim()).map(img => img.trim()).join(',')
        } else {
          this.processData.image = ''
        }
        
        // 设置amount字段
        this.amount = detail.amount || 0
        
        // 处理费用列表数据
        if (detail.exhibitRepairExpenseList && Array.isArray(detail.exhibitRepairExpenseList)) {
          this.processData.costDetails = detail.exhibitRepairExpenseList.map(item => ({
            name: item.title || '',
            quantity: item.quantity || 1,
            amount: item.amount || 0
          }))
        } else {
          this.processData.costDetails = []
        }
      }
    }
  },
  onLoad(args) {
    this.id = args.id
    this.getDetail()
  },
}
</script>

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

.process-content {
  margin: 18rpx;
  background: #ffffff;
  border-radius: 15rpx;
  box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
  padding: 30rpx;
  
  .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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .input-area {
      flex: 1;
      border-radius: 8rpx;
      padding: 2rpx 24rpx;
      margin-left: 24rpx;
      
      .input-field {
        width: 100%;
        font-size: 30rpx;
        color: $primary-text-color;
        background: transparent;
        border: none;
        outline: none;
        text-align: right;
        
        &::placeholder {
          color: $secondary-text-color;
        }
      }
    }
    
    .label {
      font-size: 30rpx;
      color: $primary-text-color;
      flex-shrink: 0;
      
      &.active {
        font-weight: bold;
      }
    }
    
    .value {
      font-size: 30rpx;
      color: $primary-text-color;
      
      &.placeholder {
        color: $secondary-text-color;
      }
      
      &.red-text {
        color: $primary-color;
      }
    }
    
    .select-area {
      display: flex;
      align-items: center;
      gap: 16rpx;
    }
  }
  
  .textarea-container {
    margin: 16rpx 0;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    padding: 8rpx 16rpx;
  }
  
  .image-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    margin: 16rpx 0;
    
    .upload-btn {
      width: 160rpx;
      height: 160rpx;
      border: 2rpx dashed $primary-color;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border-radius: 8rpx;
    }
    
    .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;
      }
    }
  }
  
  .radio-options {
    display: flex;
    gap: 80rpx;
    
    .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;
          
          &::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;
        }
      }
    }
  }
  
  // 费用表格样式
  .cost-table {
    margin: 16rpx 0;
    border: 2rpx solid #f0f0f0;
    border-radius: 8rpx;
    overflow: hidden;
    
    .table-header {
      display: flex;
      background-color: #f8f8f8;
      
      .header-cell {
        flex: 1;
        padding: 24rpx 16rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: $primary-text-color;
        text-align: left;
        border-right: 2rpx solid #f0f0f0;
        
        &:first-child {
          flex: 2;
          text-align: left;
        }
        
        &:last-child {
          border-right: none;
        }
      }
    }
    
    .table-row {
      display: flex;
      border-top: 2rpx solid #f0f0f0;
      
      .cell-input {
        flex: 1;
        padding: 8rpx;
        border-right: 2rpx solid #f0f0f0;
        
        &:first-child {
          flex: 2;
        }
        
        &:last-child {
          border-right: none;
        }
      }
      
      .cell-action {
        width: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        padding: 8rpx;
        
        .action-btn {
          width: 36rpx;
          height: 36rpx;
          padding: 4rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &.add-btn {
            background-color: #1a9c10;
          }
          
          &.delete-btn {
            background-color: $primary-color;
          }
        }
      }
    }
  }
  
  // 立即维修按钮
  .repair-btn-container {
    margin-top: 40rpx;
    padding-top: 32rpx;
    border-top: 2rpx solid #f0f0f0;
  }
}
</style>