From b6677180b598aed701945193e64b422c6d59388f Mon Sep 17 00:00:00 2001
From: ltlzx <942659938@qq.com>
Date: Wed, 30 Mar 2022 17:13:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AE=A2=E5=8D=95=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/operationRecords/index.vue    |   2 +-
 src/components/orderDetails/index.vue        | 225 ++++++++++++++++++-
 src/components/page/order/closed.vue         |   8 +-
 src/components/page/order/completed.vue      |   8 +-
 src/components/page/order/pendingPayment.vue |   8 +-
 src/components/page/order/toBeDelivered.vue  |   8 +-
 src/components/page/order/toBeSettled.vue    |   8 +-
 7 files changed, 259 insertions(+), 8 deletions(-)

diff --git a/src/components/operationRecords/index.vue b/src/components/operationRecords/index.vue
index 1af1bc0..94aa1f9 100644
--- a/src/components/operationRecords/index.vue
+++ b/src/components/operationRecords/index.vue
@@ -32,7 +32,7 @@
     methods:{
       onClose() {
         this.newVisible=false
-        this.$emit('update:visible1', false)
+        this.$emit('update:visible', false)
       }
     },
     watch:{
diff --git a/src/components/orderDetails/index.vue b/src/components/orderDetails/index.vue
index 8c8947a..420be50 100644
--- a/src/components/orderDetails/index.vue
+++ b/src/components/orderDetails/index.vue
@@ -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>
diff --git a/src/components/page/order/closed.vue b/src/components/page/order/closed.vue
index 3f4e606..4ec8fe1 100644
--- a/src/components/page/order/closed.vue
+++ b/src/components/page/order/closed.vue
@@ -64,7 +64,7 @@
           <template slot="operation">
             <a-space :size="24">
               <span class="table_operation" @click="SelectDate()">数据查看</span>
-              <span class="table_operation">订单详情</span>
+              <span class="table_operation" @click="SelectOrder()">订单详情</span>
             </a-space>
           </template>
         </a-table>
@@ -85,6 +85,7 @@
       </div>
     </div>
     <dataSelect :visible.sync="visible"></dataSelect>
+    <orderDetails :visible.sync="visible2"></orderDetails>
   </div>
 </template>
 <script>
@@ -93,6 +94,7 @@ export default {
   data() {
     return{
       visible:false,
+      visible2:false,
       pageSizeOptions: ['10', '20', '30', '40', '50'],
       //一页多少条
       pageSize:10,
@@ -178,11 +180,15 @@ export default {
   components:{
     Operation,
     dataSelect: () => import('../../dateSelect/index.vue'),
+    orderDetails: () => import('../../orderDetails/index.vue'),
   },
   created(){
     console.info(this.$route)
   },
   methods:{
+    SelectOrder(){
+      this.visible2=true
+    },
     SelectDate(){
       this.visible=true
     },
diff --git a/src/components/page/order/completed.vue b/src/components/page/order/completed.vue
index 27aa9b4..7a4b2be 100644
--- a/src/components/page/order/completed.vue
+++ b/src/components/page/order/completed.vue
@@ -64,7 +64,7 @@
           <template slot="operation">
             <a-space :size="24">
               <span class="table_operation" @click="SelectDate()">数据查看</span>
-              <span class="table_operation">订单详情</span>
+              <span class="table_operation" @click="SelectOrder()">订单详情</span>
             </a-space>
           </template>
         </a-table>
@@ -85,6 +85,7 @@
       </div>
     </div>
     <dataSelect :visible.sync="visible"></dataSelect>
+    <orderDetails :visible.sync="visible2"></orderDetails>
   </div>
 </template>
 <script>
@@ -93,6 +94,7 @@ export default {
   data() {
     return{
       visible:false,
+      visible2:false,
       pageSizeOptions: ['10', '20', '30', '40', '50'],
       //一页多少条
       pageSize:10,
@@ -178,11 +180,15 @@ export default {
   components:{
     Operation,
     dataSelect: () => import('../../dateSelect/index.vue'),
+    orderDetails: () => import('../../orderDetails/index.vue'),
   },
   created(){
     console.info(this.$route)
   },
   methods:{
+    SelectOrder(){
+      this.visible2=true
+    },
     SelectDate(){
       this.visible=true
     },
diff --git a/src/components/page/order/pendingPayment.vue b/src/components/page/order/pendingPayment.vue
index f366839..5231337 100644
--- a/src/components/page/order/pendingPayment.vue
+++ b/src/components/page/order/pendingPayment.vue
@@ -64,7 +64,7 @@
           <template slot="operation">
             <a-space :size="24">
               <span class="table_operation" @click="SelectDate()">数据查看</span>
-              <span class="table_operation">订单详情</span>
+              <span class="table_operation" @click="SelectOrder()">订单详情</span>
             </a-space>
           </template>
         </a-table>
@@ -85,6 +85,7 @@
       </div>
     </div>
     <dataSelect :visible.sync="visible"></dataSelect>
+    <orderDetails :visible.sync="visible2"></orderDetails>
   </div>
 </template>
 <script>
@@ -93,6 +94,7 @@ export default {
   data() {
     return{
       visible:false,
+      visible2:false,
       pageSizeOptions: ['10', '20', '30', '40', '50'],
       //一页多少条
       pageSize:10,
@@ -178,11 +180,15 @@ export default {
   components:{
     Operation,
     dataSelect: () => import('../../dateSelect/index.vue'),
+    orderDetails: () => import('../../orderDetails/index.vue'),
   },
   created(){
     console.info(this.$route)
   },
   methods:{
+    SelectOrder(){
+      this.visible2=true
+    },
     SelectDate(){
       this.visible=true
     },
diff --git a/src/components/page/order/toBeDelivered.vue b/src/components/page/order/toBeDelivered.vue
index ff4fded..947191d 100644
--- a/src/components/page/order/toBeDelivered.vue
+++ b/src/components/page/order/toBeDelivered.vue
@@ -64,7 +64,7 @@
           <template slot="operation">
             <a-space :size="24">
               <span class="table_operation" @click="SelectDate()">数据查看</span>
-              <span class="table_operation">订单详情</span>
+              <span class="table_operation" @click="SelectOrder()">订单详情</span>
             </a-space>
           </template>
         </a-table>
@@ -85,6 +85,7 @@
       </div>
     </div>
     <dataSelect :visible.sync="visible"></dataSelect>
+    <orderDetails :visible.sync="visible2"></orderDetails>
   </div>
 </template>
 <script>
@@ -93,6 +94,7 @@ export default {
   data() {
     return{
       visible:false,
+      visible2:false,
       pageSizeOptions: ['10', '20', '30', '40', '50'],
       //一页多少条
       pageSize:10,
@@ -178,11 +180,15 @@ export default {
   components:{
     Operation,
     dataSelect: () => import('../../dateSelect/index.vue'),
+    orderDetails: () => import('../../orderDetails/index.vue'),
   },
   created(){
     console.info(this.$route)
   },
   methods:{
+    SelectOrder(){
+      this.visible2=true
+    },
     SelectDate(){
       this.visible=true
     },
diff --git a/src/components/page/order/toBeSettled.vue b/src/components/page/order/toBeSettled.vue
index 5d58369..2c6658b 100644
--- a/src/components/page/order/toBeSettled.vue
+++ b/src/components/page/order/toBeSettled.vue
@@ -64,7 +64,7 @@
           <template slot="operation">
             <a-space :size="24">
               <span class="table_operation" @click="SelectDate()">数据查看</span>
-              <span class="table_operation">订单详情</span>
+              <span class="table_operation" @click="SelectOrder()">订单详情</span>
             </a-space>
           </template>
         </a-table>
@@ -85,6 +85,7 @@
       </div>
     </div>
     <dataSelect :visible.sync="visible"></dataSelect>
+    <orderDetails :visible.sync="visible2"></orderDetails>
   </div>
 </template>
 <script>
@@ -93,6 +94,7 @@ export default {
   data() {
     return{
       visible:false,
+      visible2:false,
       pageSizeOptions: ['10', '20', '30', '40', '50'],
       //一页多少条
       pageSize:10,
@@ -178,11 +180,15 @@ export default {
   components:{
     Operation,
     dataSelect: () => import('../../dateSelect/index.vue'),
+    orderDetails: () => import('../../orderDetails/index.vue'),
   },
   created(){
     console.info(this.$route)
   },
   methods:{
+    SelectOrder(){
+      this.visible2=true
+    },
     SelectDate(){
       this.visible=true
     },