trade：完成管理后台的订单详情的简单对接

YunaiV
1 parent c5408965
Showing 5 changed files with 102 additions and 136 deletions
yudao-module-mall/yudao-module-trade-api/src/main/java/cn/iocoder/yudao/module/trade/enums/order/TradeOrderItemAfterSaleStatusEnum.java
yudao-module-mall/yudao-module-trade-biz/src/main/java/cn/iocoder/yudao/module/trade/controller/admin/order/vo/TradeOrderBaseVO.java
yudao-ui-admin/src/utils/dict.js
yudao-ui-admin/src/views/mall/trade/order/detail.vue
yudao-ui-admin/src/views/mall/trade/order/index.vue
@@ -16,9 +16,9 @@ import java.util.Arrays;
 @Getter
 public enum TradeOrderItemAfterSaleStatusEnum implements IntArrayValuable {
-    NONE(0, "未申请"),
-    APPLY(1, "已申请"),
-    SUCCESS(2, "申请成功");
+    NONE(0, "未售后"),
+    APPLY(1, "售后中"),
+    SUCCESS(2, "已退款");
     public static final int[] ARRAYS = Arrays.stream(values()).mapToInt(TradeOrderItemAfterSaleStatusEnum::getStatus).toArray();
@@ -24,6 +24,9 @@ public class TradeOrderBaseVO {
     @ApiModelProperty(value = "创建时间", required = true, notes = "下单时间")
     private Date createTime;
+    @ApiModelProperty(value = "订单类型", required = true, example = "1", notes = "参见 TradeOrderTypeEnum 枚举")
+    private Integer type;
+
     @ApiModelProperty(value = "订单来源", required = true, example = "1", notes = "参见 TerminalEnum 枚举")
     private Integer terminal;
@@ -67,6 +67,7 @@ export const DICT_TYPE = {
   TRADE_AFTER_SALE_TYPE: 'trade_after_sale_type', // 售后 - 类型
   TRADE_ORDER_TYPE: 'trade_order_type', // 订单 - 类型
   TRADE_ORDER_STATUS: 'trade_order_status', // 订单 - 状态
+  TRADE_ORDER_ITEM_AFTER_SALE_STATUS: 'trade_order_item_after_sale_status', // 订单项 - 售后状态
   // ========== MALL - PROMOTION 模块 ==========
   PROMOTION_DISCOUNT_TYPE: 'promotion_discount_type', // 优惠类型
@@ -2,23 +2,104 @@
   <div class="app-container order-detail-page">
     <!-- 订单信息 -->
     <el-descriptions title="订单信息">
-      <el-descriptions-item label="支付单号">123</el-descriptions-item>
+      <el-descriptions-item label="订单号">{{ order.no }}</el-descriptions-item>
+      <el-descriptions-item label="配送方式">物流配送</el-descriptions-item> <!-- TODO 芋艿：待实现 -->
+      <el-descriptions-item label="营销活动">物流配送</el-descriptions-item> <!-- TODO 芋艿：待实现 -->
+      <el-descriptions-item label="订单类型">
+        <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="order.type" />
+      </el-descriptions-item>
+      <el-descriptions-item label="收货人">{{ order.receiverName }}</el-descriptions-item>
+      <el-descriptions-item label="买家留言">{{ order.userRemark }}</el-descriptions-item>
+      <el-descriptions-item label="订单来源">
+        <dict-tag :type="DICT_TYPE.TERMINAL" :value="order.terminal" />
+      </el-descriptions-item>
+      <el-descriptions-item label="联系电话">{{ order.receiverMobile }}</el-descriptions-item>
+      <el-descriptions-item label="商家备注">{{ order.remark }}</el-descriptions-item>
+      <el-descriptions-item label="支付单号">{{ order.payOrderId }}</el-descriptions-item>
+      <el-descriptions-item label="付款方式">
+        <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE_TYPE" :value="order.payChannelCode" />
+      </el-descriptions-item>
+      <el-descriptions-item label="买家">{{ order.user.nickname }}</el-descriptions-item> <!-- TODO 芋艿：待实现：跳转会员 -->
+      <el-descriptions-item label="收货地址">
+        {{ order.receiverAreaName }} &nbsp; {{ order.receiverDetailAddress }} &nbsp;
+        <el-link v-clipboard:copy="order.receiverAreaName + ' ' + order.receiverDetailAddress"
+                 v-clipboard:success="clipboardSuccess" icon="el-icon-document-copy" type="primary"/>
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <!-- 订单状态 -->
+    <el-descriptions title="订单状态" :column="1">
+      <el-descriptions-item label="订单状态">
+        <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="order.status" />
+      </el-descriptions-item>
+      <el-descriptions-item label-class-name="no-colon">
+        <el-button type="primary" size="small">调整价格</el-button>  <!-- TODO 芋艿：待实现 -->
+        <el-button type="primary" size="small">备注</el-button> <!-- TODO 芋艿：待实现 -->
+        <el-button type="primary" size="small">发货</el-button> <!-- TODO 芋艿：待实现 -->
+        <el-button type="primary" size="small">关闭订单</el-button>  <!-- TODO 芋艿：待实现 -->
+        <el-button type="primary" size="small">修改地址</el-button>  <!-- TODO 芋艿：待实现 -->
+        <el-button type="primary" size="small">打印电子面单</el-button>  <!-- TODO 芋艿：待实现 -->
+        <el-button type="primary" size="small">打印发货单</el-button>  <!-- TODO 芋艿：待实现 -->
+        <el-button type="primary" size="small">确认收货</el-button>  <!-- TODO 芋艿：待实现 -->
+      </el-descriptions-item>
+      <el-descriptions-item label="提醒" label-style="color: red">
+        买家付款成功后，货款将直接进入您的商户号（微信、支付宝）<br />
+        请及时关注你发出的包裹状态，确保可以配送至买家手中 <br />
+        如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <!-- 物流信息 TODO -->
+
+    <!-- 商品信息 -->
+    <el-descriptions title="商品信息" :column="6">
+      <el-descriptions-item labelClassName="no-colon">
+        <el-table :data="order.items" border>
+          <el-table-column prop="spuName" label="商品" width="700">
+            <template slot-scope="{ row }">
+              {{row.spuName}}
+              <el-tag size="medium" v-for="property in row.properties">{{property.propertyName}}：{{property.valueName}}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="originalUnitPrice" label="单价(元)" width="180">
+            <template slot-scope="{ row }">
+              ￥{{ (row.originalUnitPrice / 100.0).toFixed(2) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="count" label="数量" width="180"/>
+          <el-table-column prop="originalPrice" label="小计（元）" width="180">
+            <template slot-scope="{ row }">
+              ￥{{ (row.originalPrice / 100.0).toFixed(2) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="afterSaleStatus" label="退款状态">
+            <template slot-scope="{ row }">
+              <dict-tag :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS" :value="row.afterSaleStatus" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-descriptions-item>
+      <el-descriptions-item v-for="(item,index) in 5" label-class-name="no-colon" /> <!-- 占位 -->
+      <el-descriptions-item label="商品总额">￥{{ (order.originalPrice / 100.0).toFixed(2) }}</el-descriptions-item>
+      <el-descriptions-item label="运费金额">￥{{ (order.deliveryPrice / 100.0).toFixed(2) }}</el-descriptions-item>
+      <el-descriptions-item label="订单调价">￥{{ (order.adjustPrice / 100.0).toFixed(2) }}</el-descriptions-item>
+      <el-descriptions-item label="商品优惠" label-style="color: red">
+        ￥{{ ((order.originalPrice - order.originalPrice) / 100.0).toFixed(2) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="订单优惠" label-style="color: red">
+        ￥{{ (order.discountPrice / 100.0).toFixed(2) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="积分抵扣" label-style="color: red">
+        ￥{{ (order.pointPrice / 100.0).toFixed(2) }}
+      </el-descriptions-item>
+      <el-descriptions-item v-for="(item,index) in 5" label-class-name="no-colon" /> <!-- 占位 -->
+      <el-descriptions-item label="应付金额">
+        ￥{{ (order.payPrice / 100.0).toFixed(2) }}
+      </el-descriptions-item>
     </el-descriptions>
     <template v-for="(group, index) in detailGroups">
       <el-descriptions v-bind="group.groupProps" :key="`group_${index}`" :title="group.title">
-        <!-- 商品信息 -->
-        <el-descriptions-item  v-if="group.key === 'goodsInfo'" labelClassName="no-colon">
-          <el-table border>
-            <el-table-column prop="date" label="商品" width="180"/>
-            <el-table-column prop="jg" label="价格"/>
-            <el-table-column prop="spbm" label="商品编码"/>
-            <el-table-column prop="xl" label="数量"/>
-            <el-table-column prop="xj" label="小计（元）"/>
-            <el-table-column prop="tkzt" label="退款状态"/>
-            <el-table-column prop="zt" label="状态"/>
-          </el-table>
-        </el-descriptions-item>
         <!-- 订单操作日志 -->
         <el-descriptions-item  v-if="group.key === 'orderLog'" labelClassName="no-colon">
@@ -74,30 +155,12 @@
             </el-tab-pane>
           </el-tabs>
         </el-descriptions-item>
-
-        <!--订单详情、订单状态-->
-        <el-descriptions-item v-else v-for="(child, cIdx) in group.children" v-bind="child.childProps" :key="`child_${cIdx}`" :label="child.label">
-
-          <!-- 操作按钮(订单状态)-->
-          <template v-if="group.key === 'orderStatus' && child.valueKey === 'actions'" slot="label">
-            <el-button type="primary">备注</el-button>
-            <el-button type="primary">打印发货单</el-button>
-          </template>
-
-          <!-- 内容 -->
-          <template v-else>
-            {{detailInfo[child.valueKey]}}
-            <!--复制地址(订单详情) -->
-            <el-link v-if="child.valueKey==='shdz'" v-clipboard:copy="detailInfo[child.valueKey]" v-clipboard:success="clipboardSuccess" icon="el-icon-document-copy" type="primary"/>
-          </template>
-        </el-descriptions-item>
       </el-descriptions>
     </template>
   </div>
 </template>
 <script>
-import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 import { getOrderDetail } from "@/api/mall/trade/order";
 export default {
@@ -106,72 +169,22 @@ export default {
     return {
       detailGroups: [
         {
-          title: '订单详情',
-          children: [
-            { label: '支付单号', valueKey: 'jylsh'},
-            { label: '配送方式', valueKey: 'psfs'},
-            { label: '营销活动', valueKey: 'yxhd'},
-            { label: '订单编号', valueKey: 'ddbh'},
-            { label: '收货人', valueKey: 'shr'},
-            { label: '买家留言', valueKey: 'mjly'},
-            { label: '订单类型', valueKey: 'ddlx'},
-            { label: '联系电话', valueKey: 'lxdh'},
-            { label: '备注', valueKey: 'bz'},
-            { label: '订单来源', valueKey: 'ddly'},
-            { label: '付款方式', valueKey: 'fkfs'},
-            { label: '买家', valueKey: 'mj'},
-            { label: '收货地址', valueKey: 'shdz'}
-          ]
-        },
-        {
-          title: '订单状态',
-          key: 'orderStatus',
-          groupProps: {
-            column: 1
-          },
-          children: [
-            { label: '订单状态', valueKey: 'ddzt', childProps: { contentStyle: { color: 'red' }}},
-            { label: '', valueKey: 'actions', childProps: { labelClassName: 'no-colon'}},
-            { label: '提醒', valueKey: 'tx', childProps: { labelStyle: { color: 'red' }}}
-          ]
-        },
-        {
           title: '物流信息',
           key: 'expressInfo',
           children: [
             { label: '发货时间', valueKey: 'fhsj'},
             { label: '物流公司', valueKey: 'wlgs'},
             { label: '运单号', valueKey: 'ydh'},
-            { label: '商品信息', valueKey: 'goodsList', childProps: { span: 3 }},
             { label: '物流状态', valueKey: 'wlzt', childProps: { span: 3 }},
             { label: '物流详情', valueKey: 'wlxq'}
           ]
         },
         {
-          title: '商品信息',
-          key: 'goodsInfo'
-        },
-        {
           title: '订单操作日志',
           key: 'orderLog'
         }
       ],
       detailInfo: {
-        jylsh: '16674653573152181000',
-        psfs: '物流配送',
-        yxhd: '',
-        ddbh: '20221103164918001',
-        shr: '',
-        mjly: '',
-        ddlx: '',
-        lxdh: '',
-        bz: '',
-        ddly: '',
-        shdz: '陕西省-西安市-莲湖区-九座花园西区(莲湖区二环南路西段202)陕西省-西安市-莲湖区-九座花园西区(莲湖区二环南路西段202)',
-        fkfs: '',
-        mj: '',
-        ddzt: '已完成',
-        tx: '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）请及时关注你发出的包裹状态，确保可以配送至买家手中如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商',
         expressInfo: [ // 物流信息
           {
             label: '包裹1',
@@ -201,42 +214,7 @@ export default {
                 content: '快件已发车',
                 timestamp: '2018-04-11 12:55:52'
               }
-            ],
-            goodsList: [ // 包裹下的商品列表
-              {
-                name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
-                count: 6,
-                imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-              },
-              {
-                name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
-                count: 6,
-                imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-              },
-              {
-                name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉',
-                count: 6,
-                imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-              }
             ]
-          },
-          {
-            label: '包裹2',
-            name: 'bg1',
-            fhsj: '',
-            wlgs: '',
-            ydh: '',
-            wlzt: '',
-            goodsInfo: {}
-          },
-          {
-            label: '包裹3',
-            name: 'bg1',
-            fhsj: '',
-            wlgs: '',
-            ydh: '',
-            wlzt: '',
-            goodsInfo: {}
           }
         ],
         orderLog: [ // 订单操作日志
@@ -253,6 +231,7 @@ export default {
       },
       order: {
         items: [],
+        user: {},
       },
     }
   },
@@ -89,23 +89,6 @@
                 </el-col>
                 <el-col :span="6" align="right">
                   <el-button type="text" @click="goToDetail(row)">详情</el-button>
-                  <el-dropdown style="margin-left: 10px">
-                    <el-button type="text">
-                      更多操作<i class="el-icon-arrow-down el-icon--right"></i>
-                    </el-button>
-                    <el-dropdown-menu slot="dropdown">
-                      <!-- TODO @芋艿：【暂未开发】关闭订单 -->
-                      <el-dropdown-item><el-button type="text">关闭订单</el-button></el-dropdown-item>
-                      <!-- TODO @芋艿：【暂未开发】修改地址 -->
-                      <el-dropdown-item><el-button type="text">修改地址</el-button></el-dropdown-item>
-                      <!-- TODO @芋艿：【暂未开发】调整价格 -->
-                      <el-dropdown-item><el-button type="text">调整价格</el-button></el-dropdown-item>
-                      <!-- TODO @芋艿：【暂未开发】备注 -->
-                      <el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item>
-                      <!-- TODO @芋艿：【暂未开发】关闭订单 -->
-                      <el-dropdown-item><el-button type="text">打印发货单</el-button></el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
                 </el-col>
               </el-row>
               <!-- 订单下的商品 -->