wangmingchuan
/
yanzong_vue_store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

处理京东物流超链接

Browse Source
feature/0423
fanfan 10 months ago
parent e0cab4d838
commit 07b84fffd4
1 changed files with 147 additions and 134 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 281
      src/views/order/Detail.vue

281
src/views/order/Detail.vue
Unescape View File

@ -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 {

Write Preview
Loading…
Cancel
Save