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 {