front / rider-admin · Files

<template>
  <div class="mock-delivery-page soft-page-stack">
    <a-card :bordered="false" class="soft-section-card">
      <div class="soft-section-header">
        <div class="soft-section-heading">
          <h3 class="soft-section-title">模拟推送配送单</h3>
          <p class="soft-section-subtitle">按开放应用模拟创建外卖配送单，并在发送前直接试算当前租户的配送费。</p>
        </div>
        <div class="soft-section-actions">
          <a-button @click="fillDemo">填充示例</a-button>
          <a-button @click="resetForm">重置</a-button>
          <a-button :loading="calcLoading" @click="handleCalcFee">按应用租户试算配送费</a-button>
          <a-button type="primary" :loading="saving" @click="handleSubmit">发送推单</a-button>
        </div>
      </div>

      <div class="soft-note-card">
        <strong>使用说明</strong>
        <p>系统会根据当前开放应用自动识别所属租户。推单页只覆盖外卖场景，门店可选填接入方门店编号，未填写时再手动补全门店信息。</p>
      </div>

      <div class="mock-form-section">
        <div class="soft-section-header">
          <div class="soft-section-heading">
            <h3 class="soft-section-title">应用与订单基础信息</h3>
            <p class="soft-section-subtitle">先确定开放应用、租户和外部订单标识。</p>
          </div>
        </div>
      <a-form layout="vertical">
        <a-row :gutter="16">
          <a-col :xs="24" :lg="12">
            <a-form-item label="开放应用">
              <a-select
                v-model:value="form.appId"
                placeholder="请选择应用"
                show-search
                :filter-option="filterAppOption"
                @change="handleAppChange"
              >
                <a-select-option v-for="item in appList" :key="item.id" :value="item.id">
                  {{ item.appName }}（{{ item.appKey }}）
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12">
            <a-form-item label="所属租户">
              <a-input :value="selectedTenantName" disabled />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :xs="24" :lg="12">
            <a-form-item label="外部订单号">
              <a-input v-model:value="form.outOrderNo" placeholder="请输入外部订单号" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :lg="12">
            <a-form-item label="期望配送时间戳（秒）">
              <a-input-number v-model:value="form.serviceTime" :min="0" style="width:100%" />
            </a-form-item>
          </a-col>
        </a-row>

        <div class="mock-form-section">
          <div class="soft-section-header">
            <div class="soft-section-heading">
              <h3 class="soft-section-title">发货方信息</h3>
              <p class="soft-section-subtitle">如果已同步门店，优先填写接入方门店编号；否则补全门店名称、地址和经纬度。</p>
            </div>
          </div>
          <a-row :gutter="16">
            <a-col :xs="24" :lg="12">
              <a-form-item label="接入方门店编号">
                <a-input v-model:value="form.outStoreId" placeholder="可选，填写后可自动补门店信息" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="发货门店名称">
                <a-input v-model:value="form.storeName" placeholder="未填写门店编号时必填" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="发货门店地址">
            <a-input v-model:value="form.storeAddr" placeholder="请输入发货门店地址" />
          </a-form-item>
          <a-row :gutter="16">
            <a-col :xs="24" :lg="12">
              <a-form-item label="发货经度">
                <a-input v-model:value="form.storeLng" placeholder="如：113.264385" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="发货纬度">
                <a-input v-model:value="form.storeLat" placeholder="如：23.129112" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div class="mock-form-section">
          <div class="soft-section-header">
            <div class="soft-section-heading">
              <h3 class="soft-section-title">收件人信息</h3>
              <p class="soft-section-subtitle">用于试算距离和创建配送单，收件人地址与经纬度建议同时填写。</p>
            </div>
          </div>
          <a-row :gutter="16">
            <a-col :xs="24" :lg="12">
              <a-form-item label="收件人姓名">
                <a-input v-model:value="form.recipName" placeholder="请输入收件人姓名" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="收件人电话">
                <a-input v-model:value="form.recipPhone" placeholder="请输入收件人手机号" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="收件人地址">
            <a-input v-model:value="form.recipAddr" placeholder="请输入收件地址" />
          </a-form-item>
          <a-row :gutter="16">
            <a-col :xs="24" :lg="12">
              <a-form-item label="收件经度">
                <a-input v-model:value="form.recipLng" placeholder="如：113.270000" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="收件纬度">
                <a-input v-model:value="form.recipLat" placeholder="如：23.135000" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div class="mock-form-section">
          <div class="soft-section-header">
            <div class="soft-section-heading">
              <h3 class="soft-section-title">订单信息</h3>
              <p class="soft-section-subtitle">当前只处理外卖场景，支持重量、整单备注和应用级回调。</p>
            </div>
          </div>
          <a-row :gutter="16">
            <a-col :xs="24" :lg="12">
              <a-form-item label="货物重量（kg）">
                <a-input-number v-model:value="form.weight" :min="0" :step="0.1" style="width:100%" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="订单级回调地址">
                <a-input v-model:value="form.callbackUrl" placeholder="可选，留空则使用应用级 Webhook" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="整单备注">
            <a-textarea v-model:value="form.remark" :rows="3" placeholder="如：请尽快送达" />
          </a-form-item>
          <a-form-item label="货物备注">
            <a-textarea v-model:value="form.itemRemark" :rows="2" placeholder="如：饮品分开装、轻拿轻放" />
          </a-form-item>
        </div>

        <div class="mock-form-section">
          <div class="soft-section-header">
            <div class="soft-section-heading">
              <h3 class="soft-section-title">货物清单</h3>
              <p class="soft-section-subtitle">件数会参与配送费试算，名称为空的货物不会提交到后端。</p>
            </div>
            <div class="soft-section-actions">
              <a-button type="dashed" @click="addItem">新增货物</a-button>
            </div>
          </div>
          <div v-if="form.items.length" class="soft-dashed-block">
          <a-row
            v-for="(item, index) in form.items"
            :key="index"
            :gutter="12"
            class="mock-item-row"
          >
            <a-col :xs="24" :lg="6">
              <a-form-item :label="index === 0 ? '名称' : ''">
                <a-input v-model:value="item.name" placeholder="如：招牌套餐" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="4">
              <a-form-item :label="index === 0 ? '数量' : ''">
                <a-input-number v-model:value="item.quantity" :min="1" style="width:100%" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="6">
              <a-form-item :label="index === 0 ? '规格' : ''">
                <a-input v-model:value="item.spec" placeholder="如：大杯 / 双拼" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="6">
              <a-form-item :label="index === 0 ? '备注' : ''">
                <a-input v-model:value="item.remark" placeholder="可选" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="2">
              <a-form-item :label="index === 0 ? '操作' : ''">
                <a-button danger block @click="removeItem(index)">删除</a-button>
              </a-form-item>
            </a-col>
          </a-row>
          </div>
          <a-empty v-else description="暂无货物清单" />
        </div>
      </a-form>
      </div>
    </a-card>

    <div v-if="feeResult || result" class="soft-result-grid">
      <a-card v-if="feeResult" :bordered="false" class="soft-section-card">
        <div class="soft-section-header">
          <div class="soft-section-heading">
            <h3 class="soft-section-title">按应用租户试算结果</h3>
            <p class="soft-section-subtitle">试算时不会手填租户，系统会自动使用当前开放应用绑定的租户；实际推单金额以后端创建订单时实时计算为准。</p>
          </div>
        </div>
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="配送费">¥{{ feeResult.totalFee }}</a-descriptions-item>
        <a-descriptions-item label="配送距离">{{ feeResult.distance }} km</a-descriptions-item>
        <a-descriptions-item label="预计送达">{{ feeResult.estimatedMinutes }} 分钟</a-descriptions-item>
        <a-descriptions-item label="基础费用">
          ¥{{ feeResult.moneyBasic }}{{ feeResult.moneyBasicTxt ? ` ${feeResult.moneyBasicTxt}` : '' }}
        </a-descriptions-item>
        <a-descriptions-item label="超距费用">
          ¥{{ feeResult.moneyDistance }}{{ feeResult.moneyDistanceTxt ? ` ${feeResult.moneyDistanceTxt}` : '' }}
        </a-descriptions-item>
        <a-descriptions-item label="超重费用">
          ¥{{ feeResult.moneyWeight }}{{ feeResult.moneyWeightTxt ? ` ${feeResult.moneyWeightTxt}` : '' }}
        </a-descriptions-item>
        <a-descriptions-item label="件数费用">
          ¥{{ feeResult.moneyPiece }}{{ feeResult.moneyPieceTxt ? ` ${feeResult.moneyPieceTxt}` : '' }}
        </a-descriptions-item>
        <a-descriptions-item label="时段附加费">¥{{ feeResult.moneyTime }}</a-descriptions-item>
        <a-descriptions-item label="保底费用">¥{{ feeResult.minFee }}{{ feeResult.minFeeApplied === 1 ? '（已命中）' : '' }}</a-descriptions-item>
        <a-descriptions-item label="计费重量">{{ feeResult.weight }} kg</a-descriptions-item>
        <a-descriptions-item label="计费件数">{{ feeResult.pieces || 0 }} 件</a-descriptions-item>
      </a-descriptions>
      </a-card>

      <a-card v-if="result" :bordered="false" class="soft-section-card">
        <div class="soft-section-header">
          <div class="soft-section-heading">
            <h3 class="soft-section-title">推单结果</h3>
            <p class="soft-section-subtitle">展示后台创建后的配送单编号、状态和费用结果。</p>
          </div>
        </div>
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="配送单ID">{{ result.deliveryOrderId }}</a-descriptions-item>
        <a-descriptions-item label="平台订单号">{{ result.orderNo }}</a-descriptions-item>
        <a-descriptions-item label="外部订单号">{{ result.outOrderNo }}</a-descriptions-item>
        <a-descriptions-item label="状态">{{ statusMap[result.status] || result.status }}</a-descriptions-item>
        <a-descriptions-item label="配送费">¥{{ result.totalFee }}</a-descriptions-item>
        <a-descriptions-item label="配送距离">{{ result.distance }} km</a-descriptions-item>
        <a-descriptions-item label="基础费">¥{{ result.moneyBasic }}</a-descriptions-item>
        <a-descriptions-item label="超距费">¥{{ result.moneyDistance }}</a-descriptions-item>
        <a-descriptions-item label="时段附加费">¥{{ result.moneyTime }}</a-descriptions-item>
        <a-descriptions-item label="预计送达">{{ result.estimatedMinutes }} 分钟</a-descriptions-item>
      </a-descriptions>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { cityApi, deliveryApi, openApi } from '@/api'

type OpenAppItem = {
  id: number
  appName: string
  appKey: string
  cityId: number
  status: number
}

type DeliveryItem = {
  name: string
  quantity: number
  spec: string
  remark: string
}

const appList = ref<OpenAppItem[]>([])
const cityList = ref<any[]>([])
const saving = ref(false)
const calcLoading = ref(false)
const feeResult = ref<any>(null)
const result = ref<any>(null)

const statusMap: Record<number, string> = {
  2: '待接单',
  3: '已接单',
  4: '配送中',
  6: '已完成',
  10: '已取消',
}

function createDefaultItem(): DeliveryItem {
  return { name: '', quantity: 1, spec: '', remark: '' }
}

function createDefaultForm() {
  return {
    appId: undefined as number | undefined,
    outStoreId: '',
    storeName: '',
    storeAddr: '',
    storeLng: '',
    storeLat: '',
    recipName: '',
    recipPhone: '',
    recipAddr: '',
    recipLng: '',
    recipLat: '',
    outOrderNo: generateOutOrderNo(),
    weight: 0,
    serviceTime: 0,
    callbackUrl: '',
    remark: '',
    itemRemark: '',
    items: [createDefaultItem()],
  }
}

const form = reactive(createDefaultForm())

const selectedApp = computed(() => appList.value.find(item => item.id === form.appId))
const selectedTenantName = computed(() => {
  const city = cityList.value.find(item => item.id === selectedApp.value?.cityId)
  return city?.name || ''
})

function generateOutOrderNo() {
  return `MOCK${Date.now()}`
}

function resetForm() {
  Object.assign(form, createDefaultForm())
  feeResult.value = null
  result.value = null
}

function fillDemo() {
  if (!form.appId && appList.value.length) {
    form.appId = appList.value[0].id
  }
  Object.assign(form, {
    ...form,
    outOrderNo: generateOutOrderNo(),
    outStoreId: '',
    storeName: '测试门店',
    storeAddr: '广州市天河区体育西路 100 号',
    storeLng: '113.327823',
    storeLat: '23.137466',
    recipName: '测试用户',
    recipPhone: '13800138000',
    recipAddr: '广州市天河区珠江新城测试地址',
    recipLng: '113.324590',
    recipLat: '23.119295',
    weight: 1,
    serviceTime: 0,
    callbackUrl: '',
    remark: '后台模拟推单',
    itemRemark: '少冰少辣',
  })
  form.items = [
    { name: '招牌奶茶', quantity: 2, spec: '大杯', remark: '少冰' },
    { name: '鸡腿饭', quantity: 1, spec: '标准', remark: '不要辣' },
  ]
  feeResult.value = null
  result.value = null
}

function addItem() {
  form.items.push(createDefaultItem())
}

function removeItem(index: number) {
  form.items.splice(index, 1)
  if (!form.items.length) {
    form.items.push(createDefaultItem())
  }
}

function handleAppChange() {
  feeResult.value = null
  result.value = null
}

function filterAppOption(input: string, option: any) {
  return String(option.children).toLowerCase().includes(input.toLowerCase())
}

function buildPayload() {
  return {
    appId: form.appId,
    outStoreId: form.outStoreId || undefined,
    storeName: form.storeName || undefined,
    storeAddr: form.storeAddr || undefined,
    storeLng: form.storeLng || undefined,
    storeLat: form.storeLat || undefined,
    recipName: form.recipName,
    recipPhone: form.recipPhone,
    recipAddr: form.recipAddr,
    recipLng: form.recipLng,
    recipLat: form.recipLat,
    outOrderNo: form.outOrderNo,
    weight: form.weight,
    serviceTime: form.serviceTime,
    callbackUrl: form.callbackUrl || undefined,
    remark: form.remark || undefined,
    itemRemark: form.itemRemark || undefined,
    items: form.items
      .filter(item => item.name.trim())
      .map(item => ({
        name: item.name.trim(),
        quantity: item.quantity || 1,
        spec: item.spec || undefined,
        remark: item.remark || undefined,
      })),
  }
}

function clearCalcResult() {
  feeResult.value = null
}

function buildCalcPayload() {
  return {
    cityId: selectedApp.value?.cityId,
    orderType: 6,
    startLng: form.storeLng,
    startLat: form.storeLat,
    endLng: form.recipLng,
    endLat: form.recipLat,
    weight: form.weight,
    pieces: form.items.reduce((sum, item) => sum + (item.quantity || 0), 0),
    serviceTime: form.serviceTime,
  }
}

async function loadApps() {
  const res: any = await openApi.list()
  appList.value = Array.isArray(res?.data) ? res.data.filter((item: OpenAppItem) => item.status === 1) : []
}

async function loadCities() {
  const res: any = await cityApi.openList()
  cityList.value = Array.isArray(res?.data) ? res.data : []
}

async function handleSubmit() {
  if (!form.appId) {
    message.error('请选择开放应用')
    return
  }
  if (!form.outOrderNo || !form.recipName || !form.recipPhone || !form.recipAddr || !form.recipLng || !form.recipLat) {
    message.error('请填写完整的收件人与订单信息')
    return
  }
  if (!form.outStoreId && (!form.storeName || !form.storeLng || !form.storeLat)) {
    message.error('未填写门店编号时，请补全发货门店名称和经纬度')
    return
  }

  saving.value = true
  try {
    const res: any = await openApi.mockDeliveryCreate(buildPayload())
    result.value = res.data
    message.success('模拟推单成功')
  } finally {
    saving.value = false
  }
}

async function handleCalcFee() {
  if (!form.appId || !selectedApp.value?.cityId) {
    message.error('请选择开放应用')
    return
  }
  if (!form.storeLng || !form.storeLat || !form.recipLng || !form.recipLat) {
    message.error('请填写完整的发货与收货经纬度')
    return
  }

  calcLoading.value = true
  try {
    const res: any = await deliveryApi.calc(buildCalcPayload())
    feeResult.value = res.data
    message.success('配送费计算完成')
  } finally {
    calcLoading.value = false
  }
}

onMounted(async () => {
  await Promise.all([loadApps(), loadCities()])
  if (appList.value.length) {
    form.appId = appList.value[0].id
  }
})

watch(
  () => [form.storeLng, form.storeLat, form.recipLng, form.recipLat, form.weight, form.serviceTime, form.outStoreId],
  () => {
    clearCalcResult()
  }
)
</script>

<style scoped>
.mock-delivery-page {
  gap: 16px;
}

.mock-form-section {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.mock-item-row {
  margin-bottom: 12px;
  align-items: flex-start;
}
</style>