wenhuaDate_admin/src/components/orderDetails/index.vue

<template>
  <div>
    <a-modal  v-model="newVisible" title="订单详情" :afterClose="onClose" width="1194px" :bodyStyle="modeStyle">
      <p>订单当前状态：
        <span v-if="order.status==1">等待购买方付款</span>
        <span v-else-if="order.status==2">等待买卖双方交付</span>
        <span v-else-if="order.status==3">正在结算中</span>
        <span v-else-if="order.status==4">订单已终止</span>
        <span v-else-if="order.status==5">订单已关闭</span>
      </p>
      <div :class="order.status==5?'steps_body1':'steps_body' " >
        <a-steps :current="order.status" class="steps">
          <a-step>
            <template slot="title">下单成功</template>
            <span slot="description">{{order.createtime}}</span>
          </a-step>
          <a-step title="待付款订单"  :description="order.paymenttime" v-if="order.status!=5"/>
          <a-step title="待交付订单" :description="order.receivetime" v-if="order.status!=5"/>
          <a-step title="待结算订单" :description="order.closetime" v-if="order.status!=5"/>
          <a-step title="已终止订单" :description="order.completetime" v-if="order.status!=5"/>
          <a-step title="已关闭订单" :description="order.shuttime" v-if="order.status==5"/>
        </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" v-if="order.status<2 " >
            <span>{{order.status==5?'订单已关闭':'关闭订单'}}</span>
            <a-switch default-checked class="order_switch"  @change="closeOrder" :loading="closeLoad" :disabled="order.status==5"/>
          </div>
        </div>

        <div class="oreder_content">
          <div v-show="orederActive==0">
            <p class="oreder_content_title">订单信息</p>
            <div class="oreder_info">
              <!-- <p>委托方/授权方：{{order_info.entrust_name}}</p> -->
              <p>购买方/被授权方：{{buyuser.name}}</p>
              <p>交易主体唯一标志码：{{buyuser.islicode}}</p>
              <p class="tab_body_p">统一社会信用代码：{{buyuser.uscc}}</p>
              <p class="tab_body_p">认证类型：{{buyuser.userType}}</p>
              <p class="tab_body_p">认证状态：{{buyuser.state==0?'认证中':buyuser.state==1?'认证成功':'认证失败'}}</p>
            </div>
            <div class="oreder_info">
              <p>订单类型：{{order_info.type==1?'委托订单':order_info.type==2?'认证订单':'服务订单'}}</p>
              <p>订单编号：{{order_info.batchcode}}</p>
              <!-- <p>订单ISLI标识码：{{order_info.contract_code}}</p>
              <p>交易流水号：{{order_info.close_serial_number}}</p> -->
            </div>
            <div class="oreder_info">
              <!-- <p>标的名称：{{order_info.goods_name}}</p> -->
              <!-- <p>交易品种：{{order_info.goods_type==1?'文化资源数据':'文化数字内容'}}</p> -->
              <!-- <p>交易方式：{{order_info.goods_entrust==1?'转让':'授权'}}</p> -->
              <!-- <p>交易方式：{{order_info.goods_entrust}}</p> -->
              <!-- <p>权属类型：{{order_info.goods_ownership_str}}</p> -->
              <!-- <p>标的价款：¥ {{order_info.price}}</p>
              <p>购买年限：{{order_info.transaction_count}}</p>
              <p>交易佣金：¥ {{order_info.service_charge}}</p> -->
              <!-- <p>保证金：¥ {{order_info.earnest_money}}</p> -->
              <p v-for="(item,index) in ratio_setting.detail" :key="index">
                <span>{{item.role_type==2?'被授权方交易佣金':item.role_type==1?'授权方交易结算':'平台方交易结算'}}比例：
                  {{item.calculate==1?item.ratio:item.amount}} %
                </span>
              </p>
              <p>标的价款总额：¥ {{ order.goods_price}} </p>
              <p>交易佣金总额：¥ {{order.total_service_charge}}</p>
              <p>订单金额总额：¥ {{order_info.total_money}} </p>
            </div>
          </div>

          <div v-show="orederActive==1">
            <p class="oreder_content_title">资金结算表</p>
            <a-table :columns="columns" :data-source="data" bordered :pagination="false">
              <template slot="close_status" slot-scope="close_status">
                <span v-if="close_status==2">已支付</span>
                <span v-else-if="close_status==1">未支付</span>
                <!-- <span v-if="close_status==1">无结算信息</span>
                <span v-else-if="close_status==2">结算中</span>
                <span v-else-if="close_status==3">用户名和收款人不一致</span>
                <span v-else-if="close_status==4">收款信息错误</span> -->
                <span v-else-if="close_status==3">已结算</span>
                <span v-else-if="close_status==4">未结算</span>
              </template>
            </a-table>
          </div>

          <div v-show="orederActive==2">
            <p class="oreder_content_title">交易发票</p>
            <div class="order_download">
              <!-- <a :href="bill.buy_bill" target="_blank" rel="nofollow">购买方服务费发票</a>
              <a :href="bill.entrust_bill" target="_blank" rel="nofollow">委托方服务费发票</a>
              <a :href="bill.third_party" target="_blank" rel="nofollow">第三方机构服务发票</a> -->
              <a :href="item.pdfUrl" target="_blank" rel="nofollow" v-for="(item,index) in bill" :key="index" :class="item.pdfUrl!=null?'fapiao':''">交易佣金发票
                <template v-if="bill.length>1">{{index+1}}</template>
              </a>
              <!-- <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>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
  import {orderInfo,orderShut} from '../../api/index'
  export default {
    props:{
      visible:{
        type:Boolean,
        require: true
      },
      batchcode:{
        type:String
      }
    },
    data(){
      return{
        closeLoad:false,
        orederActive:0,
        newVisible:true,
        modeStyle:{
          'min-height':'311px',
          'padding-top':'15px'
        },
        order:{},
        order_info:{},
        buyuser:{},
        ratio_setting:{},
        bill:[],
        step:0,
        data:[],
        columns:[
          {
            title: '结算方',
            dataIndex: 'close_side',
            width:'120px',
            // align:'center'
          },
          {
            title: '结算内容',
            dataIndex: 'close_message',
            width:'120px',
            // align:'center'
          },
          {
            title: '金额',
            dataIndex: 'money',
            width:'120px',
            // align:'center'
          },
          {
            title: '税额（含税）',
            dataIndex: 'tax_rate',
            width:'120px',
            // align:'center'
          },
          {
            title: '结算金额',
            dataIndex: 'close_money',
            width:'120px',
            // align:'center'
          },
          {
            title: '结算状态',
            dataIndex: 'close_status',
            scopedSlots: { customRender: 'close_status' },
            width:'120px',
            // align:'center'
          },
          {
            title: '结算流水号',
            dataIndex: 'close_number',
            width:'220px',
            // align:'center'
          },
        ]
      }
    },
    created(){
      this.getorderInfo()
    },
    methods:{
      closeOrder(){
        let data={batchcode:this.batchcode}
        this.closeLoad=true
        orderShut(data).then(res=>{
          if(res.code==200){
            this.closeLoad=false
            this.$message.success('订单关闭成功！');
            this.getorderInfo()
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      getorderInfo(){
        let data={batchcode:this.batchcode}
        orderInfo(data).then(res=>{
          if(res.code==200){
            this.order=res.data.order
            this.order_info=res.data.order_info
            this.data=res.data.close
            this.bill=res.data.bill
            this.buyuser=res.data.buyuser
            this.ratio_setting=res.data.ratio_setting
            // this.ratio_setting.detail.splice(
            //   1,
            //   1,
            //   ...this.ratio_setting.detail.splice(1 - 1, 1, this.ratio_setting.detail[1])
            // );
            console.info(this.ratio_setting)
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      onClose() {
        // this.newVisible=false
        this.$emit('update:visible', false)
      }
    },
  }

</script>

<style scoped>
  /deep/ .ant-modal-header{
    border-bottom: none;
  }
  /deep/ .ant-modal-footer{
    border-top: none;
    padding: 20px 16px;
  }
  p{
    margin-bottom: 0;
  }
  .steps_body{
    padding: 0 55px;
  }
  .steps_body1{
    width: 500px;
    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; */
    height: 422px;
    overflow-y: auto;
    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,.order_download a{
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
    margin-right: 46px;
    color: #AAAAAA;
  }
  .fapiao{
    color: #4E73E4 !important;
  }
</style>