!179 fix: 删除china2相关的地图json

Merge pull request !179 from 痴货/master

apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue

@@ -0,0 +1,450 @@
+<script lang="ts" setup>
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import {
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElImage,
+  ElMessage,
+  ElMessageBox,
+  ElTimeline,
+  ElTimelineItem,
+} from 'element-plus';
+
+import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
+import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils/dict';
+
+import UpdateAuditReasonForm from './disagree-form.vue';
+
+defineOptions({ name: 'TradeAfterSaleDetail' });
+
+const { params } = useRoute(); // 查询参数
+const { push } = useRouter(); // 路由
+const formData = ref<MallAfterSaleApi.AfterSale>({
+  order: {} as MallOrderApi.Order,
+  logs: [] as MallOrderApi.OrderLog[],
+  orderItem: {} as MallOrderApi.OrderItem,
+});
+const updateAuditReasonFormRef = ref(); // 拒绝售后表单 Ref
+
+/** 获得 userType 颜色 */
+const getUserTypeColor = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
+  }
+  return '#409EFF';
+};
+
+/** 获得详情 */
+const getDetail = async () => {
+  const id = params.id as unknown as number;
+  if (id) {
+    const res = await AfterSaleApi.getAfterSale(id);
+    // 没有表单信息则关闭页面返回
+    if (res === null) {
+      ElMessage.error('售后订单不存在');
+      close();
+    }
+    formData.value = res;
+  }
+};
+
+/** 同意售后 */
+const agree = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('是否同意售后？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await AfterSaleApi.agree(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 拒绝售后 */
+const disagree = async () => {
+  updateAuditReasonFormRef.value?.open(formData.value);
+};
+
+/** 确认收货 */
+const receive = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('是否确认收货？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await AfterSaleApi.receive(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 拒绝收货 */
+const refuse = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('是否拒绝收货？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await AfterSaleApi.refuse(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 确认退款 */
+const refund = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('是否确认退款？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await AfterSaleApi.refund(formData.value.id!);
+  // 提示成功
+  ElMessage.success($t('page.common.success'));
+  await getDetail();
+};
+
+/** 关闭 tag */
+const close = () => {
+  push({ name: 'TradeAfterSale' });
+};
+onMounted(async () => {
+  await getDetail();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <ContentWrap>
+      <!-- 订单信息 -->
+      <ElDescriptions title="订单信息">
+        <ElDescriptionsItem label="订单号: ">
+          {{ formData.orderNo }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="配送方式: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_DELIVERY_TYPE"
+            :value="formData.order?.deliveryType"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单类型: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_ORDER_TYPE"
+            :value="formData.order?.type"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="收货人: ">
+          {{ formData.order?.receiverName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家留言: ">
+          {{ formData.order?.userRemark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单来源: ">
+          <DictTag
+            :type="DICT_TYPE.TERMINAL"
+            :value="formData.order?.terminal"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="联系电话: ">
+          {{ formData.order?.receiverMobile }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="商家备注: ">
+          {{ formData.order?.remark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="支付单号: ">
+          {{ formData.order?.payOrderId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="付款方式: ">
+          <DictTag
+            :type="DICT_TYPE.PAY_CHANNEL_CODE"
+            :value="formData.order?.payChannelCode"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家: ">
+          {{ formData?.user?.nickname }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 售后信息 -->
+      <ElDescriptions title="售后信息">
+        <ElDescriptionsItem label="退款编号: ">
+          {{ formData.no }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="申请时间: ">
+          {{ formatDate(formData.auditTime) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="售后类型: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE"
+            :value="formData.type"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="售后方式: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_AFTER_SALE_WAY"
+            :value="formData.way"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="退款金额: ">
+          {{ fenToYuan(formData.refundPrice ?? 0) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="退款原因: ">
+          {{ formData.applyReason }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="补充描述: ">
+          {{ formData.applyDescription }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="凭证图片: ">
+          <ElImage
+            v-for="(item, index) in formData.applyPicUrls"
+            :key="index"
+            :src="item"
+            style="width: 60px; height: 60px; margin-right: 10px"
+            :preview-src-list="formData.applyPicUrls ?? []"
+          />
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 退款状态 -->
+      <ElDescriptions :column="1" title="退款状态">
+        <ElDescriptionsItem label="退款状态: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS"
+            :value="formData.status"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label-class-name="no-colon">
+          <el-button
+            v-if="formData.status === 10"
+            type="primary"
+            @click="agree"
+          >
+            同意售后
+          </el-button>
+          <el-button
+            v-if="formData.status === 10"
+            type="primary"
+            @click="disagree"
+          >
+            拒绝售后
+          </el-button>
+          <el-button
+            v-if="formData.status === 30"
+            type="primary"
+            @click="receive"
+          >
+            确认收货
+          </el-button>
+          <el-button
+            v-if="formData.status === 30"
+            type="primary"
+            @click="refuse"
+          >
+            拒绝收货
+          </el-button>
+          <el-button
+            v-if="formData.status === 40"
+            type="primary"
+            @click="refund"
+          >
+            确认退款
+          </el-button>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">提醒: </span></template>
+          如果未发货，请点击同意退款给买家。<br />
+          如果实际已发货，请主动与买家联系。<br />
+          如果订单整体退款后，优惠券和余额会退还给买家.
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 商品信息 -->
+      <ElDescriptions title="商品信息">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <el-row :gutter="20">
+            <el-col :span="15">
+              <el-table
+                v-if="formData.orderItem"
+                :data="[formData.orderItem]"
+                border
+              >
+                <el-table-column label="商品" prop="spuName" width="auto">
+                  <template #default="{ row }">
+                    {{ row.spuName }}
+                    <el-tag
+                      v-for="property in row.properties"
+                      :key="property.propertyId"
+                      class="mr-10px"
+                    >
+                      {{ property.propertyName }}: {{ property.valueName }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品原价" prop="price" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.price) }} 元
+                  </template>
+                </el-table-column>
+                <el-table-column label="数量" prop="count" width="100" />
+                <el-table-column label="合计" prop="payPrice" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.payPrice) }} 元
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="10" />
+          </el-row>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 操作日志 -->
+      <ElDescriptions title="售后日志">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <ElTimeline>
+            <ElTimelineItem
+              v-for="saleLog in formData.logs"
+              :key="saleLog.id"
+              :timestamp="formatDate(saleLog.createTime)?.toString()"
+              placement="top"
+            >
+              <div class="el-timeline-right-content">
+                <span>{{ saleLog.content }}</span>
+              </div>
+              <template #dot>
+                <span
+                  :style="{
+                    backgroundColor: getUserTypeColor(saleLog.userType ?? 0),
+                  }"
+                  class="dot-node-style"
+                >
+                  {{
+                    getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] ||
+                    '系'
+                  }}
+                </span>
+              </template>
+            </ElTimelineItem>
+          </ElTimeline>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ContentWrap>
+
+    <!-- 各种操作的弹窗 -->
+    <UpdateAuditReasonForm
+      ref="updateAuditReasonFormRef"
+      @success="getDetail"
+    />
+  </Page>
+</template>
+<style lang="scss" scoped>
+:deep(.el-descriptions) {
+  &:not(:nth-child(1)) {
+    margin-top: 20px;
+  }
+
+  .el-descriptions__title {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      width: 3px;
+      height: 20px;
+      margin-right: 10px;
+      content: '';
+      background-color: #409eff;
+    }
+  }
+
+  .el-descriptions-item__container {
+    margin: 0 10px;
+
+    .no-colon {
+      margin: 0;
+
+      &::after {
+        content: '';
+      }
+    }
+  }
+}
+
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0 0 160px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+}
+
+/* 单独定义气泡样式，不使用嵌套 */
+:deep(.el-timeline-right-content) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 10px;
+  margin-left: 10px;
+  background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
+  border-radius: 4px;
+}
+
+:deep(.el-timeline-right-content)::before {
+  position: absolute;
+  top: 10px;
+  left: -16px;
+  content: '';
+  border-color: transparent #f5f7fa transparent transparent;
+  border-style: solid;
+  border-width: 8px;
+}
+
+.dot-node-style {
+  position: absolute;
+  left: -5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  color: #fff;
+  border-radius: 50%;
+}
+</style>

apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
+import { deliveryOrder } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'expressType',
+      label: '发货方式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '快递', value: 'express' },
+          { label: '无需发货', value: 'none' },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'logisticsId',
+      label: '物流公司',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeliveryExpressList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+    },
+    {
+      fieldName: 'logisticsNo',
+      label: '物流单号',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
+    if (data.expressType === 'none') {
+      // 无需发货的情况
+      data.logisticsId = 0;
+      data.logisticsNo = '';
+    }
+    try {
+      await deliveryOrder(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      if (data.logisticsId === 0) {
+        await formApi.setValues({ expressType: 'none' });
+      }
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-ele/src/views/mall/trade/brokerage/user/index.vue

@@ -6,7 +6,7 @@ import { useAccess } from '@vben/access';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { ElLoading, ElMessage, ElSwitch } from 'element-plus';
+import { ElLoading, ElMessage, ElMessageBox, ElSwitch } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -68,17 +68,14 @@ function openCreateUserForm() {
 
 /** 清除上级推广人 */
 async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
-  const loadingInstance = ElLoading.service({
-    text: `正在清除"${row.nickname}"的上级推广人...`,
-    fullscreen: true,
+  await ElMessageBox.confirm(`确定清除"${row.nickname}"的上级推广人吗？`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await clearBindUser({ id: row.id as number });
-    ElMessage.success('清除成功');
-    onRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+  await clearBindUser({ id: row.id as number });
+  ElMessage.success('清除成功');
+  onRefresh();
 }
 
 /** 推广资格：开通/关闭 */

apps/web-ele/src/views/mall/trade/brokerage/withdraw/index.vue

@@ -4,10 +4,10 @@ import type { MallBrokerageWithdrawApi } from '#/api/mall/trade/brokerage/withdr
 
 import { h } from 'vue';
 
-import { confirm, Page, prompt } from '@vben/common-ui';
+import { Page, prompt } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
-import { ElInput, ElMessage } from 'element-plus';
+import { ElInput, ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -35,14 +35,14 @@ function onRefresh() {
 
 /** 审核通过 */
 async function handleApprove(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
-  try {
-    await confirm('确定要审核通过吗？');
-    await approveBrokerageWithdraw(row.id);
-    ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    onRefresh();
-  } catch (error) {
-    console.error('审核失败:', error);
-  }
+  await ElMessageBox.confirm('确定要审核通过吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await approveBrokerageWithdraw(row.id);
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  onRefresh();
 }
 
 /** 审核驳回 */
@@ -73,14 +73,14 @@ function handleReject(row: MallBrokerageWithdrawApi.BrokerageWithdraw) {
 async function handleRetryTransfer(
   row: MallBrokerageWithdrawApi.BrokerageWithdraw,
 ) {
-  try {
-    await confirm('确定要重新转账吗？');
-    await approveBrokerageWithdraw(row.id);
-    ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    onRefresh();
-  } catch (error) {
-    console.error('重新转账失败:', error);
-  }
+  await ElMessageBox.confirm('确定要重新转账吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await approveBrokerageWithdraw(row.id);
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/web-ele/src/views/mall/trade/delivery/express/index.vue

@@ -5,7 +5,7 @@ import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -46,16 +46,14 @@ function handleEdit(row: MallDeliveryExpressApi.DeliveryExpress) {
 
 /** 删除快递公司 */
 async function handleDelete(row: MallDeliveryExpressApi.DeliveryExpress) {
-  const hideLoading = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
+  await ElMessageBox.confirm($t('ui.actionMessage.deleting', [row.name]), {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDeliveryExpress(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    hideLoading.close();
-  }
+  await deleteDeliveryExpress(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/web-ele/src/views/mall/trade/delivery/expressTemplate/index.vue

@@ -4,7 +4,7 @@ import type { MallDeliveryExpressTemplateApi } from '#/api/mall/trade/delivery/e
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -40,16 +40,14 @@ function handleEdit(row: MallDeliveryExpressTemplateApi.ExpressTemplate) {
 async function handleDelete(
   row: MallDeliveryExpressTemplateApi.ExpressTemplate,
 ) {
-  const hideLoading = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
+  await ElMessageBox.confirm($t('ui.actionMessage.deleting', [row.name]), {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDeliveryExpressTemplate(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    hideLoading.close();
-  }
+  await deleteDeliveryExpressTemplate(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts

@@ -35,10 +35,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleDeliveryPickUpStoreList,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
+        labelField: 'name',
+        valueField: 'id',
       },
       dependencies: {
         triggerFields: ['deliveryType'],

apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts

@@ -51,7 +51,9 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiTreeSelect',
       componentProps: {
         api: () => getAreaTree(),
-        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
       },
     },
     {
@@ -130,7 +132,8 @@ export function useBindFormSchema(): VbenFormSchema[] {
       rules: 'required',
       componentProps: {
         api: () => getSimpleUserList(),
-        fieldNames: { label: 'nickname', value: 'id' },
+        labelField: 'nickname',
+        valueField: 'id',
         mode: 'tags',
         allowClear: true,
       },

apps/web-ele/src/views/mall/trade/delivery/pickUpStore/index.vue

@@ -4,7 +4,7 @@ import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickU
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { ElLoading, ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -49,16 +49,14 @@ function handleBind(row: MallDeliveryPickUpStoreApi.PickUpStore) {
 
 /** 删除门店 */
 async function handleDelete(row: MallDeliveryPickUpStoreApi.PickUpStore) {
-  const hideLoading = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
+  await ElMessageBox.confirm('确定要删除该门店吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
   });
-  try {
-    await deleteDeliveryPickUpStore(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    hideLoading.close();
-  }
+  await deleteDeliveryPickUpStore(row.id as number);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+  onRefresh();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/web-ele/src/views/mall/trade/order/modules/delevery-form.vue

@@ -54,10 +54,8 @@ const [Form, formApi] = useVbenForm({
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleDeliveryExpressList,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
+        labelField: 'name',
+        valueField: 'id',
       },
       dependencies: {
         triggerFields: ['expressType'],

apps/web-ele/src/views/mall/trade/order/modules/detail.vue

@@ -0,0 +1,561 @@
+<script lang="ts" setup>
+import type { MallDeliveryExpressApi } from '#/api/mall/trade/delivery/express';
+import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { fenToYuan, formatDate } from '@vben/utils';
+
+import {
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElMessage,
+  ElMessageBox,
+  ElTimeline,
+  ElTimelineItem,
+} from 'element-plus';
+
+import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express';
+import * as DeliveryPickUpStoreApi from '#/api/mall/trade/delivery/pickUpStore';
+import * as TradeOrderApi from '#/api/mall/trade/order';
+import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { DictTag } from '#/components/dict-tag';
+import { DeliveryTypeEnum, TradeOrderStatusEnum } from '#/utils/constants';
+import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils/dict';
+
+import OrderDeliveryForm from './delevery-form.vue';
+import OrderUpdateAddressForm from './update-address-form.vue';
+import OrderUpdatePriceForm from './update-price-form.vue';
+import OrderUpdateRemarkForm from './update-remark-form.vue';
+
+defineOptions({ name: 'TradeOrderDetail' });
+
+// 查询参数
+const props = defineProps({
+  id: {
+    type: Number,
+    default: undefined,
+  }, // 订单ID
+  showPickUp: {
+    type: Boolean,
+    default: true,
+  }, // 显示核销按钮
+});
+
+const [OrderDeliveryFormModal, formModalApi] = useVbenModal({
+  connectedComponent: OrderDeliveryForm,
+  destroyOnClose: true,
+});
+
+const [OrderUpdateRemarkFormModal, remarkFormModalApi] = useVbenModal({
+  connectedComponent: OrderUpdateRemarkForm,
+  destroyOnClose: true,
+});
+
+const [OrderUpdateAddressFormModal, addressFormModalApi] = useVbenModal({
+  connectedComponent: OrderUpdateAddressForm,
+  destroyOnClose: true,
+});
+
+const [OrderUpdatePriceFormModal, priceFormModalApi] = useVbenModal({
+  connectedComponent: OrderUpdatePriceForm,
+  destroyOnClose: true,
+});
+
+/** 获得 userType 颜色 */
+const getUserTypeColor = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type);
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
+  }
+  return '#409EFF';
+};
+
+// 订单详情
+const formData = ref<MallOrderApi.Order>({
+  logs: [],
+});
+
+/** 各种操作 */
+const remark = () => {
+  remarkFormModalApi.setData(formData.value).open();
+};
+
+const delivery = () => {
+  formModalApi.setData(formData.value).open();
+};
+const updateAddress = () => {
+  addressFormModalApi.setData(formData.value).open();
+};
+
+const updatePrice = () => {
+  priceFormModalApi.setData(formData.value).open();
+};
+
+/** 核销 */
+const handlePickUp = async () => {
+  // 二次确认
+  await ElMessageBox.confirm('确认核销订单吗？', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  // 提交
+  await TradeOrderApi.pickUpOrder(formData.value.id!);
+  ElMessage.success('核销成功');
+  // 刷新列表
+  await getDetail();
+};
+
+/** 获得详情 */
+const { params } = useRoute();
+const id = (params.id || props.id) as unknown as number;
+const getDetail = async () => {
+  if (id) {
+    const res = (await TradeOrderApi.getOrder(id)) as MallOrderApi.Order;
+    // 没有表单信息则关闭页面返回
+    if (!res) {
+      ElMessage.error('交易订单不存在');
+      close();
+    }
+    formData.value = res;
+  }
+};
+
+/** 关闭 tag */
+const { push } = useRouter(); // 路由
+const close = () => {
+  push({ name: 'TradeOrder' });
+};
+
+/** 复制 */
+const clipboardSuccess = () => {
+  ElMessage.success('复制成功');
+};
+
+/** 初始化 */
+const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>(
+  [],
+);
+// 物流公司
+const expressTrackList = ref<MallOrderApi.OrderExpressTrackRespDTO[]>([]); // 物流详情
+const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore>(
+  {} as MallDeliveryPickUpStoreApi.PickUpStore,
+); // 自提门店
+onMounted(async () => {
+  await getDetail();
+  // 如果配送方式为快递，则查询物流公司
+  if (formData.value.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
+    deliveryExpressList.value =
+      await DeliveryExpressApi.getSimpleDeliveryExpressList();
+    if (formData.value.logisticsId) {
+      expressTrackList.value = await TradeOrderApi.getExpressTrackList(
+        formData.value.id!,
+      );
+    }
+  } else if (
+    formData.value.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
+    formData.value.pickUpStoreId
+  ) {
+    pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(
+      formData.value.pickUpStoreId,
+    );
+  }
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <ContentWrap>
+      <!-- 订单信息 -->
+      <ElDescriptions title="订单信息">
+        <ElDescriptionsItem label="订单号: ">
+          {{ formData.no }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家: ">
+          {{ formData?.user?.nickname }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单类型: ">
+          <DictTag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.type!" />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单来源: ">
+          <DictTag :type="DICT_TYPE.TERMINAL" :value="formData.terminal!" />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="买家留言: ">
+          {{ formData.userRemark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="商家备注: ">
+          {{ formData.remark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="支付单号: ">
+          {{ formData.payOrderId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="付款方式: ">
+          <DictTag
+            :type="DICT_TYPE.PAY_CHANNEL_CODE"
+            :value="formData.payChannelCode!"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem v-if="formData.brokerageUser" label="推广用户: ">
+          {{ formData.brokerageUser?.nickname }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 订单状态 -->
+      <ElDescriptions :column="1" title="订单状态">
+        <ElDescriptionsItem label="订单状态: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_ORDER_STATUS"
+            :value="formData.status!"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          v-hasPermi="['trade:order:update']"
+          label-class-name="no-colon"
+        >
+          <el-button
+            v-if="formData.status! === TradeOrderStatusEnum.UNPAID.status"
+            type="primary"
+            @click="updatePrice"
+          >
+            调整价格
+          </el-button>
+          <el-button type="primary" @click="remark">备注</el-button>
+          <!-- 待发货 -->
+          <template
+            v-if="formData.status! === TradeOrderStatusEnum.UNDELIVERED.status"
+          >
+            <!-- 快递发货 -->
+            <el-button
+              v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
+              type="primary"
+              @click="delivery"
+            >
+              发货
+            </el-button>
+            <el-button
+              v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
+              type="primary"
+              @click="updateAddress"
+            >
+              修改地址
+            </el-button>
+            <!-- 到店自提 -->
+            <el-button
+              v-if="
+                formData.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
+                showPickUp
+              "
+              type="primary"
+              @click="handlePickUp"
+            >
+              核销
+            </el-button>
+          </template>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label>
+            <span style="color: red">提醒: </span>
+          </template>
+          <el-text>
+            买家付款成功后，货款将直接进入您的商户号（微信、支付宝）<br />
+            请及时关注你发出的包裹状态，确保可以配送至买家手中 <br />
+            如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商
+          </el-text>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 商品信息 -->
+      <ElDescriptions title="商品信息">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <el-row :gutter="20">
+            <el-col :span="15">
+              <el-table :data="formData.items" border>
+                <el-table-column label="商品" prop="spuName" width="auto">
+                  <template #default="{ row }">
+                    {{ row.spuName }}
+                    <el-tag
+                      v-for="property in row.properties"
+                      :key="property.propertyId"
+                    >
+                      {{ property.propertyName }}: {{ property.valueName }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品原价" prop="price" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.price) }}元
+                  </template>
+                </el-table-column>
+                <el-table-column label="数量" prop="count" width="100" />
+                <el-table-column label="合计" prop="payPrice" width="150">
+                  <template #default="{ row }">
+                    {{ fenToYuan(row.payPrice) }}元
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="售后状态"
+                  prop="afterSaleStatus"
+                  width="120"
+                >
+                  <template #default="{ row }">
+                    <DictTag
+                      :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                      :value="row.afterSaleStatus"
+                    />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="10" />
+          </el-row>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+      <ElDescriptions :column="4">
+        <!-- 第一层 -->
+        <ElDescriptionsItem label="商品总额: ">
+          {{ fenToYuan(formData.totalPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="运费金额: ">
+          {{ fenToYuan(formData.deliveryPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单调价: ">
+          {{ fenToYuan(formData.adjustPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          v-for="item in 1"
+          :key="item"
+          label-class-name="no-colon"
+        />
+        <!-- 第二层 -->
+        <ElDescriptionsItem>
+          <template #label>
+            <span style="color: red">优惠劵优惠: </span>
+          </template>
+          {{ fenToYuan(formData.couponPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">VIP 优惠: </span></template>
+          {{ fenToYuan(formData.vipPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">活动优惠: </span></template>
+          {{ fenToYuan(formData.discountPrice!) }} 元
+        </ElDescriptionsItem>
+        <ElDescriptionsItem>
+          <template #label><span style="color: red">积分抵扣: </span></template>
+          {{ fenToYuan(formData.pointPrice!) }} 元
+        </ElDescriptionsItem>
+        <!-- 第三层 -->
+        <ElDescriptionsItem
+          v-for="item in 3"
+          :key="item"
+          label-class-name="no-colon"
+        />
+        <ElDescriptionsItem label="应付金额: ">
+          {{ fenToYuan(formData.payPrice!) }} 元
+        </ElDescriptionsItem>
+      </ElDescriptions>
+
+      <!-- 物流信息 -->
+      <ElDescriptions :column="4" title="收货信息">
+        <ElDescriptionsItem label="配送方式: ">
+          <DictTag
+            :type="DICT_TYPE.TRADE_DELIVERY_TYPE"
+            :value="formData.deliveryType!"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="收货人: ">
+          {{ formData.receiverName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="联系电话: ">
+          {{ formData.receiverMobile }}
+        </ElDescriptionsItem>
+        <!-- 快递配送 -->
+        <div v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type">
+          <ElDescriptionsItem
+            v-if="formData.receiverDetailAddress"
+            label="收货地址: "
+          >
+            {{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
+            <el-link
+              v-clipboard:copy="
+                `${formData.receiverAreaName} ${formData.receiverDetailAddress}`
+              "
+              v-clipboard:success="clipboardSuccess"
+              icon="ep:document-copy"
+              type="primary"
+            />
+          </ElDescriptionsItem>
+          <ElDescriptionsItem v-if="formData.logisticsId" label="物流公司: ">
+            {{
+              deliveryExpressList.find(
+                (item) => item.id === formData.logisticsId,
+              )?.name
+            }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem v-if="formData.logisticsId" label="运单号: ">
+            {{ formData.logisticsNo }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem v-if="formData.deliveryTime" label="发货时间: ">
+            {{ formatDate(formData.deliveryTime) }}
+          </ElDescriptionsItem>
+          <ElDescriptionsItem
+            v-for="item in 2"
+            :key="item"
+            label-class-name="no-colon"
+          />
+          <ElDescriptionsItem
+            v-if="expressTrackList.length > 0"
+            label="物流详情: "
+          >
+            <ElTimeline>
+              <ElTimelineItem
+                v-for="(express, index) in expressTrackList"
+                :key="index"
+                :timestamp="formatDate(express.time)?.toString()"
+              >
+                {{ express.content }}
+              </ElTimelineItem>
+            </ElTimeline>
+          </ElDescriptionsItem>
+        </div>
+        <!-- 自提门店 -->
+        <div v-if="formData.deliveryType === DeliveryTypeEnum.PICK_UP.type">
+          <ElDescriptionsItem v-if="formData.pickUpStoreId" label="自提门店: ">
+            {{ pickUpStore?.name }}
+          </ElDescriptionsItem>
+        </div>
+      </ElDescriptions>
+
+      <!-- 订单日志 -->
+      <ElDescriptions title="订单操作日志">
+        <ElDescriptionsItem label-class-name="no-colon">
+          <ElTimeline>
+            <ElTimelineItem
+              v-for="(log, index) in formData.logs"
+              :key="index"
+              :timestamp="formatDate(log.createTime!)!.toString()"
+              placement="top"
+            >
+              <div class="el-timeline-right-content">
+                {{ log.content }}
+              </div>
+              <template #dot>
+                <span
+                  :style="{ backgroundColor: getUserTypeColor(log.userType!) }"
+                  class="dot-node-style"
+                >
+                  {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+                </span>
+              </template>
+            </ElTimelineItem>
+          </ElTimeline>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ContentWrap>
+
+    <!-- 各种操作的弹窗 -->
+    <OrderDeliveryFormModal @success="getDetail" />
+    <OrderUpdateRemarkFormModal @success="getDetail" />
+    <OrderUpdateAddressFormModal @success="getDetail" />
+    <OrderUpdatePriceFormModal @success="getDetail" />
+  </Page>
+</template>
+<style lang="scss" scoped>
+:deep(.el-descriptions) {
+  &:not(:nth-child(1)) {
+    margin-top: 20px;
+  }
+
+  .el-descriptions__title {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      width: 3px;
+      height: 20px;
+      margin-right: 10px;
+      content: '';
+      background-color: #409eff;
+    }
+  }
+
+  .el-descriptions-item__container {
+    margin: 0 10px;
+
+    .no-colon {
+      margin: 0;
+
+      &::after {
+        content: '';
+      }
+    }
+  }
+}
+
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0 0 160px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+}
+
+/* 单独定义气泡样式，不使用嵌套 */
+:deep(.el-timeline-right-content) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 10px;
+  margin-left: 10px;
+  background-color: #f5f7fa; /* 使用明确的颜色替代变量 */
+  border-radius: 4px;
+}
+
+:deep(.el-timeline-right-content)::before {
+  position: absolute;
+  top: 10px;
+  left: -16px;
+  content: '';
+  border-color: transparent #f5f7fa transparent transparent;
+  border-style: solid;
+  border-width: 8px;
+}
+
+.dot-node-style {
+  position: absolute;
+  left: -5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  color: #fff;
+  border-radius: 50%;
+}
+</style>

apps/web-ele/src/views/mall/trade/order/modules/update-address-form.vue

@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderAddress } from '#/api/mall/trade/order';
+import { getAreaTree } from '#/api/system/area';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'receiverName',
+      label: '收件人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人名称',
+      },
+    },
+    {
+      fieldName: 'receiverMobile',
+      label: '手机号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人手机号',
+      },
+    },
+    {
+      fieldName: 'receiverAreaId',
+      label: '所在地',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: () => getAreaTree(),
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择收件人所在地',
+        treeDefaultExpandAll: true,
+      },
+    },
+    {
+      fieldName: 'receiverDetailAddress',
+      label: '详细地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人详细地址',
+        type: 'textarea',
+        rows: 3,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.AddressRequest;
+    try {
+      await updateOrderAddress(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      await formApi.setValues({
+        id: data.id,
+        receiverName: data.receiverName,
+        receiverMobile: data.receiverMobile,
+        receiverAreaId: data.receiverAreaId,
+        receiverDetailAddress: data.receiverDetailAddress,
+      });
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-ele/src/views/mall/trade/order/modules/update-price-form.vue

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { floatToFixed2 } from '@vben/utils';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderPrice } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+const newPayPrice = ref<string>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'payPrice',
+      label: '应付金额(总)',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应付金额(总)',
+        disabled: true,
+        formatter: (value: string) => `${floatToFixed2(value)}元`,
+      },
+    },
+    {
+      fieldName: 'adjustPrice',
+      label: '订单调价',
+      component: 'InputNumber',
+      componentProps: {
+        class: 'w-100%',
+        placeholder: '请输入订单调价',
+        step: 0.1,
+        precision: 2,
+        onChange: async (value: number) => {
+          const { payPrice } = await formApi.getValues();
+          await formApi.setValues({
+            newPayPrice: (payPrice + value * 100).toFixed(2),
+          });
+        },
+      },
+      description: '订单调价。 正数，加价；负数，减价',
+    },
+    {
+      fieldName: 'newPayPrice',
+      label: '调价后',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        formatter: (value: string) => `${floatToFixed2(value)}元`,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.PriceRequest;
+    if (data.adjustPrice) {
+      data.adjustPrice = data.adjustPrice * 100;
+    }
+    try {
+      await updateOrderPrice(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      newPayPrice.value = data.payPrice?.toString();
+      data.adjustPrice = data.adjustPrice ? data.adjustPrice / 100 : 0;
+      await formApi.setValues({
+        id: data.id,
+        payPrice: data.payPrice,
+        adjustPrice: data.adjustPrice,
+        newPayPrice: newPayPrice.value,
+      });
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-ele/src/views/mall/trade/order/modules/update-remark-form.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderRemark } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    // TODO @xingyu：发货默认选中第一个？
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        rows: 3,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MallOrderApi.RemarkRequest;
+    try {
+      await updateOrderRemark(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      await formApi.setValues({ id: data.id, remark: data.remark });
+      // 设置到 values
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发货">
+    <Form class="mx-4" />
+  </Modal>
+</template>