{"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":[]}
|
