{"ast":null,"code":"import \"vant/es/action-sheet/style\";\nimport _ActionSheet from \"vant/es/action-sheet\";\nimport \"vant/es/icon/style\";\nimport _Icon from \"vant/es/icon\";\nimport \"vant/es/circle/style\";\nimport _Circle from \"vant/es/circle\";\nimport \"vant/es/swipe-item/style\";\nimport _SwipeItem from \"vant/es/swipe-item\";\nimport \"vant/es/swipe/style\";\nimport _Swipe from \"vant/es/swipe\";\nimport \"vant/es/popup/style\";\nimport _Popup from \"vant/es/popup\";\nimport \"core-js/modules/es.array.push.js\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\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 TradeHead from \"@/components/trade-head/index.vue\";\nimport TradeOrderArea from \"@/components/trade-order-area/index.vue\";\nimport TradeDeepData from \"@/components/trade-deep-data/index.vue\";\nimport EntrustItem from \"@/components/entrust-item\";\nimport KLineCharts from \"@/components/kline-charts\";\nimport historyItem from \"@/components/history-item\";\nimport Axios from \"@/API/trading\";\nimport { _getHomeList } from \"@/API/home.api\";\nimport { mapActions, mapGetters } from \"vuex\";\nimport { SET_COIN_LIST } from \"@/store/const.store\";\nimport { WS_URL, HOST_URL } from \"@/config\";\nimport TradeApi from \"@/API/trading.js\";\nimport { getStorage } from \"@/utils/utis\";\nexport default {\n name: \"TradePage\",\n components: {\n TradeHead,\n TradeOrderArea,\n TradeDeepData,\n [_Popup.name]: _Popup,\n [_Swipe.name]: _Swipe,\n [_SwipeItem.name]: _SwipeItem,\n [_Circle.name]: _Circle,\n [_Icon.name]: _Icon,\n [_ActionSheet.name]: _ActionSheet,\n EntrustItem,\n KLineCharts,\n historyItem\n },\n computed: {\n ...mapGetters(\"user\", [\"userInfo\"]),\n ...mapGetters({\n coinList: \"home/coinList\",\n currency: \"home/currency\"\n })\n },\n data() {\n const initArr = [];\n for (let i = 0; i < 8; i++) {\n initArr.push({\n volume: \"--\",\n price: \"--\"\n });\n }\n return {\n HOST_URL,\n quote: {},\n showCharts: false,\n updateKey: 1,\n initTimer: null,\n keyIndex: 0,\n timeout: null,\n timer: null,\n // 底部持仓等的公用定时器\n timer2: null,\n // 交割合约底部持仓等的公用定时器\n symbol: \"\",\n price: \"\",\n range: \"\",\n initOpen: {},\n initClose: {},\n asks: initArr,\n // 卖单\n bids: initArr,\n // 买单\n orderCur: [],\n // 当前委托\n orderHold: [],\n // 持有仓位\n futrueHold: [],\n // 交割持仓\n futrueHistroy: [],\n // 交割历史\n socket: null,\n // 行情\n sockets: {\n quotes: null,\n // 行情\n deep: null /// 深度\n },\n curTab: \"\",\n // 当前委托还是持有仓位\n selectIndex: 1,\n // 当前tab\n initFutrue: {},\n /// 交割合约\n show: false,\n // popup\n entrustList: [],\n //当前委托订单\n tabType: 1,\n no_zeroList: [],\n //其他非0资产数组\n pairsList: {},\n //当前资产\n // curRequest: [], //\n isShow: false,\n title: 1,\n isSelectShow: false,\n actions: [{\n name: this.$t(\"默认\"),\n value: 0,\n className: \"actions-active\"\n }, {\n name: this.$t(\"展示买单\"),\n value: 1,\n className: \"\"\n }, {\n name: this.$t(\"展示卖单\"),\n value: 2,\n className: \"\"\n }],\n showType: 0,\n sortList: [],\n selectValue: 0,\n coinPrice: 0\n };\n },\n async created() {\n if (!this.coinList.length) {\n await this.SET_COIN_LIST();\n }\n },\n methods: {\n ...mapActions(\"home\", [SET_COIN_LIST]),\n onUpdate(symbol) {\n // 更新\n this.symbol = symbol;\n this.closeSocket();\n this.init(symbol);\n },\n getCoinPrce(val) {\n _getHomeList(val).then(res => {\n this.coinPrice = res[0].close;\n });\n },\n tabClick(type) {\n this.tabType = type;\n if (type == 2 && !this.userInfo.token) {\n this.$router.push(\"/login\");\n return;\n }\n this.entrustList = [];\n this.getOrderList();\n },\n onOrdered(evt) {\n // 下单过后的回调\n this.clearTimer();\n // this.clearTimeout()\n this.initParam(this.symbol, evt); // 重新初始化\n //console.log('下单后更新数据')\n },\n onTab(evt) {\n // 点击tab后的回调\n console.log(\"evt\", evt);\n this.clearTimer();\n // this.clearTimeout()\n this.curTab = evt;\n this[evt](this.symbol);\n },\n handleQoutes(data) {\n if (data && data.length) {\n const cur = data[0];\n this.price = cur.close;\n this.range = cur.change_ratio + \"\";\n this.quote = cur;\n this.updateKey++;\n }\n },\n startQuoteSocket() {\n // 行情socket\n console.log(\"symbol\", this.symbol);\n if (!this.symbol) {\n return;\n }\n this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`);\n this.socket.onmessage = evt => {\n const {\n data\n } = evt;\n const {\n code,\n data: _data\n } = JSON.parse(data);\n if (code / 1 === 0) {\n this.handleQoutes(_data);\n }\n };\n },\n initParam(symbol, type) {\n // 初始化参数\n if (type === \"open\" || !type) {\n //console.log('开仓数据')\n Axios.tradeBuyToken({}).then(res => {\n this.initOpen = res.data;\n console.log(this.initOpen.volume, res.data.volume, type);\n });\n }\n if (type === \"close\" || !type) {\n Axios.tradeSellToken({\n symbol\n }).then(res => {\n this.initClose = res.data;\n });\n }\n this.getWallet();\n if (this.userInfo.token) {\n this.getOrderList();\n }\n },\n init(symbol) {\n // 初始化页面\n this.symbol = symbol.toLowerCase();\n if (!this.socket) {\n this.startQuoteSocket();\n }\n this.initParam(symbol); // 'open'\n this.clearTimer();\n this.getCoinPrce(symbol);\n },\n closeSocket() {\n this.socket && this.socket.close();\n this.socket = null;\n },\n clearTimer() {\n clearInterval(this.timer);\n this.timer = null;\n },\n tradeBuy() {\n Axios.tradeBuy({\n volume: 1,\n session_token: \"\",\n symbol: \"\",\n price: 1,\n order_price_type: \"\" //limit限价 opponent市价\n }).then(res => {\n console.log(res);\n }).catch(error => {\n if (error.code === \"ECONNABORTED\") {\n this.$toast(this.$t(\"网络超时！\"));\n } else if (error.msg !== undefined) {\n this.$toast(this.$t(error.msg));\n }\n });\n },\n getOrderList() {\n TradeApi.tradeRecord({\n page_no: 1,\n symbol: this.$route.params.symbol,\n type: this.tabType == 1 ? \"orders\" : \"hisorders\"\n }).then(res => {\n console.log(res.data);\n this.entrustList = res.data;\n }).catch(() => {});\n },\n cancelOrder(order) {\n TradeApi.tradeCancel({\n order_no: order\n }).then(res => {\n this.initParam(this.symbol);\n this.$toast(this.$t(\"成功\"));\n }).catch(() => {});\n },\n getWallet() {\n TradeApi.getPairs({\n pairs: `${this.symbol}/usdt`\n }).then(res => {\n this.pairsList = res.data.pairs;\n this.no_zeroList = res.data.no_zero;\n });\n },\n goHistory() {\n this.$router.push(`/tradeRecord/${this.symbol}`);\n },\n //价格类型下拉框切换\n selectBtn() {\n this.isShow = !this.isShow;\n },\n //选择价格类型\n selectItem(item) {\n this.title = item.name;\n this.isShow = false;\n this.selectValue = item.value;\n },\n onSelect(item) {\n this.showType = item.value;\n this.actions.map(item => {\n item.className = \"\";\n });\n item.className = \"actions-active\";\n },\n onCancel() {\n this.isSelectShow = false;\n },\n getList(val) {\n if (val.numberLength <= 2) {\n this.title = val.arry[0].name;\n } else {\n this.title = val.arry[val.arry.length - 1].name;\n }\n this.sortList = val.arry;\n }\n },\n beforeRouteEnter(to, from, next) {\n let {\n params: {\n symbol\n }\n } = to;\n console.log(\"to\", to);\n let catchTradeSymbol = getStorage(\"tradeSymbol\");\n if (catchTradeSymbol) {\n symbol = catchTradeSymbol;\n }\n console.log(catchTradeSymbol);\n if (symbol) {\n next(vm => {\n vm.symbol = symbol;\n vm.init(symbol);\n });\n } else {\n next();\n }\n },\n activated() {\n // if (!this.socket) {\n // this.startQuoteSocket()\n // }\n },\n deactivated() {\n this.closeSocket();\n this.clearTimer();\n },\n beforeDestroy() {\n this.closeSocket();\n // this.clearTimeout(true)\n this.clearTimer();\n }\n};","map":{"version":3,"names":["TradeHead","TradeOrderArea","TradeDeepData","EntrustItem","KLineCharts","historyItem","Axios","_getHomeList","mapActions","mapGetters","SET_COIN_LIST","WS_URL","HOST_URL","TradeApi","getStorage","name","components","_Popup","_Swipe","_SwipeItem","_Circle","_Icon","_ActionSheet","computed","coinList","currency","data","initArr","i","push","volume","price","quote","showCharts","updateKey","initTimer","keyIndex","timeout","timer","timer2","symbol","range","initOpen","initClose","asks","bids","orderCur","orderHold","futrueHold","futrueHistroy","socket","sockets","quotes","deep","curTab","selectIndex","initFutrue","show","entrustList","tabType","no_zeroList","pairsList","isShow","title","isSelectShow","actions","$t","value","className","showType","sortList","selectValue","coinPrice","created","length","methods","onUpdate","closeSocket","init","getCoinPrce","val","then","res","close","tabClick","type","userInfo","token","$router","getOrderList","onOrdered","evt","clearTimer","initParam","onTab","console","log","handleQoutes","cur","change_ratio","startQuoteSocket","WebSocket","onmessage","code","_data","JSON","parse","tradeBuyToken","tradeSellToken","getWallet","toLowerCase","clearInterval","tradeBuy","session_token","order_price_type","catch","error","$toast","msg","undefined","tradeRecord","page_no","$route","params","cancelOrder","order","tradeCancel","order_no","getPairs","pairs","no_zero","goHistory","selectBtn","selectItem","item","onSelect","map","onCancel","getList","numberLength","arry","beforeRouteEnter","to","from","next","catchTradeSymbol","vm","activated","deactivated","beforeDestroy"],"sources":["src/page/trade/index.vue"],"sourcesContent":["<template>\n <div class=\"pb-108 no_touch trade\">\n <!-- <div class=\"px-30 pt-20\">\n <div class=\"flex h-88 w-full box-border border-solid-grey rounded-lg\">\n <div @click=\"$router.push('/exchange/exchangePage')\"\n class=\"font-bold font-32 flex justify-center items-center flex-1\">\n <span class=\"h-60 lh-60 font-16 px-40 borderColor rounded-lg textColor\">{{ $t('闪兑') }}</span>\n </div>\n <div class=\"font-bold flex font-32 justify-center items-center flex-1\">\n <span class=\"h-60 lh-60 btnMain px-40 rounded-lg text-white font-16\">{{ $t('现货') }}</span>\n </div>\n <div @click=\"$router.push({ path: '/wantBuy', query: { frompath: `/trade/${symbol}` } })\"\n class=\"font-bold font-32 flex justify-center items-center flex-1\">\n <span class=\"h-60 lh-60 font-16 px-40 borderColor rounded-lg textColor\">c2c</span>\n </div>\n </div>\n </div> -->\n <!-- :key=\"symbol\"-->\n <!-- 头部区 -->\n <trade-head\n :backFunc=\"() => $router.push('/')\"\n :symbol=\"symbol\"\n :price=\"price\"\n :range=\"range\"\n :isTrade=\"true\"\n @update-coin=\"onUpdate\"\n @data=\"quote = $event\"\n />\n\n <div class=\"trade-buy-sell flex justify-between px-30 py-30\">\n <keep-alive>\n <trade-deep-data\n :selectValue=\"selectValue\"\n @getList=\"getList\"\n :showType=\"showType\"\n :symbol=\"symbol\"\n v-if=\"symbol\"\n :price=\"price\"\n class=\"w-290 mr-30\"\n />\n </keep-alive>\n <trade-order-area\n :symbol=\"symbol\"\n :init-open=\"initOpen\"\n :init-close=\"initClose\"\n :price=\"price\"\n @ordered=\"onOrdered\"\n />\n </div>\n\n <!-- 2222 -->\n <!-- <div class=\"flex k-select-box\">\n <div class=\"mt-20 mb-22 select-box\" style=\"position: relative\">\n <div\n class=\"flex justify-between items-center w-full h-70\"\n @click=\"selectBtn\"\n >\n <div class=\"pl-16 textColor\" style=\"width: 80%\">{{ title }}</div>\n <img\n src=\"@/assets/image/public/grey-select.png\"\n alt=\"select-icon\"\n class=\"w-22 h-11 pr-20\"\n />\n </div>\n <div class=\"option-box\" v-show=\"isShow\">\n <div\n class=\"font-30\"\n v-for=\"(item, index) in sortList\"\n :key=\"index\"\n @click=\"selectItem(item)\"\n >\n {{ item.name }}\n </div>\n </div>\n </div>\n <div @click=\"isSelectShow = true\">\n <img\n src=\"@/assets/image/selectIcon.png\"\n alt=\"warn-icon\"\n class=\"w-36 h-30\"\n />\n </div>\n </div> -->\n <!-- <div class=\"h-16 diviLine\"></div> -->\n <div>\n <div class=\"flex justify-between pb-20 border-b-color items-center\">\n <div class=\"flex pl-30\">\n <template>\n <div\n class=\"px-10 py-10 flex items-center text-grey\"\n @click=\"tabClick('1')\"\n :class=\"tabType == '1' ? 'active-line' : ''\"\n >\n {{ $t(\"当前委托\")\n }}<span v-if=\"tabType == '1'\">({{ entrustList.length }})</span>\n </div>\n <div\n class=\"px-10 ml-50 py-10 flex items-center text-grey\"\n @click=\"tabClick('3')\"\n :class=\"tabType == '3' ? 'active-line' : ''\"\n >\n {{ $t(\"历史委托\") }}\n </div>\n <div\n class=\"px-10 py-10 flex items-center ml-50 text-grey\"\n @click=\"tabClick('2')\"\n :class=\"tabType == '2' ? 'active-line' : ''\"\n >\n {{ $t(\"资产\") }}\n </div>\n </template>\n </div>\n <img\n src=\"../../assets/image/public/record.png\"\n alt=\"record-img\"\n class=\"w-32 h-35 pr-30\"\n @click=\"goHistory\"\n />\n </div>\n </div>\n <div class=\"pl-32 pr-32 pb-100\" v-if=\"tabType == '1'\">\n <entrust-item\n v-for=\"item in entrustList\"\n :key=\"item.order_no\"\n :entrust=\"item\"\n state=\"submitted\"\n @cancelOrder=\"cancelOrder\"\n />\n </div>\n <div class=\"pl-32 pr-32 pb-100\" v-else-if=\"tabType == '3'\">\n <history-item\n v-for=\"item in entrustList\"\n :key=\"item.order_no\"\n :coinPrice=\"coinPrice\"\n :entrust=\"item\"\n :state=\"item.state\"\n @cancelOrder=\"cancelOrder\"\n />\n </div>\n <div class=\"pl-32 pr-32\" v-else>\n <div class=\"mb-20 border-b\">\n <p class=\"font-28 text-grey mt-24 mb-42\">{{ $t(\"当前币对资产\") }}</p>\n <ul>\n <li\n v-for=\"item in pairsList\"\n :key=\"item.symbol\"\n class=\"flex justify-between py-10\"\n >\n <div class=\"flex items-center\">\n <img\n :src=\"\n item.symbol\n ? `${HOST_URL}/wap/symbol/${item.symbol}.png`\n : require('@/assets/loading-default.png')\n \"\n class=\"w-52 h-52 rounded-full mr-16\"\n />\n <p class=\"flex flex-col\">\n <strong class=\"font-28 textColor mb-6\">{{\n item.symbol.toUpperCase()\n }}</strong>\n <span class=\"font-20 text-grey\">{{ item.full_name }}</span>\n </p>\n </div>\n <div class=\"flex flex-col items-end text-grey\">\n <strong class=\"font-28 textColor mb-6\">{{ item.volume }}</strong>\n <span class=\"font-20 text-grey\">\n {{ currency.currency_symbol }}\n {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : \"0.0\" }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n <div class=\"mb-60 border-b\">\n <p class=\"font-28 text-grey mt-24 mb-42\">{{ $t(\"其他非0资产\") }}</p>\n <ul>\n <li\n v-for=\"item in no_zeroList\"\n :key=\"item.symbol\"\n class=\"flex justify-between py-10\"\n >\n <div class=\"flex items-center\">\n <img\n :src=\"\n item.symbol\n ? `${HOST_URL}/wap/symbol/${item.symbol}.png`\n : require('@/assets/loading-default.png')\n \"\n class=\"w-52 h-52 rounded-full mr-16\"\n />\n <p class=\"flex flex-col\">\n <strong class=\"font-28 textColor mb-6\">{{\n item.symbol.toUpperCase()\n }}</strong>\n <span class=\"font-20 text-grey\">{{ item.full_name }}</span>\n </p>\n </div>\n <div class=\"flex flex-col items-end\">\n <strong class=\"font-28 textColor mb-6\">{{ item.volume }}</strong>\n <span class=\"font-20 text-grey\">\n {{ currency.currency_symbol }}\n {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : \"0.0\" }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </div>\n <div\n v-if=\"tabType == '1' && !entrustList.length\"\n class=\"flex flex-col justify-center items-center pt-185 pb-100\"\n >\n <img\n src=\"@/assets/image/assets-center/no-data.png\"\n alt=\"no-date\"\n class=\"w-180 h-180\"\n />\n <p class=\"textColor\">{{ $t(\"暂无数据\") }}</p>\n </div>\n <div class=\"fixed w-full shadow z-10 tabBackground1\">\n <div class=\"flex justify-between px-30 py-10\">\n <span class=\"font-24 textColor2\"\n >{{ symbol.toUpperCase() }}/USDT {{ $t(\"k线图表\") }}</span\n >\n <van-icon\n class=\"textColor\"\n @click.stop=\"showCharts = !showCharts\"\n :name=\"showCharts ? 'arrow-down' : 'arrow-up'\"\n ></van-icon>\n </div>\n <k-line-charts\n :update-key=\"updateKey\"\n :update-data=\"quote\"\n :symbol=\"symbol\"\n v-if=\"symbol && showCharts\"\n :showBottom=\"false\"\n />\n </div>\n <van-action-sheet\n v-model=\"isSelectShow\"\n @select=\"onSelect\"\n :actions=\"actions\"\n :cancel-text=\"$t('取消')\"\n close-on-click-action\n @cancel=\"onCancel\"\n />\n </div>\n</template>\n\n<script>\nimport TradeHead from \"@/components/trade-head/index.vue\";\nimport TradeOrderArea from \"@/components/trade-order-area/index.vue\";\nimport TradeDeepData from \"@/components/trade-deep-data/index.vue\";\nimport EntrustItem from \"@/components/entrust-item\";\nimport KLineCharts from \"@/components/kline-charts\";\nimport historyItem from \"@/components/history-item\";\n\nimport Axios from \"@/API/trading\";\nimport { _getHomeList } from \"@/API/home.api\";\nimport { Popup, Swipe, SwipeItem, Circle, Icon, ActionSheet } from \"vant\";\nimport { mapActions, mapGetters } from \"vuex\";\nimport { SET_COIN_LIST } from \"@/store/const.store\";\nimport { WS_URL, HOST_URL } from \"@/config\";\nimport TradeApi from \"@/API/trading.js\";\nimport { getStorage } from \"@/utils/utis\";\n\nexport default {\n name: \"TradePage\",\n components: {\n TradeHead,\n TradeOrderArea,\n TradeDeepData,\n [Popup.name]: Popup,\n [Swipe.name]: Swipe,\n [SwipeItem.name]: SwipeItem,\n [Circle.name]: Circle,\n [Icon.name]: Icon,\n [ActionSheet.name]: ActionSheet,\n EntrustItem,\n KLineCharts,\n historyItem,\n },\n computed: {\n ...mapGetters(\"user\", [\"userInfo\"]),\n ...mapGetters({\n coinList: \"home/coinList\",\n currency: \"home/currency\",\n }),\n },\n data() {\n const initArr = [];\n for (let i = 0; i < 8; i++) {\n initArr.push({\n volume: \"--\",\n price: \"--\",\n });\n }\n return {\n HOST_URL,\n quote: {},\n showCharts: false,\n updateKey: 1,\n initTimer: null,\n keyIndex: 0,\n timeout: null,\n timer: null, // 底部持仓等的公用定时器\n timer2: null, // 交割合约底部持仓等的公用定时器\n symbol: \"\",\n price: \"\",\n range: \"\",\n initOpen: {},\n initClose: {},\n asks: initArr, // 卖单\n bids: initArr, // 买单\n orderCur: [], // 当前委托\n orderHold: [], // 持有仓位\n futrueHold: [], // 交割持仓\n futrueHistroy: [], // 交割历史\n socket: null, // 行情\n sockets: {\n quotes: null, // 行情\n deep: null, /// 深度\n },\n curTab: \"\", // 当前委托还是持有仓位\n selectIndex: 1, // 当前tab\n initFutrue: {}, /// 交割合约\n show: false, // popup\n entrustList: [], //当前委托订单\n tabType: 1,\n no_zeroList: [], //其他非0资产数组\n pairsList: {}, //当前资产\n // curRequest: [], //\n isShow: false,\n title: 1,\n isSelectShow: false,\n actions: [\n { name: this.$t(\"默认\"), value: 0, className: \"actions-active\" },\n { name: this.$t(\"展示买单\"), value: 1, className: \"\" },\n { name: this.$t(\"展示卖单\"), value: 2, className: \"\" },\n ],\n showType: 0,\n sortList: [],\n selectValue: 0,\n coinPrice: 0,\n };\n },\n async created() {\n if (!this.coinList.length) {\n await this.SET_COIN_LIST();\n }\n },\n methods: {\n ...mapActions(\"home\", [SET_COIN_LIST]),\n onUpdate(symbol) {\n // 更新\n this.symbol = symbol;\n this.closeSocket();\n this.init(symbol);\n },\n getCoinPrce(val) {\n _getHomeList(val).then((res) => {\n this.coinPrice = res[0].close;\n });\n },\n tabClick(type) {\n this.tabType = type;\n if (type == 2 && !this.userInfo.token) {\n this.$router.push(\"/login\");\n return;\n }\n this.entrustList = [];\n this.getOrderList();\n },\n onOrdered(evt) {\n // 下单过后的回调\n this.clearTimer();\n // this.clearTimeout()\n this.initParam(this.symbol, evt); // 重新初始化\n //console.log('下单后更新数据')\n },\n onTab(evt) {\n // 点击tab后的回调\n console.log(\"evt\", evt);\n this.clearTimer();\n // this.clearTimeout()\n this.curTab = evt;\n this[evt](this.symbol);\n },\n handleQoutes(data) {\n if (data && data.length) {\n const cur = data[0];\n this.price = cur.close;\n this.range = cur.change_ratio + \"\";\n this.quote = cur;\n this.updateKey++;\n }\n },\n startQuoteSocket() {\n // 行情socket\n console.log(\"symbol\", this.symbol);\n if (!this.symbol) {\n return;\n }\n this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`);\n this.socket.onmessage = (evt) => {\n const { data } = evt;\n const { code, data: _data } = JSON.parse(data);\n if (code / 1 === 0) {\n this.handleQoutes(_data);\n }\n };\n },\n initParam(symbol, type) {\n // 初始化参数\n if (type === \"open\" || !type) {\n //console.log('开仓数据')\n Axios.tradeBuyToken({}).then((res) => {\n this.initOpen = res.data;\n console.log(this.initOpen.volume, res.data.volume, type);\n });\n }\n if (type === \"close\" || !type) {\n Axios.tradeSellToken({\n symbol,\n }).then((res) => {\n this.initClose = res.data;\n });\n }\n this.getWallet();\n if (this.userInfo.token) {\n this.getOrderList();\n }\n },\n init(symbol) {\n // 初始化页面\n this.symbol = symbol.toLowerCase();\n if (!this.socket) {\n this.startQuoteSocket();\n }\n this.initParam(symbol); // 'open'\n this.clearTimer();\n this.getCoinPrce(symbol);\n },\n closeSocket() {\n this.socket && this.socket.close();\n this.socket = null;\n },\n clearTimer() {\n clearInterval(this.timer);\n this.timer = null;\n },\n tradeBuy() {\n Axios.tradeBuy({\n volume: 1,\n session_token: \"\",\n symbol: \"\",\n price: 1,\n order_price_type: \"\", //limit限价 opponent市价\n })\n .then((res) => {\n console.log(res);\n })\n .catch((error) => {\n if (error.code === \"ECONNABORTED\") {\n this.$toast(this.$t(\"网络超时！\"));\n } else if (error.msg !== undefined) {\n this.$toast(this.$t(error.msg));\n }\n });\n },\n getOrderList() {\n TradeApi.tradeRecord({\n page_no: 1,\n symbol: this.$route.params.symbol,\n type: this.tabType == 1 ? \"orders\" : \"hisorders\",\n })\n .then((res) => {\n console.log(res.data);\n this.entrustList = res.data;\n })\n .catch(() => {});\n },\n cancelOrder(order) {\n TradeApi.tradeCancel({\n order_no: order,\n })\n .then((res) => {\n this.initParam(this.symbol);\n this.$toast(this.$t(\"成功\"));\n })\n .catch(() => {});\n },\n getWallet() {\n TradeApi.getPairs({\n pairs: `${this.symbol}/usdt`,\n }).then((res) => {\n this.pairsList = res.data.pairs;\n this.no_zeroList = res.data.no_zero;\n });\n },\n goHistory() {\n this.$router.push(`/tradeRecord/${this.symbol}`);\n },\n //价格类型下拉框切换\n selectBtn() {\n this.isShow = !this.isShow;\n },\n //选择价格类型\n selectItem(item) {\n this.title = item.name;\n this.isShow = false;\n this.selectValue = item.value;\n },\n onSelect(item) {\n this.showType = item.value;\n this.actions.map((item) => {\n item.className = \"\";\n });\n item.className = \"actions-active\";\n },\n onCancel() {\n this.isSelectShow = false;\n },\n getList(val) {\n if (val.numberLength <= 2) {\n this.title = val.arry[0].name;\n } else {\n this.title = val.arry[val.arry.length - 1].name;\n }\n this.sortList = val.arry;\n },\n },\n beforeRouteEnter(to, from, next) {\n let {\n params: { symbol },\n } = to;\n console.log(\"to\", to);\n let catchTradeSymbol = getStorage(\"tradeSymbol\");\n if (catchTradeSymbol) {\n symbol = catchTradeSymbol;\n }\n console.log(catchTradeSymbol);\n if (symbol) {\n next((vm) => {\n vm.symbol = symbol;\n vm.init(symbol);\n });\n } else {\n next();\n }\n },\n activated() {\n // if (!this.socket) {\n // this.startQuoteSocket()\n // }\n },\n deactivated() {\n this.closeSocket();\n this.clearTimer();\n },\n beforeDestroy() {\n this.closeSocket();\n // this.clearTimeout(true)\n this.clearTimer();\n },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n//.list-enter-active, .list-leave-active {\n// transition: all .5s;\n// transform: translateY(30px)\n//}\n//.list-enter, .list-leave-to\n// /* .list-leave-active for below version 2.1.8 */ {\n// transform: translateY(0)\n//}\n\n.no_touch {\n -webkit-user-select: none;\n user-select: none;\n -ms-user-select: none;\n -moz-user-select: none;\n\n @include themify() {\n background: themed(\"main_background\");\n }\n\n min-height: 100vh;\n}\n\n.list-enter-active,\n.list-leave-active {\n will-change: transform;\n transition: all 250ms;\n}\n\n.list-enter {\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n}\n\n.list-leave {\n opacity: 0;\n transform: translate3d(100%, 0, 0);\n}\n\n.rounded-view {\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n padding: 0 30px;\n box-sizing: border-box;\n}\n\n.my-swipe {\n width: 100%;\n}\n\n.active-line {\n position: relative;\n // padding: 15px 0;\n color: #9691fa;\n font-weight: 600;\n box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);\n\n @include themify() {\n // background-color: themed(\"color_main\");\n }\n}\n\n// .active-line::after {\n// content: '';\n// position: absolute;\n// left: 50%;\n// transform: translateX(-50%);\n// bottom: 0;\n// right: 0;\n// width: 280px;\n// height: 8px;\n// @include themify() {\n// background-color: themed(\"color_main\");\n// }\n// }\n\n.shadow {\n bottom: 108px;\n box-sizing: border-box;\n}\n\n// .textColor {\n// color: #DAD5DC;\n// }\n\n.borderColor,\n.border-solid-grey {\n @include themify() {\n border: 1px solid themed(\"border_color\");\n }\n}\n\n.tabBackground1 {\n @include themify() {\n border: 1px solid themed(\"border_color1\");\n }\n}\n\n// 下拉\n.option-box {\n position: absolute;\n left: 0;\n right: 0;\n top: 90px;\n width: 100%;\n\n @include themify() {\n background: themed(\"grey_bg\");\n }\n\n text-align: center;\n border-radius: 4px;\n\n @include themify() {\n color: themed(\"text_color3\");\n }\n\n z-index: 10;\n}\n\n.option-box > div {\n padding: 30px 0;\n}\n\n.option-box > div:hover {\n // background-color: #F5F5F5;\n}\n\n.k-select-box {\n position: relative;\n top: -130px;\n // justify-content: flex-end;\n padding: 0 30px;\n align-items: center;\n\n .select-box {\n width: 220px;\n\n @include themify() {\n background: themed(\"input_background\");\n }\n\n margin-right: 20px;\n }\n}\n\n.van-popup {\n @include themify() {\n background: themed(\"color_main\");\n }\n}\n\n.actions-active {\n @include themify() {\n background: themed(\"color_main\") !important;\n }\n}\n\n.trade {\n ::v-deep .van-action-sheet__item,\n ::v-deep .van-action-sheet__cancel {\n @include themify() {\n background: themed(\"input_background1\");\n }\n\n @include themify() {\n color: themed(\"text_color\");\n }\n }\n\n ::v-deep .van-action-sheet__gap {\n @include themify() {\n background: themed(\"cont_background\");\n }\n }\n}\n</style>\n\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
