<template>
|
<div>
|
<div class="orderTitle">商品信息</div>
|
<div class="omsOrderShops">
|
<el-table border :data="form.omsOrderItems">
|
<el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
|
<el-table-column label="商品主编码" prop="spuNum" show-overflow-tooltip width="160px">
|
</el-table-column>
|
<!-- <el-table-column label="赠品图片" :key="Math.random()" align="center">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.imgUrl"></product-img>
|
</template>
|
</el-table-column> -->
|
<el-table-column label="商品名称" prop="spuName" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span class="giftStyle" v-if="scope.row.promotionType === '2'">赠</span>
|
<span class="giftStyle" v-if="scope.row.refundStatus && scope.row.refundStatus!== '00'">
|
退
|
</span>
|
<span>{{scope.row.spuName}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品规格">
|
<template slot-scope="scope">
|
{{scope.row.skuProps && JSON.parse(scope.row.skuProps).length ? JSON.parse(scope.row.skuProps).map(item=>item.propValueName).join('/') : '-'}}
|
</template>
|
</el-table-column>
|
<template v-if="form.omsOrderDelivery.logisticSupplier === 'JD'">
|
<el-table-column label="计量单位/单位计数" width="150px">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.specificationCode" multiple placeholder="请选择" disabled>
|
<el-option v-for="item in scope.row.specificationCodeList" :key="item.prodSkuNo"
|
:label="item.unitOfMeasurement + '*'+ item.skuUnit"
|
:value="item.prodSkuNo">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="发货数量" width="160px">
|
<template slot-scope="scope">
|
<span v-if="scope.row.shipmentsCountList.length">
|
<el-input-number :min="1" v-model="item.shipmentsCount"
|
v-for="(item,index) in scope.row.shipmentsCountList" :key="index"
|
disabled size="small" style="margin-bottom:10px">
|
</el-input-number>
|
</span>
|
</template>
|
</el-table-column>
|
</template>
|
<el-table-column :key="Math.random()" label="总数量(瓶)">
|
<template slot-scope="scope">
|
<span v-if="form.omsOrderDelivery.logisticSupplier === 'JD'">{{scope.row.buyQuantity}}</span>
|
<span v-else>{{scope.row.buyQuantity}} * {{JSON.parse(scope.row.expInfo).skuReduceStorage}}
|
({{scope.row.spuUnit ? scope.row.spuUnit : '瓶'}})</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="售后状态">
|
<template slot-scope="scope">
|
{{ getRefundStatus(scope.row.refundStatus) }}
|
</template>
|
</el-table-column>
|
<el-table-column align="center"
|
v-if="form.omsOrderDelivery.commonCarrier&&form.omsOrderDelivery.commonCarrier !== '3'"
|
label="物流跟踪">
|
<template slot-scope="scope">
|
<el-button type="text" v-if="!scope.row.rightExchange"
|
@click="logisticsDetails(scope.row)">查看物流</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-dialog title="物流跟踪" class="ogisticsFormInfo" :visible.sync="logisticsVisible"
|
:close-on-click-modal="false" :modal-append-to-body="false" width="750px">
|
<logistics-tracking-component :formData="logisticsForm"></logistics-tracking-component>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="logisticsVisible = false">关闭</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
// import productImg from '@/views/product/components/productImg.vue'
|
import orderMgtApi from '@/api/orderMgt'
|
import logisticsTrackingComponent from './logisticsTrackingComponent.vue'
|
|
export default {
|
components: { logisticsTrackingComponent },
|
props: ['form'],
|
data() {
|
return {
|
dialogVisible: false,
|
loading: false,
|
logisticsVisible: false,
|
logisticsForm: null // 物流信息
|
}
|
},
|
methods: {
|
/**
|
* 获取售后状态
|
*/
|
getRefundStatus(status) {
|
switch (status) {
|
case '10':
|
return '售后中'
|
case '20':
|
return '退款失败'
|
case '30':
|
return '退款成功'
|
default:
|
return '-'
|
}
|
},
|
/**
|
* 查看商品物流信息
|
*/
|
async logisticsDetails(row) {
|
const params = {
|
orderNo: this.form.orderId,
|
prodCode: row.spuNum
|
}
|
const res = await orderMgtApi.queryByExpressInfoList(params)
|
if (res.code === '0') {
|
this.logisticsVisible = true
|
this.logisticsForm = res.data
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.omsOrderShops {
|
padding-left: 100px;
|
padding-right: 20px;
|
}
|
.el-table__body img {
|
width: 50px;
|
}
|
.ogisticsFormInfo {
|
.el-dialog__body {
|
max-height: 600px;
|
overflow-y: auto;
|
width: 90%;
|
margin: 0 auto;
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
}
|
</style>
|
