VxFinanceCard

理财产品卡片

引用

import VxFinanceCard from '@/views/investment-manage/bank-finance/components/vx-finance-card';
export default {
  components:{ VxFinanceCard },
}

代码演⽰

<template>
  <!-- 展示列表时，需要在父级添加公共样式 class="prd-list" -->
  <ul class="prd-list">
      <li v-for="(item, index) in prdList" :key="index">
        <vx-finance-card :content="item" @click="goDetail">
          <div slot="newBlank" class="prd-cell relative">
            <ui-progress type="circle" :percentage="item.rate" :show-text="false" :stroke-width="9" :width="92"> </ui-progress>
            <div class="rate-cir">
              <span>剩余</span>
              <div>{{ item.availLimit | numberFilter() }}</div>
            </div>
          </div>
        </vx-finance-card>
      </li>
    </ul>
</template>
<script>
import VxFinanceCard from "@/views/investment-manage/bank-finance/components/vx-finance-card";
export default {
  components: { VxFinanceCard },
  data() {
    return {
      prdList: [
        {
          rate: 90,
          availLimit: 1000,
          investName: '测试理财产品001',
          transWay: '1',
          status: '1',
          clickText: '详情',
          contentList: [
            {
              title: '持有金额',
              content: '5,000.00元',
              style: 'red',
              size: '20px',
            },
            {
              title: '持有份额',
              content: '1000份',
              style: 'red',
              size: '20px',
            },
            {
              title: '预期年化收益率',
              content: '7.5%',
              style: 'black',
              size: '20px',
            },
            {
              title: '到期日',
              content: '2022-05-19',
              style: 'black',
              size: '20px',
            },
          ],
        },
      ],
    };
  },
  methods: {
    goDetail(item) {
      console.log(item);
    },
  },
};
</script>
<style lang="scss">
.prd-list {
  .relative {
    position: relative;
  }
  .rate-cir {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

API

VxFinanceCard Props

属性	说明	类型	默认值	备注
`content`	理财产品	`Object`	-	详细必含属性见下表

content Attributes

属性	说明	类型	默认值	备注
`investName`	产品名称	`String`	-	-
`transWay`	理财类型	`Number`	-	-
`status`	产品状态	`Number`	-	-
`contentList`	具体信息	`Array`	-	详细必含属性见下表
`clickText`	按钮名称	`String`	-	-

contentList Attributes

属性	说明	类型	默认值	备注
`title`	标题	`String`	-	-
`content`	内容	`String`	-	-
`style`	样式	`String`	-	-
`size`	字号	`String`	'24px'	-

VxFinanceCard Events

@click(item)

跳转至详情页

参数	说明	类型	备注
`item`	`当前理财产品`	`Object`	-

Current Tags

0.0.4 ... latest (2 years ago)

1 Versions

0.0.4 ... 2 years ago