<template>
|
<div class="list-quatation">
|
<ex-tabs @tabs="onTabs"></ex-tabs>
|
<van-list>
|
<!-- <van-cell> -->
|
<div
|
class="flex items-center w-full textNew1 font-26"
|
style="margin: 6px 0 15px"
|
>
|
<div class="left flex items-center newcolor1" style="margin-left: 36px">
|
<span>{{ $t("交易对") }}</span>
|
<div class="filter-box ml-10" v-if="active == 0">
|
<div
|
class="w-14 h-12"
|
:class="[sortVal == 1 ? 'icon_top1_active' : 'icon_top1']"
|
@click="listSort(1)"
|
></div>
|
<div
|
class="w-14 h-12"
|
:class="[sortVal == 2 ? 'icon_top2_active' : 'icon_top2']"
|
@click="listSort(2)"
|
></div>
|
</div>
|
</div>
|
<div class="mid text-right flex justify-end items-center">
|
{{ $t("最新价") }}
|
<div class="filter-box ml-10" v-if="active == 0">
|
<div
|
class="w-14 h-12"
|
:class="[sortVal == 3 ? 'icon_top1_active' : 'icon_top1']"
|
@click="listSort(3)"
|
></div>
|
<div
|
class="w-14 h-12"
|
:class="[sortVal == 4 ? 'icon_top2_active' : 'icon_top2']"
|
@click="listSort(4)"
|
></div>
|
</div>
|
</div>
|
<div
|
class="rights text-right flex justify-end items-center"
|
style="margin-right: 18px"
|
>
|
{{ active == 3 ? $t("成交额") : $t("24h涨跌幅") }}
|
<div class="filter-box ml-10" v-if="active == 0">
|
<div
|
class="w-14 h-12"
|
:class="[sortVal == 5 ? 'icon_top1_active' : 'icon_top1']"
|
@click="listSort(5)"
|
></div>
|
<div
|
class="w-14 h-12"
|
:class="[sortVal == 6 ? 'icon_top2_active' : 'icon_top2']"
|
@click="listSort(6)"
|
></div>
|
</div>
|
<!-- <img src="./icon-sort.png" alt="icon" class="w-13 h-22 ml-5"/>-->
|
</div>
|
</div>
|
<!-- </van-cell> -->
|
<transition-group :name="type" tag="div">
|
<div v-if="active == 0" :key="active">
|
<van-cell v-for="item in listData" :key="item.id">
|
<ul
|
class="flex justify-between w-full items-center"
|
@click="onItemClick(item)"
|
>
|
<li class="flex items-center left">
|
<!-- <div class="anniu"></div> -->
|
<img :src="
|
item.symbol
|
? `${HOST_URL}/wap/symbol/${item.symbol}.png`
|
: require('@/assets/loading-default.png')
|
" class="w-52 h-52 rounded-full mr-16 ml-15" />
|
<p class="flex flex-col" style="margin-left: 5px">
|
<span class="flex items-end font-32 flex items-center" s>
|
|
<span class="textColor font-600 font-30">
|
|
{{ item.name }}
|
<!-- {{ (item.symbol && item.symbol.toUpperCase()) || "--" }} -->
|
</span>
|
<!-- <span class="font-24" style="position: relative; top: 1px">
|
/{{ (item.name && item.name.split("/")[1]) || "--" }}
|
</span> -->
|
</span>
|
|
<span class="font-24 textNew1">{{
|
$t("成交量") + " " + (item.amount * 1).toFixed(2)
|
}}</span>
|
</p>
|
</li>
|
<li class="flex flex-col items-end mid">
|
<p
|
class="font-32 font-600"
|
:style="`color: ${
|
item.change_ratio > 0 ? '#2EBD85' : '#F6465D'
|
}`"
|
>
|
{{ item.close || "--" }}
|
</p>
|
<p class="font-24 textNew1">
|
{{
|
(item.close &&
|
(item.close * currency.rate).toFixed(
|
item.close.toString().split(".")[1]
|
? item.close.toString().split(".")[1].length
|
: 2
|
)) ||
|
"--"
|
}}{{ currency.currency_symbol }}
|
</p>
|
</li>
|
<li class="rights flex items-center justify-end">
|
<p
|
class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn"
|
v-if="item.change_ratio > 0"
|
>
|
+{{ item.change_ratio }}%
|
</p>
|
<p
|
class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn"
|
v-else
|
>
|
{{ item.change_ratio }}%
|
</p>
|
</li>
|
</ul>
|
</van-cell>
|
</div>
|
<div v-else :key="active">
|
<van-cell v-for="item in showList" :key="item.id">
|
<ul
|
class="flex justify-between w-full items-center"
|
@click="onItemClick(item)"
|
>
|
<li class="flex items-center left">
|
<!-- <div class="anniu"></div> -->
|
<img :src="
|
item.symbol
|
? `${HOST_URL}/wap/symbol/${item.symbol}.png`
|
: require('@/assets/loading-default.png')
|
" class="w-52 h-52 rounded-full mr-16 ml-15" />
|
<p class="flex flex-col" style="margin-left: 5px">
|
|
<span class="flex items-end font-32 flex items-center">
|
|
<span class="textColor font-600 font-30">
|
{{ item.name }}
|
<!-- {{ (item.symbol && item.symbol.toUpperCase()) || "--" }} -->
|
</span>
|
<!-- <span class="font-24" style="position: relative; top: 1px">
|
/{{ (item.name && item.name.split("/")[1]) || "--" }}
|
</span> -->
|
</span>
|
<span class="font-24 textNew1">{{
|
$t("成交量") + " " + (item.amount * 1).toFixed(2)
|
}}</span>
|
</p>
|
</li>
|
<li class="flex flex-col items-end mid">
|
<p
|
class="font-32 font-600"
|
:style="`color: ${
|
item.change_ratio > 0 ? '#2EBD85' : '#F6465D'
|
}`"
|
>
|
{{ item.close }}
|
</p>
|
<p class="font-24 textNew1">
|
{{
|
item.close &&
|
(item.close * currency.rate).toFixed(
|
item.close.toString().split(".")[1]
|
? item.close.toString().split(".")[1].length
|
: 2
|
)
|
}}
|
{{ currency.currency_symbol }}
|
</p>
|
</li>
|
<li class="rights flex items-center justify-end text-right">
|
<div
|
v-if="active == 3"
|
class="textColor w-182 font-700 font-24"
|
>
|
{{ (item.volume * 1).toFixed(2) }}
|
</div>
|
<template v-else>
|
<p
|
class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn"
|
v-if="item.change_ratio > 0"
|
>
|
+{{ item.change_ratio }}%
|
</p>
|
<p
|
class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn"
|
v-else
|
>
|
{{ item.change_ratio }}%
|
</p>
|
</template>
|
</li>
|
</ul>
|
</van-cell>
|
</div>
|
</transition-group>
|
</van-list>
|
<!-- <div class="flex flex-col justify-center items-center pb-58 mt-20" @click="$router.push('/quotes/?active=3')" v-if="showMore">
|
<p class="textNew1 font-28 mb-8">{{ $t('查看') }}</p>
|
<img src="./icon-arrow_more.png" alt="more" class="w-24 h-10"/>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import { List, Cell } from "vant";
|
import { mapGetters } from "vuex";
|
import { fixDate, setStorage } from "@/utils/utis";
|
import ExTabs from "@/components/ex-tabs/index.vue";
|
import { HOST_URL } from "@/config";
|
export default {
|
name: "ListQuotation",
|
data() {
|
return {
|
fixDate,
|
HOST_URL,
|
active: 0,
|
type: "left", //left 从左往右 right 从有王座
|
sortVal: 0,
|
};
|
},
|
props: {
|
showMore: {
|
type: Boolean,
|
default: true,
|
},
|
listData: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
tabActive: {
|
type: Number,
|
default: 0,
|
},
|
},
|
computed: {
|
...mapGetters({ currency: "home/currency" }),
|
},
|
components: {
|
[List.name]: List,
|
[Cell.name]: Cell,
|
ExTabs,
|
},
|
methods: {
|
//排序
|
listSort(val) {
|
this.sortVal = val;
|
this.$emit("listSort", val);
|
},
|
onItemClick(item) {
|
if (this.tabActive == 2) {
|
setStorage("tradeSymbol", item.symbol);
|
//现货
|
this.$router.push({
|
path: `/trade/${item.symbol}`,
|
});
|
} else {
|
// setStorage("symbol", item.symbol);
|
// this.$router.push({
|
// path: `/perpetualContract/${item.symbol}`,
|
// });
|
setStorage("tradeSymbol", item.symbol);
|
this.$router.push({
|
path: `/trade/${item.symbol}`,
|
});
|
}
|
},
|
onTabs(val) {
|
if (this.active < val) {
|
this.type = "right";
|
} else {
|
this.type = "left";
|
}
|
this.active = val;
|
if (val == 0) {
|
this.showList = [...this.listData];
|
} else if (val == 1) {
|
this.showList = [...this.listData].sort(
|
this.compare("change_ratio", "up")
|
);
|
} else if (val == 2) {
|
this.showList = [...this.listData].sort(
|
this.compare("change_ratio", "down")
|
);
|
} else if (val == 3) {
|
this.showList = [...this.listData].sort(this.compare("volume", "up"));
|
}
|
},
|
compare(p, type) {
|
//这是比较函数
|
return function (m, n) {
|
var a = m[p];
|
var b = n[p];
|
if (a == b) {
|
return;
|
}
|
if (type == "up") {
|
return b - a; //升序
|
} else if (type == "down") {
|
return a - b; //降序
|
} else {
|
return a - b;
|
}
|
};
|
},
|
},
|
watch: {
|
listData() {
|
if (this.active == 0) {
|
this.showList = [...this.listData];
|
} else if (this.active == 1) {
|
this.showList = [...this.listData].sort(
|
this.compare("change_ratio", "up")
|
);
|
} else if (this.active == 2) {
|
this.showList = [...this.listData].sort(
|
this.compare("change_ratio", "down")
|
);
|
} else if (this.active == 3) {
|
this.showList = [...this.listData].sort(this.compare("volume", "up"));
|
}
|
this.$forceUpdate();
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.left-enter-active,
|
.left-leave-active,
|
.right-enter-active,
|
.right-leave-active {
|
will-change: transform;
|
transition: all 250ms;
|
}
|
|
.left-leave-active,
|
.right-leave-active {
|
display: none;
|
}
|
|
.left-enter {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
.left-leave {
|
opacity: 0;
|
transform: translate3d(0%, 0, 0);
|
}
|
|
.right-enter {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0);
|
}
|
|
.right-leave {
|
opacity: 0;
|
transform: translate3d(0%, 0, 0);
|
}
|
|
.btn {
|
// border-radius: 9px;
|
line-height: 71px;
|
}
|
|
.left {
|
width: 382px;
|
}
|
|
.mid {
|
width: 185px;
|
}
|
|
.rights {
|
width: 182px;
|
margin-left: 38px;
|
}
|
|
.filter-box {
|
.icon_top1 {
|
background: url("@/assets/image/icon_top1.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
|
.icon_top2 {
|
background: url("@/assets/image/icon_top2.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-top: 5px;
|
}
|
|
.icon_top1_active {
|
background: url("@/assets/image/icon_top3.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
|
.icon_top2_active {
|
background: url("@/assets/image/icon_top4.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-top: 5px;
|
}
|
}
|
</style>
|
