VxMyFundCard

基金定投，贷款进度卡片

引用

import VxMyFundCard from '@/views/investment-manage/fund/components/vx-my-fund-card'
export default {
  components: { VxMyFundCard },
}

代码演示

<template>
  <vx-my-fund-card
    :content="cardInfo"
    :list-btm-data="listBtmData"
    text="产品详情"
    :list-top-data="listTopData"
    button-text="定投详情"
    isbutton
    @detail-page="detailPage"
    @particulars="particulars"
  ></vx-my-fund-card>
</template>

<script>
import VxMyFundCard from '@/views/investment-manage/fund/components/vx-my-fund-card'
export default {
  name: 'vx-my-fund-card',
  components: { VxMyFundCard },
  data() {
    return {
      cardInfo: {
        accruingInputAmounts: '3000.00',
        aipCode: '20210810001',
        autoInvestDesc: '按周定投',
        beginDate: '2021-08-12',
        buyAmount: '3000.00',
        cashFlag: '1',
        confirmAmount: '3000.00',
        currencyName: '人民币',
        currentMarketValue: '3000.00',
        cycleDate: 'W',
        cycleDates: '每日',
        endAmount: '50000.00',
        endDate: '2021-12-22',
        endFlag: '0',
        endMode: 'S',
        endModes: '投资日期',
        failPeriods: '2',
        fundType: '01',
        fundTypes: '股票型',
        funddata: '',
        invesNatureName: '0',
        investDate: '2021-08-10',
        investFlag: '1',
        investInterval: '',
        largeRedemptionMark: '1',
        lastInvestDate: '2021-08-12',
        periods: '15',
        positioningString: '1',
        prdCode: '003095',
        prdName: '中欧医疗健康混合A',
        prdRiskLevel: '4',
        prdRiskLevels: '中高风险',
        processDescription: '暂无',
        totalLot: '2800',
      },
      listBtmData: [
        {
          value: 'accruingInputAmounts',
          style: 'red',
          label: '累计定投金额（元）',
        },
        {
          value: 'amount',
          label: '定投金额',
        },
        {
          value: 'totalPeriods',
          label: '已投资期数',
        },
        {
          value: 'cycleDates',
          label: '定投频率',
        },
        {
          value: 'endModes',
          label: '终止模式',
        },
      ],
      listTopData: {
        name: 'prdName',
        code: 'prdCode',
        risk: 'prdRiskLevels',
        fundType: 'fundTypes',
        codeName: '产品代码',
        type: '定投',
      },
    }
  },
  methods: {
    detailPage(item) {
      this.$message.success('跳转定投详情')
      console.log(item)
    },
    particulars(item) {
      this.$message.success('跳转产品详情')
      console.log(item)
    },
  },
}
</script>

API

VxMyFundCard Props

属性	说明	类型	默认值	备注
list-top-data	卡片列表头部所展示的内容	`Object`	请见 list-top-data 详细列表
list-btm-data	卡片列表下方内容展示的内容	`Object`	`{label:'累计定投金额（元）'value:'accruingInputAmounts',style:'red'}`
button-text	按钮的文字内容	`String`	定投详情
text	右上跳转链接文字内容	`String`	[ ]
isbutton	右上跳转链接按钮显隐	`Boolean`	`true`	不显示
content	整条数据	`Object`	{}

list-btm-data 中的 value 字段对应列表中所需要遍历的字段名称，label 字段对应列表中所需要遍历的属性名称，style 文字颜色样式，没有默认值，则需要传入对应的字段名称和属性名。

list-top-data 详细列表

属性	说明	类型	默认值
name	卡片列表头产品名称	`String`	prdName
codeName	卡片列表头产品代码前所展示的名称，列如`产品代码` `申请时间`	`String`	--
code	卡片列表头产品代码	`String`	prdCode
fundType	卡片列表头产品类型	`String`	--
risk	卡片列表头产品风险等级	`String`	prdRiskLevel
type	卡片列表头产品是否定投	`String`	--

VxMyFundCard Events

@particulars(val)

产品详情功能跳转

参数	说明	类型	备注
`val`	`当前点击列表中的某一项`	`Object`	-

@detail-page(val)

定投详情功能跳转

参数	说明	类型	备注
`val`	`当前点击列表中的某一项`	`Object`	-

Current Tags

0.0.4 ... latest (2 years ago)

1 Versions

0.0.4 ... 2 years ago