wenhuayun_admin/src/components/common/orderDialog/index.vue

<template>
  <div>
    <el-dialog title="订单详情" :visible.sync="isshow" width="70%"  :before-close="MisShow">
      <p class="tips">
        <!-- <span v-if="orderInfos.order.status==0">请在 {{orderInfos.order.pay_overdue_time | formatDate }}前完成订单支付！</span> -->
        <span v-if="orderInfos.order.status==1 || orderInfos.order.status==0">等待摘牌方付款</span>
        <span v-else-if="orderInfos.order.status==2">等待双方上传签约合同</span>
        <span v-else-if="orderInfos.order.status==3">请审核签约合同</span>
        <span v-else-if="orderInfos.order.status==4 || orderInfos.order.status==5">等待双方确认交付</span>
        <span v-else-if="orderInfos.order.status==6">请结算订单</span>
        <span v-else-if="orderInfos.order.status==7">订单完成！</span>
      </p>
      <div class="steps">
        <el-steps :active="orderInfos.order.status " align-center>
          <template v-if="orderInfos.order.type==0">
            <el-step title="待付款" description=""></el-step>
            <el-step title="待审核付款" description=""></el-step>
            <el-step title="待上传签约合同" description=""></el-step>
            <el-step title="待确认签约合同" description=""></el-step>
            <el-step title="待交付" description=""></el-step>
            <el-step title="待确认交付" description=""></el-step>
            <el-step title="待结算" description=""></el-step>
            <el-step title="已完成" description=""></el-step>
          </template>
          <template v-else>
            <el-step title="下单成功" description=""></el-step>
            <el-step title="等待付款" description=""></el-step>
            <el-step title="订单完成" description=""></el-step>
          </template>
        </el-steps>
      </div>
      <div class="order_title">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="order_tabs">
          <el-tab-pane label="订单信息" name="first">
            <p class="order_info_p">订单编号：{{orderInfos.batchcode}} </p>
            <p class="order_info_p">标准编号：{{orderInfos.asset.serial}} </p>
            <p class="order_info_p">流水编号：{{orderInfos.order.money_id}} </p>
            <p class="order_info_p">快递单号：{{orderInfos.order.express_id}} </p>
            <br/>
            <p class="order_info_p">资产名称：{{orderInfos.asset.serial_name}} </p>
            <p class="order_info_p">资产类型：{{orderInfos.asset.asset_type_name}} </p>
            <p class="order_info_p">转让单价：{{orderInfos.asset.price}} </p>
            <p class="order_info_p">交易数量：{{orderInfos.order.count}} </p>
            <p class="order_info_p">交易金额：{{orderInfos.order.price}} </p>
            <br/>
            <p class="order_info_p">摘牌方名称：{{orderInfos.username}} </p>
            <p class="order_info_p">收货地址：{{orderInfos.order.express_address}} </p>
            <p class="order_info_p">收货人名称：{{orderInfos.order.express_user}} </p>
            <p class="order_info_p">收货人电话：{{orderInfos.order.express_userphone}} </p>
            <p class="order_info_p">邮政编码：{{orderInfos.order.postal_code}} </p>
          </el-tab-pane>
          <el-tab-pane label="订单合同" name="second" :disabled="orderInfos.order.status<4" v-if="orderInfos.order.type==0">
            <p class="order_info_p1">
              摘牌方签约合同详情
              <a :href="orderInfos.order.buy_contract" download class="upload_span">点击下载</a>
            </p>
            <p class="order_info_p1">
              挂牌方签约合同详情
              <a :href="orderInfos.order.sell_contract" download class="upload_span">点击下载</a>
            </p>
          </el-tab-pane>
          <el-tab-pane label="交易凭证" name="third" :disabled="orderInfos.order.status<6">
            <p class="order_info_p1">
              交易凭证详情
              <a :href="orderInfos.order.buy_contract" download class="upload_span">点击下载</a>
            </p>
          </el-tab-pane>
          <el-tab-pane label="交易账单" name="fourth">
            <p class="order_info_p">订单金额：{{orderInfos.order.total_price}} </p>
            <p class="order_info_p">结算金额：{{orderInfos.order.settlement_price}} </p>
          </el-tab-pane>
        </el-tabs>
        <div class="order_switch">
          <span>订单状态</span>
          <el-switch v-model="value1" @change="closeOrerd" :disabled="orderInfos.order.status==8"></el-switch>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="settlement" v-if="orderInfos.order.status==6">结 算</el-button>
        <el-button @click="MisShow">返 回</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="editVisible2" width="30%">
      <p class="recordTips">请输入关闭订单原因：</p>
      <div class="msg">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="query.message">
        </el-input>
      </div>
      <div class="msg1">
        <span>操作员：</span>
        <el-input placeholder="请输入内容" v-model="query.operator_name" class="msg1_input"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="close">确 定</el-button>
      </span>
  </el-dialog>
  </div>
</template>
<script>
import { orderInfo ,close,settlement} from '../../../api/index'
export default ({
  name:'orderDialog',
  props:{
    batchcode:{
      // type:Number,
      require: true
    },
    isshow:{
      type:Boolean,
      default:false,
      require: true
    },
  },
  data() {
    return{
      activeName: 'first',
      value1:true,
      orderInfos:{
        asset:{},
        order:{}
      },
      query:{
        message:'',
        batchcode:'',
        operator_name:''
      },
      editVisible2:false
    }
  },
  created(){
    this.getData()
    this.query.batchcode=this.batchcode
  },
  methods:{
    settlement(){
      let data={batchcode:this.batchcode}
      settlement(data).then(res=>{
          console.info(res)
          if (res.code==100) {
              this.$message.success('结算订单成功！');
              this.getData()
          }else{
              this.$message.error(res.msg)
          }
      })
    },
    close(){
      if (this.query.message=='') {
        this.$message.error('请输入关闭订单的原因！')
      }else if(this.query.operator_name==''){
        this.$message.error('请输入操作员的名字！')
      }else{
        close(this.query).then(res=>{
            console.info(res)
            if (res.code==100) {
                this.$message.success('关闭订单成功！')
                this.MisShow();
            }else{
                this.$message.error(res.msg)
            }
        })
      }
    },
    closeOrerd(res){
      console.info(res)
      if (!res) {
        this.editVisible2=true
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getData(){
      let data={batchcode:this.batchcode}
      orderInfo(data).then(res=>{
        console.info(res);
        if (res.code==100) {
          this.orderInfos=res.data
          if (res.data.order.status==8) {
            this.value1=false
          }
        }
      })
    },
    MisShow(){
      this.$emit('orderShow')
    }
  }
})
</script>
<style scoped>
  .tips{
    font-size: 16px;
  }
  .msg1{
    /* display: flex;
    align-items: center; */
    margin-top: 15px;
  }
  .msg1>.msg1_input{
    /* width: 80%; */
    margin-top: 10px;
  }
  .steps{
    margin-top: 30px;
    margin-bottom: 15px;
  }
  .order_title{
    width: 100%;
    position: relative;
  }
  .order_tabs{
    width: 100%;
  }
  .order_switch{
    position: absolute;
    top: 10px;
    right: 0;
  }
  .order_switch >span{
    color: #4E73E4;
    display: inline-block;
    margin-right: 10px;
  }
  .order_tabs>>>.el-tab-pane{
    min-height: 480px;
    border: 2px #AAAAAA dashed;
    padding: 10px;
  }
  .order_info_p{
    font-size: 16px;
    color: #555555;
  }
  .order_info_p1{
    margin-top: 15px;
    font-size: 16px;
    color: #555555;
  }
  .upload_span{
    color: #294CC6;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 15px;
}
  .textarea{
    margin-top: 10px;
  }
  .msg{
    margin-top: 15px;
  }
</style>