<template>
|
<!-- 永续合约，交割合约公共头部 -->
|
<div id="cryptos">
|
<div class="contract-header">
|
<div class="pl-30 pr-30">
|
<div class="flex justify-start pt-45 before">
|
<div class="flex items-center ">
|
<img src="@/assets/image/icon_back.png" class="w-35 h-35 back" alt="" @click="jump()">
|
<img src="@/assets/theme/dark/image/black-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.toUpperCase() || '--' }}</div>
|
<div class="ml-15 font-28">{{ title }}</div>
|
</div>
|
<div class="pl-10 w-160 font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0 ?
|
'+' : '' }}{{ range || '--' }}%</div>
|
<img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()">
|
</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>
|
<!-- v-if="!selectIndex==2" -->
|
<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> -->
|
<button class="tabBtn w-368 h-74 lh-74 border-none rounded"
|
:class="selectIndex == 2 ? 'select-one-active' : 'no-select'" @click="changeTab(2)">
|
{{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') }}</button>
|
</div>
|
</div>
|
</div>
|
<!-- 左侧边弹出菜单 -->
|
<van-popup class="popup" round v-model:show="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">/{{ queryType == 'cryptos' ? 'USDT' : 'USD'}} </span>
|
</div>
|
</div>
|
<div class="pl-42 pr-40 font-28">
|
<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="font-28">{{ $t('最新价格') }}</div>
|
</div>
|
<div class="flex items-center">
|
<div class="mr-12 font-28">/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 font-28">{{ item.name }}</div>
|
<div class="text-grey mt-10 font-28">{{ selectIndex == 1 ? $t('永续') : $t('交割') }}</div>
|
</div>
|
<div class="text-right">
|
<div class="textColor font-28">{{ item.close }}</div>
|
<div class="mt-10 font-28" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">{{ item.change_ratio
|
}}%</div>
|
</div>
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import { Popup } from "vant";
|
import { mapGetters } from "vuex";
|
import { _getHomeList } from "@/service/home.api";
|
import { THEME } from '@/config/theme'
|
import { setStorage } from '@/utils/utis'
|
export default {
|
name: "contractHeader",
|
props: {
|
backFunc: {
|
type: Function,
|
default: null
|
},
|
balance: { // 余额
|
type: [String, Number],
|
default: 0.00
|
},
|
// title:{
|
// type:String,
|
// default:''
|
// },
|
symbol: {
|
type: String,
|
default: ''
|
},
|
range: {
|
type: String,
|
defalult: ''
|
},
|
selectIndex: {
|
type: [String, Number],
|
defalult: ''
|
},
|
symbolName: {
|
type: String,
|
default: ''
|
},
|
},
|
components: {
|
[Popup.name]: Popup,
|
},
|
computed: {
|
...mapGetters({ coinList: 'home/coinList' }),
|
title() {
|
return [this.$t('永续'), this.$t('交割')][this.selectIndex - 1]
|
}
|
},
|
data() {
|
return {
|
THEME,
|
// 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"},
|
],
|
queryType: 'cryptos'
|
}
|
},
|
created() {
|
// this.coins = this.coinList.map(item => item.symbol)
|
// console.log('this.coins', this.coins)
|
if (this.$route.query.type) {
|
this.queryType = this.$route.query.type
|
}
|
},
|
methods: {
|
onRoute(item) {
|
if (this.$route.params.symbol !== item.symbol) {
|
this.$router.push(`/cryptos/perpetualContract/${item.symbol}?type=${this.queryType}`)
|
this.$emit('update-coin', item.symbol)
|
setStorage('symbol', item.symbol)
|
this.$forceUpdate()
|
}
|
this.show = false
|
},
|
onSidebar() { // 侧边栏打开
|
this.coins = this.coinList.map(item => item.symbol)
|
console.log(this.coins, 11111)
|
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.go(-1)
|
// if (this.$route.query?.from === 'trade') {
|
// this.$router.push('/trade/index?tabActive=1')
|
// return
|
// }
|
// if (this.$route.query.type == 'indices') {
|
// this.$router.push('/quotes/index')
|
// } else if (this.$route.query.type == 'US-stocks') {
|
// this.$router.push('/quotes/index?tabActive=3')
|
// } else {
|
// this.$router.push('/quotes/index?tabActive=1')
|
// }
|
},
|
klineJump() {
|
this.$router.push(`/cryptos/trendDetails/${this.symbol}?type=${this.queryType}`)
|
},
|
changeTab(index) {
|
this.$emit('tab', index)
|
// this.selectIndex2 = index;
|
},
|
|
}
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/init.scss";
|
|
#cryptos {
|
.before {
|
position: relative;
|
|
.back {
|
margin-right: 40px;
|
}
|
|
.right {
|
position: absolute;
|
right: 0;
|
}
|
}
|
|
|
.wallet-background {
|
background-color: #E8E8E8;
|
}
|
|
.tabBtn {
|
border-radius: 8px;
|
// border: 1px solid #EAEDF2;
|
color: $text_color;
|
font-weight: bold;
|
// background: $tab_background;
|
font-size: 30px;
|
}
|
|
.select-active {
|
background-color: $green;
|
color: $text_color;
|
border: none;
|
}
|
|
.select-one-active {
|
background-color: $red;
|
color: #fff;
|
border: none;
|
}
|
|
.no-select {}
|
|
:deep(.van-popup) {
|
height: 100%;
|
width: 670px;
|
}
|
|
}
|
</style>
|
