carbon-web/src/views/bankCheck/bank/modal/bankOrderMobiel.vue

<template>
  <el-dialog
    :title="modalTitle"
    :visible.sync="modalVisible"
    :width="formLabelWidth"
    top="2vh"
    append-to-body
    @close="handleCancel">
    <div class="mobile" v-loading="loading">
        <table class="showTables">
          <tr>
            <td class="title">账户余额:</td>
            <td class="content">{{datas.accountMoney}}</td>
            <td class="title">渠道流水号:</td>
            <td class="content">{{datas.chaSerialNo}}</td>
            <td class="title">币种:</td>
            <td class="content">{{datas.currency}}</td>
          </tr>
          <tr>
            <td class="title">手续费支付方式:</td>
            <td class="content">{{datas.handFeeType}}</td>
            <td class="title">手续费:</td>
            <td class="content">{{datas.handFee}}</td>
            <td class="title">付款账号:</td>
            <td class="content">{{datas.payAccount}}</td>
          </tr>
          <tr>
            <td class="title">付款人名称:</td>
            <td class="content">{{datas.payName}}</td>
            <td class="title">交易应答码:</td>
            <td class="content">{{datas.payResponseCode}}</td>
            <td class="title">交易序号:</td>
            <td class="content">{{datas.paySerial}}</td>
          </tr>
          <tr>
            <td class="title">付款金额:</td>
            <td class="content">{{datas.payAmount}}</td>
            <td class="title">付款银行名称:</td>
            <td class="content">{{datas.payBankName}}</td>
            <td class="title">交易日期:</td>
            <td class="content">{{datas.payDate}}</td>
          </tr>
          <tr>
            <td class="title">交易状态:</td>
            <td class="content">{{datas.payStatus}}</td>
            <td class="title">邮电费:</td>
            <td class="content">{{datas.postFee}}</td>
            <td class="title">交易类型:</td>
            <td class="content">{{datas.transactionType}}</td>
          </tr>
          <tr>
            <td class="title">加急标志:</td>
            <td class="content" colspan="6">{{datas.urgentSign}}</td>
          </tr>
          <tr>
            <td class="title">用途:</td>
            <td class="content" colspan="6">{{datas.useWay}}</td>
          </tr>
          <tr>
            <td class="title">付款人备注:</td>
            <td class="content" colspan="6">{{datas.payMark}}</td>
          </tr>
          <tr>
            <td class="title">错误消息:</td>
            <td class="content" colspan="6">{{datas.errorMsg}}</td>
          </tr>
          <tr>
            <td class="title">失败原因:</td>
            <td class="content" colspan="6">{{datas.failReson}}</td>
          </tr>
        </table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { bankDetailRequest } from "@/api/bankCheck/bank";
export default {
  name: 'addMobiel',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'title'
    },
    action: {
      type: String,
      default: 'add'
    },
    selectRow: {
      type: Object,
      default:null
    }
  },
  watch: {
    visible(newVal, oldVal) {
      this.modalVisible = newVal;
    },
    title(newVal, oldVal) {
      this.modalTitle = newVal;
    },
    action(newVal, oldVal) {
      this.modalAction = newVal;
    },
    selectRow(newVal, oldVal) {
      this.modalSelectRow = newVal;
    }
  },
  data() {
    return {
      modalTitle: this.title,
      modalVisible: this.visible,
      modalAction: this.action,
      modalSelectRow: this.selectRow,
      formLabelWidth: '1024px',
      loading:false,
      //窗口权限
      limit: {
        isRead: false, //是否只读
        isAdd: false //是否可写
      },
      datas:null
    };
  },
  created() {
    this.getDetail(this.modalSelectRow.guid)
  },
  methods: {
    getDetail(id){
      this.loading = true;
      let params = {
        guid:id
      }
      bankDetailRequest(params).then(res => {
          if (res.retHead.errCode === 0) {
            this.datas = res.retBody
            this.loading = false;
          }
      })
    },
    //窗口关闭
    handleCancel() {
      this.$emit('closemodal', false);
    }
  }
};
</script>

<style lang="scss" scoped>
  .showTables{
    width:100%;
    text-align:center;
    border-collapse: collapse;
    tr,td{
      height:42px;
      border:1px solid #EFEFEF;
    }
    .title{
      background:#FAFAFA;
      color:#666;
      font-weight:bold;
    }
  }
</style>