From 4702be083e8b554eb3037f0ecc0b4ba1d04c2406 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Sun, 18 May 2025 17:16:48 +0800
Subject: [PATCH] 解决交易和合约切换值不同步的问题
---
src/page/safety/index.vue | 4
src/components/list-quotation/index.vue | 4
src/page/trade/index.vue | 1152 ++++++++++++++++++++-----------------
src/page/perpetualContract/index.vue | 15
src/utils/utis.js | 1
src/components/trade-head/index.vue | 602 ++++++++++---------
src/components/footer/index.vue | 2
7 files changed, 973 insertions(+), 807 deletions(-)
diff --git a/src/components/footer/index.vue b/src/components/footer/index.vue
index 48c4ea8..63782c4 100644
--- a/src/components/footer/index.vue
+++ b/src/components/footer/index.vue
@@ -30,7 +30,7 @@
name="/trade/btc"
:to="{
name: 'Trade',
- params: { symbol: getStorage('tradeSymbol') || 'btc' },
+ params: { symbol: getStorage('symbol') || 'btc' },
}"
>
<span>{{ $t("交易") }}</span>
diff --git a/src/components/list-quotation/index.vue b/src/components/list-quotation/index.vue
index 6b50b32..f9a3baf 100644
--- a/src/components/list-quotation/index.vue
+++ b/src/components/list-quotation/index.vue
@@ -244,7 +244,7 @@
onItemClick(item) {
setStorage("symbolname", item.name);
if (this.tabActive == 2) {
- setStorage("tradeSymbol", item.symbol);
+ setStorage("symbol", item.symbol);
//现货
this.$router.push({
path: `/trade/${item.symbol}`,
@@ -255,7 +255,7 @@
// this.$router.push({
// path: `/perpetualContract/${item.symbol}`,
// });
- setStorage("tradeSymbol", item.symbol);
+ setStorage("symbol", item.symbol);
this.$router.push({
path: `/trade/${item.symbol}`,
query: { name: item.name },
diff --git a/src/components/trade-head/index.vue b/src/components/trade-head/index.vue
index c4aff36..9577176 100644
--- a/src/components/trade-head/index.vue
+++ b/src/components/trade-head/index.vue
@@ -1,310 +1,366 @@
<template>
- <!-- 永续合约，交割合约公共头部 -->
- <div>
- <div class="contract-header ">
- <div class="pl-30 pr-30">
- <div class="flex justify-between pt-45">
- <div class="flex">
- <img v-if="isReturn" :src="require(`@/assets/theme/${theme}/image/icon_back.png`)"
- class="w-40 h-40 back mr-50" alt=""
- @click="kineType ? $router.push(`/trade/${symbol}`) : $router.push(`/perpetualContract/${symbol}`)">
- <img :src="require(`@/assets/theme/${theme}/image/convert.png`)" alt="convert-img" class="w-35 h-35"
- @click="onSidebar" />
- <div class="flex flex-col pl-21" @click="onSidebar">
- <div class="font-35 textColor">{{ symbolname || '--' }}</div>
- </div>
- <div v-if="range" class="pl-30" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{
- range > 0 ? '+' : '' }}{{ range || '--' }}%</div>
- </div>
- <div class="flex items-center" v-if="islevel">
- <img @click="changeModel()" class="w-32 h-35"
- :src="require(`@/assets/theme/${theme}/image/sun.png`)" alt="" />
- <img :src="require(`@/assets/image/icon-star${collected === '1' ? '_active' : ''}.png`)"
- class="w-30 h-30 mr-10 ml-20" @click="onCollect" />
- <img src="@/assets/image/public/record.png" class="w-32 h-35 ml-20" @click="openRecord()" />
- </div>
- <img v-if="isTrade" :src="require(`@/assets/theme/${theme}/image/kline.png`)" class="w-44 h-44 right"
- alt="" @click="$router.push(`/trendDetails/${symbol}?kineType=trade`)">
- </div>
+ <!-- 永续合约，交割合约公共头部 -->
+ <div>
+ <div class="contract-header">
+ <div class="pl-30 pr-30">
+ <div class="flex justify-between pt-45">
+ <div class="flex">
+ <img
+ v-if="isReturn"
+ :src="require(`@/assets/theme/${theme}/image/icon_back.png`)"
+ class="w-40 h-40 back mr-50"
+ alt=""
+ @click="
+ kineType
+ ? $router.push(`/trade/${symbol}`)
+ : $router.push(`/perpetualContract/${symbol}`)
+ "
+ />
+ <img
+ :src="require(`@/assets/theme/${theme}/image/convert.png`)"
+ alt="convert-img"
+ class="w-35 h-35"
+ @click="onSidebar"
+ />
+ <div class="flex flex-col pl-21" @click="onSidebar">
+ <div class="font-35 textColor">{{ symbolname || "--" }}</div>
</div>
+ <div
+ v-if="range"
+ class="pl-30"
+ :class="{ 'text-green': range > 0, 'text-red': range <= 0 }"
+ >
+ {{ range > 0 ? "+" : "" }}{{ range || "--" }}%
+ </div>
+ </div>
+ <div class="flex items-center" v-if="islevel">
+ <img
+ @click="changeModel()"
+ class="w-32 h-35"
+ :src="require(`@/assets/theme/${theme}/image/sun.png`)"
+ alt=""
+ />
+ <img
+ :src="
+ require(`@/assets/image/icon-star${
+ collected === '1' ? '_active' : ''
+ }.png`)
+ "
+ class="w-30 h-30 mr-10 ml-20"
+ @click="onCollect"
+ />
+ <img
+ src="@/assets/image/public/record.png"
+ class="w-32 h-35 ml-20"
+ @click="openRecord()"
+ />
+ </div>
+ <img
+ v-if="isTrade"
+ :src="require(`@/assets/theme/${theme}/image/kline.png`)"
+ class="w-44 h-44 right"
+ alt=""
+ @click="$router.push(`/trendDetails/${symbol}?kineType=trade`)"
+ />
</div>
- <!-- 左侧边弹出菜单 -->
- <van-popup class="popup" round v-model="show" close-icon-position="top-left" position="left" @closed="onClose">
- <div class="pl-42 pr-40">
- <div class="flex justify-between mb-42 mt-53">
- <div class="flex items-center text-grey">
- <div class="mr-12">{{ $t('名称') }}</div>
- </div>
- <div class="flex text-grey">
- <div class="flex items-center">
- <div>{{ $t('最新价格') }}</div>
- </div>
- <div class="flex items-center">
- <div class="mr-12">/24H{{ $t('涨跌') }}</div>
- </div>
- </div>
- </div>
- <div class="flex justify-between mb-50" v-for="item in list" :key="item.name" @click="onRoute(item)">
- <div>
- <div class="font-700 textColor">{{ item.name || '--' }}</div>
- <div v-if="!kineType" class="text-grey mt-10">{{ title }}</div>
- </div>
- <div class="text-right">
- <div class="textColor">{{ item.close || '--' }}</div>
- <div class="mt-10" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">
- {{ item.change_ratio || (item.change_ratio === 0 ? 0 : '--') }}%
- </div>
- </div>
- </div>
- </div>
- </van-popup>
+ </div>
</div>
+ <!-- 左侧边弹出菜单 -->
+ <van-popup
+ class="popup"
+ round
+ v-model="show"
+ close-icon-position="top-left"
+ position="left"
+ @closed="onClose"
+ >
+ <div class="pl-42 pr-40">
+ <div class="flex justify-between mb-42 mt-53">
+ <div class="flex items-center text-grey">
+ <div class="mr-12">{{ $t("名称") }}</div>
+ </div>
+ <div class="flex text-grey">
+ <div class="flex items-center">
+ <div>{{ $t("最新价格") }}</div>
+ </div>
+ <div class="flex items-center">
+ <div class="mr-12">/24H{{ $t("涨跌") }}</div>
+ </div>
+ </div>
+ </div>
+ <div
+ class="flex justify-between mb-50"
+ v-for="item in list"
+ :key="item.name"
+ @click="onRoute(item)"
+ >
+ <div>
+ <div class="font-700 textColor">{{ item.name || "--" }}</div>
+ <div v-if="!kineType" class="text-grey mt-10">{{ title }}</div>
+ </div>
+ <div class="text-right">
+ <div class="textColor">{{ item.close || "--" }}</div>
+ <div
+ class="mt-10"
+ :class="item.change_ratio > 0 ? 'text-green' : 'text-red'"
+ >
+ {{ item.change_ratio || (item.change_ratio === 0 ? 0 : "--") }}%
+ </div>
+ </div>
+ </div>
+ </div>
+ </van-popup>
+ </div>
</template>
-
+
<script>
-import { setStorage } from '@/utils/utis'
+import { setStorage } from "@/utils/utis";
import { Popup } from "vant";
import { mapGetters, mapMutations } from "vuex";
-import { _getHomeList, _collect, _deleteCollect, _checkIsInCollect } from "@/API/home.api";
+import {
+ _getHomeList,
+ _collect,
+ _deleteCollect,
+ _checkIsInCollect,
+} from "@/API/home.api";
export default {
- name: "contractHeader",
- props: {
- tabIndex: {
- type: String,
- default: null
- },
- backFunc: {
- type: Function,
- default: null
- },
- symbol: {
- type: String,
- default: ''
- },
- symbolname: {
- type: String,
- default: '--'
- },
- range: {
- type: String,
- defalult: ''
- },
- islevel: {
- type: Boolean,
- defalult: false
- },
- title: {
- type: String,
- defalult: '--'
- },
- isReturn: {
- type: Boolean,
- defalult: false
- },
- isTrade: {
- type: Boolean,
- defalult: false
- },
- kineType: {
- type: String,
- defalult: ''
- },
+ name: "contractHeader",
+ props: {
+ tabIndex: {
+ type: String,
+ default: null,
},
- components: {
- [Popup.name]: Popup,
+ backFunc: {
+ type: Function,
+ default: null,
},
- computed: {
- ...mapGetters({
- coinList: 'home/coinList',
- theme: 'home/theme'
- }),
+ symbol: {
+ type: String,
+ default: "",
},
- data() {
- const arr = []
- for (let i = 0; i < 10; i++) {
- arr.push({ id: i })
- }
- return {
- // selectIndex2:this.selectIndex,
- show: false,
- timeout: null,
- collected: '0',
- // title: '',
- list: arr, //[
- // { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
- // { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
- // { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
- //]
- }
+ symbolname: {
+ type: String,
+ default: "--",
},
- watch: {
- symbol(val) {
- if (this.islevel) {
- this.$emit('changeLine', true)
- }
- if (this.islevel && this.$store.state.user.userInfo.token) {
- let symbol = this.$route.params.symbol;
- _checkIsInCollect(symbol).then(data => {
- const { status } = data
- this.collected = status
- })
- }
- }
+ range: {
+ type: String,
+ defalult: "",
},
- created() {
- // this.coins = this.coinList.map(item => item.symbol)
- // console.log('this.coins', this.coins)
- if (this.islevel && this.$store.state.user.userInfo.token) {
- let symbol = this.$route.params.symbol;
- _checkIsInCollect(symbol).then(data => {
- const { status } = data
- this.collected = status
- })
- }
+ islevel: {
+ type: Boolean,
+ defalult: false,
},
- methods: {
- ...mapMutations('home', ['SET_THEME']),
- onRoute(item) {
- setStorage('symbolname', item.name)
- if (this.islevel) {
- if (this.$route.params.symbol !== item.symbol) {
- this.$router.push(`/trendDetails/${item.symbol}`)
- if (this.kineType) {
- setStorage('tradeSymbol', item.symbol)
- } else {
- setStorage('symbol', item.symbol)
- }
- this.$emit('update-coin', item.symbol)
- this.onClose()
- this.$forceUpdate()
- }
-
- } else {
- if (this.$route.params.symbol !== item.symbol) {
- // this.$router.push(`/trade/${item.symbol}`)
- this.$router.push({
- path: `/trade/${item.symbol}`,
- query: { name: item.name }
- });
-
- setStorage('tradeSymbol', item.symbol)
- setStorage('symbolname', item.name)
- this.$emit('update-coin', item.symbol)
- this.$forceUpdate()
- }
- }
- this.show = false
- },
- onSidebar() { // 侧边栏打开
- console.log(this.userInfo)
- this.coins = this.coinList.map(item => item.symbol)
- this.show = true
- this.fetchList()
- },
- fetchList() { // 获取行情
- _getHomeList(this.coins.join(',')).then(list => {
- // console.log(list)
- this.list = list
- if (this.timeout) {
- clearTimeout(this.timeout)
- this.timeout = null
- }
- this.timeout = setTimeout(() => {
- this.fetchList()
- }, 1000)
- })
- },
- onClose() {
- if (this.timeout) {
- clearTimeout(this.timeout)
- this.timeout = null
- }
- },
- jump() {
- this.$router.push(`/trendDetails/${this.symbol}`)
- },
- changeTab(index) {
- this.$emit('tab', index)
- // this.selectIndex2 = index;
- },
- goBack() {
- if (this.backFunc) {
- this.backFunc()
- } else {
- this.$router.go(-1);
- }
- },
- goRouter(params) {
- this.$router.push(params);
- },
- onCollect() { // 收藏，取消收藏
- let _api = _collect
- if (this.collected === '1') {
- _api = _deleteCollect
- }
- _api(this.symbol).then((res) => {
- if (this.$store.state.user.userInfo.token) {
- this.collected = this.collected === '1' ? '0' : '1'
- if (this.collected === '1') {
- this.$toast.success(this.$t('收藏成功'))
- } else {
- this.$toast.success(this.$t('取消收藏'))
- }
- }
- })
- },
- goHistory() {
- const url = ((this.tabIndex * 1) == 1) ? 'perpetualHistory' : 'deliveryContractHistory'
- this.$router.push({
- path: `/${url}?symbol=${this.symbol}`
- });
- },
- changeModel() {
- let type = ''
- if (this.theme == 'light') {
- type = 'dark'
- } else {
- type = 'light'
- }
- this.SET_THEME(type)
- },
- //打开订单
- openRecord() {
- this.$emit('openRecord')
- }
-
+ title: {
+ type: String,
+ defalult: "--",
+ },
+ isReturn: {
+ type: Boolean,
+ defalult: false,
+ },
+ isTrade: {
+ type: Boolean,
+ defalult: false,
+ },
+ kineType: {
+ type: String,
+ defalult: "",
+ },
+ },
+ components: {
+ [Popup.name]: Popup,
+ },
+ computed: {
+ ...mapGetters({
+ coinList: "home/coinList",
+ theme: "home/theme",
+ }),
+ },
+ data() {
+ const arr = [];
+ for (let i = 0; i < 10; i++) {
+ arr.push({ id: i });
}
-}
+ return {
+ // selectIndex2:this.selectIndex,
+ show: false,
+ timeout: null,
+ collected: "0",
+ // title: '',
+ list: arr, //[
+ // { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
+ // { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
+ // { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
+ //]
+ };
+ },
+ watch: {
+ symbol(val) {
+ if (this.islevel) {
+ this.$emit("changeLine", true);
+ }
+ if (this.islevel && this.$store.state.user.userInfo.token) {
+ let symbol = this.$route.params.symbol;
+ _checkIsInCollect(symbol).then((data) => {
+ const { status } = data;
+ this.collected = status;
+ });
+ }
+ },
+ },
+ created() {
+ // this.coins = this.coinList.map(item => item.symbol)
+ // console.log('this.coins', this.coins)
+ if (this.islevel && this.$store.state.user.userInfo.token) {
+ let symbol = this.$route.params.symbol;
+ _checkIsInCollect(symbol).then((data) => {
+ const { status } = data;
+ this.collected = status;
+ });
+ }
+ },
+ methods: {
+ ...mapMutations("home", ["SET_THEME"]),
+ onRoute(item) {
+ setStorage("symbolname", item.name);
+ if (this.islevel) {
+ if (this.$route.params.symbol !== item.symbol) {
+ this.$router.push(`/trendDetails/${item.symbol}`);
+ if (this.kineType) {
+ setStorage("symbol", item.symbol);
+ } else {
+ setStorage("symbol", item.symbol);
+ }
+ this.$emit("update-coin", item.symbol);
+ this.onClose();
+ this.$forceUpdate();
+ }
+ } else {
+ if (this.$route.params.symbol !== item.symbol) {
+ // this.$router.push(`/trade/${item.symbol}`)
+ this.$router.push({
+ path: `/trade/${item.symbol}`,
+ query: { name: item.name },
+ });
+ setStorage("symbol", item.symbol);
+ setStorage("symbolname", item.name);
+ this.$emit("update-coin", item.symbol);
+ this.$forceUpdate();
+ }
+ }
+ this.show = false;
+ },
+ onSidebar() {
+ // 侧边栏打开
+ console.log(this.userInfo);
+ this.coins = this.coinList.map((item) => item.symbol);
+ this.show = true;
+ this.fetchList();
+ },
+ fetchList() {
+ // 获取行情
+ _getHomeList(this.coins.join(",")).then((list) => {
+ // console.log(list)
+ this.list = list;
+ if (this.timeout) {
+ clearTimeout(this.timeout);
+ this.timeout = null;
+ }
+ this.timeout = setTimeout(() => {
+ this.fetchList();
+ }, 1000);
+ });
+ },
+ onClose() {
+ if (this.timeout) {
+ clearTimeout(this.timeout);
+ this.timeout = null;
+ }
+ },
+ jump() {
+ this.$router.push(`/trendDetails/${this.symbol}`);
+ },
+ changeTab(index) {
+ this.$emit("tab", index);
+ // this.selectIndex2 = index;
+ },
+ goBack() {
+ if (this.backFunc) {
+ this.backFunc();
+ } else {
+ this.$router.go(-1);
+ }
+ },
+ goRouter(params) {
+ this.$router.push(params);
+ },
+ onCollect() {
+ // 收藏，取消收藏
+ let _api = _collect;
+ if (this.collected === "1") {
+ _api = _deleteCollect;
+ }
+ _api(this.symbol).then((res) => {
+ if (this.$store.state.user.userInfo.token) {
+ this.collected = this.collected === "1" ? "0" : "1";
+ if (this.collected === "1") {
+ this.$toast.success(this.$t("收藏成功"));
+ } else {
+ this.$toast.success(this.$t("取消收藏"));
+ }
+ }
+ });
+ },
+ goHistory() {
+ const url =
+ this.tabIndex * 1 == 1 ? "perpetualHistory" : "deliveryContractHistory";
+ this.$router.push({
+ path: `/${url}?symbol=${this.symbol}`,
+ });
+ },
+ changeModel() {
+ let type = "";
+ if (this.theme == "light") {
+ type = "dark";
+ } else {
+ type = "light";
+ }
+ this.SET_THEME(type);
+ },
+ //打开订单
+ openRecord() {
+ this.$emit("openRecord");
+ },
+ },
+};
</script>
-
+
<style lang="scss" scoped>
// .contract-header{
// background-color:#F5F5F5;
// }
.wallet-background {
- background-color: #E8E8E8;
+ background-color: #e8e8e8;
}
-
.no-select {
- background-color: #e8e8e8;
- color: #868D9A;
+ background-color: #e8e8e8;
+ color: #868d9a;
}
// 弹出层样式
.popup {
- height: 100%;
- width: 670px;
+ height: 100%;
+ width: 670px;
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
}
.night {
- color: #fff;
+ color: #fff;
}
</style>
-
\ No newline at end of file
diff --git a/src/page/perpetualContract/index.vue b/src/page/perpetualContract/index.vue
index 20ac0c6..803224a 100644
--- a/src/page/perpetualContract/index.vue
+++ b/src/page/perpetualContract/index.vue
@@ -534,7 +534,8 @@
this.init(symbol);
},
activated() {
- let symbol = this.$route.params.symbol;
+ // let symbol = this.$route.params.symbol;
+ let symbol = getStorage("symbol");
let catchSymbol = getStorage("symbol");
if (!symbol && catchSymbol) {
symbol = catchSymbol;
@@ -546,6 +547,10 @@
}
this.symbol = symbol;
this.init(symbol);
+
+ this.currentType = this.$route.query.currentType
+ ? this.$route.query.currentType
+ : "long";
},
// beforeRouteEnter(to, from, next) {
// let { params: { symbol }, query: { selectIndex } } = to
@@ -581,11 +586,9 @@
this.closeSocket();
this.clearTimer();
},
- activated() {
- this.currentType = this.$route.query.currentType
- ? this.$route.query.currentType
- : "long";
- },
+ // activated() {
+
+ // },
beforeDestroy() {
this.closeSocket();
// this.clearTimeout(true)
diff --git a/src/page/safety/index.vue b/src/page/safety/index.vue
index 904517c..543a799 100644
--- a/src/page/safety/index.vue
+++ b/src/page/safety/index.vue
@@ -8,7 +8,7 @@
{{ $t("为了保护您的财产，建议至少开启一个双重身份验证（2FA）。") }}
</div>
</div>
- <van-grid :column-num="2" :gutter="12" class="verify">
+ <!-- <van-grid :column-num="2" :gutter="12" class="verify">
<van-grid-item
v-for="(item, index) in verifyList"
:key="index"
@@ -27,7 +27,7 @@
</div>
<div class="name textColor">{{ item.title }}</div>
</van-grid-item>
- </van-grid>
+ </van-grid> -->
<div class="content">
<div
v-for="(obj, index) in list"
diff --git a/src/page/trade/index.vue b/src/page/trade/index.vue
index b892255..e1b9003 100644
--- a/src/page/trade/index.vue
+++ b/src/page/trade/index.vue
@@ -1,6 +1,6 @@
<template>
- <div class="pb-108 no_touch trade">
- <!-- <div class="px-30 pt-20">
+ <div class="pb-108 no_touch trade">
+ <!-- <div class="px-30 pt-20">
<div class="flex h-88 w-full box-border border-solid-grey rounded-lg">
<div @click="$router.push('/exchange/exchangePage')"
class="font-bold font-32 flex justify-center items-center flex-1">
@@ -15,451 +15,562 @@
</div>
</div>
</div> -->
- <!-- :key="symbol"-->
- <!-- 头部区 -->
- <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :symbolname="symbolname" :price="price" :range="range" :isTrade="true"
- @update-coin="onUpdate" @data="quote = $event" />
+ <!-- :key="symbol"-->
+ <!-- 头部区 -->
+ <trade-head
+ :backFunc="() => $router.push('/')"
+ :symbol="symbol"
+ :symbolname="symbolname"
+ :price="price"
+ :range="range"
+ :isTrade="true"
+ @update-coin="onUpdate"
+ @data="quote = $event"
+ />
- <div class="trade-buy-sell flex justify-between px-30 py-30">
- <trade-order-area :symbol="symbol" :symbolname="symbolname" :init-open="initOpen" :init-close="initClose" :price="price"
- @ordered="onOrdered" />
- <keep-alive>
- <trade-deep-data :selectValue="selectValue" :symbolname="symbolname" @getList="getList" :showType="showType" :symbol="symbol"
- v-if="symbol" :price="price" class="w-290 ml-30" />
- </keep-alive>
- </div>
- <div class="flex k-select-box">
- <div class="mt-20 mb-22 select-box" style="position:relative;">
- <div class=" flex justify-between items-center w-full h-70" @click="selectBtn">
- <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
- <div class="pl-16 textColor" style="width:80%;">{{ title }}</div>
- <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
- </div>
- <div class="option-box" v-show="isShow">
- <div class="font-30" v-for="(item, index) in sortList" :key="index" @click="selectItem(item)">{{
- item.name
- }}
- </div>
- </div>
- </div>
- <div @click="isSelectShow = true">
- <img src="@/assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
- </div>
- </div>
- <div class="h-16 diviLine"></div>
- <div>
- <div class="flex justify-between pb-20 border-b-color items-center">
- <div class="flex pl-30">
- <template>
- <div class="px-10 py-10 flex items-center text-grey" @click="tabClick('1')"
- :class="tabType == '1' ? 'active-line' : ''">{{ $t('当前委托') }}<span v-if="tabType == '1'"></span></div>
- <!-- <div class="px-10 ml-50 py-10 flex items-center text-grey" @click="tabClick('3')"
- :class="tabType == '3' ? 'active-line' : ''">{{ $t('历史委托') }}</div> -->
- <!-- <div class="px-10 py-10 flex items-center ml-50 text-grey" @click="tabClick('2')"
- :class="tabType == '2' ? 'active-line' : ''">{{ $t('资产') }}</div> -->
- </template>
- </div>
- <img src="../../assets/image/public/record.png" alt="record-img" class="w-32 h-35 pr-30 "
- @click="goHistory" />
- </div>
- </div>
- <div class="pl-32 pr-32 pb-100" v-if="tabType == '1'">
- <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" state="submitted"
- @cancelOrder="cancelOrder" />
- </div>
- <div class="pl-32 pr-32 pb-100" v-else-if="tabType == '3'">
- <history-item v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice" :entrust="item"
- :state="item.state" @cancelOrder="cancelOrder" />
- </div>
- <div class="pl-32 pr-32" v-else>
- <div class="mb-20 border-b">
- <p class="font-28 text-grey mt-24 mb-42">{{ $t('当前币对资产') }}</p>
- <ul>
- <li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-10">
- <div class="flex items-center">
- <img :src="item.symbol ? `${HOST_URL}/wap/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')"
- class="w-52 h-52 rounded-full mr-16" />
- <p class="flex flex-col">
- <strong class="font-28 textColor mb-6">{{ item.full_name }}</strong>
- <span class="font-20 text-grey">{{ item.symbol.toUpperCase() }}</span>
- </p>
- </div>
- <div class="flex flex-col items-end text-grey">
- <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
- <span class="font-20 text-grey">
- {{ currency.currency_symbol }}
- {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : '0.0' }}
- </span>
- </div>
- </li>
- </ul>
- </div>
- <div class="mb-60 border-b">
- <p class="font-28 text-grey mt-24 mb-42">{{ $t('其他非0资产') }}</p>
- <ul>
- <li v-for="item in no_zeroList" :key="item.symbol" class="flex justify-between py-10">
- <div class="flex items-center">
- <img :src="item.symbol ? `${HOST_URL}/wap/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')"
- class="w-52 h-52 rounded-full mr-16" />
- <p class="flex flex-col">
- <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
- <span class="font-20 text-grey">{{ item.full_name }}</span>
- </p>
- </div>
- <div class="flex flex-col items-end">
- <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
- <span class="font-20 text-grey">
- {{ currency.currency_symbol }}
- {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : '0.0' }}
- </span>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div v-if="tabType == '1' && !entrustList.length" class="flex flex-col justify-center items-center pt-185 pb-100">
- <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
- <p class="textColor">{{ $t('暂无数据') }}</p>
- </div>
- <!-- <div class="fixed w-full shadow z-10 tabBackground1"> -->
- <div class="flex justify-between px-30 py-10">
- <span class="font-24 textColor2">{{ symbolname }} {{ $t('k线图表') }}</span>
- <!-- <van-icon class="textColor" @click.stop="showCharts = !showCharts"
- :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon> -->
- </div>
- <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol"
- :showBottom="false" />
- <!-- </div> -->
- <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
- close-on-click-action @cancel="onCancel" />
+ <div class="trade-buy-sell flex justify-between px-30 py-30">
+ <trade-order-area
+ :symbol="symbol"
+ :symbolname="symbolname"
+ :init-open="initOpen"
+ :init-close="initClose"
+ :price="price"
+ @ordered="onOrdered"
+ />
+ <keep-alive>
+ <trade-deep-data
+ :selectValue="selectValue"
+ :symbolname="symbolname"
+ @getList="getList"
+ :showType="showType"
+ :symbol="symbol"
+ v-if="symbol"
+ :price="price"
+ class="w-290 ml-30"
+ />
+ </keep-alive>
</div>
+ <div class="flex k-select-box">
+ <div class="mt-20 mb-22 select-box" style="position: relative">
+ <div
+ class="flex justify-between items-center w-full h-70"
+ @click="selectBtn"
+ >
+ <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
+ <div class="pl-16 textColor" style="width: 80%">{{ title }}</div>
+ <img
+ src="@/assets/image/public/grey-select.png"
+ alt="select-icon"
+ class="w-22 h-11 pr-20"
+ />
+ </div>
+ <div class="option-box" v-show="isShow">
+ <div
+ class="font-30"
+ v-for="(item, index) in sortList"
+ :key="index"
+ @click="selectItem(item)"
+ >
+ {{ item.name }}
+ </div>
+ </div>
+ </div>
+ <div @click="isSelectShow = true">
+ <img
+ src="@/assets/image/selectIcon.png"
+ alt="warn-icon"
+ class="w-36 h-30"
+ />
+ </div>
+ </div>
+ <div class="h-16 diviLine"></div>
+ <div>
+ <div class="flex justify-between pb-20 border-b-color items-center">
+ <div class="flex pl-30">
+ <template>
+ <div
+ class="px-10 py-10 flex items-center text-grey"
+ @click="tabClick('1')"
+ :class="tabType == '1' ? 'active-line' : ''"
+ >
+ {{ $t("当前委托") }}<span v-if="tabType == '1'"></span>
+ </div>
+ <!-- <div class="px-10 ml-50 py-10 flex items-center text-grey" @click="tabClick('3')"
+ :class="tabType == '3' ? 'active-line' : ''">{{ $t('历史委托') }}</div> -->
+ <!-- <div class="px-10 py-10 flex items-center ml-50 text-grey" @click="tabClick('2')"
+ :class="tabType == '2' ? 'active-line' : ''">{{ $t('资产') }}</div> -->
+ </template>
+ </div>
+ <img
+ src="../../assets/image/public/record.png"
+ alt="record-img"
+ class="w-32 h-35 pr-30"
+ @click="goHistory"
+ />
+ </div>
+ </div>
+ <div class="pl-32 pr-32 pb-100" v-if="tabType == '1'">
+ <entrust-item
+ v-for="item in entrustList"
+ :key="item.order_no"
+ :entrust="item"
+ state="submitted"
+ @cancelOrder="cancelOrder"
+ />
+ </div>
+ <div class="pl-32 pr-32 pb-100" v-else-if="tabType == '3'">
+ <history-item
+ v-for="item in entrustList"
+ :key="item.order_no"
+ :coinPrice="coinPrice"
+ :entrust="item"
+ :state="item.state"
+ @cancelOrder="cancelOrder"
+ />
+ </div>
+ <div class="pl-32 pr-32" v-else>
+ <div class="mb-20 border-b">
+ <p class="font-28 text-grey mt-24 mb-42">{{ $t("当前币对资产") }}</p>
+ <ul>
+ <li
+ v-for="item in pairsList"
+ :key="item.symbol"
+ class="flex justify-between py-10"
+ >
+ <div class="flex items-center">
+ <img
+ :src="
+ item.symbol
+ ? `${HOST_URL}/wap/symbol/${item.symbol}.png`
+ : require('@/assets/loading-default.png')
+ "
+ class="w-52 h-52 rounded-full mr-16"
+ />
+ <p class="flex flex-col">
+ <strong class="font-28 textColor mb-6">{{
+ item.full_name
+ }}</strong>
+ <span class="font-20 text-grey">{{
+ item.symbol.toUpperCase()
+ }}</span>
+ </p>
+ </div>
+ <div class="flex flex-col items-end text-grey">
+ <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
+ <span class="font-20 text-grey">
+ {{ currency.currency_symbol }}
+ {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0" }}
+ </span>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="mb-60 border-b">
+ <p class="font-28 text-grey mt-24 mb-42">{{ $t("其他非0资产") }}</p>
+ <ul>
+ <li
+ v-for="item in no_zeroList"
+ :key="item.symbol"
+ class="flex justify-between py-10"
+ >
+ <div class="flex items-center">
+ <img
+ :src="
+ item.symbol
+ ? `${HOST_URL}/wap/symbol/${item.symbol}.png`
+ : require('@/assets/loading-default.png')
+ "
+ class="w-52 h-52 rounded-full mr-16"
+ />
+ <p class="flex flex-col">
+ <strong class="font-28 textColor mb-6">{{
+ item.symbol.toUpperCase()
+ }}</strong>
+ <span class="font-20 text-grey">{{ item.full_name }}</span>
+ </p>
+ </div>
+ <div class="flex flex-col items-end">
+ <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
+ <span class="font-20 text-grey">
+ {{ currency.currency_symbol }}
+ {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0" }}
+ </span>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div
+ v-if="tabType == '1' && !entrustList.length"
+ class="flex flex-col justify-center items-center pt-185 pb-100"
+ >
+ <img
+ src="@/assets/image/assets-center/no-data.png"
+ alt="no-date"
+ class="w-180 h-180"
+ />
+ <p class="textColor">{{ $t("暂无数据") }}</p>
+ </div>
+ <!-- <div class="fixed w-full shadow z-10 tabBackground1"> -->
+ <div class="flex justify-between px-30 py-10">
+ <span class="font-24 textColor2"
+ >{{ symbolname }} {{ $t("k线图表") }}</span
+ >
+ <!-- <van-icon class="textColor" @click.stop="showCharts = !showCharts"
+ :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon> -->
+ </div>
+ <k-line-charts
+ :update-key="updateKey"
+ :update-data="quote"
+ :symbol="symbol"
+ :showBottom="false"
+ />
+ <!-- </div> -->
+ <van-action-sheet
+ v-model="isSelectShow"
+ @select="onSelect"
+ :actions="actions"
+ :cancel-text="$t('取消')"
+ close-on-click-action
+ @cancel="onCancel"
+ />
+ </div>
</template>
<script>
-import TradeHead from '@/components/trade-head/index.vue'
-import TradeOrderArea from '@/components/trade-order-area/index.vue'
-import TradeDeepData from '@/components/trade-deep-data/index.vue'
-import EntrustItem from '@/components/entrust-item'
-import KLineCharts from '@/components/kline-charts'
-import historyItem from '@/components/history-item'
+import TradeHead from "@/components/trade-head/index.vue";
+import TradeOrderArea from "@/components/trade-order-area/index.vue";
+import TradeDeepData from "@/components/trade-deep-data/index.vue";
+import EntrustItem from "@/components/entrust-item";
+import KLineCharts from "@/components/kline-charts";
+import historyItem from "@/components/history-item";
-import Axios from '@/API/trading'
-import { _getHomeList } from '@/API/home.api'
-import { Popup, Swipe, SwipeItem, Circle, Icon, ActionSheet } from 'vant';
-import { mapActions, mapGetters } from 'vuex'
-import { SET_COIN_LIST } from '@/store/const.store'
-import { WS_URL, HOST_URL } from '@/config'
+import Axios from "@/API/trading";
+import { _getHomeList } from "@/API/home.api";
+import { Popup, Swipe, SwipeItem, Circle, Icon, ActionSheet } from "vant";
+import { mapActions, mapGetters } from "vuex";
+import { SET_COIN_LIST } from "@/store/const.store";
+import { WS_URL, HOST_URL } from "@/config";
import TradeApi from "@/API/trading.js";
-import { getStorage } from '@/utils/utis'
+import { getStorage } from "@/utils/utis";
export default {
- name: "TradePage",
- components: {
- TradeHead,
- TradeOrderArea,
- TradeDeepData,
- [Popup.name]: Popup,
- [Swipe.name]: Swipe,
- [SwipeItem.name]: SwipeItem,
- [Circle.name]: Circle,
- [Icon.name]: Icon,
- [ActionSheet.name]: ActionSheet,
- EntrustItem,
- KLineCharts,
- historyItem
- },
- computed: {
- ...mapGetters('user', ['userInfo']),
- ...mapGetters({
- coinList: 'home/coinList',
- currency: 'home/currency'
- }),
- },
- data() {
- var initArr = []
- for (let i = 0; i < 8; i++) {
- initArr.push({
- volume: '--',
- price: '--'
- })
- }
- return {
- HOST_URL,
- quote: {},
- showCharts: false,
- updateKey: 1,
- initTimer: null,
- keyIndex: 0,
- timeout: null,
- timer: null, // 底部持仓等的公用定时器
- timer2: null, // 交割合约底部持仓等的公用定时器
- symbol: '',
- price: '',
- range: '',
- initOpen: {},
- initClose: {},
- asks: initArr, // 卖单
- bids: initArr, // 买单
- orderCur: [], // 当前委托
- orderHold: [], // 持有仓位
- futrueHold: [], // 交割持仓
- futrueHistroy: [], // 交割历史
- socket: null, // 行情
- sockets: {
- quotes: null, // 行情
- deep: null /// 深度
- },
- curTab: '', // 当前委托还是持有仓位
- selectIndex: 1, // 当前tab
- initFutrue: {}, /// 交割合约
- show: false, // popup
- entrustList: [], //当前委托订单
- tabType: 1,
- no_zeroList: [], //其他非0资产数组
- pairsList: {}, //当前资产
- // curRequest: [], //
- isShow: false,
- title: 1,
- isSelectShow: false,
- actions: [{ name: this.$t('默认'), value: 0, className: 'actions-active' }, { name: this.$t('展示买单'), value: 1, className: "" }, { name: this.$t('展示卖单'), value: 2, className: '' }],
- showType: 0,
- sortList: [],
- selectValue: 0,
- coinPrice: 0,
- symbolname:'',
- }
- },
- async created() {
- if (!this.coinList.length) {
- await this.SET_COIN_LIST()
- }
- console.log('this.symbolname',this.$route.query.name);
- },
- methods: {
- ...mapActions('home', [SET_COIN_LIST]),
- onUpdate(symbol) { // 更新
- console.log("symbol123123",symbol);
- this.symbolname = getStorage('symbolname')
- this.symbol = symbol
- this.closeSocket()
- this.init(symbol)
- },
- getCoinPrce(val) {
- _getHomeList(val).then((res) => {
- this.coinPrice = res[0].close
- })
- },
- tabClick(type) {
- this.tabType = type;
- if (type == 2 && !this.userInfo.token) {
- this.$router.push('/login')
- return
- }
- this.entrustList = []
- this.getOrderList()
- },
- onOrdered(evt) { // 下单过后的回调
- this.clearTimer()
- // this.clearTimeout()
- this.initParam(this.symbol, evt) // 重新初始化
- //console.log('下单后更新数据')
- },
- onTab(evt) { // 点击tab后的回调
- console.log('evt', evt)
- this.clearTimer()
- // this.clearTimeout()
- this.curTab = evt
- this[evt](this.symbol)
- },
- handleQoutes(data) {
- if (data && data.length) {
- const cur = data[0]
- this.price = cur.close
- this.range = cur.change_ratio + ''
- this.quote = cur
- this.updateKey++
- }
- },
- startQuoteSocket() { // 行情socket
- console.log('symbol', this.symbol)
- if (!this.symbol) {
- return
- }
- this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`)
- this.socket.onmessage = (evt) => {
- const { data } = evt
- const { code, data: _data } = JSON.parse(data)
- if (code / 1 === 0) {
- this.handleQoutes(_data)
- }
- }
- },
- initParam(symbol, type) { // 初始化参数
- if (type === 'open' || !type) {
- //console.log('开仓数据')
- Axios.tradeBuyToken({})
- .then(res => {
- this.initOpen = res.data
- console.log(this.initOpen.volume, res.data.volume, type)
- })
- }
- if (type === 'close' || !type) {
- Axios.tradeSellToken({
- symbol
- }).then(res => {
- this.initClose = res.data
- })
- }
- this.getWallet()
- if (this.userInfo.token) {
- this.getOrderList();
- }
- },
- init(symbol) { // 初始化页面
- this.symbol = symbol.toLowerCase()
- if (!this.socket) {
- this.startQuoteSocket()
- }
- this.initParam(symbol) // 'open'
- this.clearTimer()
- this.getCoinPrce(symbol)
- },
- closeSocket() {
- this.socket && this.socket.close()
- this.socket = null
- },
- clearTimer() {
- clearInterval(this.timer)
- this.timer = null
- },
- tradeBuy() {
- Axios.tradeBuy({
- volume: 1,
- session_token: '',
- symbol: '',
- price: 1,
- order_price_type: '' //limit限价 opponent市价
- }).then((res) => {
- console.log(res);
- }).catch((error) => {
- if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
- else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
- });
- },
- getOrderList() {
- TradeApi.tradeRecord({
- page_no: 1,
- symbol: this.$route.params.symbol,
- type: this.tabType == 1 ? 'orders' : 'hisorders'
- }).then(res => {
- console.log(res.data);
- this.entrustList = res.data
- }).catch(() => {
-
- })
- },
- cancelOrder(order) {
- TradeApi.tradeCancel({
- order_no: order,
- }).then(res => {
- this.initParam(this.symbol)
- this.$toast(this.$t('成功'))
- }).catch(() => {
-
- })
- },
- getWallet() {
- TradeApi.getPairs({
- pairs: `${this.symbol}/usdt`
- })
- .then(res => {
- this.pairsList = res.data.pairs;
- this.no_zeroList = res.data.no_zero;
- })
- },
- goHistory() {
- // this.$router.push(`/tradeRecord/${this.symbol}`)
- this.$router.push({
- path: `/tradeRecord/${this.symbol}`,
- query: { name: this.symbolname }
- });
- },
- //价格类型下拉框切换
- selectBtn() {
- this.isShow = !this.isShow;
- },
- //选择价格类型
- selectItem(item) {
- this.title = item.name;
- this.isShow = false;
- this.selectValue = item.value
- },
- onSelect(item) {
- this.showType = item.value
- this.actions.map((item) => {
- item.className = ''
- })
- item.className = 'actions-active'
- },
- onCancel() {
- this.isSelectShow = false
- },
- getList(val) {
- if (val.numberLength <= 2) {
- this.title = val.arry[0].name
- } else {
- this.title = val.arry[val.arry.length - 1].name
- }
- this.sortList = val.arry
- }
- },
-beforeRouteEnter(to, from, next) {
- var that = this
- let {
- params: {
- symbol
- },
- } = to;
- // this.symbolname = this.$route.params.name
- let catchTradeSymbol = getStorage("tradeSymbol");
- if (catchTradeSymbol) {
- symbol = catchTradeSymbol;
- }
- if (symbol) {
- // debugger
- // if(that.typeindex==0){
- // next((vm) => {
- // vm.symbol = symbol;
- // vm.inita(symbol);
- // });
- // }else{
- next((vm) => {
- vm.symbol = symbol;
- vm.symbolname = getStorage("symbolname");
- vm.init(symbol);
- });
- // }
-
- } else {
- next();
- }
- },
- activated() {
- // if (!this.socket) {
- // this.startQuoteSocket()
- // }
- },
- deactivated() {
- this.closeSocket()
- this.clearTimer()
- },
- beforeDestroy() {
- this.closeSocket()
- // this.clearTimeout(true)
- this.clearTimer()
+ name: "TradePage",
+ components: {
+ TradeHead,
+ TradeOrderArea,
+ TradeDeepData,
+ [Popup.name]: Popup,
+ [Swipe.name]: Swipe,
+ [SwipeItem.name]: SwipeItem,
+ [Circle.name]: Circle,
+ [Icon.name]: Icon,
+ [ActionSheet.name]: ActionSheet,
+ EntrustItem,
+ KLineCharts,
+ historyItem,
+ },
+ computed: {
+ ...mapGetters("user", ["userInfo"]),
+ ...mapGetters({
+ coinList: "home/coinList",
+ currency: "home/currency",
+ }),
+ },
+ data() {
+ var initArr = [];
+ for (let i = 0; i < 8; i++) {
+ initArr.push({
+ volume: "--",
+ price: "--",
+ });
}
-}
-
+ return {
+ HOST_URL,
+ quote: {},
+ showCharts: false,
+ updateKey: 1,
+ initTimer: null,
+ keyIndex: 0,
+ timeout: null,
+ timer: null, // 底部持仓等的公用定时器
+ timer2: null, // 交割合约底部持仓等的公用定时器
+ symbol: "",
+ price: "",
+ range: "",
+ initOpen: {},
+ initClose: {},
+ asks: initArr, // 卖单
+ bids: initArr, // 买单
+ orderCur: [], // 当前委托
+ orderHold: [], // 持有仓位
+ futrueHold: [], // 交割持仓
+ futrueHistroy: [], // 交割历史
+ socket: null, // 行情
+ sockets: {
+ quotes: null, // 行情
+ deep: null, /// 深度
+ },
+ curTab: "", // 当前委托还是持有仓位
+ selectIndex: 1, // 当前tab
+ initFutrue: {}, /// 交割合约
+ show: false, // popup
+ entrustList: [], //当前委托订单
+ tabType: 1,
+ no_zeroList: [], //其他非0资产数组
+ pairsList: {}, //当前资产
+ // curRequest: [], //
+ isShow: false,
+ title: 1,
+ isSelectShow: false,
+ actions: [
+ { name: this.$t("默认"), value: 0, className: "actions-active" },
+ { name: this.$t("展示买单"), value: 1, className: "" },
+ { name: this.$t("展示卖单"), value: 2, className: "" },
+ ],
+ showType: 0,
+ sortList: [],
+ selectValue: 0,
+ coinPrice: 0,
+ symbolname: "",
+ };
+ },
+ async created() {
+ if (!this.coinList.length) {
+ await this.SET_COIN_LIST();
+ }
+ console.log("this.symbolname", this.$route.query.name);
+ },
+ methods: {
+ ...mapActions("home", [SET_COIN_LIST]),
+ onUpdate(symbol) {
+ // 更新
+ console.log("symbol123123", symbol);
+ this.symbolname = getStorage("symbolname");
+ this.symbol = symbol;
+ this.closeSocket();
+ this.init(symbol);
+ },
+ getCoinPrce(val) {
+ _getHomeList(val).then((res) => {
+ this.coinPrice = res[0].close;
+ });
+ },
+ tabClick(type) {
+ this.tabType = type;
+ if (type == 2 && !this.userInfo.token) {
+ this.$router.push("/login");
+ return;
+ }
+ this.entrustList = [];
+ this.getOrderList();
+ },
+ onOrdered(evt) {
+ // 下单过后的回调
+ this.clearTimer();
+ // this.clearTimeout()
+ this.initParam(this.symbol, evt); // 重新初始化
+ //console.log('下单后更新数据')
+ },
+ onTab(evt) {
+ // 点击tab后的回调
+ console.log("evt", evt);
+ this.clearTimer();
+ // this.clearTimeout()
+ this.curTab = evt;
+ this[evt](this.symbol);
+ },
+ handleQoutes(data) {
+ if (data && data.length) {
+ const cur = data[0];
+ this.price = cur.close;
+ this.range = cur.change_ratio + "";
+ this.quote = cur;
+ this.updateKey++;
+ }
+ },
+ startQuoteSocket() {
+ // 行情socket
+ console.log("symbol", this.symbol);
+ if (!this.symbol) {
+ return;
+ }
+ this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`);
+ this.socket.onmessage = (evt) => {
+ const { data } = evt;
+ const { code, data: _data } = JSON.parse(data);
+ if (code / 1 === 0) {
+ this.handleQoutes(_data);
+ }
+ };
+ },
+ initParam(symbol, type) {
+ // 初始化参数
+ if (type === "open" || !type) {
+ //console.log('开仓数据')
+ Axios.tradeBuyToken({}).then((res) => {
+ this.initOpen = res.data;
+ console.log(this.initOpen.volume, res.data.volume, type);
+ });
+ }
+ if (type === "close" || !type) {
+ Axios.tradeSellToken({
+ symbol,
+ }).then((res) => {
+ this.initClose = res.data;
+ });
+ }
+ this.getWallet();
+ if (this.userInfo.token) {
+ this.getOrderList();
+ }
+ },
+ init(symbol) {
+ // 初始化页面
+ this.symbol = symbol.toLowerCase();
+ if (!this.socket) {
+ this.startQuoteSocket();
+ }
+ this.initParam(symbol); // 'open'
+ this.clearTimer();
+ this.getCoinPrce(symbol);
+ },
+ closeSocket() {
+ this.socket && this.socket.close();
+ this.socket = null;
+ },
+ clearTimer() {
+ clearInterval(this.timer);
+ this.timer = null;
+ },
+ tradeBuy() {
+ Axios.tradeBuy({
+ volume: 1,
+ session_token: "",
+ symbol: "",
+ price: 1,
+ order_price_type: "", //limit限价 opponent市价
+ })
+ .then((res) => {
+ console.log(res);
+ })
+ .catch((error) => {
+ if (error.code === "ECONNABORTED") {
+ this.$toast(this.$t("网络超时！"));
+ } else if (error.msg !== undefined) {
+ this.$toast(this.$t(error.msg));
+ }
+ });
+ },
+ getOrderList() {
+ TradeApi.tradeRecord({
+ page_no: 1,
+ symbol: this.$route.params.symbol,
+ type: this.tabType == 1 ? "orders" : "hisorders",
+ })
+ .then((res) => {
+ console.log(res.data);
+ this.entrustList = res.data;
+ })
+ .catch(() => {});
+ },
+ cancelOrder(order) {
+ TradeApi.tradeCancel({
+ order_no: order,
+ })
+ .then((res) => {
+ this.initParam(this.symbol);
+ this.$toast(this.$t("成功"));
+ })
+ .catch(() => {});
+ },
+ getWallet() {
+ TradeApi.getPairs({
+ pairs: `${this.symbol}/usdt`,
+ }).then((res) => {
+ this.pairsList = res.data.pairs;
+ this.no_zeroList = res.data.no_zero;
+ });
+ },
+ goHistory() {
+ // this.$router.push(`/tradeRecord/${this.symbol}`)
+ this.$router.push({
+ path: `/tradeRecord/${this.symbol}`,
+ query: { name: this.symbolname },
+ });
+ },
+ //价格类型下拉框切换
+ selectBtn() {
+ this.isShow = !this.isShow;
+ },
+ //选择价格类型
+ selectItem(item) {
+ this.title = item.name;
+ this.isShow = false;
+ this.selectValue = item.value;
+ },
+ onSelect(item) {
+ this.showType = item.value;
+ this.actions.map((item) => {
+ item.className = "";
+ });
+ item.className = "actions-active";
+ },
+ onCancel() {
+ this.isSelectShow = false;
+ },
+ getList(val) {
+ if (val.numberLength <= 2) {
+ this.title = val.arry[0].name;
+ } else {
+ this.title = val.arry[val.arry.length - 1].name;
+ }
+ this.sortList = val.arry;
+ },
+ },
+ beforeRouteEnter(to, from, next) {
+ var that = this;
+ let {
+ params: { symbol },
+ } = to;
+ // this.symbolname = this.$route.params.name
+ let catchTradeSymbol = getStorage("symbol");
+ if (catchTradeSymbol) {
+ symbol = catchTradeSymbol;
+ }
+ if (symbol) {
+ // debugger
+ // if(that.typeindex==0){
+ // next((vm) => {
+ // vm.symbol = symbol;
+ // vm.inita(symbol);
+ // });
+ // }else{
+ next((vm) => {
+ vm.symbol = symbol;
+ vm.symbolname = getStorage("symbolname");
+ vm.init(symbol);
+ });
+ // }
+ } else {
+ next();
+ }
+ },
+ activated() {
+ // if (!this.socket) {
+ // this.startQuoteSocket()
+ // }
+ },
+ deactivated() {
+ this.closeSocket();
+ this.clearTimer();
+ },
+ beforeDestroy() {
+ this.closeSocket();
+ // this.clearTimeout(true)
+ this.clearTimer();
+ },
+};
</script>
<style lang="scss" scoped>
@@ -473,53 +584,53 @@
//}
.no_touch {
- -webkit-user-select: none;
- user-select: none;
- -ms-user-select: none;
- -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
- min-height: 100vh;
+ min-height: 100vh;
}
.list-enter-active,
.list-leave-active {
- will-change: transform;
- transition: all 250ms;
+ will-change: transform;
+ transition: all 250ms;
}
.list-enter {
- opacity: 0;
- transform: translate3d(-100%, 0, 0);
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
}
.list-leave {
- opacity: 0;
- transform: translate3d(100%, 0, 0);
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
}
.rounded-view {
- border-top-left-radius: 20px;
- border-top-right-radius: 20px;
- padding: 0 30px;
- box-sizing: border-box;
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ padding: 0 30px;
+ box-sizing: border-box;
}
.my-swipe {
- width: 100%;
+ width: 100%;
}
.active-line {
- position: relative;
- // padding: 15px 0;
- color: #fff;
+ position: relative;
+ // padding: 15px 0;
+ color: #fff;
- @include themify() {
- background-color: themed("color_main");
- }
+ @include themify() {
+ background-color: themed("color_main");
+ }
}
// .active-line::after {
@@ -537,8 +648,8 @@
// }
.shadow {
- bottom: 108px;
- box-sizing: border-box;
+ bottom: 108px;
+ box-sizing: border-box;
}
// .textColor {
@@ -547,98 +658,93 @@
.borderColor,
.border-solid-grey {
- @include themify() {
- border: 1px solid themed("border_color");
- }
+ @include themify() {
+ border: 1px solid themed("border_color");
+ }
}
-
.tabBackground1 {
- @include themify() {
- border: 1px solid themed("border_color1");
- }
+ @include themify() {
+ border: 1px solid themed("border_color1");
+ }
}
// 下拉
.option-box {
- position: absolute;
- left: 0;
- right: 0;
- top: 90px;
- width: 100%;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 90px;
+ width: 100%;
- @include themify() {
- background: themed("grey_bg");
- }
+ @include themify() {
+ background: themed("grey_bg");
+ }
- text-align: center;
- border-radius: 4px;
+ text-align: center;
+ border-radius: 4px;
- @include themify() {
- color: themed("text_color3");
- }
+ @include themify() {
+ color: themed("text_color3");
+ }
- z-index: 10;
+ z-index: 10;
}
-.option-box>div {
- padding: 30px 0;
+.option-box > div {
+ padding: 30px 0;
}
-.option-box>div:hover {
- // background-color: #F5F5F5;
+.option-box > div:hover {
+ // background-color: #F5F5F5;
}
.k-select-box {
- position: relative;
- top: -130px;
- justify-content: flex-end;
- padding: 0 30px;
- align-items: center;
+ position: relative;
+ top: -130px;
+ justify-content: flex-end;
+ padding: 0 30px;
+ align-items: center;
- .select-box {
- width: 220px;
+ .select-box {
+ width: 220px;
- @include themify() {
- background: themed("input_background");
- }
-
- margin-right: 20px;
+ @include themify() {
+ background: themed("input_background");
}
+ margin-right: 20px;
+ }
}
.van-popup {
- @include themify() {
- background: themed("color_main");
- }
+ @include themify() {
+ background: themed("color_main");
+ }
}
.actions-active {
- @include themify() {
- background: themed("color_main") !important;
- }
+ @include themify() {
+ background: themed("color_main") !important;
+ }
}
.trade {
-
- ::v-deep .van-action-sheet__item,
- ::v-deep .van-action-sheet__cancel {
-
- @include themify() {
- background: themed("input_background1");
- }
-
- @include themify() {
- color: themed("text_color");
- }
+ ::v-deep .van-action-sheet__item,
+ ::v-deep .van-action-sheet__cancel {
+ @include themify() {
+ background: themed("input_background1");
}
- ::v-deep .van-action-sheet__gap {
- @include themify() {
- background: themed("cont_background");
- }
+ @include themify() {
+ color: themed("text_color");
}
+ }
+
+ ::v-deep .van-action-sheet__gap {
+ @include themify() {
+ background: themed("cont_background");
+ }
+ }
}
</style>
-
diff --git a/src/utils/utis.js b/src/utils/utis.js
index 4c293b2..70e60da 100644
--- a/src/utils/utis.js
+++ b/src/utils/utis.js
@@ -147,6 +147,7 @@
if (!str) {
return null
}
+ console.log('str:', str)
return JSON.parse(str)
}
--
Gitblit v1.9.3