<template>
|
<div class="ipo 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" />
|
<span>IPO</span>
|
</div>
|
<el-button
|
type="primary"
|
plain
|
@click="$router.push({ path: '/account', query: { nav: 5 } })"
|
>
|
{{ $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="9">
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("hj313") }}</div>
|
<div class="label_2">
|
<el-tag
|
:type="i.stockType != $mc ? 'success' : ''"
|
size="small"
|
style="margin-right: 8px"
|
>
|
{{ i.stockType }}
|
</el-tag>
|
<span>{{ i.name }}</span>
|
</div>
|
</div>
|
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("hj81") }}</div>
|
<div class="label_2 sc_c" style="font-size: 18px">
|
{{ i.stockType | currencySymbol }} {{ i.price }}
|
</div>
|
</div>
|
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("发行时间") }}</div>
|
<div class="label_2">
|
{{ i.subscriptionTime | gettime }}
|
</div>
|
</div>
|
</el-col>
|
|
<el-col :span="9">
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("状态") }}</div>
|
<div class="label_2">
|
<el-tag type="warning" v-if="i.listDate > Date.now()">
|
{{ $t("待上市") }}
|
</el-tag>
|
<el-tag v-else>
|
{{ $t("已上市") }}
|
</el-tag>
|
</div>
|
</div>
|
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("可申购数量") }}</div>
|
<div class="label_2">
|
{{ i.orderNumber }}
|
</div>
|
</div>
|
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("上市时间") }}</div>
|
<div class="label_2">
|
{{ i.listDate | gettime }}
|
</div>
|
</div>
|
</el-col>
|
|
<el-col :span="6" class="flex-center" style="height: 100px">
|
<el-button
|
type="primary"
|
@click="buyOpen(i)"
|
icon="el-icon-plus"
|
v-if="i.isBuy == 0"
|
>
|
{{ $t("申购") }}
|
</el-button>
|
<el-button type="info" disabled v-else-if="i.isBuy == 1">
|
{{ $t("已申购") }}
|
</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 buy from "./components/buy";
|
import * as api from "@/axios/api";
|
import mixins from "@/mixins/myMixins"; // 混入
|
export default {
|
name: "ipo",
|
mixins: [mixins],
|
components: {
|
buy,
|
},
|
data() {
|
return {
|
// 列表参数,必须是opt和myMixins混入配合使用
|
opt: {},
|
buyVisible: false,
|
openObj: {}, // 打开弹窗的数据
|
};
|
},
|
created() {
|
this.apiInterface = api.getStockSubscribeList; // 赋值接口
|
this.init(); // 获取列表
|
},
|
methods: {
|
// 打开购买弹窗
|
buyOpen(i) {
|
this.openObj = i; // 赋值
|
this.buyVisible = true; // 打开弹窗
|
},
|
// 关闭弹窗
|
onClose() {
|
this.openObj = {};
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.ipo {
|
.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>
|
