<template>
|
<div class="stock_list">
|
<van-row class="markets_head">
|
<van-col span="12" class="flex-start head_item">{{ $t("Name") }}</van-col>
|
<van-col span="4" class="flex-start head_item">{{ $t("Price") }}</van-col>
|
<van-col span="8" class="flex-end head_item">{{ $t("Change") }}</van-col>
|
</van-row>
|
|
<van-row class="markets_item" v-for="item in stockList" :key="item.id">
|
<van-col span="12" class="item_n">
|
<div class="flex-start">
|
<span class="i_icon">{{ item.stock_type }}</span>
|
<span class="i_hint">{{ item.spell }}</span>
|
</div>
|
<div class="i_name">{{ item.name }}</div>
|
</van-col>
|
<van-col span="4" class="flex-start item_n">{{ item.nowPrice }}</van-col>
|
<van-col span="8" class="item_n">
|
<div class="flex-end" style="margin-bottom: .15em;">
|
{{ item.hcrate }}
|
</div>
|
<div class="flex-end">{{ item.hcrateP }}</div>
|
</van-col>
|
|
<div class="edit flex-end" v-show="editorShow">
|
<span>{{ $t("移除") }}</span>
|
</div>
|
</van-row>
|
|
<n-pagination
|
:pageNo.sync="pageNum"
|
:pageSize="pageSize"
|
:total="total"
|
></n-pagination>
|
</div>
|
</template>
|
|
<script>
|
import nPagination from "@/components/nPagination.vue";
|
import * as api from "@/axios/api";
|
export default {
|
name: "stock_list",
|
components: {
|
nPagination
|
},
|
data() {
|
return {
|
editorShow: false, // 编辑状态
|
pageNum: 1,
|
pageSize: 10,
|
total: 0,
|
stockList: []
|
};
|
},
|
props: {
|
propOption: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
}
|
},
|
watch: {
|
propOption: {
|
handler(val) {
|
this.getStockList();
|
}
|
},
|
pageNum: {
|
handler(val) {
|
console.log(val);
|
}
|
}
|
},
|
mounted() {
|
this.getStockList();
|
},
|
methods: {
|
onEdit() {
|
this.editorShow = !this.editorShow;
|
},
|
async getStockList() {
|
// 获取数据
|
let opt = {
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
stockPlate: "",
|
keyWords: "",
|
// stockType: '',
|
orderBy: ""
|
};
|
|
opt = { ...opt, ...this.propOption };
|
|
let data = await api.getStockByType(opt);
|
this.stockList = data.data.list;
|
this.total = data.data.total;
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@green2: #f0f0f0;
|
@dark_green: #07c160;
|
@red: #ee0a24;
|
|
.stock_list {
|
.markets_head {
|
background-color: @green2;
|
margin-top: 0.25em;
|
height: 1em;
|
padding: 0 0.25em;
|
|
.head_item {
|
font-size: 0.4em;
|
height: 100%;
|
font-weight: 600;
|
}
|
}
|
|
.markets_item {
|
// margin-top: .25em;
|
// height: 1em;
|
padding: 0.5em 0.25em 0.25em;
|
border-bottom: #f5f5f5 solid 0.01em;
|
position: relative;
|
|
.item_n {
|
font-size: 0.4em;
|
min-height: 2em;
|
font-weight: 500;
|
|
.i_icon {
|
border-radius: 0 26em 26em 0;
|
background: @dark_green;
|
color: #fff;
|
padding: 0.1em 0.5em 0.1em 0.4em;
|
margin-right: 0.3em;
|
font-size: 0.8em;
|
}
|
|
.i_name {
|
margin-top: 0.3em;
|
color: #777777;
|
font-size: 0.8em;
|
}
|
}
|
|
.edit {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
background: linear-gradient(
|
to right,
|
rgba(0, 0, 0, 0),
|
rgba(0, 0, 0, 0.8)
|
);
|
text-align: end;
|
color: @red;
|
padding-right: 0.25em;
|
|
span {
|
font-size: 0.55em;
|
}
|
}
|
}
|
}
|
</style>
|
