bxztApp/packages/mobile/src/views/DisasterManagement/WaterDisaster/CubeCalculateDialog.vue

<template>
  <!-- 损失计算弹窗 -->
  <van-dialog
    v-model:show="visible"
    title="塌方损失信息"
    show-cancel-button
    @confirm="confirm"
    @cancel="cancelLoss"
    confirm-button-text="确定"
    cancel-button-text="取消"
  >
    <div class="loss-dialog-content">
      <!-- 塌方长 -->
      <van-field v-model="formData.length" label="塌方长" placeholder="请填写长度" type="digit" clearable>
        <template #button>
          <span class="field-unit">米</span>
        </template>
      </van-field>

      <!-- 塌方宽 -->
      <van-field v-model="formData.width" label="塌方宽" placeholder="请填写宽度" type="digit" clearable>
        <template #button>
          <span class="field-unit">米</span>
        </template>
      </van-field>

      <!-- 塌方高 -->
      <van-field v-model="formData.height" label="塌方高" placeholder="请填写高度" type="digit" clearable>
        <template #button>
          <span class="field-unit">米</span>
        </template>
      </van-field>

      <!-- 单价 (0-2000元) -->
      <van-field v-model="formData.unitPrice" label="单价(0-2000元)" placeholder="请填写单价" type="digit" clearable>
        <template #button>
          <span class="field-unit">元</span>
        </template>
      </van-field>

      <van-field v-model="formData.totalPrice" label="塌方损失金额" placeholder="请填写金额" type="digit" clearable>
        <template #button>
          <span class="field-unit">元</span>
        </template>
      </van-field>
    </div>
  </van-dialog>
</template>
<script setup>
import { onMounted, ref, reactive, watch, computed } from 'vue'
import { showToast } from 'vant'

// 弹窗显示状态
const visible = ref(false)

// 损失计算表单
const formData = ref({
  length: '',
  width: '',
  height: '',
  unitPrice: ''
})

const totalPrice =  computed(() => {
  const l = parseFloat(formData.value.length)
  const w = parseFloat(formData.value.width)
  const h = parseFloat(formData.value.height)
  const price = parseFloat(formData.value.unitPrice)
  if (isNaN(l) || l <= 0) {
    return 0
  }
  if (isNaN(w) || w <= 0) {
    return 0
  }
  if (isNaN(h) || h <= 0) {
    return 0
  }
  if (isNaN(price) || price < 0) {
    return 0
  }
  if (price > 2000) {
    return 0
  }
  return (l * w * h * price)
})

watch(totalPrice, ()=>{
  formData.value.totalPrice = totalPrice.value 
})
// 显示弹窗
const show = () => {
  visible.value = true
}

// 验证表单数据
const validateForm = () => {
  const l = parseFloat(formData.length)
  const w = parseFloat(formData.width)
  const h = parseFloat(formData.height)
  const price = parseFloat(formData.unitPrice)

  if (isNaN(l) || l <= 0) {
    showToast('请填写有效的塌方长度')
    return false
  }
  if (isNaN(w) || w <= 0) {
    showToast('请填写有效的塌方宽度')
    return false
  }
  if (isNaN(h) || h <= 0) {
    showToast('请填写有效的塌方高度')
    return false
  }
  if (isNaN(price) || price < 0) {
    showToast('请填写有效的单价')
    return false
  }
  if (price > 2000) {
    showToast('单价不能超过2000元')
    return false
  }

  return true
}

// 确认损失计算
const confirm = () => {
  if(!formData.value.totalPrice) {
    showToast('请填写损失金额')
    return
  }
  emit('confirm', formData.value.totalPrice)
  // 重置表单
  resetForm()
  visible.value = false
}

// 取消操作
const cancelLoss = () => {
  resetForm()
  visible.value = false
}

// 重置表单
const resetForm = () => {
  formData.value.length = ''
  formData.value.width = ''
  formData.value.height = ''
  formData.value.unitPrice = ''
  formData.value.totalPrice
}
// 定义事件
const emit = defineEmits(['confirm'])

defineExpose({
  show
})
</script>
<style scoped lang="scss"></style>