ltlzx
/
wenhuaDate_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增订单详情

master
ltlzx 4 years ago
parent
11469f83a0
commit
b6677180b5
7 changed files with 259 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/operationRecords/index.vue
  2. 225
      src/components/orderDetails/index.vue
  3. 8
      src/components/page/order/closed.vue
  4. 8
      src/components/page/order/completed.vue
  5. 8
      src/components/page/order/pendingPayment.vue
  6. 8
      src/components/page/order/toBeDelivered.vue
  7. 8
      src/components/page/order/toBeSettled.vue

2
src/components/operationRecords/index.vue
View File

@ -32,7 +32,7 @@
methods:{ methods:{
onClose() { onClose() {
this.newVisible=false this.newVisible=false
this.$emit('update:visible1', false) this.$emit('update:visible', false)
} }
}, },
watch:{ watch:{

225
src/components/orderDetails/index.vue
View File

@ -1,8 +1,93 @@
<template> <template>
<div> <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> <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"> <template slot="footer">
<div> <div>
<a-button type="white" @click="onClose">返 回</a-button> <a-button type="white" @click="onClose">返 回</a-button>
@ -22,17 +107,90 @@
}, },
data(){ data(){
return{ return{
orederActive:0,
newVisible:false, newVisible:false,
modeStyle:{ modeStyle:{
'min-height':'311px', 'min-height':'311px',
'padding-top':'15px' '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:{ methods:{
onClose() { onClose() {
this.newVisible=false this.newVisible=false
this.$emit('update:visible2', false) this.$emit('update:visible', false)
} }
}, },
watch:{ watch:{
@ -55,4 +213,67 @@
p{ p{
margin-bottom: 0; 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> </style>

8
src/components/page/order/closed.vue
View File

@ -64,7 +64,7 @@
<template slot="operation"> <template slot="operation">
<a-space :size="24"> <a-space :size="24">
<span class="table_operation" @click="SelectDate()">数据查看</span> <span class="table_operation" @click="SelectDate()">数据查看</span>
<span class="table_operation">订单详情</span> <span class="table_operation" @click="SelectOrder()">订单详情</span>
</a-space> </a-space>
</template> </template>
</a-table> </a-table>
@ -85,6 +85,7 @@
</div> </div>
</div> </div>
<dataSelect :visible.sync="visible"></dataSelect> <dataSelect :visible.sync="visible"></dataSelect>
<orderDetails :visible.sync="visible2"></orderDetails>
</div> </div>
</template> </template>
<script> <script>
@ -93,6 +94,7 @@ export default {
data() { data() {
return{ return{
visible:false, visible:false,
visible2:false,
pageSizeOptions: ['10', '20', '30', '40', '50'], pageSizeOptions: ['10', '20', '30', '40', '50'],
//一页多少条 //一页多少条
pageSize:10, pageSize:10,
@ -178,11 +180,15 @@ export default {
components:{ components:{
Operation, Operation,
dataSelect: () => import('../../dateSelect/index.vue'), dataSelect: () => import('../../dateSelect/index.vue'),
orderDetails: () => import('../../orderDetails/index.vue'),
}, },
created(){ created(){
console.info(this.$route) console.info(this.$route)
}, },
methods:{ methods:{
SelectOrder(){
this.visible2=true
},
SelectDate(){ SelectDate(){
this.visible=true this.visible=true
}, },

8
src/components/page/order/completed.vue
View File

@ -64,7 +64,7 @@
<template slot="operation"> <template slot="operation">
<a-space :size="24"> <a-space :size="24">
<span class="table_operation" @click="SelectDate()">数据查看</span> <span class="table_operation" @click="SelectDate()">数据查看</span>
<span class="table_operation">订单详情</span> <span class="table_operation" @click="SelectOrder()">订单详情</span>
</a-space> </a-space>
</template> </template>
</a-table> </a-table>
@ -85,6 +85,7 @@
</div> </div>
</div> </div>
<dataSelect :visible.sync="visible"></dataSelect> <dataSelect :visible.sync="visible"></dataSelect>
<orderDetails :visible.sync="visible2"></orderDetails>
</div> </div>
</template> </template>
<script> <script>
@ -93,6 +94,7 @@ export default {
data() { data() {
return{ return{
visible:false, visible:false,
visible2:false,
pageSizeOptions: ['10', '20', '30', '40', '50'], pageSizeOptions: ['10', '20', '30', '40', '50'],
//一页多少条 //一页多少条
pageSize:10, pageSize:10,
@ -178,11 +180,15 @@ export default {
components:{ components:{
Operation, Operation,
dataSelect: () => import('../../dateSelect/index.vue'), dataSelect: () => import('../../dateSelect/index.vue'),
orderDetails: () => import('../../orderDetails/index.vue'),
}, },
created(){ created(){
console.info(this.$route) console.info(this.$route)
}, },
methods:{ methods:{
SelectOrder(){
this.visible2=true
},
SelectDate(){ SelectDate(){
this.visible=true this.visible=true
}, },

8
src/components/page/order/pendingPayment.vue
View File

@ -64,7 +64,7 @@
<template slot="operation"> <template slot="operation">
<a-space :size="24"> <a-space :size="24">
<span class="table_operation" @click="SelectDate()">数据查看</span> <span class="table_operation" @click="SelectDate()">数据查看</span>
<span class="table_operation">订单详情</span> <span class="table_operation" @click="SelectOrder()">订单详情</span>
</a-space> </a-space>
</template> </template>
</a-table> </a-table>
@ -85,6 +85,7 @@
</div> </div>
</div> </div>
<dataSelect :visible.sync="visible"></dataSelect> <dataSelect :visible.sync="visible"></dataSelect>
<orderDetails :visible.sync="visible2"></orderDetails>
</div> </div>
</template> </template>
<script> <script>
@ -93,6 +94,7 @@ export default {
data() { data() {
return{ return{
visible:false, visible:false,
visible2:false,
pageSizeOptions: ['10', '20', '30', '40', '50'], pageSizeOptions: ['10', '20', '30', '40', '50'],
//一页多少条 //一页多少条
pageSize:10, pageSize:10,
@ -178,11 +180,15 @@ export default {
components:{ components:{
Operation, Operation,
dataSelect: () => import('../../dateSelect/index.vue'), dataSelect: () => import('../../dateSelect/index.vue'),
orderDetails: () => import('../../orderDetails/index.vue'),
}, },
created(){ created(){
console.info(this.$route) console.info(this.$route)
}, },
methods:{ methods:{
SelectOrder(){
this.visible2=true
},
SelectDate(){ SelectDate(){
this.visible=true this.visible=true
}, },

8
src/components/page/order/toBeDelivered.vue
View File

@ -64,7 +64,7 @@
<template slot="operation"> <template slot="operation">
<a-space :size="24"> <a-space :size="24">
<span class="table_operation" @click="SelectDate()">数据查看</span> <span class="table_operation" @click="SelectDate()">数据查看</span>
<span class="table_operation">订单详情</span> <span class="table_operation" @click="SelectOrder()">订单详情</span>
</a-space> </a-space>
</template> </template>
</a-table> </a-table>
@ -85,6 +85,7 @@
</div> </div>
</div> </div>
<dataSelect :visible.sync="visible"></dataSelect> <dataSelect :visible.sync="visible"></dataSelect>
<orderDetails :visible.sync="visible2"></orderDetails>
</div> </div>
</template> </template>
<script> <script>
@ -93,6 +94,7 @@ export default {
data() { data() {
return{ return{
visible:false, visible:false,
visible2:false,
pageSizeOptions: ['10', '20', '30', '40', '50'], pageSizeOptions: ['10', '20', '30', '40', '50'],
//一页多少条 //一页多少条
pageSize:10, pageSize:10,
@ -178,11 +180,15 @@ export default {
components:{ components:{
Operation, Operation,
dataSelect: () => import('../../dateSelect/index.vue'), dataSelect: () => import('../../dateSelect/index.vue'),
orderDetails: () => import('../../orderDetails/index.vue'),
}, },
created(){ created(){
console.info(this.$route) console.info(this.$route)
}, },
methods:{ methods:{
SelectOrder(){
this.visible2=true
},
SelectDate(){ SelectDate(){
this.visible=true this.visible=true
}, },

8
src/components/page/order/toBeSettled.vue
View File

@ -64,7 +64,7 @@
<template slot="operation"> <template slot="operation">
<a-space :size="24"> <a-space :size="24">
<span class="table_operation" @click="SelectDate()">数据查看</span> <span class="table_operation" @click="SelectDate()">数据查看</span>
<span class="table_operation">订单详情</span> <span class="table_operation" @click="SelectOrder()">订单详情</span>
</a-space> </a-space>
</template> </template>
</a-table> </a-table>
@ -85,6 +85,7 @@
</div> </div>
</div> </div>
<dataSelect :visible.sync="visible"></dataSelect> <dataSelect :visible.sync="visible"></dataSelect>
<orderDetails :visible.sync="visible2"></orderDetails>
</div> </div>
</template> </template>
<script> <script>
@ -93,6 +94,7 @@ export default {
data() { data() {
return{ return{
visible:false, visible:false,
visible2:false,
pageSizeOptions: ['10', '20', '30', '40', '50'], pageSizeOptions: ['10', '20', '30', '40', '50'],
//一页多少条 //一页多少条
pageSize:10, pageSize:10,
@ -178,11 +180,15 @@ export default {
components:{ components:{
Operation, Operation,
dataSelect: () => import('../../dateSelect/index.vue'), dataSelect: () => import('../../dateSelect/index.vue'),
orderDetails: () => import('../../orderDetails/index.vue'),
}, },
created(){ created(){
console.info(this.$route) console.info(this.$route)
}, },
methods:{ methods:{
SelectOrder(){
this.visible2=true
},
SelectDate(){ SelectDate(){
this.visible=true this.visible=true
}, },

Write Preview
Loading…
Cancel
Save