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

<template>
  <div class="business-form">
    <el-form-item label="接送模式">
      <el-radio-group v-model="transportData.subType" size="large" @change="$emit('change', 'transport')">
        <el-radio-button value="round">往返接送</el-radio-button>
        <el-radio-button value="pick">单程接 (到店)</el-radio-button>
        <el-radio-button value="drop">单程送 (回家)</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <div class="route-box">
      <!-- 接宠段 -->
      <div class="segment-card" v-if="['round', 'pick'].includes(transportData.subType)">
        <div class="route-segment">
          <div class="seg-badge start">接</div>
          <div class="seg-content">
            <el-row :gutter="10" align="middle" class="address-row" style="margin-bottom: 10px;">
              <el-col :span="2"><div class="addr-label">起点</div></el-col>
              <el-col :span="6">
                <el-cascader v-model="transportData.pickStartRegion" :options="pcaOptions" placeholder="省/市/区" style="width: 100%" />
              </el-col>
              <el-col :span="16">
                <el-input v-model="transportData.pickStartDetail" placeholder="详细地址 (街道/门牌号)" prefix-icon="Location" />
              </el-col>
            </el-row>
            <el-row :gutter="10" align="middle" class="address-row">
              <el-col :span="2"><div class="addr-label">终点</div></el-col>
              <el-col :span="6">
                <el-cascader v-model="transportData.pickEndRegion" :options="pcaOptions" placeholder="省/市/区" style="width: 100%" />
              </el-col>
              <el-col :span="16">
                <el-input v-model="transportData.pickEndDetail" placeholder="详细地址 (街道/门牌号)" prefix-icon="Location" />
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12"><el-input v-model="transportData.pickContact" placeholder="联系人" /></el-col>
              <el-col :span="12"><el-input v-model="transportData.pickPhone" placeholder="电话" /></el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-date-picker v-model="transportData.pickTime" type="datetime" placeholder="选择接宠时间" style="width: 100%" />
              </el-col>
            </el-row>
          </div>
        </div>
      </div>



      <!-- 送回段 -->
      <div class="segment-card" v-if="['round', 'drop'].includes(transportData.subType)">
        <div class="route-segment">
          <div class="seg-badge end">送</div>
          <div class="seg-content">
            <el-row :gutter="10" align="middle" class="address-row" style="margin-bottom: 10px;">
              <el-col :span="2"><div class="addr-label">起点</div></el-col>
              <el-col :span="6">
                <el-cascader v-model="transportData.dropStartRegion" :options="pcaOptions" placeholder="省/市/区" style="width: 100%" />
              </el-col>
              <el-col :span="16">
                <el-input v-model="transportData.dropStartDetail" placeholder="详细地址" prefix-icon="Location" />
              </el-col>
            </el-row>
            <el-row :gutter="10" align="middle" class="address-row">
              <el-col :span="2"><div class="addr-label">终点</div></el-col>
              <el-col :span="6">
                <el-cascader v-model="transportData.dropEndRegion" :options="pcaOptions" placeholder="省/市/区" style="width: 100%" />
              </el-col>
              <el-col :span="16">
                <el-input v-model="transportData.dropEndDetail" placeholder="详细地址" prefix-icon="Location" />
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12"><el-input v-model="transportData.dropContact" placeholder="联系人" /></el-col>
              <el-col :span="12"><el-input v-model="transportData.dropPhone" placeholder="电话" /></el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-date-picker v-model="transportData.dropTime" type="datetime" placeholder="预计送回时间 (可选)" style="width: 100%" />
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

const emit = defineEmits(['change'])
</script>

<style scoped>
.business-form { padding-top: 5px; }
.route-box { display: flex; flex-direction: column; gap: 20px; }
.segment-card { background: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #EBEEF5; }
.route-segment { display: flex; gap: 15px; }
.seg-badge {
  width: 32px; height: 32px; background: #409eff; color: white; border-radius: 8px;
  text-align: center; line-height: 32px; font-weight: bold; flex-shrink: 0;
}
.seg-badge.end { background: #67c23a; }
.seg-content { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.route-connector { display: flex; align-items: center; justify-content: center; margin: 15px 0; gap: 10px; color: #909399; font-size: 12px; }
.route-connector .line { height: 1px; width: 80px; background: #dcdfe6; }
.route-connector .store-node { background: white; padding: 4px 12px; border-radius: 20px; border: 1px solid #dcdfe6; display: flex; align-items: center; gap: 5px; }

.addr-label {
  text-align: right;
  color: #606266;
  font-size: 14px;
  padding-right: 5px;
}
</style>