components/pc/wcarrier/comp/bankInfo.vue

<template>
  <div>
    <div class="defbb p-spac">
      平台提现公户<span class="ml-spac gray-color" :class="{ 'green-color': saved }">[ {{saved?'已上报':'未上报'}} ]</span>
    </div>

    <div class="defbb" :class="{ 'read-only': isReadOnly }">
      <el-form ref="form" :model="value" :rules="rules" size="mini" label-width="120px" label-position="right"
         class="p-spac pb-spacd4">
        <div class="flex">
          <el-form-item prop="account" label="提现公户账号：" class="mr-spac">
            <el-input v-model="value.account" placeholder="请输入" v-empty="emptyArgs"></el-input>
          </el-form-item>
          <el-form-item prop="bankName" label="开户行支行：">
            <el-input v-model="value.bankName" placeholder="请输入" v-empty="emptyArgs"></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item prop="bank" label="开户银行：" class="mr-spac">
            <el-select v-model="value.bank" filterable placeholder="请选择" v-empty="emptyArgs">
              <el-option v-for="(item, index) in banks" :key="index" :label="item.bankName" :value="item.bankName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="unionBank" label="支行行号：">
            <el-input v-model="value.unionBank" placeholder="请输入" v-empty="emptyArgs"></el-input>
          </el-form-item>
          <div class="ml-spac pt-spac" v-if="!isReadOnly">
              <el-button type="text" @click="save()" :loading="$reqState($interfaces.pay.bind_bank).ing">确定上报</el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>

export default {
  name: 'bankInfo',
  data() {
    return {
      banks: [],
      rules: {
        account: { required: true, message: ' ', trigger: 'blur' },
        bankName: { required: true, message: ' ', trigger: 'blur' },
        bank: { required: true, message: ' ', trigger: 'blur' },
        unionBank: { required: true, message: ' ', trigger: 'blur' }

      }
    }
  },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    readOnly: {
      type: Boolean,
      default: null
    }
  },
  computed: {
    emptyArgs() {
      return { open: this.isReadOnly, text: this.$convert.nullViewStr }
    },
    isReadOnly() {
      return (this.readOnly || this.saved)
    },

    saved() {
      return this.value.bankStatus === 2
    }

  },
  watch: {


  },
  mounted() {
    this.$http(this.$interfaces.user.list_by_keywords, { keywords: '' }).then(res => {
      this.banks = res
    })
  },
  methods: {
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        this.$http(this.$interfaces.pay.bind_bank, this.value).then(res => {
          this.value.bankStatus = 2
        })
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.el-input,
.el-select {
  width: 300px;
}

.el-select--mini {
  font-size: 12px;
}

.el-form-item--mini.el-form-item {
  margin-bottom: 6px;
}

.read-only {
  ::v-deep .el-form-item__label::before,
  ::v-deep .el-input__suffix {
    display: none;
  }

  .el-input,
  .el-select,
  ::v-deep input {
    font-size: 14px;
    padding: 0;
    border: 0;
    pointer-events: none;
  }

}
</style>