<template>
|
<div class="blockTrading page-content">
|
<div class="box_head">
|
<div class="page-w2 head_content flex-between">
|
<div class="head_left flex-center">
|
<img src="@/assets/images/block-trading-icon_b.png" />
|
<span>{{ $t("hj621") }}</span>
|
</div>
|
<el-button
|
type="primary"
|
plain
|
@click="$router.push({ path: '/account', query: { nav: 4 } })"
|
>
|
{{ $t("订单") }}
|
<i class="el-icon-caret-right"></i>
|
</el-button>
|
</div>
|
</div>
|
|
<div class="page-w2" style="padding-top: 20px">
|
<el-input
|
:placeholder="$t('请输入')"
|
v-model="keyWords"
|
style="width: 400px"
|
clearable
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="onSearch"
|
></el-button>
|
</el-input>
|
</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="20">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<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.stockName }}</span>
|
</div>
|
</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("市價") }}</div>
|
<div class="label_2 sc_c" style="font-size: 18px">
|
{{ i.stockType | currencySymbol }} {{ i.nowPrice }}
|
</div>
|
</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div class="flex-start item_label">
|
<div class="label_1">{{ $t("最小购买数量") }}</div>
|
<div class="label_2">
|
{{ i.stockNum }}
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</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: "blockTrading",
|
mixins: [mixins],
|
components: {
|
buy,
|
},
|
data() {
|
return {
|
// 列表参数,必须是opt和myMixins混入配合使用
|
opt: {},
|
buyVisible: false,
|
openObj: {}, // 打开弹窗的数据
|
keyWords: "", // 搜索值
|
};
|
},
|
created() {
|
this.apiInterface = api.getDzListTwo; // 赋值接口
|
this.init(); // 获取列表
|
},
|
methods: {
|
// 打开购买弹窗
|
buyOpen(item) {
|
this.openObj = item; // 赋值
|
this.buyVisible = true; // 打开弹窗
|
},
|
// 关闭弹窗
|
onClose() {
|
this.openObj = {};
|
},
|
// 搜索
|
onSearch() {
|
this.opt.keyWords = this.keyWords; // 搜索框值
|
this.init();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.blockTrading {
|
.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>
|
