<template>
|
<div class="order_details_style">
|
<div class="orderTitle">
|
<span>订单详情</span>
|
<span
|
class="tipText">温馨提示：为保障消费者个人信息安全，淘宝、京东、抖音等主流平台已启动订单处理链路的消费者敏感信息保护方案，包括“订单处理类”、“仓储物流类”。物流轨迹请相关人员前往对应物流快递公司官网自行查阅</span>
|
</div>
|
<div>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="订单编号：">{{form.orderId}}</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="创建时间：">{{form.orderTime}}</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="订单状态：">{{getLabel(orderStatusArray,form.orderStatus)}}</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<div>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="订单类型：">{{form.orderTypeName ? form.orderTypeName : '-'}}
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="推送状态：">
|
<span v-if="form.orderStatus !== '00' && form.orderStatus !== '01'">{{
|
form.pushAnjiType === '1'
|
? '推送成功'
|
: form.pushAnjiType === '2'
|
? '推送失败'
|
: '-'
|
}}</span>
|
<span v-else>-</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="是否扫码：">{{ setScanTypeText(form.scanType) }}</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<div>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="关联订单号：">{{form.sourceOrderCode}}</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="订单来源：">{{getLabel(orderSourceArr,form.orderSource)}}</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="保价金额：">￥ {{form.insuredPrice ? form.insuredPrice.toFixed(2) : 0}}
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<div>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="操作状态：">{{getLabel(orderOperationStatus,form.operationStatus)}}
|
</el-form-item>
|
</el-col>
|
<el-col :span="8" v-if="logisticSupplier">
|
<el-form-item label="物流服务商：">{{logisticSupplier}}</el-form-item>
|
</el-col>
|
<el-col :span="8" v-if="warehouse">
|
<el-form-item label="仓库名称：">{{warehouse}}</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<div>
|
<el-form-item label="订单备注：">{{form.orderMemberMemo ? form.orderMemberMemo : '-' }}
|
</el-form-item>
|
</div>
|
<hr />
|
<order-adress-component :form="form" :newForm="newForm"
|
:originalOrderAddressInfo="originalOrderAddressInfo"
|
@handleAdddressInfo="handleAdddressInfo">
|
</order-adress-component>
|
<div v-if="form.annexBizId">
|
<el-form-item label="附件：">
|
<div v-for="(item,index) in form.fileArr" :key="index">
|
<el-link class="urlLink" target="_blank" @click="downloadFile(item.key,item.oriFileName,)"
|
v-customLoading="{ isLoading: isLoading, percentage: percentage }">
|
{{item.oriFileName}}
|
</el-link>
|
</div>
|
</el-form-item>
|
</div>
|
<hr />
|
</div>
|
</template>
|
<script>
|
import orderMgtApi from '@/api/orderMgt'
|
import orderStatus from '@/utils/constant/orderStatus'
|
import orderOperationStatus from '@/utils/constant/orderOperationStatus'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
import orderSourceArr from '@/utils/constant/orderSourceArr'
|
import orderAdressComponent from './orderAdressComponent.vue'
|
import { downloadFile } from '@/utils/downloadFile'
|
export default {
|
props: ['form', 'newForm', 'originalOrderAddressInfo'],
|
components: { orderAdressComponent },
|
data() {
|
return {
|
// 物流服务商下拉列表数据源
|
warehouseData: [],
|
logisticSupplier: null,
|
warehouse: null,
|
orderStatusArray: orderStatus,
|
orderOperationStatus: orderOperationStatus, // 订单操作状态
|
orderSourceArr,
|
percentage: 0, // 进度条数值
|
isLoading: false, // 是否展示进度条遮罩
|
}
|
},
|
mounted() {
|
// 获取物流服务商
|
this.getLogisticsProvidersData();
|
},
|
methods: {
|
/**
|
* 获取物流服务商
|
*/
|
async getLogisticsProvidersData() {
|
const res = await orderMgtApi.getWarehouseTree({})
|
if (res.code === '200' && res.data.length) {
|
this.warehouseData = res.data;
|
const obj = this.warehouseData.find((v1) => v1.warehouseService === this.form.omsOrderDelivery.logisticSupplier);
|
if (obj) {
|
this.logisticSupplier = obj.warehouseServiceName
|
const obj1 = obj.treeList && obj.treeList.length ? obj.treeList.find((v2) => v2.entityWarehouseNo === this.form.omsOrderDelivery.warehouse) : null;
|
if (obj1) {
|
this.warehouse = obj1.warehouseName
|
}
|
}
|
}
|
},
|
/**
|
* 设置是否扫码的text
|
*/
|
setScanTypeText(value) {
|
if (value) {
|
let str = null
|
str = value === '1' ? '是' : value === '2' ? '否' : '-'
|
return str
|
} else {
|
return '-'
|
}
|
},
|
/**
|
* 下载文件设置文件名字
|
*/
|
async downloadFile(key, fileName) {
|
const config = {
|
onDownloadProgress: (ProgressEvent) => {
|
const total = ProgressEvent.total || ProgressEvent.loaded
|
const progressPercent = Math.round(
|
((ProgressEvent.loaded / total) * 100) | 0
|
)
|
this.percentage = progressPercent === 100 ? 99 : progressPercent
|
this.isLoading = true
|
},
|
url: `lbcloud-file/file/download/file?key=${key}`,
|
fileName,
|
type: 'varied'
|
}
|
const res = await downloadFile(config)
|
if (res) {
|
this.percentage = 100
|
this.isLoading = false
|
} else {
|
this.percentage = 100
|
this.isLoading = false
|
}
|
},
|
/**
|
* 获取数组的label
|
*/
|
getLabel(array, id) {
|
return getArrayLable(array, id)
|
},
|
handleAdddressInfo(data) {
|
this.$emit('handleAdddressInfo', data)
|
}
|
}
|
}
|
</script>
|
