{"ast":null,"code":"import \"vant/es/cell/style\";\nimport _Cell from \"vant/es/cell\";\nimport \"vant/es/list/style\";\nimport _List from \"vant/es/list\"; //\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//\n//\n//\n//\n//\n//\nimport \"core-js/modules/es.array.push.js\";\nimport { mapGetters } from 'vuex';\nimport { fixDate, setStorage } from \"@/utils/utis\";\nimport ExTabs from \"@/components/ex-tabs/index.vue\";\nimport { HOST_URL } from '@/config';\nexport default {\n  name: 'ListQuotation',\n  data() {\n    return {\n      fixDate,\n      HOST_URL,\n      active: 0,\n      type: 'left',\n      //left 从左往右 right 从有王座\n      sortVal: 0\n    };\n  },\n  props: {\n    showMore: {\n      type: Boolean,\n      default: true\n    },\n    listData: {\n      type: Array,\n      default() {\n        return [];\n      }\n    },\n    tabActive: {\n      type: Number,\n      default: 0\n    }\n  },\n  computed: {\n    ...mapGetters({\n      currency: 'home/currency'\n    })\n  },\n  components: {\n    [_List.name]: _List,\n    [_Cell.name]: _Cell,\n    ExTabs\n  },\n  methods: {\n    //排序\n    listSort(val) {\n      this.sortVal = val;\n      this.$emit('listSort', val);\n    },\n    onItemClick(item) {\n      if (this.tabActive == 2) {\n        //现货\n        this.$router.push({\n          path: `/trade/${item.symbol}`\n        });\n      } else {\n        setStorage('symbol', item.symbol);\n        this.$router.push({\n          path: `/perpetualContract/${item.symbol}`\n        });\n      }\n    },\n    onTabs(val) {\n      if (this.active < val) {\n        this.type = 'right';\n      } else {\n        this.type = 'left';\n      }\n      this.active = val;\n      if (val == 0) {\n        this.showList = [...this.listData];\n      } else if (val == 1) {\n        this.showList = [...this.listData].sort(this.compare(\"change_ratio\", 'up'));\n      } else if (val == 2) {\n        this.showList = [...this.listData].sort(this.compare(\"change_ratio\", 'down'));\n      } else if (val == 3) {\n        this.showList = [...this.listData].sort(this.compare(\"volume\", 'up'));\n      }\n    },\n    compare(p, type) {\n      //这是比较函数\n      return function (m, n) {\n        var a = m[p];\n        var b = n[p];\n        if (a == b) {\n          return;\n        }\n        if (type == 'up') {\n          return b - a; //升序\n        } else if (type == 'down') {\n          return a - b; //降序\n        } else {\n          return a - b;\n        }\n      };\n    }\n  },\n  watch: {\n    listData() {\n      if (this.active == 0) {\n        this.showList = [...this.listData];\n      } else if (this.active == 1) {\n        this.showList = [...this.listData].sort(this.compare(\"change_ratio\", 'up'));\n      } else if (this.active == 2) {\n        this.showList = [...this.listData].sort(this.compare(\"change_ratio\", 'down'));\n      } else if (this.active == 3) {\n        this.showList = [...this.listData].sort(this.compare(\"volume\", 'up'));\n      }\n      this.$forceUpdate();\n    }\n  }\n};","map":{"version":3,"names":["mapGetters","fixDate","setStorage","ExTabs","HOST_URL","name","data","active","type","sortVal","props","showMore","Boolean","default","listData","Array","tabActive","Number","computed","currency","components","_List","_Cell","methods","listSort","val","$emit","onItemClick","item","$router","push","path","symbol","onTabs","showList","sort","compare","p","m","n","a","b","watch","$forceUpdate"],"sources":["src/components/list-quotation/index.vue"],"sourcesContent":["<template>\n  <div class=\"list-quatation\">\n    <ex-tabs @tabs=\"onTabs\"></ex-tabs>\n    <van-list>\n      <van-cell>\n        <div class=\"flex items-center w-full text-grey font-26\">\n          <div class=\"left flex items-center\">\n            <span>{{ $t('交易对11') }}</span>\n            <div class=\"filter-box ml-10\" v-if=\"active == 0\">\n              <div class=\"w-14 h-12\" :class=\"[sortVal == 1 ? 'icon_top1_active' : 'icon_top1']\" @click=\"listSort(1)\">\n              </div>\n              <div class=\"w-14 h-12\" :class=\"[sortVal == 2 ? 'icon_top2_active' : 'icon_top2']\" @click=\"listSort(2)\">\n              </div>\n            </div>\n          </div>\n          <div class=\"mid text-right flex justify-end items-center\">\n            {{ $t('最新价') }}\n            <div class=\"filter-box ml-10\" v-if=\"active == 0\">\n              <div class=\"w-14 h-12\" :class=\"[sortVal == 3 ? 'icon_top1_active' : 'icon_top1']\" @click=\"listSort(3)\">\n              </div>\n              <div class=\"w-14 h-12\" :class=\"[sortVal == 4 ? 'icon_top2_active' : 'icon_top2']\" @click=\"listSort(4)\">\n              </div>\n            </div>\n          </div>\n          <div class=\"right text-right flex justify-end items-center\">\n            {{ active == 3 ? $t('成交额') : $t('24h涨跌幅') }}\n            <div class=\"filter-box ml-10\" v-if=\"active == 0\">\n              <div class=\"w-14 h-12 \" :class=\"[sortVal == 5 ? 'icon_top1_active' : 'icon_top1']\" @click=\"listSort(5)\">\n              </div>\n              <div class=\"w-14 h-12\" :class=\"[sortVal == 6 ? 'icon_top2_active' : 'icon_top2']\" @click=\"listSort(6)\">\n              </div>\n            </div>\n            <!--                  <img src=\"./icon-sort.png\" alt=\"icon\" class=\"w-13 h-22 ml-5\"/>-->\n          </div>\n        </div>\n      </van-cell>\n      <transition-group :name=\"type\" tag=\"div\">\n        <div v-if=\"active == 0\" :key=\"active\">\n          <van-cell v-for=\"item in listData\" :key=\"item.id\">\n            <ul class=\"flex justify-between w-full items-center\" @click=\"onItemClick(item)\">\n              <li class=\"flex items-center left\">\n        <img\n                  :src=\"item.symbol ? `${HOST_URL}/wap/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')\"\n                  alt=\"logo\" class=\"w-72 h-72 rounded-full mr-16\" />\n                <p class=\"flex flex-col\" style=\"margin-left: 5px\">\n                  <span class=\"flex items-end font-32 flex items-center\">\n                    <span class=\"textColor font-600 font-30\">{{ item.name && item.name.toUpperCase() || '--' }}</span>\n                <!--    <span class=\"font-24 text-grey\" style=\"position: relative; top: 1px\">\n                      {{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span> -->\n                  </span>\n\n                  <span class=\"font-24 text-grey mt-10\">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>\n                </p>\n              </li>\n              <li class=\"flex flex-col items-end mid\">\n                <p class=\"textColor font-32 font-600\">{{ item.close || '--' }}</p>\n                <p class=\"font-24 text-grey mt-10\">{{ currency.currency_symbol }}{{ item.close && (item.close *\n                  currency.rate).toFixed(item.close.toString().split('.')[1] ? item.close.toString().split('.')[1].length\n                    : 2) || '--' }}</p>\n              </li>\n              <li class=\"right flex items-center justify-end\">\n                <p class=\"w-153 font-31 h-71 bg-green text-white border-0 text-center btn\" v-if=\"item.change_ratio > 0\">\n                  +{{ item.change_ratio }}%</p>\n                <p class=\"w-153 font-31 h-71 bg-red text-white border-0 text-center btn\" v-else>\n                  {{ item.change_ratio }}%</p>\n              </li>\n            </ul>\n          </van-cell>\n        </div>\n        <div v-else :key=\"active\">\n          <van-cell v-for=\"item in showList\" :key=\"item.id\">\n            <ul class=\"flex justify-between w-full items-center\" @click=\"onItemClick(item)\">\n              <li class=\"flex items-center left\">\n                 <img :src=\"`${HOST_URL}/wap/symbol/${item.symbol}.png`\" alt=\"logo\" class=\"w-72 h-72 rounded-full mr-16\" />\n                <p class=\"flex flex-col\" style=\"margin-left: 5px\">\n                  <span class=\"flex items-end font-32 flex items-center\">\n                    <span class=\"textColor font-600 font-30\">{{ item.symbol && item.symbol.toUpperCase() || '--' }}</span>\n                    <span class=\"font-24 text-grey\" style=\"position: relative; top: 1px\">\n                      {{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span>\n                  </span>\n                  <span class=\"font-24 text-grey mt-10\">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>\n                </p>\n              </li>\n              <li class=\"flex flex-col items-end mid\">\n                <p class=\"textColor font-32 font-600\">{{ item.close }}</p>\n                <p class=\"font-24 text-grey mt-10\">{{ currency.currency_symbol }}{{ item.close && (item.close *\n                  currency.rate).toFixed(item.close.toString().split('.')[1] ? item.close.toString().split('.')[1].length\n                    :\n                    2) }}</p>\n              </li>\n              <li class=\"right flex items-center justify-end text-right\">\n                <div v-if=\"active == 3\" class=\"textColor w-182 font-700 font-24\">\n                  {{ (item.volume * 1).toFixed(2) }}\n                </div>\n                <template v-else>\n                  <p class=\"w-153 font-31 h-71 bg-green text-white border-0 text-center btn\" v-if=\"item.change_ratio > 0\">\n                    +{{ item.change_ratio }}%</p>\n                  <p class=\"w-153 font-31 h-71 bg-red text-white border-0 text-center btn\" v-else>\n                    {{ item.change_ratio }}%</p>\n                </template>\n              </li>\n            </ul>\n          </van-cell>\n        </div>\n      </transition-group>\n    </van-list>\n    <!-- <div class=\"flex flex-col justify-center items-center pb-58 mt-20\" @click=\"$router.push('/quotes/?active=3')\" v-if=\"showMore\">\n        <p class=\"text-grey font-28 mb-8\">{{ $t('查看') }}</p>\n        <img src=\"./icon-arrow_more.png\" alt=\"more\" class=\"w-24 h-10\"/>\n    </div> -->\n  </div>\n</template>\n\n<script>\nimport { List, Cell } from 'vant'\nimport { mapGetters } from 'vuex'\nimport { fixDate, setStorage } from \"@/utils/utis\";\nimport ExTabs from \"@/components/ex-tabs/index.vue\";\nimport { HOST_URL } from '@/config'\nexport default {\n  name: 'ListQuotation',\n  data() {\n    return {\n      fixDate,\n      HOST_URL,\n      active: 0,\n      type: 'left', //left 从左往右 right 从有王座\n      sortVal: 0\n    }\n  },\n  props: {\n    showMore: {\n      type: Boolean,\n      default: true\n    },\n    listData: {\n      type: Array,\n      default() {\n        return []\n      }\n    },\n    tabActive: {\n      type: Number,\n      default: 0\n    },\n  },\n  computed: {\n    ...mapGetters({ currency: 'home/currency' }),\n  },\n  components: {\n    [List.name]: List,\n    [Cell.name]: Cell,\n    ExTabs\n  },\n  methods: {\n    //排序\n    listSort(val) {\n      this.sortVal = val\n      this.$emit('listSort', val)\n    },\n    onItemClick(item) {\n      if (this.tabActive == 2) { //现货\n        this.$router.push({\n          path: `/trade/${item.symbol}`\n        });\n      } else {\n        setStorage('symbol', item.symbol)\n        this.$router.push({\n          path: `/perpetualContract/${item.symbol}`\n        });\n      }\n    },\n    onTabs(val) {\n      if (this.active < val) {\n        this.type = 'right'\n      } else {\n        this.type = 'left'\n      }\n      this.active = val\n      if (val == 0) {\n        this.showList = [...this.listData];\n      } else if (val == 1) {\n        this.showList = [...this.listData].sort(this.compare(\"change_ratio\", 'up'))\n      } else if (val == 2) {\n        this.showList = [...this.listData].sort(this.compare(\"change_ratio\", 'down'))\n      } else if (val == 3) {\n        this.showList = [...this.listData].sort(this.compare(\"volume\", 'up'))\n      }\n    },\n    compare(p, type) { //这是比较函数\n      return function (m, n) {\n        var a = m[p];\n        var b = n[p];\n        if (a == b) {\n          return\n        }\n        if (type == 'up') {\n          return b - a; //升序\n        } else if (type == 'down') {\n          return a - b; //降序\n        } else {\n          return a - b;\n        }\n      }\n    }\n  },\n  watch: {\n    listData() {\n      if (this.active == 0) {\n        this.showList = [...this.listData];\n      } else if (this.active == 1) {\n        this.showList = [...this.listData].sort(this.compare(\"change_ratio\", 'up'))\n      } else if (this.active == 2) {\n        this.showList = [...this.listData].sort(this.compare(\"change_ratio\", 'down'))\n      } else if (this.active == 3) {\n        this.showList = [...this.listData].sort(this.compare(\"volume\", 'up'))\n      }\n      this.$forceUpdate()\n    }\n  }\n}\n</script>\n<style lang=\"scss\" scoped>\n.left-enter-active,\n.left-leave-active,\n.right-enter-active,\n.right-leave-active {\n  will-change: transform;\n  transition: all 250ms;\n}\n\n.left-leave-active,\n.right-leave-active {\n  display: none;\n}\n\n.left-enter {\n  opacity: 0;\n  transform: translate3d(-100%, 0, 0);\n}\n\n.left-leave {\n  opacity: 0;\n  transform: translate3d(0%, 0, 0)\n}\n\n.right-enter {\n  opacity: 0;\n  transform: translate3d(100%, 0, 0);\n}\n\n.right-leave {\n  opacity: 0;\n  transform: translate3d(0%, 0, 0)\n}\n\n.btn {\n  border-radius: 9px;\n  line-height: 71px;\n}\n\n.left {\n  width: 382px\n}\n\n.mid {\n  width: 185px;\n}\n\n.right {\n  width: 182px;\n  margin-left: 38px;\n}\n\n.filter-box {\n  .icon_top1 {\n    background: url('@/assets/image/icon_top1.png') no-repeat center;\n    background-size: 100% 100%;\n  }\n\n  .icon_top2 {\n    background: url('@/assets/image/icon_top2.png') no-repeat center;\n    background-size: 100% 100%;\n    margin-top: 5px;\n  }\n\n  .icon_top1_active {\n    background: url('@/assets/image/icon_top3.png') no-repeat center;\n    background-size: 100% 100%;\n  }\n\n  .icon_top2_active {\n    background: url('@/assets/image/icon_top4.png') no-repeat center;\n    background-size: 100% 100%;\n    margin-top: 5px;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,SAAAA,UAAA;AACA,SAAAC,OAAA,EAAAC,UAAA;AACA,OAAAC,MAAA;AACA,SAAAC,QAAA;AACA;EACAC,IAAA;EACAC,KAAA;IACA;MACAL,OAAA;MACAG,QAAA;MACAG,MAAA;MACAC,IAAA;MAAA;MACAC,OAAA;IACA;EACA;EACAC,KAAA;IACAC,QAAA;MACAH,IAAA,EAAAI,OAAA;MACAC,OAAA;IACA;IACAC,QAAA;MACAN,IAAA,EAAAO,KAAA;MACAF,QAAA;QACA;MACA;IACA;IACAG,SAAA;MACAR,IAAA,EAAAS,MAAA;MACAJ,OAAA;IACA;EACA;EACAK,QAAA;IACA,GAAAlB,UAAA;MAAAmB,QAAA;IAAA;EACA;EACAC,UAAA;IACA,CAAAC,KAAA,CAAAhB,IAAA,GAAAgB,KAAA;IACA,CAAAC,KAAA,CAAAjB,IAAA,GAAAiB,KAAA;IACAnB;EACA;EACAoB,OAAA;IACA;IACAC,SAAAC,GAAA;MACA,KAAAhB,OAAA,GAAAgB,GAAA;MACA,KAAAC,KAAA,aAAAD,GAAA;IACA;IACAE,YAAAC,IAAA;MACA,SAAAZ,SAAA;QAAA;QACA,KAAAa,OAAA,CAAAC,IAAA;UACAC,IAAA,YAAAH,IAAA,CAAAI,MAAA;QACA;MACA;QACA9B,UAAA,WAAA0B,IAAA,CAAAI,MAAA;QACA,KAAAH,OAAA,CAAAC,IAAA;UACAC,IAAA,wBAAAH,IAAA,CAAAI,MAAA;QACA;MACA;IACA;IACAC,OAAAR,GAAA;MACA,SAAAlB,MAAA,GAAAkB,GAAA;QACA,KAAAjB,IAAA;MACA;QACA,KAAAA,IAAA;MACA;MACA,KAAAD,MAAA,GAAAkB,GAAA;MACA,IAAAA,GAAA;QACA,KAAAS,QAAA,YAAApB,QAAA;MACA,WAAAW,GAAA;QACA,KAAAS,QAAA,YAAApB,QAAA,EAAAqB,IAAA,MAAAC,OAAA;MACA,WAAAX,GAAA;QACA,KAAAS,QAAA,YAAApB,QAAA,EAAAqB,IAAA,MAAAC,OAAA;MACA,WAAAX,GAAA;QACA,KAAAS,QAAA,YAAApB,QAAA,EAAAqB,IAAA,MAAAC,OAAA;MACA;IACA;IACAA,QAAAC,CAAA,EAAA7B,IAAA;MAAA;MACA,iBAAA8B,CAAA,EAAAC,CAAA;QACA,IAAAC,CAAA,GAAAF,CAAA,CAAAD,CAAA;QACA,IAAAI,CAAA,GAAAF,CAAA,CAAAF,CAAA;QACA,IAAAG,CAAA,IAAAC,CAAA;UACA;QACA;QACA,IAAAjC,IAAA;UACA,OAAAiC,CAAA,GAAAD,CAAA;QACA,WAAAhC,IAAA;UACA,OAAAgC,CAAA,GAAAC,CAAA;QACA;UACA,OAAAD,CAAA,GAAAC,CAAA;QACA;MACA;IACA;EACA;EACAC,KAAA;IACA5B,SAAA;MACA,SAAAP,MAAA;QACA,KAAA2B,QAAA,YAAApB,QAAA;MACA,gBAAAP,MAAA;QACA,KAAA2B,QAAA,YAAApB,QAAA,EAAAqB,IAAA,MAAAC,OAAA;MACA,gBAAA7B,MAAA;QACA,KAAA2B,QAAA,YAAApB,QAAA,EAAAqB,IAAA,MAAAC,OAAA;MACA,gBAAA7B,MAAA;QACA,KAAA2B,QAAA,YAAApB,QAAA,EAAAqB,IAAA,MAAAC,OAAA;MACA;MACA,KAAAO,YAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}