<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="订单信息" name="first">
|
<el-descriptions title="订单信息" size="medium" direction="horizontal" :column="4">
|
<el-descriptions-item label="订单编号">{{ form.code }}</el-descriptions-item>
|
<el-descriptions-item label="订单状态">
|
<span :class="[0,1,2,5].indexOf(form.status) != -1 ? 'underway' : 'complete'">
|
{{
|
form.status==0 ? '待支付'
|
: form.status==1 ? '待发货'
|
: form.status==2 ? '待收货'
|
: form.status==3 ? '交易完成'
|
: form.status==4 ? '已关闭' : '部分发货'
|
}}
|
</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="下单时间">{{ form.createDate }}</el-descriptions-item>
|
<el-descriptions-item label="支付时间">{{ form.payDate }}</el-descriptions-item>
|
<el-descriptions-item label="订单金额">
|
<span v-if="isPlatform">￥</span>{{ form.price }}<span v-if="!isPlatform">咖豆</span></el-descriptions-item>
|
<el-descriptions-item label="支付订单号">{{ form.payOrderId }}</el-descriptions-item>
|
<el-descriptions-item label="完成时间" :span="2">{{ form.completeDate }}</el-descriptions-item>
|
|
<el-descriptions-item label="用户备注" :span="4">{{ form.memberInfo }}</el-descriptions-item>
|
<el-descriptions-item label="平台备注" :span="4">{{ form.sysInfo }}</el-descriptions-item>
|
|
</el-descriptions>
|
<div style="height: 20px;"></div>
|
<el-descriptions title="订单信息" size="medium" direction="horizontal" :column="4">
|
<el-descriptions-item label="收件姓名">{{ form.linkname }}</el-descriptions-item>
|
<el-descriptions-item label="联系电话">{{ form.linkphone }}</el-descriptions-item>
|
<el-descriptions-item label="收获地址">{{ form.linkaddr }}</el-descriptions-item>
|
</el-descriptions>
|
<div style="height: 20px;"></div>
|
<el-descriptions title="商品信息" size="medium" direction="horizontal" :column="4">
|
|
</el-descriptions>
|
<el-table
|
:data="list"
|
stripe
|
border
|
>
|
<el-table-column prop="name" label="商品ID" align="center" min-width="100px"></el-table-column>
|
<el-table-column prop="name" label="商品信息" align="center" min-width="100px"></el-table-column>
|
<el-table-column prop="name" label="分类" align="center" width="100px"></el-table-column>
|
<el-table-column prop="name" label="规格" align="center" min-width="100px"></el-table-column>
|
<el-table-column prop="name" :label="isPlatform?'价格(元)':'价格(咖豆)'" align="center" width="100px"></el-table-column>
|
</el-table>
|
<div v-if="isPlatform" class="statistics">
|
<div>订单商品金额：{{ form.price }}元</div>
|
<div>订单优惠金额：-{{ form.price }}元</div>
|
<div>实收款：{{ form.price }}元</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="物流信息" name="second">
|
<el-descriptions title="快递信息" size="medium" direction="horizontal" :column="4">
|
<el-descriptions-item label="运单号">{{ form.createDate }}</el-descriptions-item>
|
<el-descriptions-item label="物流公司" :span="3">{{ form.kdName }}</el-descriptions-item>
|
<el-descriptions-item label="收货地址" :span="4">{{ form.linkaddr }}</el-descriptions-item>
|
<el-descriptions-item label="发货时间" :span="4">{{ form.kdDate }}</el-descriptions-item>
|
</el-descriptions>
|
<div class="kd-detail">
|
<div class="kd-status">已签收</div>
|
<el-timeline>
|
<el-timeline-item
|
v-for="(item, index) in kdDetail"
|
:key="index"
|
hide-timestamp
|
:class="index==0&&'first'"
|
:size="index==0?'large':'normal'"
|
:timestamp="item.date"
|
>
|
<h4>{{ item.date }}</h4>
|
<p>{{ item.message }}</p>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<div slot="footer"></div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
export default {
|
name: 'OperaGoodsOrderDetail',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
|
return {
|
activeName: '0',
|
isPlatform: true,
|
// 表单数据
|
form: {
|
id: '1',
|
code: '256302564258',
|
payOrderId: '256302564258',
|
createDate: '2022-11-01 22:30:43',
|
payDate: '2022-11-01 22:30:43',
|
soonTime: '2022-11-03 22:30:43',
|
completeDate: '2022-11-03 22:30:43',
|
imgurl: '',
|
goodsName: '咖啡杯',
|
attr: '白色；其它规格内容； 10L',
|
memberInfo: '这里是用户备注',
|
sysInfo: '这里是平台备注',
|
linkname: '李怀英',
|
linkphone: '18055151023',
|
linkaddr: '四川省成都市金牛区，金泉街道中海国际社区蓝岸街98号橙郡一期5-2-504',
|
price: '2333',
|
status: 1,
|
kdCode: 'SF01021213',
|
kdDate: '2022-11-03 23:30:43',
|
kdId: 'KD21312',
|
kdInfo: '这是发货备注',
|
kdName: '顺丰快递',
|
kdUser: '00190',
|
},
|
list: [],
|
kdDetail: [
|
{ date: '2022-11-03 23:30:43', message: '已发货' },
|
{ date: '2022-11-03 23:30:43', message: '已发货' },
|
{ date: '2022-11-03 23:30:43', message: '已发货' },
|
{ date: '2022-11-03 23:30:43', message: '已发货' },
|
{ date: '2022-11-03 23:30:43', message: '已发货' },
|
]
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/coupon',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open(title, target, active, isPlatform=true) {
|
this.title = title
|
this.visible = true
|
this.activeName = active
|
this.isPlatform = isPlatform
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.type = '0'
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
if (this.form.shopId) {
|
this.type = 0
|
this.shops = [{ label: target.shopName, id: this.form.shopId }]
|
} else {
|
this.type = 1
|
this.orgs = [{ label: target.orgName, id: this.form.orgId }]
|
}
|
})
|
},
|
handleClick() {}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.underway {
|
color: rgb(233, 165, 80)
|
}
|
.complete {
|
color: #ccc;
|
}
|
|
.first {
|
::v-deep .el-timeline-item__node {
|
background-color: #fff !important;
|
width: 8px !important;
|
height: 8px !important;
|
transform: translateX(-3px);
|
border: #216EEE solid 6px !important;
|
}
|
}
|
.kd-detail {
|
padding: 30px;
|
background-color: #f2f2f2;
|
.kd-status {
|
height: 30px;
|
line-height: 30px;
|
font-size: 20px;
|
font-weight: 500;
|
border-bottom: 1px solid #000;
|
margin-bottom: 20px;
|
}
|
}
|
.statistics {
|
text-align: right;
|
padding: 10px 5px;
|
font-size: 14px;
|
line-height: 24px;
|
:last-child {
|
color: rgb(232, 60,45);
|
}
|
}
|
</style>
|
