<template>
|
<div class="list-data">
|
<div class="header-box">
|
<van-row type="flex" align="center" gutter="20">
|
<van-col span="8">
|
<div>
|
{{ $t("hj313") }}
|
</div>
|
</van-col>
|
<van-col span="3">
|
<div style="text-align: right">
|
{{ $t("市场") }}
|
</div>
|
</van-col>
|
<van-col :span="active == 'DZ' ? '12' : '7'">
|
<div style="text-align: right">
|
{{ $t("hj314") }}
|
</div>
|
</van-col>
|
<van-col span="6" v-if="active == 3">
|
<div style="text-align: right">
|
{{ $t("hj315") }}
|
</div>
|
</van-col>
|
</van-row>
|
</div>
|
<van-pull-refresh
|
v-model="refreshing"
|
@refresh="onRefresh"
|
:loosing-text="$t('hj430')"
|
:pulling-text="$t('hj430')"
|
>
|
<van-list
|
style="margin-bottom: 50px"
|
v-model="loadings"
|
:finished="finished"
|
:finished-text="$t('hj43')"
|
:loading-text="$t('hj430')"
|
@load="onLoads"
|
:immediate-check="false"
|
>
|
<div
|
class="item"
|
@click="handleGoToKlineDetail1(item, index)"
|
v-for="(item, index) in listArr"
|
:key="item.indexCode"
|
>
|
<van-row type="flex" align="center" gutter="20">
|
<van-col span="8">
|
<div>
|
<div class="tp">
|
<div class="collection" @click="optionszx(item)">
|
<div
|
class="shu"
|
:class="item.isOption == '1' ? 'shublue' : ''"
|
></div>
|
</div>
|
<div
|
class="title_color"
|
style="
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
"
|
>
|
{{ item.name || item.stockName }}
|
</div>
|
</div>
|
<div class="bt">
|
<span>{{ item.spell || item.stockSpell }}</span>
|
</div>
|
</div>
|
</van-col>
|
|
<van-col span="3">
|
<div style="text-align: right">
|
{{ (item.gid || item.stockGid).toUpperCase() }}
|
</div>
|
</van-col>
|
|
<van-col :span="active == 'DZ' ? '12' : '7'">
|
<div style="text-align: right">
|
<div class="tp">
|
<span class="price_color">
|
{{ item.nowPrice | _toLocaleString(false) }}
|
</span>
|
</div>
|
<div class="bt" v-if="active != 'DZ'">
|
<span>{{ item.addTime }}</span>
|
</div>
|
</div>
|
</van-col>
|
<van-col span="6" v-if="active != 'DZ'">
|
<div style="text-align: right">
|
<div
|
class="tp right_bs"
|
:class="`${item.hcrateP.charAt(0) == '+' ? 'green' : 'red'}`"
|
>
|
<span class="price_color">{{ item.hcrateP }}</span>
|
</div>
|
</div>
|
</van-col>
|
</van-row>
|
<div class="box-a" v-if="active == 'DZ'">
|
<div class="box_a_left">
|
{{ $t("kpsj") }}：{{
|
$moment(item.startTime).format("DD-MM-YYYY hh:mm:ss A")
|
}}
|
</div>
|
<div class="box_a_right">
|
{{ $t("gbsj") }}：{{
|
$moment(item.endTime).format("DD-MM-YYYY hh:mm:ss A")
|
}}
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</van-pull-refresh>
|
|
<dazy ref="dazy" />
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import handleDt from "@/utils/deTh";
|
import dazy from "./dazy.vue";
|
import { WhrWebSocket } from "@/utils/WhrWebSocket";
|
|
export default {
|
components: { dazy },
|
props: {
|
active: {
|
type: String,
|
default: "",
|
},
|
zxactive: {
|
type: String,
|
default: "",
|
},
|
sousuo: {
|
type: String,
|
default: "",
|
},
|
tabsList: {
|
type: Array,
|
default: [],
|
},
|
zxtabsList: {
|
type: Array,
|
default: [],
|
},
|
},
|
watch: {
|
active(e) {
|
this.finished = false;
|
this.listArr = [];
|
this.pageNumVal = 1;
|
this.loadings = true;
|
this.getStock(e, this.zxactive, 1);
|
},
|
zxactive(e) {
|
this.finished = false;
|
this.listArr = [];
|
this.pageNumVal = 1;
|
this.loadings = true;
|
this.getStock(this.active, e, 1);
|
},
|
sousuo(e) {
|
this.finished = false;
|
this.listArr = [];
|
this.pageNumVal = 1;
|
this.loadings = true;
|
this.getStock(this.active, this.zxactive, 1);
|
},
|
},
|
data() {
|
return {
|
loadings: false,
|
finished: false,
|
listArr: [],
|
pageNumVal: 1,
|
getInterval: null,
|
num: 1,
|
refreshing: false,
|
};
|
},
|
beforeDestroy() {
|
if (this.Trade) {
|
this.Trade.close();
|
console.log('WebSocket disconnected');
|
}
|
},
|
mounted() {
|
this.listArr = [];
|
this.pageNumVal = 1;
|
this.getStock(this.active, this.zxactive, 1);
|
this.initWebSocket();
|
// this.getInterval = setInterval(() => {
|
// this.getStock(this.active, this.zxactive, 1);
|
// }, 5000);
|
},
|
methods: {
|
filterSH(val) {
|
if (val === "sh") {
|
return 1;
|
} else if (val === "bj" || val === "sz") {
|
return 0;
|
}
|
},
|
|
handleGoToKlineDetail1(item) {
|
// 如果是大宗交易。不需要进入详情
|
if (this.active === "DZ") {
|
this.$refs.dazy.currentItem = item;
|
this.$refs.dazy.show = true;
|
return;
|
}
|
|
// 点击进入详情
|
const obj = {
|
pid: item.code || "",
|
type: item.stock_type || "",
|
};
|
window.localStorage.setItem("kLine", JSON.stringify(obj));
|
// return;
|
var codes = item.code;
|
var names = item.name;
|
var ifZhishu = "0";
|
var ifUs =
|
item.stock_type === "us" ? "1" : item.stock_type === "hk" ? "2" : "";
|
this.$router.push({
|
path: "/kline",
|
query: {
|
name: names,
|
code: codes,
|
if_us: ifUs,
|
if_zhishu: ifZhishu,
|
sok: item.type ? item.type : this.filterSH(item.stock_type),
|
type: item.stock_type,
|
},
|
});
|
},
|
|
// 获取列表
|
getStock: handleDt.debounce(async function (a, b, c) {
|
a = this.active;
|
let stockType = "";
|
if (a !== "") {
|
let array = this.tabsList.filter((item) => item.key === a);
|
stockType = array[0].name;
|
} else {
|
let array = this.zxtabsList.filter((item) => item.key === b);
|
console.log(this.zxtabsList, b);
|
stockType = array[0].name;
|
}
|
let pageNumVal = c || this.pageNumVal;
|
let opt = {
|
pageNum: pageNumVal,
|
pageSize: 20 * this.num,
|
stockPlate: "",
|
keyWords: this.sousuo,
|
stockType: stockType,
|
orderBy: "",
|
};
|
|
// console.log();
|
// api.positionzx;
|
let data;
|
if (a !== "") {
|
if (a == "IN") {
|
//印股
|
data = await api.getStockByType(opt);
|
} else {
|
//大宗
|
opt.stockType = "";
|
data = await api.stockgetDzList(opt);
|
}
|
} else {
|
// 自选
|
data = await api.positionzx(opt);
|
}
|
|
if (data.status === 0) {
|
if (pageNumVal !== 1) {
|
this.listArr = [...this.listArr, ...data.data.list];
|
} else {
|
if (this.active) {
|
if (this.active === data.data.stockType) {
|
this.listArr = data.data.list;
|
this.loadings = false;
|
// this.finished = true;
|
if (this.listArr.length % 20) {
|
this.finished = true;
|
}
|
} else {
|
this.listArr = data.data.list;
|
this.loadings = false;
|
// this.finished = true;
|
if (this.listArr.length % 20) {
|
this.finished = true;
|
}
|
}
|
} else {
|
if (this.zxactive === data.data.stockType) {
|
this.listArr = data.data.list;
|
this.loadings = false;
|
this.finished = true;
|
if (this.listArr.length % 20) {
|
this.finished = true;
|
}
|
}
|
}
|
}
|
} else {
|
this.finished = true;
|
}
|
}, 500),
|
|
onRefresh() {
|
// 清空列表数据
|
this.finished = false;
|
|
// 重新加载数据
|
// 将 loading 设置为 true，表示处于加载状态
|
this.loading = true;
|
if (this.refreshing) {
|
// this.listArr = [];
|
this.refreshing = false;
|
}
|
this.getStock();
|
},
|
|
initWebSocket() {
|
console.log("initWebSocket");
|
this.Trade = new WhrWebSocket({
|
path: `wss://ws.greenbackcaps.top/websocket-server `,
|
onmessage: this.getTradeMessage,
|
});
|
|
this.Trade.init();
|
},
|
getTradeMessage({ data }) {
|
let result = JSON.parse(data);
|
let pid = result.pid;
|
let userToUpdate = this.listArr.find((item) => item.code == pid);
|
if (userToUpdate) {
|
// 更新对象数据
|
userToUpdate.nowPrice = result.last;
|
userToUpdate.hcrateP = result.pcp;
|
}
|
},
|
|
onLoads() {
|
console.log("onLoads");
|
// this.pageNumVal++;
|
this.loadings = true;
|
this.num += 1;
|
this.getStock();
|
},
|
optionszx() {},
|
},
|
destroyed() {
|
clearInterval(this.getInterval);
|
this.getInterval = null;
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.box-a {
|
display: flex;
|
justify-content: space-between;
|
font-size: 14px;
|
margin-top: 10px;
|
}
|
.list-data {
|
width: 100%;
|
height: 85vh;
|
background-color: #fff;
|
|
.header-box {
|
padding: 20px 15px;
|
|
color: rgb(140, 159, 173);
|
}
|
}
|
|
.item {
|
// width: 100%;
|
margin: 12px 15px;
|
padding-bottom: 15px;
|
// display: flex;
|
// justify-content: space-between;
|
border-bottom: 1px solid #f0f2f3;
|
|
.right_bs {
|
text-align: center;
|
border-radius: 0.05333rem;
|
font-family: PingFang SC;
|
font-style: normal;
|
font-weight: 500;
|
font-size: 0.32rem;
|
line-height: 0.64rem;
|
color: #fff;
|
min-width: 2.13333rem;
|
padding: 0 0.16rem;
|
height: 0.64rem;
|
background-color: rgb(3, 173, 143);
|
font-weight: 900;
|
}
|
|
.green {
|
background-color: rgb(3, 173, 143);
|
}
|
|
.red {
|
background-color: rgb(208, 75, 100);
|
}
|
}
|
|
.center_price {
|
font-style: normal;
|
font-weight: 500;
|
font-size: 0.4rem;
|
line-height: 0.56rem;
|
text-align: right;
|
color: #14181f;
|
text-align: right;
|
flex: 1;
|
margin-right: 20px;
|
}
|
|
.title_color {
|
font-style: normal;
|
font-weight: 500;
|
font-size: 0.4rem;
|
line-height: 0.56rem;
|
width: 4.2rem;
|
text-align: left;
|
color: #14181f;
|
}
|
</style>
|
