VxCreditCardInformation

信用卡账户信息

引用

import VxCreditCardInformation from '@/views/credit-card/components/vx-credit-card-information';

components:{ VxCreditCardInformation },

代码演⽰

<template>
  <vx-credit-card-information
    :credit-card-list="creditCardList"
    :active-index="activeIndex"
    @stage="goStage"
    @bill="goBill"
    @repayment="goRepayment"
    @apply="goApply"
  ></vx-credit-card-information>
</template>
<script>
import VxCreditCardInformation from '@/views/credit-card/components/vx-credit-card-information'
export default {
  components: {
    VxCreditCardInformation,
  },
  data() {
    return {
      creditCardList: [
        {
          creditNo: '6282232017090560',
          embName: '张三1',
          dueDate: '20210610',
          periodBillAmt: '2000',
          availableAmt: '40000',
          creditLimit: '40000',
          periodBillDate: '20210518',
          deptName: '科蓝银行',
          gender: 'M',
          billStatus: '2',
          surPayedAmt: '3500',
          day: '104',
          outstandingBillsTotalAmount: '1800',
        },
        {
          creditNo: '6282239785656122',
          embName: '张三2',
          dueDate: '20210610',
          availableAmt: '40000',
          creditLimit: '40000',
          periodBillDate: '20210518',
          deptName: '科蓝银行 北京朝阳门支行',
          gender: 'M',
          billStatus: '4',
          surPayedAmt: '3500',
          day: '104',
          payCount: '10',
          outstandingBillsTotalAmount: '1800',
        },
      ],
    }
  },
  methods: {
    goStage(val) {
      consol.log(val)
    },
    goBill(val) {
      consol.log(val)
    },
    goRepayment(val) {
      consol.log(val)
    },
    goApply() {
      consol.log('===== goApply =====')
    },
  },
}
</script>

API

VxCreditCardInformation Props

属性	说明	类型	默认值	备注
`credit-card-list`	信用卡列表	`Array`	-	详细必含属性见下表
`active-index`	首先展示卡片下标	`Number`	0	-

credit-card-list

属性	说明	类型	默认值	备注
`creditNo`	信用卡卡号	`Number`	-	-
`billStatus`	还款状态	`Number`	-	-
`periodBillDate`	账单日	`String`	-	-
`outstandingBillsTotalAmount`	未出账单金额	`Number`	-	-
`surPayedAmt`	剩余应还金额	`Number`	-	-
`periodBillAmt`	本期账单金额	`Number`	-	-
`dueDate`	还款日	`String`	-	-
`day`	剩余天数	`Number`	-	-
`creditLimit`	信用额度	`Number`	-	-
`availableAmt`	可用额度	`Number`	-	-
`embName`	持卡人	`String`	-	-
`gender`	性别	`String`	-	-
`deptName`	开户行	`String`	-	-

VxCreditCardInformation Events

@stage(value)

跳转消费分期页面

属性	说明	类型	备注
`value`	`当前卡片信息`	`Object`	-

@bill(value)

跳转账单分期页面

属性	说明	类型	备注
`value`	`当前卡片信息`	`Object`	-

@repayment(value)

跳转还款页面

属性	说明	类型	备注
`value`	`当前卡片信息`	`Object`	-

@apply()

跳转申请页面

Current Tags

0.0.4 ... latest (2 years ago)

1 Versions

0.0.4 ... 2 years ago