|
|
|
@ -1,8 +1,93 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<a-modal v-model="newVisible" title="订单详情" :afterClose="onClose" width="800px" :bodyStyle="modeStyle"> |
|
|
|
<a-modal v-model="newVisible" title="订单详情" :afterClose="onClose" width="1194px" :bodyStyle="modeStyle"> |
|
|
|
<p>订单当前状态：等待购买方付款</p> |
|
|
|
<div class="steps_body"> |
|
|
|
<a-steps :current="step" class="steps"> |
|
|
|
<a-step> |
|
|
|
<template slot="title">下单成功</template> |
|
|
|
<span slot="description">2021/06/16 14:16:13</span> |
|
|
|
</a-step> |
|
|
|
<a-step title="待付款订单" description="" /> |
|
|
|
<a-step title="待交付订单" description="" /> |
|
|
|
<a-step title="待结算订单" description="" /> |
|
|
|
<a-step title="已完成订单" description="" /> |
|
|
|
</a-steps> |
|
|
|
</div> |
|
|
|
<div class="order_body"> |
|
|
|
<div class="order_title"> |
|
|
|
<div class="order_title_left"> |
|
|
|
<span @click="orederActive=0">订单信息</span> |
|
|
|
<span @click="orederActive=1">资金结算表</span> |
|
|
|
<span @click="orederActive=2">交易发票</span> |
|
|
|
<span @click="orederActive=3">交易凭证</span> |
|
|
|
<span @click="orederActive=4">交付内容</span> |
|
|
|
</div> |
|
|
|
<div class="order_title_right"> |
|
|
|
<span>关闭订单</span> |
|
|
|
<a-switch default-checked class="order_switch"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="oreder_content"> |
|
|
|
<div v-show="orederActive==0"> |
|
|
|
<p class="oreder_content_title">订单信息</p> |
|
|
|
<div class="oreder_info"> |
|
|
|
<p>委托方/收款方：新疆生产建设兵团军垦博物馆</p> |
|
|
|
<p>购买方/付款方：北京玖扬博文文化发展有限公司</p> |
|
|
|
</div> |
|
|
|
<div class="oreder_info"> |
|
|
|
<p>订单类型：委托订单</p> |
|
|
|
<p>订单编号：GP2021061614121310</p> |
|
|
|
<p>订单ISLI标识码：</p> |
|
|
|
<p>交易流水号：</p> |
|
|
|
</div> |
|
|
|
<div class="oreder_info"> |
|
|
|
<p>标的名称：第一犁；塞边新乐章；王震将军像；屯垦戎边千秋伟业；艾青诞辰100周年铜像</p> |
|
|
|
<p>标的类型：文化资源数据</p> |
|
|
|
<p>委托类型：转让</p> |
|
|
|
<p>权属类型：所有权</p> |
|
|
|
<p>交易价额：¥ 10,000.00</p> |
|
|
|
<p>交易数量：1</p> |
|
|
|
<p>保证金：¥ 0.00</p> |
|
|
|
<p>服务费：¥ 500.00</p> |
|
|
|
<p>交易总额：¥ 10,500.00 元</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-show="orederActive==1"> |
|
|
|
<p class="oreder_content_title">资金结算表</p> |
|
|
|
<a-table :columns="columns" :data-source="data" bordered :pagination="false"></a-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-show="orederActive==2"> |
|
|
|
<p class="oreder_content_title">交易发票</p> |
|
|
|
<div class="order_download"> |
|
|
|
<span>购买方服务费发票</span> |
|
|
|
<span>委托方服务费发票</span> |
|
|
|
<span>第三方机构服务发票</span> |
|
|
|
<span>平台服务发票</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-show="orederActive==3"> |
|
|
|
<p class="oreder_content_title">交易凭证</p> |
|
|
|
<div class="order_download"> |
|
|
|
<span>查看交易凭证</span> |
|
|
|
<span>下载交易凭证</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-show="orederActive==4"> |
|
|
|
<p class="oreder_content_title">交付内容</p> |
|
|
|
<div class="order_download"> |
|
|
|
<span>上传评价报告</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<template slot="footer"> |
|
|
|
<div> |
|
|
|
<a-button type="white" @click="onClose">返 回</a-button> |
|
|
|
@ -22,17 +107,90 @@ |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return{ |
|
|
|
orederActive:0, |
|
|
|
newVisible:false, |
|
|
|
modeStyle:{ |
|
|
|
'min-height':'311px', |
|
|
|
'padding-top':'15px' |
|
|
|
}, |
|
|
|
step:0, |
|
|
|
data:[ |
|
|
|
{ |
|
|
|
key: '1', |
|
|
|
name: 'John Brown', |
|
|
|
money: '￥300,000.00', |
|
|
|
address: 'New York No. 1 Lake Park', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '2', |
|
|
|
name: 'Jim Green', |
|
|
|
money: '￥1,256,000.00', |
|
|
|
address: 'London No. 1 Lake Park', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '3', |
|
|
|
name: 'Joe Black', |
|
|
|
money: '￥120,000.00', |
|
|
|
address: 'Sidney No. 1 Lake Park', |
|
|
|
}, |
|
|
|
], |
|
|
|
columns:[ |
|
|
|
{ |
|
|
|
title: '结算方', |
|
|
|
className: 'table_column', |
|
|
|
dataIndex: 'id', |
|
|
|
width:'120px', |
|
|
|
align:'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '结算内容', |
|
|
|
dataIndex: 'money', |
|
|
|
width:'120px', |
|
|
|
align:'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '金额', |
|
|
|
dataIndex: 'name', |
|
|
|
width:'120px', |
|
|
|
align:'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '税率', |
|
|
|
dataIndex: '', |
|
|
|
width:'120px', |
|
|
|
align:'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '税额', |
|
|
|
dataIndex: '', |
|
|
|
width:'120px', |
|
|
|
align:'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '结算金额', |
|
|
|
dataIndex: '', |
|
|
|
width:'120px', |
|
|
|
align:'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '结算状态', |
|
|
|
dataIndex: '', |
|
|
|
width:'120px', |
|
|
|
align:'center' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '结算流水号', |
|
|
|
dataIndex: '', |
|
|
|
width:'220px', |
|
|
|
align:'center' |
|
|
|
}, |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
onClose() { |
|
|
|
this.newVisible=false |
|
|
|
this.$emit('update:visible2', false) |
|
|
|
this.$emit('update:visible', false) |
|
|
|
} |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
@ -55,4 +213,67 @@ |
|
|
|
p{ |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
.steps_body{ |
|
|
|
padding: 0 55px; |
|
|
|
} |
|
|
|
.steps{ |
|
|
|
margin-top: 48px; |
|
|
|
} |
|
|
|
.order_body{ |
|
|
|
padding: 0 26px; |
|
|
|
margin-top: 24px; |
|
|
|
} |
|
|
|
.order_title{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
color: #4E73E4; |
|
|
|
margin-bottom: 12px; |
|
|
|
} |
|
|
|
.order_title_left span{ |
|
|
|
display: inline-block; |
|
|
|
cursor: pointer; |
|
|
|
text-decoration: underline; |
|
|
|
margin-right: 64px; |
|
|
|
} |
|
|
|
|
|
|
|
.order_title_right{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.order_switch{ |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
.oreder_content{ |
|
|
|
border: 1px #AAAAAA dashed ; |
|
|
|
min-height: 422px; |
|
|
|
border-radius: 5px; |
|
|
|
padding: 24px 20px; |
|
|
|
/* padding-top: 24px; */ |
|
|
|
} |
|
|
|
.oreder_content_title{ |
|
|
|
font-size: 16px; |
|
|
|
color: #4E5969; |
|
|
|
margin-bottom: 15px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.oreder_info{ |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
.oreder_info:last-child{ |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
/deep/ .ant-table-tbody > tr > td { |
|
|
|
padding: 15px 16px; |
|
|
|
} |
|
|
|
/deep/ .ant-table-thead > tr > th { |
|
|
|
padding: 15px 16px; |
|
|
|
} |
|
|
|
.order_download span{ |
|
|
|
display: inline-block; |
|
|
|
cursor: pointer; |
|
|
|
text-decoration: underline; |
|
|
|
margin-right: 46px; |
|
|
|
color: #AAAAAA; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
