81 lines
2.7 KiB
Vue
81 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-descriptions border :column="2">
|
|
<el-descriptions-item label="商品列表">
|
|
<div v-for="(item, index) in info.goods" :key="index" style="
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;">
|
|
<p>商品名称: {{ item.goodsName }}</p>
|
|
<p v-if="info.type === 0 && formatSku(item.sku)">规格: {{ formatSku(item.sku) }}</p>
|
|
<p>数量: x{{ item.num }}</p>
|
|
<p>单价: {{ item.goodsPrice }}元</p>
|
|
<p v-if="info.type === 0">所属公司: {{ item.company.company.companyName }}</p>
|
|
<el-divider v-if="index < info.goods.length - 1"/>
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="用户信息">
|
|
<p>用户名: {{ info.user.nickname }}</p>
|
|
<p>手机号: {{ info.user.mobile }}</p>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="买家信息">
|
|
<p>收件人: {{ info.name }}</p>
|
|
<p>收件人联系方式: {{ info.phone }}</p>
|
|
<p>收件地址: {{ info.addressRegion.province.name }}{{
|
|
info.addressRegion.city.name
|
|
}}{{ info.addressRegion.area.name }}{{ info.addressDetail }}</p>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="物流信息">
|
|
<p>物流公司: {{ info.expressName }}</p>
|
|
<p>物流单号: {{ info.expressNo }}</p>
|
|
<p>备注: {{ info.remark }}</p>
|
|
<el-image v-for="(item, index) in info.expressPhoto" :key="index" :src="item"
|
|
class="mr-10 mb-10"
|
|
:preview-src-list="info.expressPhoto" style="width: 100px;height: 100px"/>
|
|
</el-descriptions-item>
|
|
|
|
<template v-if="info.orderStatus >= 5">
|
|
<el-descriptions-item label="退款信息">
|
|
<p>退款原因: {{ info.refundReason }}</p>
|
|
<div>
|
|
<span>退款附件: </span>
|
|
<a style="margin-right: 1rem" v-for="(file, fileIndex) in info.refundPhotos" :key="fileIndex" :href="file"
|
|
target="_blank">预览:文件{{ fileIndex + 1 }}</a>
|
|
</div>
|
|
</el-descriptions-item>
|
|
</template>
|
|
</el-descriptions>
|
|
<div style="margin-top: 2rem; text-align: center">
|
|
<el-button plain @click.native="cancel">关闭</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "OrderInfo",
|
|
props: {
|
|
info: {
|
|
type: Object
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
formatSku(sku) {
|
|
if (!sku) return ''
|
|
if (typeof sku === 'string') return sku
|
|
return sku.label || sku.name || sku.title || sku.specName || ''
|
|
},
|
|
cancel() {
|
|
this.$emit('close')
|
|
},
|
|
},
|
|
mounted() {
|
|
// this.getList()
|
|
}
|
|
}
|
|
</script>
|