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 label="round">往返接送</el-radio-button>
        <el-radio-button label="pick">单程接 (到店)</el-radio-button>
        <el-radio-button label="drop">单程送 (回家)</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <div class="route-box">
      <!-- 接宠段 -->
      <div class="route-segment" v-if="['round', 'pick'].includes(transportData.subType)">
        <div class="seg-badge start">接</div>
        <div class="seg-content">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-cascader v-model="transportData.pickRegion" :options="pcaOptions" placeholder="省/市/区" style="width: 100%" />
            </el-col>
            <el-col :span="16">
              <el-input v-model="transportData.pickDetail" 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 class="route-connector">
        <div class="line"></div>
        <div class="store-node"><el-icon><Shop /></el-icon> 服务门店</div>
        <div class="line"></div>
      </div>

      <!-- 送回段 -->
      <div class="route-segment" v-if="['round', 'drop'].includes(transportData.subType)">
        <div class="seg-badge end">送</div>
        <div class="seg-content">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-cascader v-model="transportData.dropRegion" :options="pcaOptions" placeholder="省/市/区" style="width: 100%" />
            </el-col>
            <el-col :span="16">
              <el-input v-model="transportData.dropDetail" 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>
</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 { 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; }
</style>