wenhuayun_index/src/components/page/Order/sellOrderPendingPay.vue

<template>
  <div>
    <div class="order_info">
      <div class="order_info_left">
        <div class="order_info_left_title">订单信息</div>
        <div class="order_info_left_content">
          <div class="order_info_left_content_item">
            <span>联系地址： </span>
            <span>{{orderInfos.express_address}}</span>
          </div>
          <div class="order_info_left_content_item">
            <span>联系人：  </span>
            <span>{{orderInfos.express_user}} {{orderInfos.express_userphone}}</span>
          </div>
          <div class="order_info_left_content_item">
            <span>订单编号：  </span>
            <span>{{orderInfos.batchcode}}</span>
          </div>
          <div class="order_info_left_content_item">
            <span>下单时间：  </span>
            <span>{{orderInfos.create_time | formatDate}}</span>
          </div>
          <div class="order_info_left_content_item">
            <span>挂牌方：  </span>
            <span>{{orderInfos.sell_name}}</span>
          </div>
          <div class="order_info_left_content_item">
            <span>摘牌方留言： </span>
            <span>{{orderInfos. sell_message}}</span>
          </div>
        </div>
      </div>
      <div class="order_info_right">
        <div class="order_info_right_title">
          <img src="../../../assets/img/order_stats.png" alt="">
          <span>订单状态：
            <template v-if="orderInfos.status==0 && orderInfos.check_status==0">等待摘牌方付款</template>
            <template v-else-if="orderInfos.status==1 && orderInfos.check_status==0">等待交易所确认</template>
            <template v-else-if="orderInfos.status==1 && orderInfos.check_status==2">摘牌方付款确认审核失败</template>
            <template v-else-if="orderInfos.status==2 && orderInfos.check_status==0">等待双方上传签约合同</template>
            <template v-else-if="orderInfos.status==3 && orderInfos.check_status==0">等待交易所确认签约合同</template>
            <template v-else-if="orderInfos.status==3 && orderInfos.check_status==2">确认签约合同审核失败</template>
            <template v-else-if="orderInfos.status==4 ">等待摘牌方确认交付</template>
            <template v-else-if="orderInfos.status==6 ">订单结算中</template>
          </span>
        </div>
        <p class="order_info_right_tips" v-if="orderInfos.status==0 && orderInfos.check_status==0 || orderInfos.status==1 && orderInfos.check_status==2">
          摘牌方还要
          <countDown :endTime="orderInfos.pay_overdue_time"   endText="已经结束了"></countDown>
          来付款，超时订单自动关闭。
        </p>
        <p class="order_info_right_tips" v-if="orderInfos.status==6">
          摘牌方已确认交付，该订单正在结算中，订单结算金额为（ ¥ 27,000.00 ），请耐心等候！
        </p>
        <p class="order_info_right_tips" v-else-if="orderInfos.status==1 && orderInfos.check_status==0">
          摘牌方已上传转账记录，还有
          <countDown :endTime="orderInfos.pay_overdue_time"   endText="已经结束了"></countDown>
          由交易所确认，请耐心等候！
        </p>
        <p class="order_info_right_tips" v-else-if="orderInfos.status==2 && orderInfos.check_status==0||orderInfos.status==3 && orderInfos.check_status==2">
          请双方上传签约合同PDF文件扫描件，由交易所见证交易过程！
        </p>
        <p class="order_info_right_tips" v-else-if="orderInfos.status==3 && orderInfos.check_status==0">
          交易所正在审核确认双方上传的签约合同，请耐心等候！
        </p>
        <p class="order_info_right_tips" v-if="orderInfos.status==4">
          摘牌方还有
          <countDown :endTime="orderInfos.pay_overdue_time"   endText="已经结束了"></countDown>
          来确认，超时订单自动确认。订单确认后交易所将会出具双方资产评估报告，确认资产交易成功！
        </p>
        <template v-if="orderInfos.status==2 && orderInfos.check_status==0 ||orderInfos.status==3 && orderInfos.check_status==0||orderInfos.status==3 && orderInfos.check_status==2">
          <div class="order_info_right_tips">
            <span>摘牌方上传</span>
            <el-upload
              v-if="orderInfos. sell_contract==null && orderInfos.check_status==0 || orderInfos.check_status==2"
              class="upload-demo"
              :action="action1"
              :show-file-list="false"
              :on-error="handleAvatarError"
              list-type="picture"
              :on-success="(res,file)=>{handleAvatarSuccess1(res,file)}"
              >
              <span class="upload_span ">{{orderInfos.check_status==2? '重新上传':'点击上传'}}</span>
            </el-upload>
            <a v-else class="upload_span upload-demo" :href="orderInfos.sell_contract" download>查看记录</a>
          </div>
          <div class="order_info_right_tips">
            <span>挂牌方上传</span>
            <a class="upload_span upload-demo"   @click="imgDetils(orderInfos.buy_contract)">查看记录</a>
          </div>
        </template>
        <div class="order_info_right_tips" v-if="orderInfos.status==6 ">
          <span>您可以点击</span>
          <button class="pay_button" @click="imgDetils()">{{orderInfos.type==1?'资产评估报告':'交易凭证'}}</button>
          <span>下载{{orderInfos.type==1?'资产评估报告':'交易凭证'}}</span>
        </div>
        <div class="order_info_right_tips" v-if=" orderInfos.status==1">
          <span>您可以</span>
          <template v-if="orderInfos.status==0 && orderInfos.check_status==0 || orderInfos.status==1 && orderInfos.check_status==2">
            <button class="pay_button">网银支付</button>
            <span>或上传转账记录</span>
            <el-upload
              class="upload-demo"
              :action="action"
              :on-change="fileChange"
              :show-file-list="false"
              :on-error="handleAvatarError"
              list-type="picture"
              :on-success="(res,file)=>{handleAvatarSuccess(res,file)}"
              >
              <span class="upload_span">点击上传</span>
            </el-upload>
          </template>
          <template v-else-if="orderInfos.status==1 && orderInfos.check_status==0">
            <span class="upload_span1" @click="onPreview(orderInfos.pay_record)">查看记录</span>
          </template>
        </div>
        <div class="error_msg" v-if="orderInfos.check_status==2">失败原因：{{orderInfos.check_content}}</div>
      </div>
    </div>
    <div class="order_head">
      <div class="order_head_item" >资产名称</div>
      <div class="order_head_item" >资产编号</div>
      <div class="order_head_item" >资产分类</div>
      <div class="order_head_item" >资产单价</div>
      <div class="order_head_item" >交易数量</div>
      <div class="order_head_item" >金额小计</div>
    </div>
    <div class="order_content">
      <div class="order_content_item">
        <img :src="orderInfos.serial_img[0]" alt="" class="order_content_item_img">
        <span class="order_content_item_span">{{orderInfos.serial_name}}</span>
      </div>
      <div class="order_content_item">
        <span>GM-BZ-165254{{orderInfos.serial_name}}</span>
      </div>
      <div class="order_content_item">
        <span>{{orderInfos.asset_type_name}}</span>
      </div>
      <div class="order_content_item">
        <span>¥ {{orderInfos.single_price}}</span>
      </div>
      <div class="order_content_item">
        <span>{{orderInfos.count}}</span>
      </div>
      <div class="order_content_item">
        <span class="order_price">¥ {{orderInfos.price}}</span>
      </div>
    </div>
    <div class="order_other">
      <div class="order_other_item">
        <div class="order_message">
          <span>给挂牌方留言：</span>
          <span>{{orderInfos.buy_message}}</span>
        </div>
        <div class="order_other_item_right">
          <div>
            <span>契税： ¥ {{orderInfos.contract_tax}}</span>
            <span class="order_price">¥ {{orderInfos.contract_tax}}</span>
          </div>
          <div>
            <span>印花税： ¥ {{orderInfos.printing_tax}}</span>
            <span class="order_price">¥ {{orderInfos.printing_tax}}</span>
          </div>
        </div>
      </div>
      <div class="order_other_item order_other_item1">
        <span>金额合计  </span>
        <span class="all_price"> ¥ {{orderInfos.total_price}}</span>
      </div>
    </div>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="img_url"
      :z-index="9999"
    />
  </div>
</template>
<script>
import {orderInfo,uploadingRecord,uploadingContract} from '../../../api/index'
export default {
  data(){
    return{
      query:{
        batchcode:'',
        record:''
      },
      showViewer:false,
      img_url:[],
      orderInfos:{
        serial_img:[]
      },
      host:'http://wenhua.xingtongworld.com',
      action:'http://wenhua.xingtongworld.com/api/Index/uploadimg',
      action1:'http://wenhua.xingtongworld.com/api/Index/uploadFile',
    }
  },
  components: {
    ElImageViewer: () => import('element-ui/packages/image/src/image-viewer'),
    countDown: () => import('../../common/countDown.vue'),
  },
  created(){
    this.query.batchcode=this.$route.query.batchcode
    this.getData()
  },
  methods:{
    uploadingContract(contract){
      let data={
        sell_contract:contract,
        batchcode:this.query.batchcode,
      }
      uploadingContract(data).then(res=>{
        console.info(res)
        if(res.code==100){
          this.orderInfos.buy_contract=this.host+res.data.img_url;
          this.$message.success('上传成功!');
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    imgDetils(img){
      if(img!=null){
        window.location.href = img;
      }else{
        this.$message.error('摘牌方还未上传签约合同')
      }
    },
    getData(){
      orderInfo(this.query).then(res => {
        console.info(res)
        if(res.code==100){
          this.orderInfos=res.data
          this.$emit('confirm',res.data)
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    uploadingRecord(){
      uploadingRecord(this.query).then(res => {
        console.info(res)
        if(res.code==100){
          this.$message.success('文件上传成功！请等待审核~');
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    onPreview(img) {
      this.img_url = [img]
      this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    },
    handleAvatarError(){
      this.$message.error('文件上传失败！');
    },
    handleAvatarSuccess1(res,file){
      console.info(res)
      if(res.code==1){
        let contract=this.host+res.data.img_url;
        this.uploadingContract(contract)
      }else{
        this.$message.error(res.msg);
      }
    },
    handleAvatarSuccess(res, file, index,key){
      if(res.code==1){
        this.query.record=this.host+res.data.img_url;
        this.uploadingRecord()
      }
    },
    fileChange(file){
      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
          this.$message.error('只能是图片!');
          this.$refs.upload.clearFiles();
          return;
      }
      if (!isLt3M) {
          this.$message.error('上传图片大小不能超过 3MB!');
          this.$refs.upload.clearFiles();
          // this.$set(this.query, 'goods_img', '');
          return;
      }
    },
  }
}
</script>
<style scoped>
  .upload-demo{
    margin-left: 20px;
  }
  .upload_span{
    color: #294CC6;
    text-decoration: underline;
    cursor: pointer;
  }
  .upload_span1{
    color: #294CC6;
    text-decoration: underline;
    display: inline-block;
    margin-left: 20px;
    cursor: pointer;
  }
  .order_info{
    width: 100%;
    min-height: 360px;
    height: auto;
    border: 1px solid rgba(215, 215, 215, 1);
    margin-bottom: 30px;
    display: flex;
  }
  .order_info_right{
    width: 940px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 60px;
    box-sizing: border-box;
  }
  .order_info_right_title{
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 35px;
  }
  .order_info_right_title img{
    width: 30px;
    height: 30px;
    margin-right: 30px;
  }
  .order_info_right_tips{
    font-size: 12px;
    color: #555555;
    display: flex;
    align-items: center;
    margin-left: 80px;
    margin-bottom: 25px;
  }
  .order_time{
    color: #89201F;
  }
  .pay_button{
    width: 80px;
    font-size: 12px;
    color: #555555;
    height: 30px;
    border: 1px solid #D7D7D7;
    margin: 0 20px;
    cursor: pointer;
  }

  .order_info_left{
    width: 250px;
    border-right: 1px solid rgba(215, 215, 215, 1);
    box-sizing: border-box;
    background-color: #F2F2F2;
  }
  .order_info_left_title{
    padding-left: 20px;
    background-color: #E7E7E7;
    display: flex;
    height: 40px;
    align-items: center;
    font-size: 12px;
    font-weight: 650;
    border-bottom: 1px solid rgba(215, 215, 215, 1);
    box-sizing: border-box;
  }
  .order_info_left_content{
    padding: 10px 20px;
    min-height: 320px;
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }
  .order_info_left_content_item{
    font-size: 12px;
    color: #555555;
    display: flex;
    margin-bottom: 10px;
  }
  .order_info_left_content_item span:first-child{
    display: inline-block;
    width: 80px;
    margin-right: 10px;
  }
  .order_info_left_content_item span:last-child{
    display: inline-block;
    width: 135px;
  }
  .order_head{
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    width: 100%;
  }
  .order_head_item{
    width: 166px;
    font-size: 12px;
    color: #7F7F7F;
    text-align: center;
    border-bottom: 2px solid rgba(215, 215, 215, 1);
    padding-bottom: 5px;
  }
  .order_head_item:first-child{
    width:340px
  }
  .order_content{
    height: 75px;
    background-color: rgba(255, 255, 255, 0);
    border-top: 1px dashed #AAAAAA;
    border-bottom: 1px dashed #AAAAAA;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  .order_content_item{
    width: 166px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-sizing: border-box;
  }
  .order_content_item:first-child{
    width:340px;
    justify-content: flex-start;
    padding-left: 20px;
  }
  .order_content_item:last-child{
    justify-content: flex-end;
    padding-right: 20px;
  }
  .order_content_item_img{
    width: 55px;
    height: 55px;
    margin-right: 10px;
  }
  .order_content_item_span{
    display: inline-block;
    width: 240px;
  }
  .order_price{
    color: #EB4747;
  }
  .order_other{
    margin-bottom: 100px;
  }
  .order_other_item{
    display: flex;
    justify-content: space-between;
    height: 103px;
    width: 100%;
  }
  .order_message{
    width: 596px;
    padding: 10px 20px;
    display: flex;
    font-size: 12px;
    background: #F2F2F2;
    box-sizing: border-box;
  }
  .order_message .order_message_input{
    width: 455px;
    margin-left: 10px;
  }
  .order_message_input >>>.el-textarea__inner{
    height: 75px;
  }
  .order_other_item_right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .order_other_item_right>div{
    width: 601px;
    height: 50px;
    background-color: rgba(242, 242, 242, 1);
    font-size: 12px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
  }
  .order_other_item1{
    height: 50px;
    background: #F2F2F2;
    align-items: center;
    justify-content: flex-end;
    margin-top: 3px;
    font-size: 14px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .error_msg{
    font-size: 12px;
    color: #89201F;
    margin-left: 80px;
  }
</style>