<template>
|
<v-page>
|
<v-header :title="$t('exchange.f5')" :left-arrow="false"></v-header>
|
<view class="symbol-list">
|
<view class="w-max" style="height: var(--status-bar-height)"></view>
|
<!-- <view class="title fn-18 p-md color-light">{{ title||$t("exchange.f5") }}</view> -->
|
<!-- <van-search
|
background="transparent"
|
:value="filterText"
|
@change="filterText = $event.detail"
|
:placeholder="$t('exchange.f6')"
|
/> -->
|
<view :active="active">
|
<view
|
:title="heyue==1&&parentItem.coin_name=='USDT'?$t('first.b8'):parentItem.coin_name"
|
v-for="parentItem in marketListss"
|
:key="parentItem.coin_name"
|
>
|
|
<view class="p-x-xs m-t-md">
|
<table class="w-max">
|
<thead v-if="heyue==0">
|
<tr class="fn-sm">
|
<th class="p-l-md p-y-xs fn-left">{{ $t("exchange.f7") }}</th>
|
<th class="fn-left">{{ $t("exchange.f8") }}</th>
|
<th class="p-r-md p-y-xs fn-right">{{ $t("exchange.f9") }}</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr
|
class="p-y-md"
|
:class="symbols==item.coin_name&&heyue==1?'bg-panel':''"
|
v-for="item in parentItem.marketInfoList"
|
:key="item.symbol"
|
|
@click="urls(item.pair_name)"
|
>
|
<td class="p-l-md p-y-md w-40 fn-left" style="font-weight: bold;">
|
<template v-if="parentItem.isCollect">
|
<span class="color-light">{{ item.pair_name }}</span>
|
</template>
|
<template v-else>
|
<span class="color-light">{{ item.coin_name||item.symbol }}/{{ parentItem.coin_name }}</span>
|
</template>
|
</td>
|
<td class="w-30 fn-center fn-left">
|
<template v-if="heyue==0" :class="item.increase < 0 ? 'color-sell' : 'color-buy'">
|
{{ item.price }}
|
</template>
|
<template v-else>
|
{{$t('first.b8')}}
|
</template>
|
</td>
|
<td
|
v-if="heyue==0"
|
:class="item.increase < 0 ? 'color-sell' : 'color-buy'"
|
class="p-r-md p-y-xs fn-right w-30 fn-right"
|
>
|
<view v-if="item.increase < 0" class="zhang ">{{ item.increaseStr }}</view>
|
<view v-else class="jiang ">{{ item.increaseStr }}</view>
|
</td>
|
<td
|
v-if="heyue==1"
|
:class="item.increase < 0 ? 'color-sell' : 'color-buy'"
|
class="p-r-md p-y-xs fn-right"
|
>
|
{{ item.price }}
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</view>
|
</view>
|
</view>
|
</view>
|
</v-page>
|
</template>
|
|
<script>
|
import Market from "@/api/market";
|
import Home from "@/api/home";
|
import { mapState } from "vuex";
|
export default {
|
props: {
|
marketList: {
|
default() {
|
return [];
|
},
|
type: Array,
|
required: false,
|
},
|
marketLists: {
|
default() {
|
return [];
|
},
|
type: Array,
|
required: false,
|
},
|
collect: {
|
default() {
|
return [];
|
},
|
type: Array,
|
required: false,
|
},
|
title:{
|
default:''
|
},
|
heyue:{
|
default: 0,
|
type: Number,
|
required: false,
|
},
|
symbols:{
|
default: '',
|
type: String,
|
required: false,
|
}
|
},
|
watch: {
|
isShow(n) {
|
if (n) {
|
this.getCollect();
|
this.getMarketList();
|
setTimeout(() => {
|
this.ws.send({
|
cmd: "sub",
|
msg: this.msg,
|
});
|
}, 3000);
|
} else {
|
this.ws.send({
|
cmd: "unsub",
|
msg: this.msg,
|
});
|
}
|
},
|
},
|
computed: {
|
...mapState({
|
ws: "ws",
|
}),
|
showMarketList() {
|
let collect = this.collect.map((item) => item.pair_name);
|
let collects = [];
|
this.marketLists.forEach((parentItem) => {
|
// if(this.contract==1&&parentItem.coin_name=='USDT'){
|
// parentItem.coin_name=this.$t('first.b8')
|
// }
|
// console.log(parentItem.coin_name,this.contract)
|
parentItem.marketInfoList.forEach((item) => {
|
if (collect.includes(item.pair_name)) {
|
collects.push(item);
|
}
|
});
|
});
|
let arr = [
|
{
|
coin_name: this.$t("exchange.g0"),
|
isCollect: true,
|
marketInfoList: collects,
|
},
|
...this.marketLists,
|
];
|
return arr;
|
},
|
},
|
data() {
|
return {
|
active: 0,
|
filterText: "",
|
msg: "exchangeMarketList",
|
marketListss:this.marketLists,
|
};
|
},
|
methods: {
|
isShow(str) {
|
return (
|
str.toLocaleLowerCase().indexOf(this.filterText.toLocaleLowerCase()) !=
|
-1
|
);
|
},
|
// 获取市场行情
|
getMarketList() {
|
Market.getMarketList().then((res) => {
|
this.marketListss = res.data;
|
console.log(444)
|
console.log(this.marketLists)
|
this.$nextTick(() => {
|
this.linkSocket();
|
});
|
// if (!this.query.symbol) {
|
let parentItem = this.marketListss[0].marketInfoList[0];
|
// this.checkSymbol(parentItem);
|
// }
|
});
|
},
|
urls(name){
|
console.log(name)
|
uni.navigateTo({
|
url:'/pages/exchange/index?code='+name
|
})
|
},
|
// 获取自选列表
|
getCollect() {
|
if (!this.isLogin) return;
|
Home.getCollect()
|
.then((res) => {
|
this.collect = res.data || [];
|
})
|
.catch(() => {});
|
},
|
// 链接socket
|
linkSocket() {
|
let msg = this.msg;
|
this.ws.send({
|
cmd: "sub",
|
msg,
|
});
|
this.ws.on("message", (res) => {
|
let { data, sub } = res;
|
// console.log(data)
|
if (sub == msg) {
|
this.marketListss = data;
|
// var symbol=this.query.symbol.split('/')
|
// console.log(symbol)
|
// var market=this.marketListss.find((item) => item.coin_name == symbol[1])
|
// this.increase=market.marketInfoList.find((item) => item.coin_name == symbol[0])||{}
|
|
}
|
});
|
},
|
//
|
checkSymbol(obj) {
|
this.symbols=obj.coin_name
|
this.symbolListShow = false;
|
// if (obj.pair_name == this.query.symbol) return;
|
this.query = { symbol: obj.pair_name };
|
// this._router.replace({ query: { symbol: obj.pair_name } });
|
},
|
},
|
created() {
|
this.getCollect();
|
this.getMarketList();
|
this.ws.send({
|
cmd: "sub",
|
msg: this.msg,
|
});
|
// console.log(777777)
|
|
|
},
|
destroyed() {
|
this.ws.send({
|
cmd: "unsub",
|
msg: 'exchangeMarketList',
|
})
|
},
|
onHide:function(){
|
console.log(111)
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.table-list {
|
tr:nth-of-type(2n-1) {
|
td {
|
background: $panel-3;
|
}
|
}
|
}
|
/deep/ .van-tabs__line::before{
|
width: 35px;
|
height: 2px;
|
border-radius:5px;
|
background-color: $theme-1;
|
}
|
table{
|
border-collapse:collapse
|
|
}
|
.zhang{
|
width: 80%;
|
background: #F4465D;
|
text-align: center;
|
height: 2rem;
|
line-height: 2rem;
|
border-radius: 8px;
|
color: white;
|
margin: auto;
|
}
|
.jiang{
|
width: 80%;
|
background: #F4465D;
|
text-align: center;
|
height: 2rem;
|
line-height: 2rem;
|
border-radius: 8px;
|
color: white;
|
margin: auto;
|
}
|
.w-40{
|
width: 40%;
|
}
|
.w-30{
|
width: 30%;
|
}
|
.w-30{
|
width: 30%;
|
}
|
</style>
|
