{"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//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\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(\"交易对\") }}</span>\n <div class=\"filter-box ml-10\" v-if=\"active == 0\">\n <div\n class=\"w-14 h-12\"\n :class=\"[sortVal == 1 ? 'icon_top1_active' : 'icon_top1']\"\n @click=\"listSort(1)\"\n ></div>\n <div\n class=\"w-14 h-12\"\n :class=\"[sortVal == 2 ? 'icon_top2_active' : 'icon_top2']\"\n @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\n class=\"w-14 h-12\"\n :class=\"[sortVal == 3 ? 'icon_top1_active' : 'icon_top1']\"\n @click=\"listSort(3)\"\n ></div>\n <div\n class=\"w-14 h-12\"\n :class=\"[sortVal == 4 ? 'icon_top2_active' : 'icon_top2']\"\n @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\n class=\"w-14 h-12\"\n :class=\"[sortVal == 5 ? 'icon_top1_active' : 'icon_top1']\"\n @click=\"listSort(5)\"\n ></div>\n <div\n class=\"w-14 h-12\"\n :class=\"[sortVal == 6 ? 'icon_top2_active' : 'icon_top2']\"\n @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\n class=\"flex justify-between w-full items-center\"\n @click=\"onItemClick(item)\"\n >\n <li class=\"flex items-center left\">\n <!-- <img\n :src=\"\n item.symbol\n ? `${HOST_URL}/wap/symbol/${item.symbol}.png`\n : require('@/assets/loading-default.png')\n \"\n alt=\"logo\"\n class=\"w-72 h-72 rounded-full mr-16\"\n /> -->\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\">{{\n (item.name && item.name.toUpperCase()) || \"--\"\n }}</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\">{{\n $t(\"成交量\") + \" \" + (item.amount * 1).toFixed(2)\n }}</span>\n </p>\n </li>\n <li class=\"flex flex-col items-end mid\">\n <p class=\"textColor font-32 font-600\" style=\"color:\">\n {{ item.close || \"--\" }}\n </p>\n <p class=\"font-24 text-grey mt-10\">\n {{ currency.currency_symbol\n }}{{\n (item.close &&\n (item.close * currency.rate).toFixed(\n item.close.toString().split(\".\")[1]\n ? item.close.toString().split(\".\")[1].length\n : 2\n )) ||\n \"--\"\n }}\n </p>\n </li>\n <li class=\"right flex items-center justify-end\">\n <p\n class=\"w-153 font-31 h-71 bg-green text-white border-0 text-center btn\"\n v-if=\"item.change_ratio > 0\"\n >\n +{{ item.change_ratio }}%\n </p>\n <p\n class=\"w-153 font-31 h-71 bg-red text-white border-0 text-center btn\"\n v-else\n >\n {{ item.change_ratio }}%\n </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\n class=\"flex justify-between w-full items-center\"\n @click=\"onItemClick(item)\"\n >\n <li class=\"flex items-center left\">\n <img\n :src=\"`${HOST_URL}/wap/symbol/${item.symbol}.png`\"\n alt=\"logo\"\n class=\"w-72 h-72 rounded-full mr-16\"\n />\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\">{{\n (item.symbol && item.symbol.toUpperCase()) || \"--\"\n }}</span>\n <span\n class=\"font-24 text-grey\"\n style=\"position: relative; top: 1px\"\n >\n {{\n (item.name &&\n item.name.replace(item.symbol.toUpperCase(), \"\")) ||\n \"--\"\n }}</span\n >\n </span>\n <span class=\"font-24 text-grey mt-10\">{{\n $t(\"成交量\") + \" \" + (item.amount * 1).toFixed(2)\n }}</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\">\n {{ currency.currency_symbol\n }}{{\n item.close &&\n (item.close * currency.rate).toFixed(\n item.close.toString().split(\".\")[1]\n ? item.close.toString().split(\".\")[1].length\n : 2\n )\n }}\n </p>\n </li>\n <li class=\"right flex items-center justify-end text-right\">\n <div\n v-if=\"active == 3\"\n class=\"textColor w-182 font-700 font-24\"\n >\n {{ (item.volume * 1).toFixed(2) }}\n </div>\n <template v-else>\n <p\n class=\"w-153 font-31 h-71 bg-green text-white border-0 text-center btn\"\n v-if=\"item.change_ratio > 0\"\n >\n +{{ item.change_ratio }}%\n </p>\n <p\n class=\"w-153 font-31 h-71 bg-red text-white border-0 text-center btn\"\n v-else\n >\n {{ item.change_ratio }}%\n </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 //现货\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(\n this.compare(\"change_ratio\", \"up\")\n );\n } else if (val == 2) {\n this.showList = [...this.listData].sort(\n this.compare(\"change_ratio\", \"down\")\n );\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(\n this.compare(\"change_ratio\", \"up\")\n );\n } else if (this.active == 2) {\n this.showList = [...this.listData].sort(\n this.compare(\"change_ratio\", \"down\")\n );\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":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
