<template>
|
<div class="fund page-content">
|
<div class="box_head">
|
<div class="page-w2 head_content flex-between">
|
<div class="head_left flex-center">
|
<img src="@/assets/images/ipo-icon_b.png" alt="Fund Investment" />
|
<span>{{ $t("fi1") }}</span>
|
</div>
|
<el-button
|
type="primary"
|
plain
|
@click="$router.push({ path: '/account', query: { nav: 6 } })"
|
>
|
{{ $t("订单") }}
|
<i class="el-icon-caret-right"></i>
|
</el-button>
|
</div>
|
</div>
|
|
<template v-if="tableData && tableData.length > 0">
|
<div class="box_content page-w2">
|
<div class="content_item" v-for="i in tableData" :key="i.id">
|
<div class="item_head">{{ i.title }}</div>
|
<el-row :gutter="20">
|
<el-col :span="10">
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("syl") }}</div>
|
<div class="label_2">{{ i.returnOfRate }}%</div>
|
</div>
|
<!-- <div class="flex-start item_label">
|
<div class="label_1">Investment Amount</div>
|
<div class="label_2">$ 10</div>
|
</div> -->
|
</el-col>
|
|
<el-col :span="10">
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("投资周期") }}</div>
|
<div class="label_2">{{ i.returnTime }} {{ $t("hj87") }}</div>
|
</div>
|
</el-col>
|
|
<el-col :span="4" class="flex-center">
|
<el-button type="primary" @click="buyOpen(i)">
|
{{ $t("buy") }}
|
</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
|
<div class="flex-end page-w2">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:total="total"
|
:current-page="pageNum"
|
:page-size="pageSize"
|
@current-change="handleCurrentChange"
|
>
|
</el-pagination>
|
</div>
|
</template>
|
|
<el-empty :description="$t('zwsj')" v-else></el-empty>
|
|
<buy
|
:dialogVisible.sync="buyVisible"
|
v-if="buyVisible"
|
:dataObj="openObj"
|
@onClose="onClose"
|
></buy>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import buy from "./components/buy";
|
import mixins from "@/mixins/myMixins"; // 混入
|
export default {
|
name: "fund",
|
mixins: [mixins],
|
components: {
|
buy,
|
},
|
data() {
|
return {
|
// 列表参数,必须是opt和myMixins混入配合使用
|
opt: {},
|
buyVisible: false,
|
openObj: {}, // 打开弹窗的数据
|
};
|
},
|
created() {
|
this.apiInterface = api.getYebInfo; // 赋值接口
|
this.init(); // 获取列表
|
},
|
methods: {
|
// 打开购买弹窗
|
buyOpen(item) {
|
this.openObj = item; // 赋值
|
this.buyVisible = true; // 打开弹窗
|
},
|
// 关闭弹窗
|
onClose() {
|
this.openObj = {};
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.fund {
|
.box_content {
|
padding: 16px 0;
|
.content_item {
|
border: 1px solid #f1f1f1;
|
border-radius: 16px;
|
padding: 10px;
|
margin: 16px 0;
|
background-color: #f7f7f7;
|
font-size: 14px;
|
|
.item_head {
|
font-size: 16px;
|
margin-bottom: 20px;
|
}
|
.item_label {
|
padding-bottom: 16px;
|
.label_1 {
|
color: #777;
|
margin-right: 16px;
|
}
|
.label_2 {
|
font-size: 16px;
|
color: #222;
|
}
|
}
|
}
|
}
|
.box_head {
|
background-color: #f5f5f5;
|
|
.head_content {
|
padding: 32px 0;
|
|
.head_left {
|
font-size: 28px;
|
font-weight: 700;
|
|
img {
|
width: 32px;
|
height: 32px;
|
margin-right: 8px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
