feat：【mall 商城】交易订单（90% ele 部分）

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

@@ -77,10 +77,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleDeliveryExpressList,
-        fieldNames: {
+        labelField: 'name',
-          label: 'name',
+        valueField: 'id',
-          value: 'id',
-        },
         placeholder: '请选择快递公司',
         clearable: true,
       },
@@ -315,6 +313,8 @@ export function usePriceFormSchema(): VbenFormSchema[] {
         placeholder: '请输入订单调价',
         step: 0.1,
         precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
       help: '订单调价。 正数，加价；负数，减价',
       rules: 'required',
@@ -431,10 +431,8 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleDeliveryExpressList,
-        fieldNames: {
+        labelField: 'name',
-          label: 'name',
+        valueField: 'id',
-          value: 'id',
-        },
         placeholder: '请选择物流公司',
       },
       dependencies: {

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

@@ -25,8 +25,8 @@ import * as TradeOrderApi from '#/api/mall/trade/order';
 import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';
 
-import DeliveryForm from '../modules/delivery-form.vue';
 import AddressForm from '../modules/address-form.vue';
+import DeliveryForm from '../modules/delivery-form.vue';
 import PriceForm from '../modules/price-form.vue';
 import RemarkForm from '../modules/remark-form.vue';
 import {
@@ -374,27 +374,19 @@ onMounted(async () => {
         </div>
         <div class="flex">
           <span class="mr-2 min-w-fit text-gray-600">优惠劵优惠:</span>
-          <span class="text-red-500"
+          <span class="text-red-500">{{ fenToYuan(order.couponPrice ?? 0) }} 元</span>
-            >{{ fenToYuan(order.couponPrice ?? 0) }} 元</span
-          >
         </div>
         <div class="flex">
           <span class="mr-2 min-w-fit text-gray-600">VIP 优惠:</span>
-          <span class="text-red-500"
+          <span class="text-red-500">{{ fenToYuan(order.vipPrice ?? 0) }} 元</span>
-            >{{ fenToYuan(order.vipPrice ?? 0) }} 元</span
-          >
         </div>
         <div class="flex">
           <span class="mr-2 min-w-fit text-gray-600">活动优惠:</span>
-          <span class="text-red-500"
+          <span class="text-red-500">{{ fenToYuan(order.discountPrice ?? 0) }} 元</span>
-            >{{ fenToYuan(order.discountPrice ?? 0) }} 元</span
-          >
         </div>
         <div class="flex">
           <span class="mr-2 min-w-fit text-gray-600">积分抵扣:</span>
-          <span class="text-red-500"
+          <span class="text-red-500">{{ fenToYuan(order.pointPrice ?? 0) }} 元</span>
-            >{{ fenToYuan(order.pointPrice ?? 0) }} 元</span
-          >
         </div>
         <div class="flex">
           <span class="mr-2 min-w-fit text-gray-600">应付金额:</span>
@@ -426,10 +418,8 @@ onMounted(async () => {
         </div>
         <div class="flex md:col-span-3">
           <span class="mr-2 min-w-fit text-gray-600">收货地址:</span>
-          <span
+          <span>{{ order.receiverAreaName }}
-            >{{ order.receiverAreaName }}
+            {{ order.receiverDetailAddress }}</span>
-            {{ order.receiverDetailAddress }}</span
-          >
         </div>
         <div class="flex">
           <span class="mr-2 min-w-fit text-gray-600">发货时间:</span>

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

@@ -109,11 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <Grid table-title="订单列表">
       <template #expand_content="{ row }">
         <div class="order-items">
-          <div
+          <div v-for="item in row.items" :key="item.id!" class="order-item">
-            v-for="(item, index) in row.items"
-            :key="index"
-            class="order-item"
-          >
             <div class="order-item-image">
               <ElImage :src="item.picUrl" class="h-10 w-10" />
             </div>
@@ -121,8 +117,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
               <div class="order-item-name">
                 {{ item.spuName }}
                 <ElTag
-                  v-for="(property, index) in item.properties"
+                  v-for="property in item.properties"
-                  :key="index"
+                  :key="property.id!"
                   class="ml-1"
                   size="small"
                 >
@@ -149,6 +145,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               label: $t('common.detail'),
+              type: 'primary',
               link: true,
               icon: ACTION_ICON.VIEW,
               auth: ['trade:order:query'],
@@ -158,6 +155,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :drop-down-actions="[
             {
               label: '发货',
+              type: 'primary',
               link: true,
               ifShow: () =>
                 row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
@@ -166,6 +164,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: '备注',
+              type: 'primary',
               link: true,
               onClick: handleRemark.bind(null, row),
             },

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

@@ -1,6 +1,8 @@
 <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';
@@ -8,10 +10,18 @@ import { ElMessage } from 'element-plus';
 import { useVbenForm } from '#/adapter/form';
 import { deliveryOrder } from '#/api/mall/trade/order';
 import { $t } from '#/locales';
+
 import { useDeliveryFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
+const formData = ref({
+  id: 0,
+  expressType: 'express',
+  logisticsId: undefined,
+  logisticsNo: '',
+});
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
@@ -33,14 +43,14 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
+    const data = await formApi.getValues();
     if (data.expressType === 'none') {
       // 无需发货的情况
       data.logisticsId = 0;
       data.logisticsNo = '';
     }
     try {
-      await deliveryOrder(data);
+      await deliveryOrder(data as MallOrderApi.DeliveryRequest);
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -55,15 +65,15 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<MallOrderApi.Order>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
     modalApi.lock();
     try {
-      await formApi.setValues({ id: data.id });
+      formData.value = data as any;
-      if (data.logisticsId === 0) {
+      formData.value.expressType = data.logisticsId === 0 ? 'none' : 'express';
-        await formApi.setValues({ expressType: 'none' });
+      // 设置到 values
-      }
+      await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
     }
@@ -72,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-1/3" title="发货">
+  <Modal title="发货" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
 </template>

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

@@ -1,17 +1,28 @@
 <script lang="ts" setup>
 import type { MallOrderApi } from '#/api/mall/trade/order';
 
+import { ref } from 'vue';
+
 import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
 
 import { ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
 import { updateOrderPrice } from '#/api/mall/trade/order';
 import { $t } from '#/locales';
+
 import { usePriceFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
+const formData = ref({
+  id: 0,
+  payPrice: '0',
+  adjustPrice: '0',
+  newPayPrice: '0',
+});
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
@@ -33,9 +44,12 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as MallOrderApi.PriceRequest;
+    const data = await formApi.getValues();
     try {
-      await updateOrderPrice(data);
+      await updateOrderPrice({
+        id: data.id,
+        adjustPrice: data.adjustPrice * 100, // 转换为分
+      });
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -50,16 +64,17 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<MallOrderApi.Order>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
     modalApi.lock();
     try {
-      await formApi.setValues({
+      formData.value.id = data.id;
-        id: data.id,
+      formData.value.payPrice = fenToYuan(data.payPrice || 0);
-        payPrice: data.payPrice,
+      formData.value.adjustPrice = fenToYuan(data.adjustPrice || 0);
-        adjustPrice: data.adjustPrice ? data.adjustPrice / 100 : 0,
+      formData.value.newPayPrice = formData.value.payPrice;
-      });
+      // 设置到 values
+      await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
     }
@@ -68,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-1/3" title="调整价格">
+  <Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['订单价格'])">
     <Form class="mx-4" />
   </Modal>
 </template>