pet-system-merchant-web/src/views/order/purchase/components/WashingForm.vue

<template>
  <div class="business-form">
    <div style="margin-bottom: 20px;">
      <div class="section-label">上门服务地址</div>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-cascader v-model="washingData.region" :options="pcaOptions" placeholder="省/市/区" style="width: 100%" />
        </el-col>
        <el-col :span="16">
          <el-input v-model="washingData.addressDetail" placeholder="详细地址 (街道/门牌号)" prefix-icon="Location" />
        </el-col>
      </el-row>
    </div>

    <div style="margin-bottom: 20px;">
      <div class="section-label" style="display:flex; align-items:center; margin-bottom:10px;">
        预约服务时间
        <el-tag type="info" size="small" style="margin-left:10px;">共 {{ washingData.appointments.length }} 次</el-tag>
      </div>
      <div v-for="(item, index) in washingData.appointments" :key="index" style="display:flex; align-items:center; margin-bottom:10px;">
        <span style="width:30px; color:#999; font-size:12px; font-weight:bold;">{{ index + 1 }}.</span>
        <el-date-picker
          v-model="item.startTime"
          type="datetime"
          placeholder="开始时间"
          style="width: 200px; margin-right: 5px;"
          format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm"
        />
        <span style="margin:0 5px; color:#999;">~</span>
        <el-date-picker
          v-model="item.endTime"
          type="datetime"
          placeholder="结束时间 (可选)"
          style="width: 200px; margin-right: 15px;"
          format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm"
        />

        <div style="display:flex; gap:8px; margin-left:5px;">
          <el-button v-if="index === washingData.appointments.length - 1" type="primary" circle size="small" icon="Plus" @click="addAppointment" />
          <el-button v-if="washingData.appointments.length > 1" type="danger" circle size="small" icon="Minus" @click="removeAppointment(index)" plain />
        </div>
      </div>
    </div>

    <div class="remark-section">
      <el-input v-model="washingData.other" type="textarea" :rows="4" placeholder="请添加服务备注和宠物状态等" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  washingData: { type: Object, required: true },
  pcaOptions: { type: Array, default: () => [] }
})

const emit = defineEmits(['change'])

const addAppointment = () => {
  props.washingData.appointments.push({ startTime: '', endTime: '' })
  emit('change', 'washing')
}

const removeAppointment = (index) => {
  if (props.washingData.appointments.length <= 1) return
  props.washingData.appointments.splice(index, 1)
  emit('change', 'washing')
}
</script>

<style scoped>
.business-form { padding-top: 5px; }
.remark-section { background: #fdfdfd; border: 1px dashed #dcdfe6; padding: 15px; border-radius: 6px; margin-top: 20px; }
.section-label { font-size: 13px; font-weight: bold; color: #606266; margin-bottom: 12px; }
</style>