<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"
|
@click="toDetails(item)"
|
>
|
<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;"
|
:class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
|
>
|
{{ item.hcrate }}
|
</div>
|
<div
|
class="flex-end"
|
:class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
|
>
|
{{ item.hcrateP }}
|
</div>
|
</van-col>
|
|
<div
|
class="edit flex-end"
|
v-show="editorShow"
|
@click.stop="deleteStock(item)"
|
>
|
<span>{{ $t("移除") }}</span>
|
</div>
|
</van-row>
|
|
<!-- 无数据时显示 -->
|
<div
|
class="no_data flex-center"
|
v-show="!stockList || stockList.length == 0"
|
>
|
<img src="@/assets/img/zhaobudao2.png" alt="" />
|
</div>
|
|
<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";
|
import { Toast } from "vant";
|
export default {
|
name: "stock_list",
|
components: {
|
nPagination
|
},
|
data() {
|
return {
|
pageNum: 1,
|
pageSize: 10,
|
total: 1,
|
stockList: []
|
};
|
},
|
props: {
|
propOption: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
listApi: {
|
default: () => {
|
return api.getStockByType;
|
}
|
},
|
// 编辑状态
|
editorShow: {
|
type: Boolean,
|
default: false
|
}
|
},
|
watch: {
|
propOption: {
|
handler(val) {
|
this.pageNum = 1;
|
this.getStockList();
|
}
|
},
|
pageNum: {
|
handler(val) {
|
// this.stockList = [];
|
this.getStockList();
|
}
|
}
|
},
|
mounted() {
|
this.getStockList();
|
},
|
methods: {
|
// 获取数据
|
async getStockList() {
|
let opt = {
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
stockPlate: "",
|
keyWords: "",
|
// stockType: '',
|
orderBy: ""
|
};
|
|
opt = { ...opt, ...this.propOption };
|
|
let data = await this.listApi(opt);
|
this.stockList = data.data.list;
|
this.total = data.data.total || 1;
|
},
|
// 点击进入详情
|
toDetails(item) {
|
const obj = {
|
pid: item.code || "",
|
type: item.stock_type || ""
|
};
|
window.localStorage.setItem("kLine", JSON.stringify(obj));
|
|
this.$router.push({
|
path: "/kline",
|
query: {
|
code: item.code,
|
type: item.stock_type
|
}
|
});
|
},
|
// 删除自选股
|
async deleteStock(item) {
|
let opt = {
|
code: item.code
|
};
|
let data = await api.delOption(opt);
|
if (data.status === 0) {
|
this.$emit("update:editorShow", false);
|
Toast.success(data.msg);
|
this.getStockList();
|
} else {
|
Toast.fail(data.msg);
|
}
|
}
|
}
|
};
|
</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;
|
}
|
}
|
|
.up {
|
color: @dark_green;
|
}
|
|
.down {
|
color: @red;
|
}
|
|
.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>
|
