<template>
|
<!-- 永续合约，交割合约公共头部 -->
|
<div>
|
<div class="contract-header">
|
<div class="pl-30 pr-30">
|
<div class="flex pt-45 before">
|
<div class="flex items-center">
|
<!-- <img :src="require(`@/assets/theme/${theme}/image/icon_back.png`)" class="w-35 h-35 back" alt=""
|
@click="$router.push(`/trendDetails/${symbol}`)"> -->
|
<img
|
:src="require(`@/assets/theme/${theme}/image/convert.png`)"
|
alt="convert-img"
|
class="w-35 h-35"
|
@click="onSidebar"
|
/>
|
<div class="flex pl-21 textColor" @click="onSidebar">
|
<div class="font-35">{{ symbolname || "--" }}</div>
|
<div class="ml-15">{{ title }}</div>
|
</div>
|
<div
|
class="pl-30 w-160"
|
:class="{ 'text-green': range > 0, 'text-red': range <= 0 }"
|
>
|
{{ range > 0 ? "+" : "" }}{{ range || "--" }}%
|
</div>
|
<img
|
src="../../assets/image/public/k-line.png"
|
class="w-44 h-44 right"
|
alt=""
|
@click="$router.push(`/trendDetails/${symbol}`)"
|
/>
|
</div>
|
<div class="flex items-center">
|
<!-- <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
|
@click="jump" /> -->
|
</div>
|
</div>
|
<div class="flex justify-between pt-34">
|
<!-- <button
|
class="tabBtn w-368 h-74 lh-74 border-none rounded"
|
:class="selectIndex == 1 ? 'select-active' : 'no-select'"
|
@click="changeTab(1)"
|
>
|
{{ $t("永续合约") }}
|
</button> -->
|
<!-- 资金费率 -->
|
<!-- <div class="flex flex-col items-center justify-center ml-20">
|
<div class="text-grey font-24">
|
{{ $t("资金费率") }}/{{ $t("结束时间") }}
|
</div>
|
<div class="text-grey font-28 mt-5">0.0003%/{{ countdown }}</div>
|
</div> -->
|
<!-- <button class="tabBtn w-368 h-74 lh-74 border-none rounded"
|
:class="selectIndex == 2 ? 'select-active' : 'no-select'" @click="changeTab(2)">
|
{{ $t('交割合约') }}</button> -->
|
</div>
|
</div>
|
</div>
|
<!-- 左侧边弹出菜单 -->
|
<van-popup
|
class="popup"
|
round
|
v-model="show"
|
close-icon-position="top-left"
|
position="left"
|
@closed="onClose"
|
>
|
<div class="pl-42 border-b-color pt-48 pb-48">
|
<div class="textColor">
|
<span class="font-bold font-45 mr-12"
|
>{{ title }} {{ $t("合约") }}</span
|
>
|
<span class="font-30">/ USDT</span>
|
</div>
|
</div>
|
<div class="pl-42 pr-40">
|
<div class="flex justify-between mb-42 mt-53">
|
<div class="flex items-center text-grey">
|
<div class="mr-12">{{ $t("名称") }}</div>
|
</div>
|
<div class="flex text-grey">
|
<div class="flex items-center">
|
<div class="">{{ $t("最新价格") }}</div>
|
</div>
|
<div class="flex items-center">
|
<div class="mr-12">/24H{{ $t("涨跌") }}</div>
|
</div>
|
</div>
|
</div>
|
<div
|
class="flex justify-between mb-50"
|
v-for="item in list"
|
:key="item.name"
|
@click="onRoute(item)"
|
>
|
<div>
|
<div class="textColor">{{ item.name }}</div>
|
<div class="text-grey mt-10">
|
{{ selectIndex == 1 ? $t("永续") : $t("交割") }}
|
</div>
|
</div>
|
<div class="text-right">
|
<div class="textColor">{{ item.close }}</div>
|
<div
|
class="mt-10"
|
:class="item.change_ratio > 0 ? 'text-green' : 'text-red'"
|
>
|
{{ item.change_ratio || (item.change_ratio === 0 ? 0 : "--") }}%
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import { Popup } from "vant";
|
import { mapGetters } from "vuex";
|
import { _getHomeList } from "@/API/home.api";
|
import { getStorage, setStorage } from "@/utils/utis";
|
export default {
|
name: "contractHeader",
|
props: {
|
backFunc: {
|
type: Function,
|
default: null,
|
},
|
balance: {
|
// 余额
|
type: [String, Number],
|
default: 0.0,
|
},
|
// title:{
|
// type:String,
|
// default:''
|
// },
|
symbol: {
|
type: String,
|
default: "",
|
},
|
range: {
|
type: String,
|
defalult: "",
|
},
|
selectIndex: {
|
type: [String, Number],
|
defalult: "",
|
},
|
},
|
components: {
|
[Popup.name]: Popup,
|
},
|
computed: {
|
...mapGetters({
|
coinList: "home/coinList",
|
theme: "home/theme",
|
}),
|
title() {
|
return [this.$t("永续"), this.$t("交割")][this.selectIndex - 1];
|
},
|
},
|
data() {
|
return {
|
// selectIndex2:this.selectIndex,
|
show: false,
|
timeout: null,
|
// title: '',
|
list: [
|
// { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
|
// { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
|
// { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
|
],
|
interval: null,
|
countdown: "", // 用于存储倒计时
|
symbolname: "",
|
};
|
},
|
created() {
|
// this.coins = this.coinList.map(item => item.symbol)
|
// console.log('this.coins', this.coins)
|
this.symbolname = getStorage("symbolname");
|
this.updateCountdown(); // 初始化时立即调用一次
|
this.interval = setInterval(this.updateCountdown, 1000); // 每秒更新一次倒计时
|
},
|
destroyed() {
|
clearInterval(this.interval); // 组件销毁时清除定时器
|
},
|
methods: {
|
updateCountdown() {
|
const currentTime = new Date(); // 获取当前时间
|
const targetTime = new Date(currentTime); // 创建目标时间对象
|
targetTime.setHours(24, 0, 0, 0); // 设置目标时间为当前时间后的24小时
|
|
const remainingTime = targetTime - currentTime; // 计算倒计时剩余时间
|
|
if (remainingTime < 0) {
|
clearInterval(this.interval); // 倒计时结束，清除定时器
|
this.countdown = "00:00:00";
|
} else {
|
const hours = Math.floor(remainingTime / (1000 * 60 * 60));
|
const minutes = Math.floor(
|
(remainingTime % (1000 * 60 * 60)) / (1000 * 60)
|
);
|
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
|
this.countdown = `${hours}:${minutes}:${seconds}`;
|
}
|
},
|
onRoute(item) {
|
if (this.$route.params.symbol !== item.symbol) {
|
this.$router.push(`/perpetualContract/${item.symbol}`);
|
this.$emit("update-coin", item.symbol);
|
setStorage("symbol", item.symbol);
|
setStorage("symbolname", item.name);
|
this.onClose();
|
this.$forceUpdate();
|
}
|
this.show = false;
|
},
|
onSidebar() {
|
// 侧边栏打开
|
console.log(this.userInfo);
|
this.coins = this.coinList.map((item) => item.symbol);
|
this.show = true;
|
this.fetchList();
|
},
|
fetchList() {
|
// 获取行情
|
_getHomeList(this.coins.join(",")).then((list) => {
|
// console.log(list)
|
this.list = list;
|
if (this.timeout) {
|
clearTimeout(this.timeout);
|
this.timeout = null;
|
}
|
this.timeout = setTimeout(() => {
|
this.fetchList();
|
}, 1000);
|
});
|
},
|
onClose() {
|
if (this.timeout) {
|
clearTimeout(this.timeout);
|
this.timeout = null;
|
}
|
},
|
jump() {
|
this.$router.push(`/trendDetails/${this.symbol}`);
|
},
|
changeTab(index) {
|
this.$emit("tab", index);
|
// this.selectIndex2 = index;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.before {
|
position: relative;
|
|
.back {
|
position: absolute;
|
left: 0;
|
}
|
|
.right {
|
position: absolute;
|
right: 0;
|
}
|
}
|
|
.wallet-background {
|
background-color: #e8e8e8;
|
}
|
|
.tabBtn {
|
// border-radius: 8px;
|
border: 1px solid #909090;
|
color: #868d9a;
|
background: transparent;
|
}
|
|
.select-active {
|
background-color: transparent;
|
|
color: white !important;
|
|
@include themify() {
|
background: themed("color_main");
|
}
|
|
border: none;
|
}
|
|
.no-select {
|
}
|
|
// 弹出层样式
|
.popup {
|
height: 100%;
|
width: 670px;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.border-b-color {
|
@include themify() {
|
border-bottom: 1px solid themed("border_color");
|
}
|
}
|
</style>
|
