{"ast":null,"code":"import \"vant/es/popup/style\";\nimport _Popup from \"vant/es/popup\"; //\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport \"core-js/modules/es.array.push.js\";\nimport { mapGetters } from \"vuex\";\nimport { _getHomeList } from \"@/API/home.api\";\nimport { setStorage } from \"@/utils/utis\";\nexport default {\n name: \"contractHeader\",\n props: {\n backFunc: {\n type: Function,\n default: null\n },\n balance: {\n // 余额\n type: [String, Number],\n default: 0.0\n },\n // title:{\n // type:String,\n // default:''\n // },\n symbol: {\n type: String,\n default: \"\"\n },\n range: {\n type: String,\n defalult: \"\"\n },\n selectIndex: {\n type: [String, Number],\n defalult: \"\"\n }\n },\n components: {\n [_Popup.name]: _Popup\n },\n computed: {\n ...mapGetters({\n coinList: \"home/coinList\",\n theme: \"home/theme\"\n }),\n title() {\n return [this.$t(\"永续\"), this.$t(\"交割\")][this.selectIndex - 1];\n }\n },\n data() {\n return {\n // selectIndex2:this.selectIndex,\n show: false,\n timeout: null,\n // title: '',\n list: [\n // { name:\"BTC/USDT\",close:\"22042.28\",change_ratio:\"2.21\"},\n // { name:\"XTZ/USDT\",close:\"1.568\",change_ratio:\"-7.1\"},\n // { name:\"ADA/USDT\",close:\"0.493085\",change_ratio:\"-4.08\"},\n ]\n };\n },\n created() {\n // this.coins = this.coinList.map(item => item.symbol)\n // console.log('this.coins', this.coins)\n },\n methods: {\n onRoute(item) {\n if (this.$route.params.symbol !== item.symbol) {\n this.$router.push(`/perpetualContract/${item.symbol}`);\n this.$emit(\"update-coin\", item.symbol);\n setStorage(\"symbol\", item.symbol);\n this.onClose();\n this.$forceUpdate();\n }\n this.show = false;\n },\n onSidebar() {\n // 侧边栏打开\n console.log(this.userInfo);\n this.coins = this.coinList.map(item => item.symbol);\n this.show = true;\n this.fetchList();\n },\n fetchList() {\n // 获取行情\n _getHomeList(this.coins.join(\",\")).then(list => {\n // console.log(list)\n this.list = list;\n if (this.timeout) {\n clearTimeout(this.timeout);\n this.timeout = null;\n }\n this.timeout = setTimeout(() => {\n this.fetchList();\n }, 1000);\n });\n },\n onClose() {\n if (this.timeout) {\n clearTimeout(this.timeout);\n this.timeout = null;\n }\n },\n jump() {\n this.$router.push(`/trendDetails/${this.symbol}`);\n },\n changeTab(index) {\n this.$emit(\"tab\", index);\n // this.selectIndex2 = index;\n }\n }\n};","map":{"version":3,"names":["mapGetters","_getHomeList","setStorage","name","props","backFunc","type","Function","default","balance","String","Number","symbol","range","defalult","selectIndex","components","_Popup","computed","coinList","theme","title","$t","data","show","timeout","list","created","methods","onRoute","item","$route","params","$router","push","$emit","onClose","$forceUpdate","onSidebar","console","log","userInfo","coins","map","fetchList","join","then","clearTimeout","setTimeout","jump","changeTab","index"],"sources":["src/components/contract-header/index.vue"],"sourcesContent":["<template>\n <!-- 永续合约，交割合约公共头部 -->\n <div>\n <div class=\"contract-header\">\n <div class=\"pl-30 pr-30\">\n <div class=\"flex pt-45 before\">\n <div class=\"flex items-center justify-center\">\n <!-- <img :src=\"require(`@/assets/theme/${theme}/image/icon_back.png`)\" class=\"w-35 h-35 back\" alt=\"\"\n @click=\"$router.push(`/trendDetails/${symbol}`)\"> -->\n <img\n :src=\"require(`@/assets/theme/${theme}/image/convert.png`)\"\n alt=\"convert-img\"\n class=\"w-35 h-35\"\n @click=\"onSidebar\"\n />\n <div class=\"flex pl-21 textColor\" @click=\"onSidebar\">\n <div class=\"font-35\">{{ symbol.toUpperCase() || \"--\" }}/USDT</div>\n <div class=\"ml-15\">{{ title }}</div>\n </div>\n <div\n class=\"pl-30 w-160\"\n :class=\"{ 'text-green': range > 0, 'text-red': range <= 0 }\"\n >\n {{ range > 0 ? \"+\" : \"\" }}{{ range || \"--\" }}%\n </div>\n <!-- <img src=\"@/assets/image/kline.png\" class=\"w-44 h-44 right\" alt=\"\" @click=\"$router.push(`/trendDetails/${symbol}`)\"> -->\n </div>\n <!-- <div class=\"flex items-center\">\n <img src=\"../../assets/image/public/k-line.png\" alt=\"line-img\" class=\"w-38 h-35\"\n @click=\"jump\" />\n </div> -->\n </div>\n <div class=\"flex justify-between pt-34\">\n <button\n class=\"w-368 h-74 lh-74\"\n :class=\"selectIndex == 1 ? 'select-active' : 'no-select'\"\n @click=\"changeTab(1)\"\n >\n {{ $t(\"永续合约\") }}\n </button>\n <button\n class=\"w-368 h-74 lh-74\"\n :class=\"selectIndex == 2 ? 'select-active' : 'no-select'\"\n @click=\"changeTab(2)\"\n >\n {{ $t(\"交割合约\") }}\n </button>\n </div>\n </div>\n </div>\n <!-- 左侧边弹出菜单 -->\n <van-popup\n class=\"popup\"\n round\n v-model=\"show\"\n close-icon-position=\"top-left\"\n position=\"left\"\n @closed=\"onClose\"\n >\n <div class=\"pl-42 border-b-color pt-48 pb-48\">\n <div class=\"textColor\">\n <span class=\"font-bold font-45 mr-12\"\n >{{ title }} {{ $t(\"合约\") }}</span\n >\n <span class=\"font-30\">/ USDT</span>\n </div>\n </div>\n <div class=\"pl-42 pr-40\">\n <div class=\"flex justify-between mb-42 mt-53\">\n <div class=\"flex items-center text-grey\">\n <div class=\"mr-12\">{{ $t(\"名称\") }}</div>\n </div>\n <div class=\"flex text-grey\">\n <div class=\"flex items-center\">\n <div class=\"\">{{ $t(\"最新价格\") }}</div>\n </div>\n <div class=\"flex items-center\">\n <div class=\"mr-12\">/24H{{ $t(\"涨跌\") }}</div>\n </div>\n </div>\n </div>\n <div\n class=\"flex justify-between mb-50\"\n v-for=\"item in list\"\n :key=\"item.name\"\n @click=\"onRoute(item)\"\n >\n <div>\n <div class=\"textColor\">{{ item.name }}</div>\n <div class=\"text-grey mt-10\">\n {{ selectIndex == 1 ? $t(\"永续\") : $t(\"交割\") }}\n </div>\n </div>\n <div class=\"text-right\">\n <div class=\"textColor\">{{ item.close }}</div>\n <div\n class=\"mt-10\"\n :class=\"item.change_ratio > 0 ? 'text-green' : 'text-red'\"\n >\n {{ item.change_ratio || (item.change_ratio === 0 ? 0 : \"--\") }}%\n </div>\n </div>\n </div>\n </div>\n </van-popup>\n </div>\n</template>\n\n<script>\nimport { Popup } from \"vant\";\nimport { mapGetters } from \"vuex\";\nimport { _getHomeList } from \"@/API/home.api\";\nimport { setStorage } from \"@/utils/utis\";\nexport default {\n name: \"contractHeader\",\n props: {\n backFunc: {\n type: Function,\n default: null,\n },\n balance: {\n // 余额\n type: [String, Number],\n default: 0.0,\n },\n // title:{\n // type:String,\n // default:''\n // },\n symbol: {\n type: String,\n default: \"\",\n },\n range: {\n type: String,\n defalult: \"\",\n },\n selectIndex: {\n type: [String, Number],\n defalult: \"\",\n },\n },\n components: {\n [Popup.name]: Popup,\n },\n computed: {\n ...mapGetters({\n coinList: \"home/coinList\",\n theme: \"home/theme\",\n }),\n title() {\n return [this.$t(\"永续\"), this.$t(\"交割\")][this.selectIndex - 1];\n },\n },\n data() {\n return {\n // selectIndex2:this.selectIndex,\n show: false,\n timeout: null,\n // title: '',\n list: [\n // { name:\"BTC/USDT\",close:\"22042.28\",change_ratio:\"2.21\"},\n // { name:\"XTZ/USDT\",close:\"1.568\",change_ratio:\"-7.1\"},\n // { name:\"ADA/USDT\",close:\"0.493085\",change_ratio:\"-4.08\"},\n ],\n };\n },\n created() {\n // this.coins = this.coinList.map(item => item.symbol)\n // console.log('this.coins', this.coins)\n },\n methods: {\n onRoute(item) {\n if (this.$route.params.symbol !== item.symbol) {\n this.$router.push(`/perpetualContract/${item.symbol}`);\n this.$emit(\"update-coin\", item.symbol);\n setStorage(\"symbol\", item.symbol);\n this.onClose();\n this.$forceUpdate();\n }\n this.show = false;\n },\n onSidebar() {\n // 侧边栏打开\n console.log(this.userInfo);\n this.coins = this.coinList.map((item) => item.symbol);\n this.show = true;\n this.fetchList();\n },\n fetchList() {\n // 获取行情\n _getHomeList(this.coins.join(\",\")).then((list) => {\n // console.log(list)\n this.list = list;\n if (this.timeout) {\n clearTimeout(this.timeout);\n this.timeout = null;\n }\n this.timeout = setTimeout(() => {\n this.fetchList();\n }, 1000);\n });\n },\n onClose() {\n if (this.timeout) {\n clearTimeout(this.timeout);\n this.timeout = null;\n }\n },\n jump() {\n this.$router.push(`/trendDetails/${this.symbol}`);\n },\n changeTab(index) {\n this.$emit(\"tab\", index);\n // this.selectIndex2 = index;\n },\n },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n@import \"@/assets/styles/layout.scss\";\n\n.before {\n position: relative;\n\n .back {\n position: absolute;\n left: 0;\n }\n\n .right {\n position: absolute;\n right: 0;\n }\n}\n\n.wallet-background {\n background-color: #e8e8e8;\n}\n\n.tabBtn {\n // border-radius: 8px;\n border: 1px solid #909090;\n color: #868d9a;\n background: transparent;\n}\n\n.select-active {\n background-color: transparent;\n border: 0px;\n\n color: $newcolor !important;\n}\n\n.no-select {\n background-color: transparent;\n border: 0px;\n}\n\n// 弹出层样式\n.popup {\n height: 100%;\n width: 670px;\n\n @include themify() {\n background: themed(\"main_background\");\n }\n}\n\n.border-b-color {\n @include themify() {\n border-bottom: 1px solid themed(\"border_color\");\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,SAAAA,UAAA;AACA,SAAAC,YAAA;AACA,SAAAC,UAAA;AACA;EACAC,IAAA;EACAC,KAAA;IACAC,QAAA;MACAC,IAAA,EAAAC,QAAA;MACAC,OAAA;IACA;IACAC,OAAA;MACA;MACAH,IAAA,GAAAI,MAAA,EAAAC,MAAA;MACAH,OAAA;IACA;IACA;IACA;IACA;IACA;IACAI,MAAA;MACAN,IAAA,EAAAI,MAAA;MACAF,OAAA;IACA;IACAK,KAAA;MACAP,IAAA,EAAAI,MAAA;MACAI,QAAA;IACA;IACAC,WAAA;MACAT,IAAA,GAAAI,MAAA,EAAAC,MAAA;MACAG,QAAA;IACA;EACA;EACAE,UAAA;IACA,CAAAC,MAAA,CAAAd,IAAA,GAAAc;EACA;EACAC,QAAA;IACA,GAAAlB,UAAA;MACAmB,QAAA;MACAC,KAAA;IACA;IACAC,MAAA;MACA,aAAAC,EAAA,aAAAA,EAAA,aAAAP,WAAA;IACA;EACA;EACAQ,KAAA;IACA;MACA;MACAC,IAAA;MACAC,OAAA;MACA;MACAC,IAAA;QACA;QACA;QACA;MAAA;IAEA;EACA;EACAC,QAAA;IACA;IACA;EAAA,CACA;EACAC,OAAA;IACAC,QAAAC,IAAA;MACA,SAAAC,MAAA,CAAAC,MAAA,CAAApB,MAAA,KAAAkB,IAAA,CAAAlB,MAAA;QACA,KAAAqB,OAAA,CAAAC,IAAA,uBAAAJ,IAAA,CAAAlB,MAAA;QACA,KAAAuB,KAAA,gBAAAL,IAAA,CAAAlB,MAAA;QACAV,UAAA,WAAA4B,IAAA,CAAAlB,MAAA;QACA,KAAAwB,OAAA;QACA,KAAAC,YAAA;MACA;MACA,KAAAb,IAAA;IACA;IACAc,UAAA;MACA;MACAC,OAAA,CAAAC,GAAA,MAAAC,QAAA;MACA,KAAAC,KAAA,QAAAvB,QAAA,CAAAwB,GAAA,CAAAb,IAAA,IAAAA,IAAA,CAAAlB,MAAA;MACA,KAAAY,IAAA;MACA,KAAAoB,SAAA;IACA;IACAA,UAAA;MACA;MACA3C,YAAA,MAAAyC,KAAA,CAAAG,IAAA,OAAAC,IAAA,CAAApB,IAAA;QACA;QACA,KAAAA,IAAA,GAAAA,IAAA;QACA,SAAAD,OAAA;UACAsB,YAAA,MAAAtB,OAAA;UACA,KAAAA,OAAA;QACA;QACA,KAAAA,OAAA,GAAAuB,UAAA;UACA,KAAAJ,SAAA;QACA;MACA;IACA;IACAR,QAAA;MACA,SAAAX,OAAA;QACAsB,YAAA,MAAAtB,OAAA;QACA,KAAAA,OAAA;MACA;IACA;IACAwB,KAAA;MACA,KAAAhB,OAAA,CAAAC,IAAA,uBAAAtB,MAAA;IACA;IACAsC,UAAAC,KAAA;MACA,KAAAhB,KAAA,QAAAgB,KAAA;MACA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
