<template>
|
<div>
|
<div class="orderTitle">商品信息</div>
|
<div class="setButtonStyle">
|
<el-form-item label="店铺：">{{form.merchantName}}</el-form-item>
|
<!-- <el-button size="mini" @click="refund" type="warning">发起退款</el-button> -->
|
</div>
|
<div class="omsOrderShops">
|
<el-table border :span-method="arraySpanMethod" :data="form.omsOrderItems">
|
<el-table-column type="index" align="center" :key="Math.random()" label="序号" width="80px">
|
</el-table-column>
|
<el-table-column v-if="form.isMarketOrder !== '1'" :key="Math.random()" type="expand">
|
<template slot-scope="props">
|
<el-table :data="props.row.codeIds" border>
|
<el-table-column label="瓶码编号" align="center">
|
<template slot-scope="scope">
|
{{scope.row}}
|
</template>
|
</el-table-column>
|
<el-table-column label="商品溯源" align="center">
|
<template slot-scope="scope">
|
<el-button type="primary" @click="getProductSourceInfo(scope.row,scope.$index)"
|
size="mini">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品图片" :key="Math.random()" width="200px" align="center">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.imgUrl"></product-img>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品主编码" :key="Math.random()" width="160px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
{{scope.row.spuNum ? scope.row.spuNum : '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="商品" :key="Math.random()" prop="spuName" width="180px"
|
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 class="giftStyle"
|
v-if="scope.row.omsOrderItemsDetails && scope.row.omsOrderItemsDetails.length">组</span>
|
<el-popover v-if="scope.row.omsOrderItemsDetails && scope.row.omsOrderItemsDetails.length"
|
placement="top" width="840" trigger="click">
|
<el-table :data="scope.row.omsOrderItemsDetails" border size="mini">
|
<el-table-column width="150" property="spuNum" label="商品主编码" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column min-width="150" property="spuName" label="商品名称"
|
show-overflow-tooltip></el-table-column>
|
<el-table-column width="150" property="address" label="商品规格" show-overflow-tooltip>
|
<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>
|
<el-table-column min-width="100" property="listPrice" label="挂牌价"
|
show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span v-if="form.orderSource == 'WLY'">
|
{{scope.row.listPrice ? '￥'+scope.row.listPrice.toFixed(2) : '￥0.00'}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="100" property="reduceStorage" label="实际扣减数量"
|
align="center" show-overflow-tooltip>
|
<template slot-scope="props">
|
{{ scope.row.buyQuantity }} * {{props.row.reduceStorage}}
|
({{scope.row.spuUnit ? scope.row.spuUnit : '瓶'}})
|
</template>
|
</el-table-column>
|
<el-table-column label="实收金额（元）" width="150px">
|
<template slot-scope="scope">
|
{{scope.row.totelAmtAct ? '￥'+scope.row.totelAmtAct.toFixed(2) : '￥0.00'}}
|
</template>
|
</el-table-column>
|
</el-table>
|
<span slot="reference" class="link-style">{{scope.row.spuName}}</span>
|
</el-popover>
|
<span v-else>{{scope.row.spuName}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品规格" :key="Math.random()" show-overflow-tooltip>
|
<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>
|
<el-table-column v-if="form.isMarketOrder !=='1'" :key="Math.random()" label="销售金额（元）"
|
width="160px">
|
<template slot-scope="scope">
|
<!-- <span v-if="scope.row.promotionType !== '2'"> -->
|
{{scope.row.totelAmt ? '￥'+scope.row.totelAmt.toFixed(2) : '-'}}
|
<!-- </span>
|
<span v-else>-</span> -->
|
</template>
|
</el-table-column>
|
<el-table-column v-if="form.isMarketOrder !=='1'" :key="Math.random()" label="实收金额（元）"
|
width="160px">
|
<template slot-scope="scope">
|
<span v-if="scope.row.promotionType !== '2'">
|
{{scope.row.totelAmtAct ? '￥'+scope.row.totelAmtAct.toFixed(2) : '-'}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="购买数量" :key="Math.random()" align="center">
|
<template slot-scope="scope">
|
<span
|
v-if="scope.row.omsOrderItemsDetails && scope.row.omsOrderItemsDetails.length">{{scope.row.buyQuantity}}</span>
|
<span v-else>
|
{{scope.row.buyQuantity}}
|
<span v-if="!scope.row.rightExchange">
|
* {{JSON.parse(scope.row.expInfo).skuReduceStorage}}
|
({{scope.row.spuUnit ? scope.row.spuUnit : '瓶'}})
|
</span>
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="售后状态">
|
<template slot-scope="scope">
|
{{ getRefundStatus(scope.row.refundStatus) }}
|
</template>
|
</el-table-column>
|
<el-table-column v-if="$route.query.promotionStatus&&$route.query.promotionStatus.indexOf('虚拟权益活动') !== -1"
|
label="兑换状态" :key="Math.random()">
|
<template slot-scope="scope">
|
{{scope.row.rightExchange ?
|
scope.row.rightExchange === '1' ? '已兑换':'未兑换'
|
:'-'}}
|
</template>
|
</el-table-column>
|
<el-table-column align="center"
|
v-if="form.omsOrderDelivery && 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="发起退款" :visible.sync="dialogVisible" v-if="dialogVisible"
|
:close-on-cliick-modal="false" :modal-append-to-body="false" width="30%">
|
<el-form size="mini" ref="form" :model="refundForm">
|
<el-form-item label="退款金额" prop="refundMoney" :rules="{required:true,message:'退款金额不能为空'}">
|
<el-input-number :min='1' @keydown.native="limiInputType" v-model="refundForm.refundMoney"
|
:max="form.orderPrice"></el-input-number>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
|
<el-button size="mini" type="danger" :loading="loading" @click="sureRefund">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog title="商品溯源详情" class="sourceFormInfo" :visible.sync="productSourceVisible"
|
:close-on-click-modal="false" :modal-append-to-body="false" width="600px">
|
<product-source-info :form="sourceForm" :orderForm='form'></product-source-info>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="productSourceVisible = false">关闭</el-button>
|
</span>
|
</el-dialog>
|
<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 orderMgtApi from '@/api/orderMgt'
|
import { limiInputType } from '@/utils/limiInputType'
|
import productSourceInfo from './productSourceInfo.vue'
|
import productImg from '@/views/product/components/productImg.vue'
|
import logisticsTrackingComponent from './logisticsTrackingComponent.vue'
|
|
export default {
|
props: ['form'],
|
components: { productSourceInfo, productImg, logisticsTrackingComponent },
|
data () {
|
return {
|
dialogVisible: false,
|
productSourceVisible: false,
|
refundForm: {
|
refundMoney: 1
|
},
|
loading: false,
|
sourceForm: {},
|
logisticsVisible: false,
|
logisticsForm: null // 物流信息
|
}
|
},
|
methods: {
|
/**
|
* 获取售后状态
|
*/
|
getRefundStatus (status) {
|
switch (status) {
|
case '10':
|
return '售后中'
|
case '20':
|
return '退款失败'
|
case '30':
|
return '退款成功'
|
default:
|
return '-'
|
}
|
},
|
/**
|
* 查看商品物流信息
|
*/
|
async logisticsDetails (row) {
|
let prodCode = null
|
const params = {
|
orderNo: this.form.orderId
|
}
|
if (row.omsOrderItemsDetails && row.omsOrderItemsDetails.length) {
|
prodCode = row.omsOrderItemsDetails.map((item) => item.spuNum).join(',')
|
} else {
|
prodCode = row.spuNum
|
}
|
const res = await orderMgtApi.queryByExpressInfoList({ ...params, ...{ prodCode: prodCode } })
|
if (res.code === '0') {
|
this.logisticsVisible = true
|
this.logisticsForm = res.data
|
}
|
},
|
/**
|
* 合并行（赠品的行）
|
*/
|
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
|
if (row.promotionType === '2' || (this.form.isMarketOrder !== '1' && !row.codeIds.length)) {
|
if (columnIndex === 1) {
|
return [0, 0]
|
} else if (columnIndex === 2) {
|
return [1, 2]
|
}
|
}
|
},
|
/**
|
* 获取商品溯源详情
|
*/
|
getProductSourceInfo (row, index) {
|
orderMgtApi.getProductSourceInfo(row).then(res => {
|
if (res.data) {
|
this.productSourceVisible = true
|
this.sourceForm = res.data
|
}
|
})
|
},
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType (e) {
|
limiInputType(e)
|
},
|
/**
|
* 确定退款
|
*/
|
sureRefund () {
|
this.$refs.form.validate().then(res => {
|
this.loading = true
|
orderMgtApi.refun().then(res => {
|
if (res.data) {
|
this.loading = false
|
this.$message({
|
message: '退款成功',
|
type: 'success'
|
})
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
})
|
},
|
/**
|
*
|
*/
|
refund () {
|
this.dialogVisible = true
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.omsOrderShops {
|
padding-left: 100px;
|
padding-right: 20px;
|
}
|
.el-table__body img {
|
width: 50px;
|
}
|
.sourceFormInfo {
|
.el-dialog__body {
|
padding: 15px 20px;
|
height: 500px;
|
position: relative;
|
overflow: hidden;
|
.sourceForm {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: -17px;
|
bottom: 0;
|
overflow-y: scroll;
|
padding: 5px 10px;
|
}
|
}
|
}
|
.ogisticsFormInfo {
|
.el-dialog__body {
|
max-height: 600px;
|
overflow-y: auto;
|
width: 90%;
|
margin: 0 auto;
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
}
|
.link-style {
|
color: #409eff;
|
cursor: pointer;
|
}
|
</style>
|
