{"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@media screen {\n    \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":[]}