From 07b84fffd47b999df0499ffc059a0886fbe7a2b1 Mon Sep 17 00:00:00 2001
From: fanfan <franceesfan@163.com>
Date: Wed, 17 Apr 2024 11:21:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E4=BA=AC=E4=B8=9C=E7=89=A9?=
 =?UTF-8?q?=E6=B5=81=E8=B6=85=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/Detail.vue | 281 +++++++++++++++++++------------------
 1 file changed, 147 insertions(+), 134 deletions(-)

diff --git a/src/views/order/Detail.vue b/src/views/order/Detail.vue
index 0241eec..5f100f2 100644
--- a/src/views/order/Detail.vue
+++ b/src/views/order/Detail.vue
@@ -14,31 +14,27 @@
             </li>
             <li>
               <span>付款</span>
-              <div
-                v-if="record.pay_status == PayStatusEnum.SUCCESS.value"
-                class="tip"
-              >付款于 {{ record.pay_time }}</div>
+              <div v-if="record.pay_status == PayStatusEnum.SUCCESS.value" class="tip">
+                付款于 {{ record.pay_time }}
+              </div>
             </li>
             <li>
               <span>发货</span>
-              <div
-                v-if="record.delivery_status != DeliveryStatusEnum.NOT_DELIVERED.value"
-                class="tip"
-              >发货于 {{ record.delivery_time }}</div>
+              <div v-if="record.delivery_status != DeliveryStatusEnum.NOT_DELIVERED.value" class="tip">
+                发货于 {{ record.delivery_time }}
+              </div>
             </li>
             <li>
               <span>收货</span>
-              <div
-                v-if="record.receipt_status == ReceiptStatusEnum.RECEIVED.value"
-                class="tip"
-              >收货于 {{ record.receipt_time }}</div>
+              <div v-if="record.receipt_status == ReceiptStatusEnum.RECEIVED.value" class="tip">
+                收货于 {{ record.receipt_time }}
+              </div>
             </li>
             <li>
               <span>完成</span>
-              <div
-                v-if="record.order_status == OrderStatusEnum.COMPLETED.value"
-                class="tip"
-              >完成于 {{ record.receipt_time }}</div>
+              <div v-if="record.order_status == OrderStatusEnum.COMPLETED.value" class="tip">
+                完成于 {{ record.receipt_time }}
+              </div>
             </li>
           </ul>
         </div>
@@ -52,60 +48,56 @@
           <!-- 提示栏 -->
           <div class="alerts mt-10 mb-15">
             <a-alert
-              v-if="record.order_status== OrderStatusEnum.APPLY_CANCEL.value"
+              v-if="record.order_status == OrderStatusEnum.APPLY_CANCEL.value"
               message="当前买家已付款并申请取消订单，请审核是否同意，如同意则自动退回付款金额（原路退款）并关闭订单。"
               banner
             />
           </div>
           <!-- 操作栏 -->
           <div class="actions clearfix mt-10">
-            <div
-              v-if="$module('order-updatePrice') &&$auth('/order/detail.updatePrice')"
-              class="action-item"
-            >
-              <a-button
-                v-if="record.pay_status == PayStatusEnum.PENDING.value"
-                @click="handleUpdatePrice"
-              >订单改价</a-button>
+            <div v-if="$module('order-updatePrice') && $auth('/order/detail.updatePrice')" class="action-item">
+              <a-button v-if="record.pay_status == PayStatusEnum.PENDING.value" @click="handleUpdatePrice"
+                >订单改价</a-button
+              >
             </div>
             <div class="action-item" v-if="$auth('/order/list/all.deliver')">
               <a-button
-                v-if="(
-                  record.pay_status == PayStatusEnum.SUCCESS.value
-                    && inArray(record.delivery_type, [ DeliveryTypeEnum.EXPRESS.value, DeliveryTypeEnum.NOTHING.value])
-                    && record.delivery_status != DeliveryStatusEnum.DELIVERED.value
-                    && !inArray(record.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
-                )"
+                v-if="
+                  record.pay_status == PayStatusEnum.SUCCESS.value &&
+                  inArray(record.delivery_type, [DeliveryTypeEnum.EXPRESS.value, DeliveryTypeEnum.NOTHING.value]) &&
+                  record.delivery_status != DeliveryStatusEnum.DELIVERED.value &&
+                  !inArray(record.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
+                "
                 type="primary"
                 @click="handleDelivery"
-              >发货</a-button>
+                >发货</a-button
+              >
             </div>
             <div class="action-item" v-if="$auth('/order/list/all.extract')">
               <a-button
-                v-if="(
-                  record.pay_status == PayStatusEnum.SUCCESS.value
-                    && record.delivery_type == DeliveryTypeEnum.EXTRACT.value
-                    && record.delivery_status != DeliveryStatusEnum.DELIVERED.value
-                    && !inArray(record.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
-                )"
+                v-if="
+                  record.pay_status == PayStatusEnum.SUCCESS.value &&
+                  record.delivery_type == DeliveryTypeEnum.EXTRACT.value &&
+                  record.delivery_status != DeliveryStatusEnum.DELIVERED.value &&
+                  !inArray(record.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
+                "
                 type="primary"
                 @click="handleExtract"
-              >自提核销</a-button>
+                >自提核销</a-button
+              >
             </div>
             <div class="action-item" v-if="$auth('/order/list/all.cancel')">
               <a-button
                 v-if="record.order_status == OrderStatusEnum.APPLY_CANCEL.value"
                 type="primary"
                 @click="handleCancel"
-              >审核取消订单</a-button>
+                >审核取消订单</a-button
+              >
             </div>
             <div class="action-item" v-if="$auth('/order/detail.merchantRemark')">
               <a-button @click="handleMerchantRemark">商家备注</a-button>
             </div>
-            <div
-              v-if="$module('order-printer') && $auth('/order/detail.printer')"
-              class="action-item"
-            >
+            <div v-if="$module('order-printer') && $auth('/order/detail.printer')" class="action-item">
               <a-button @click="handlePrinter">打印小票</a-button>
             </div>
           </div>
@@ -116,10 +108,7 @@
           <a-descriptions-item label="订单号">{{ record.order_no }}</a-descriptions-item>
           <a-descriptions-item label="实付款金额">￥{{ record.pay_price }}</a-descriptions-item>
           <a-descriptions-item label="支付方式">
-            <a-tag
-              color="green"
-              v-if="record.pay_method"
-            >{{ PaymentMethodEnum[record.pay_method].name }}</a-tag>
+            <a-tag color="green" v-if="record.pay_method">{{ PaymentMethodEnum[record.pay_method].name }}</a-tag>
             <span v-else>--</span>
           </a-descriptions-item>
           <a-descriptions-item label="配送方式">
@@ -127,9 +116,9 @@
           </a-descriptions-item>
           <a-descriptions-item label="运费金额">￥{{ record.express_price }}</a-descriptions-item>
           <a-descriptions-item label="订单状态">
-            <a-tag
-              :color="renderOrderStatusColor(record.order_status)"
-            >{{ OrderStatusEnum[record.order_status].name }}</a-tag>
+            <a-tag :color="renderOrderStatusColor(record.order_status)">{{
+              OrderStatusEnum[record.order_status].name
+            }}</a-tag>
           </a-descriptions-item>
           <a-descriptions-item label="买家信息">
             <a-tooltip>
@@ -138,16 +127,16 @@
             </a-tooltip>
           </a-descriptions-item>
           <a-descriptions-item label="买家留言">
-            <span>{{ record.buyer_remark ? record.buyer_remark :'-' }}</span>
+            <span>{{ record.buyer_remark ? record.buyer_remark : '-' }}</span>
           </a-descriptions-item>
           <a-descriptions-item label="商家备注">
-            <span>{{ record.merchant_remark ? record.merchant_remark :'-' }}</span>
+            <span>{{ record.merchant_remark ? record.merchant_remark : '-' }}</span>
           </a-descriptions-item>
-            <a-descriptions-item v-if="record.trade" label="第三方支付订单号">
-            <span>{{ record.trade ? record.trade.out_trade_no :'-' }}</span>
+          <a-descriptions-item v-if="record.trade" label="第三方支付订单号">
+            <span>{{ record.trade ? record.trade.out_trade_no : '-' }}</span>
           </a-descriptions-item>
           <a-descriptions-item v-if="record.trade" label="支付流水号">
-            <span>{{ record.trade ? record.trade.trade_no :'-' }}</span>
+            <span>{{ record.trade ? record.trade.trade_no : '-' }}</span>
           </a-descriptions-item>
         </a-descriptions>
       </a-card>
@@ -156,12 +145,7 @@
       <a-card class="mt-20" :bordered="false">
         <div class="ant-descriptions-title">订单商品</div>
         <div class="goods-list">
-          <a-table
-            rowKey="order_goods_id"
-            :columns="goodsColumns"
-            :dataSource="record.goods"
-            :pagination="false"
-          >
+          <a-table rowKey="order_goods_id" :columns="goodsColumns" :dataSource="record.goods" :pagination="false">
             <!-- 商品信息 -->
             <template slot="goodsInfo" slot-scope="text, item">
               <GoodsItem
@@ -169,7 +153,7 @@
                   image: item.goods_image,
                   imageAlt: '商品图片',
                   title: item.goods_name,
-                  goodsProps: item.goods_props
+                  goodsProps: item.goods_props,
                 }"
               />
             </template>
@@ -232,22 +216,33 @@
       <template v-if="record.order_type == OrderTypeEnum.PHYSICAL.value">
         <!-- 物流配送信息 -->
         <a-card
-          v-if="(
-            record.pay_status == PayStatusEnum.SUCCESS.value
-              && record.delivery_status != DeliveryStatusEnum.NOT_DELIVERED.value
-              && !inArray(record.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
-          )"
+          v-if="
+            record.pay_status == PayStatusEnum.SUCCESS.value &&
+            record.delivery_status != DeliveryStatusEnum.NOT_DELIVERED.value &&
+            !inArray(record.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
+          "
           class="mt-20"
           :bordered="false"
         >
           <!-- 此处仅用于兼容旧物流数据 -->
           <a-descriptions v-if="!record.delivery.length && record.express" title="配送信息">
             <a-descriptions-item label="物流公司">{{ record.express.express_name }}</a-descriptions-item>
-            <a-descriptions-item label="物流单号">{{ record.express_no }}</a-descriptions-item>
+            <a-descriptions-item label="物流单号">
+              <a
+                v-if="record.isLink"
+                :href="record.express_no"
+                style="white-space: pre-wrap; color: #00acff"
+                target="_blank"
+                >{{ record.express_no ? '京东物流' : '--' }}</a
+              >
+              <p v-else style="white-space: pre-wrap">
+                {{ record.express_no ? record.express_no : '--' }}
+              </p></a-descriptions-item
+            >
             <a-descriptions-item label="发货状态">
-              <a-tag
-                :color="record.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''"
-              >{{ DeliveryStatusEnum[record.delivery_status].name }}</a-tag>
+              <a-tag :color="record.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''">{{
+                DeliveryStatusEnum[record.delivery_status].name
+              }}</a-tag>
             </a-descriptions-item>
             <a-descriptions-item label="发货时间">{{ record.delivery_time }}</a-descriptions-item>
           </a-descriptions>
@@ -255,16 +250,22 @@
           <div v-if="record.delivery.length">
             <a-descriptions title="发货信息"></a-descriptions>
             <a-tabs :default-active-key="1" :class="{ 'hide-bar': record.delivery.length < 2 }">
-              <a-tab-pane
-                :tab="`包裹${index + 1}`"
-                v-for="(item, index) in record.delivery"
-                :key="index + 1"
-              >
+              <a-tab-pane :tab="`包裹${index + 1}`" v-for="(item, index) in record.delivery" :key="index + 1">
                 <a-descriptions>
-                  <a-descriptions-item
-                    label="物流公司"
-                  >{{ item.delivery_method == 20 ? '无需物流' : item.express.express_name }}</a-descriptions-item>
-                  <a-descriptions-item label="物流单号">{{ item.express_no ? item.express_no : '--' }}</a-descriptions-item>
+                  <a-descriptions-item label="物流公司">{{
+                    item.delivery_method == 20 ? '无需物流' : item.express.express_name
+                  }}</a-descriptions-item>
+                  <!-- isLink -->
+                  <a-descriptions-item  label="物流单号">
+                    <a
+                      v-if="item.isLink"
+                      :href="item.express_no"
+                      style="white-space: pre-wrap; color: #00acff"
+                      target="_blank"
+                      >{{ item.express_no ? '京东物流'  : '--' }}</a
+                    >
+                    <p v-else style="white-space: pre-wrap">{{ item.express_no ? item.express_no : '--' }}</p>
+                  </a-descriptions-item>
                   <a-descriptions-item label="发货状态">
                     <a-tag color="green">已发货</a-tag>
                   </a-descriptions-item>
@@ -284,11 +285,7 @@
         </a-card>
 
         <!-- 买家收货信息 -->
-        <a-card
-          v-if="record.delivery_type == DeliveryTypeEnum.EXPRESS.value"
-          class="mt-20"
-          :bordered="false"
-        >
+        <a-card v-if="record.delivery_type == DeliveryTypeEnum.EXPRESS.value" class="mt-20" :bordered="false">
           <!-- 收货信息 -->
           <a-descriptions title="买家收货地址">
             <a-descriptions-item label="收货人姓名">{{ record.address.name }}</a-descriptions-item>
@@ -303,11 +300,7 @@
         </a-card>
 
         <!-- 上门自提 -->
-        <a-card
-          v-if="record.delivery_type == DeliveryTypeEnum.EXTRACT.value"
-          class="mt-20"
-          :bordered="false"
-        >
+        <a-card v-if="record.delivery_type == DeliveryTypeEnum.EXTRACT.value" class="mt-20" :bordered="false">
           <!-- 自提信息 -->
           <a-descriptions title="自提信息">
             <a-descriptions-item label="姓名">
@@ -336,11 +329,11 @@
           </a-descriptions>
           <!-- 核销信息 -->
           <template
-            v-if="(
-            record.pay_status == PayStatusEnum.SUCCESS.value
-              && record.delivery_status == DeliveryStatusEnum.DELIVERED.value
-              && !inArray(record.order_status ,[OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
-          )"
+            v-if="
+              record.pay_status == PayStatusEnum.SUCCESS.value &&
+              record.delivery_status == DeliveryStatusEnum.DELIVERED.value &&
+              !inArray(record.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
+            "
           >
             <a-divider class="o-divider" />
             <a-descriptions title="核销信息">
@@ -357,9 +350,9 @@
                 </a-tooltip>
               </a-descriptions-item>
               <a-descriptions-item label="核销状态">
-                <a-tag
-                  :color="record.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''"
-                >已核销</a-tag>
+                <a-tag :color="record.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''"
+                  >已核销</a-tag
+                >
               </a-descriptions-item>
               <a-descriptions-item label="核销时间">{{ record.delivery_time }}</a-descriptions-item>
             </a-descriptions>
@@ -388,7 +381,7 @@ import {
   OrderSourceEnum,
   OrderStatusEnum,
   PayStatusEnum,
-  ReceiptStatusEnum
+  ReceiptStatusEnum,
 } from '@/common/enum/order'
 import { PaymentMethodEnum } from '@/common/enum/payment'
 
@@ -396,33 +389,33 @@ import { PaymentMethodEnum } from '@/common/enum/payment'
 const goodsColumns = [
   {
     title: '商品信息',
-    scopedSlots: { customRender: 'goodsInfo' }
+    scopedSlots: { customRender: 'goodsInfo' },
   },
   {
     title: '商品编码',
     dataIndex: 'goods_no',
-    scopedSlots: { customRender: 'goods_no' }
+    scopedSlots: { customRender: 'goods_no' },
   },
   {
     title: '重量(Kg)',
     dataIndex: 'goods_weight',
-    scopedSlots: { customRender: 'goods_weight' }
+    scopedSlots: { customRender: 'goods_weight' },
   },
   {
     title: '单价',
     dataIndex: 'goods_price',
-    scopedSlots: { customRender: 'goods_price' }
+    scopedSlots: { customRender: 'goods_price' },
   },
   {
     title: '购买数量',
     dataIndex: 'total_num',
-    scopedSlots: { customRender: 'total_num' }
+    scopedSlots: { customRender: 'total_num' },
   },
   {
     title: '商品总价',
     dataIndex: 'total_price',
-    scopedSlots: { customRender: 'total_price' }
-  }
+    scopedSlots: { customRender: 'total_price' },
+  },
 ]
 
 export default {
@@ -435,9 +428,9 @@ export default {
     CancelForm,
     PrinterForm,
     PriceForm,
-    RemarkForm
+    RemarkForm,
   },
-  data () {
+  data() {
     return {
       // 枚举类
       OrderTypeEnum,
@@ -459,39 +452,55 @@ export default {
       // 订单步骤位置
       progress: 2,
       // 商品内容表头
-      goodsColumns
+      goodsColumns,
     }
   },
-  created () {
+  created() {
     // 记录订单ID
     this.orderId = this.$route.query.orderId
     // 刷新页面
     this.handleRefresh()
   },
   methods: {
-
     // 刷新页面
-    handleRefresh () {
+    handleRefresh() {
       // 获取当前记录
       this.getDetail()
     },
-
+    containsLetterMix(str, mix) {
+      return new RegExp(mix.split('').join('\\w*')).test(str)
+    },
     // 获取当前记录
-    getDetail () {
+    getDetail() {
       const { orderId } = this
       this.isLoading = true
       Api.detail({ orderId })
-        .then(result => {
+        .then((result) => {
           // 当前记录
           this.record = result.data.detail
+          if (this.record.delivery.length) {
+            this.record.delivery.forEach((item) => {
+              if (this.containsLetterMix(item.express_no, 'jd.com')) {
+                item.isLink = true
+              } else {
+                item.isLink = false
+              }
+            })
+          } else {
+            if (this.containsLetterMix(record.express_no, 'jd.com')) {
+              record.isLink = true
+            } else {
+              record.isLink = false
+            }
+          }
           // 初始化数据
           this.initData()
         })
-        .finally(() => this.isLoading = false)
+        .finally(() => (this.isLoading = false))
     },
 
     // 初始化数据
-    initData () {
+    initData() {
       // 步骤条位置
       this.initProgress()
       // 发货单的商品信息
@@ -499,7 +508,7 @@ export default {
     },
 
     // 步骤条位置
-    initProgress () {
+    initProgress() {
       const { record } = this
       this.progress = 2
       record.pay_status == PayStatusEnum.SUCCESS.value && (this.progress += 1)
@@ -508,66 +517,67 @@ export default {
     },
 
     // 发货单的商品信息
-    initDeliveryGoods () {
+    initDeliveryGoods() {
       const { record } = this
       if (record.delivery.length) {
-        record.delivery.forEach(deliveryItem => {
-          deliveryItem.goods.forEach(deliveryGoodsItem => {
-            deliveryGoodsItem.goods = record.goods.find(goods => goods.order_goods_id == deliveryGoodsItem.order_goods_id)
+        record.delivery.forEach((deliveryItem) => {
+          deliveryItem.goods.forEach((deliveryGoodsItem) => {
+            deliveryGoodsItem.goods = record.goods.find(
+              (goods) => goods.order_goods_id == deliveryGoodsItem.order_goods_id
+            )
           })
         })
       }
     },
 
     // 渲染订单状态标签颜色
-    renderOrderStatusColor (orderStatus) {
+    renderOrderStatusColor(orderStatus) {
       const { OrderStatusEnum } = this
       const ColorEnum = {
         [OrderStatusEnum.NORMAL.value]: '',
         [OrderStatusEnum.CANCELLED.value]: 'red',
         [OrderStatusEnum.APPLY_CANCEL.value]: 'red',
-        [OrderStatusEnum.COMPLETED.value]: 'green'
+        [OrderStatusEnum.COMPLETED.value]: 'green',
       }
       return ColorEnum[orderStatus]
     },
 
     // 订单发货
-    handleDelivery () {
+    handleDelivery() {
       const { record } = this
       this.$refs.DeliveryForm.show(record)
     },
 
     // 自提核销
-    handleExtract () {
+    handleExtract() {
       const { record } = this
       this.$refs.ExtractForm.show(record)
     },
 
     // 审核取消订单
-    handleCancel () {
+    handleCancel() {
       const { record } = this
       this.$refs.CancelForm.show(record)
     },
 
     // 小票打印
-    handlePrinter () {
+    handlePrinter() {
       const { record } = this
       this.$refs.PrinterForm.show(record)
     },
 
     // 订单改价
-    handleUpdatePrice () {
+    handleUpdatePrice() {
       const { record } = this
       this.$refs.PriceForm.show(record)
     },
 
     // 商家备注
-    handleMerchantRemark () {
+    handleMerchantRemark() {
       const { record } = this
       this.$refs.RemarkForm.show(record)
     },
-
-  }
+  },
 }
 </script>
 <style lang="less" scoped>
@@ -737,7 +747,10 @@ export default {
 /deep/.ant-tabs-bar {
   margin-bottom: 20px;
 }
-
+/deep/.ant-descriptions-item-content {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
 // 已发货的商品列表
 .deliver-goods-list {
   .goods-item {