From 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Fri, 28 Jun 2024 09:28:04 +0800
Subject: [PATCH] 123
---
src/page/trade/index.vue | 1896 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 1,242 insertions(+), 654 deletions(-)
diff --git a/src/page/trade/index.vue b/src/page/trade/index.vue
index 22287f3..5e817b1 100644
--- a/src/page/trade/index.vue
+++ b/src/page/trade/index.vue
@@ -1,716 +1,1304 @@
<template>
- <div class="pb-108 no_touch trade">
- <trade-head
- :backFunc="() => $router.push('/')"
- :symbol="symbol"
- :price="price"
- :range="range"
- :isTrade="true"
- @update-coin="onUpdate"
- @data="quote = $event"
- />
+ <div class="pb-108 no_touch trade">
+ <div class="typebox" style="display: flex;">
+ <div :class="typeindex==index?'typebox_box':'typebox_boxa'" @click="typeclick(index)"
+ v-for="(item,index) in typelist" :key="index">{{item}}</div>
+ </div>
+ <div v-if="typeindex==0">
+ <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :newname="newname" :price="price" :range="range"
+ :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />
- <div class="trade-buy-sell flex justify-between px-30 py-30">
- <keep-alive>
- <trade-deep-data
- :selectValue="selectValue"
- @getList="getList"
- :showType="showType"
- :symbol="symbol"
- v-if="symbol"
- :price="price"
- class="w-290 mr-30"
- />
- </keep-alive>
- <trade-order-area
- :symbol="symbol"
- :init-open="initOpen"
- :init-close="initClose"
- :price="price"
- @ordered="onOrdered"
- />
- </div>
+ <div class="trade-buy-sell flex justify-between px-30 py-30">
+ <keep-alive>
+ <trade-deep-data :selectValue="selectValue" @getList="getList" :showType="showType" :symbol="symbol"
+ v-if="symbol" :price="price" class="w-290 mr-30" />
+ </keep-alive>
+ <trade-order-area :symbol="symbol" :init-open="initOpena" :newname="newname" :init-close="initClose" :price="price"
+ @ordered="onOrdereda" />
+ </div>
- <div class="list-data">
- <div>
- <div class="flex justify-between pb-20 items-center pt-10">
- <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("当前委托")
+ <div class="list-data">
+ <div>
+ <div class="flex justify-between pb-20 items-center pt-10">
+ <div class="flex pl-30 mar-23">
+ <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'">({{ entrustList.length }})</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/3x/names8.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="
+ </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>
+ <span @click="goHistory">
+ <img src="@/assets/3x/names8.png" alt="record-img" class="w-32 h-35 pr-30" />
+ </span>
+ </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">{{
+ " 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 text-grey">
- <strong class="font-28 textColor mb-6">{{
+ <span class="font-20 text-grey">{{ item.full_name }}</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 }}
- {{
+ <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="
+ </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">{{
+ " 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">{{
+ <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 }}
- {{
+ <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-155 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>
- <div class="fixed w-full shadow z-10 tabBackground1">
- <div class="flex justify-between px-30 py-10">
- <span class="font-24 textColor2">
- {{ symbol | _symbolName(1) }} {{ $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"
- v-if="symbol && showCharts"
- :showBottom="false"
- />
- </div>
- <van-action-sheet
- v-model="isSelectShow"
- @select="onSelect"
- :actions="actions"
- :cancel-text="$t('取消')"
- close-on-click-action
- @cancel="onCancel"
- />
- </div>
+ </span>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div v-if="tabType == '1' && !entrustList.length"
+ class="flex flex-col justify-center items-center pt-155 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>
+ <div class="fixed w-full shadow z-10 tabBackground1">
+ <div class="flex justify-between px-30 py-10">
+ <span class="font-24 textColor2">
+ {{ newname }} {{ $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" v-if="symbol && showCharts"
+ :showBottom="false" />
+ </div>
+ <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
+ close-on-click-action @cancel="onCancel" />
+ </div>
+ <div v-if="typeindex==1">
+ <aaa></aaa>
+ </div>
+ </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 ContractHeader from "@/components/contract-header/index.vue";
+ import PerpetualOpen from "@/components/perpetual-open/index.vue";
+ import PerpetualOrder from "@/components/perpetual-order/index.vue";
+
+ import {
+ _getBalance,
+ _getDeepData,
+ _initOpen,
+ _initClose,
+ _orderListCur,
+ _orderListHold,
+ _futrueOrderInit,
+ _futrueOrderList,
+ } from "@/API/trade.api";
+ var showLength = 7;
+
+
+ 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 aaa from "../../page/perpetualContract/index.vue"
+ 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 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";
-
-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() {
- const 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,
- };
- },
- async created() {
- if (!this.coinList.length) {
- await this.SET_COIN_LIST();
- }
- },
- mounted() {
- this.GET_UERS_KYC();
- },
- methods: {
- ...mapActions("home", [SET_COIN_LIST]),
- ...mapActions("user", ["GET_UERS_KYC"]),
-
- onUpdate(symbol) {
- // 更新
- 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);
- console.log(_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}`);
- },
- //价格类型下拉框切换
- 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) {
- let {
- params: { symbol },
- } = to;
- let catchTradeSymbol = getStorage("tradeSymbol");
- if (catchTradeSymbol) {
- symbol = catchTradeSymbol;
- }
- if (symbol) {
- next((vm) => {
- vm.symbol = symbol;
- vm.init(symbol);
- });
- } else {
- next();
- }
- },
- activated() {
- // if (!this.socket) {
- // this.startQuoteSocket()
- // }
- },
- deactivated() {
- this.closeSocket();
- this.clearTimer();
- },
- beforeDestroy() {
- this.closeSocket();
- // this.clearTimeout(true)
- this.clearTimer();
- },
-};
+ export default {
+ name: "TradePage",
+ components: {
+ ContractHeader,
+ PerpetualOpen,
+ PerpetualOrder,
+ [Popup.name]: Popup,
+ [Swipe.name]: Swipe,
+ [SwipeItem.name]: SwipeItem,
+ KLineCharts,
+ TradeHead,
+ TradeOrderArea,
+ TradeDeepData,
+ [Popup.name]: Popup,
+ [Swipe.name]: Swipe,
+ [SwipeItem.name]: SwipeItem,
+ [Circle.name]: Circle,
+ [Icon.name]: Icon,
+ [ActionSheet.name]: ActionSheet,
+ EntrustItem,
+ KLineCharts,
+ historyItem,
+ aaa
+ },
+ computed: {
+ ...mapGetters("user", ["userInfo"]),
+ ...mapGetters({
+ coinList: "home/coinList",
+ currency: "home/currency",
+ }),
+ },
+ watch: {
+ selectIndex(val) {
+ showLength = 7;
+ },
+ },
+ data() {
+ const initArr = [];
+ for (let i = 0; i < showLength; i++) {
+ initArr.push({
+ amount: "--",
+ price: "--",
+ });
+ }
+ // const initArr = [];
+ // for (let i = 0; i < 8; i++) {
+ // initArr.push({
+ // volume: "--",
+ // price: "--",
+ // });
+ // }
+ return {
+ quote: {},
+ initTimer: null,
+ keyIndex: 0,
+ timeout: null,
+ timer: null, // 底部持仓等的公用定时器
+ timer1: null, // tab切换动画
+ timer2: null, // 交割合约底部持仓等的公用定时器
+ balance: 0,
+ symbol: "",
+ price: "",
+ range: "",
+ stop_price_profit: "",
+ stop_price_loss: "",
+ initClose: {},
+ asks: initArr, // 卖单
+ bids: initArr, // 买单
+ orderCur: [], // 当前委托
+ orderHold: [], // 持有仓位
+ futrueHold: [], // 交割持仓
+ futrueHistroy: [], // 交割历史
+ sockets: {
+ quotes: null, // 行情
+ deep: null, /// 深度
+ },
+ curTab: "", // 当前委托还是持有仓位
+ selectIndex: 1, // 当前tab
+ initFutrue: {}, /// 交割合约
+ show: false, // popup
+ animated1: false,
+ animated2: false,
+ newname:'',
+ currentType: "",
+ showCharts: false,
+ // curRequest: [], //
+
+ HOST_URL,
+ quote: {},
+ typelist: [this.$t("交易"), this.$t("合约")],
+ typeindex: 0,
+ showCharts: false,
+ updateKey: 1,
+ initTimer: null,
+ keyIndex: 0,
+ timeout: null,
+ timer: null, // 底部持仓等的公用定时器
+ timer2: null, // 交割合约底部持仓等的公用定时器
+ symbol: "",
+ price: "",
+ range: "",
+ initOpena: {},
+ initOpen: {},
+ initClose: {},
+ asks: initArr, // 卖单
+ bids: initArr, // 买单
+ orderCur: [], // 当前委托
+ orderHold: [], // 持有仓位
+ name:'',
+ 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,
+ };
+ },
+ async created() {
+ if (!this.coinList.length) {
+ await this.SET_COIN_LIST();
+ }
+ _getBalance().then((data) => {
+ // 获取用户余额
+ this.$store.commit("user/SET_USERINFO", { balance: data.money });
+ // const { money } = data
+ // this.balance = money
+ });
+ },
+ mounted() {
+ this.GET_UERS_KYC();
+ let symbol = this.$route.params.symbol;
+ let type = this.$route.params.aa;
+ let catchSymbol = getStorage("symbol");
+ if (!symbol && catchSymbol) {
+ symbol = catchSymbol;
+ }
+ if (this.selectIndex / 1 === 2) {
+ this.curTab = "fetchFutrueHoldList";
+ } else {
+ this.curTab = "fetchOrderListHold";
+ }
+ this.symbol = symbol;
+ if(this.typeindex==0){
+ this.inita(symbol);
+ }else{
+ this.init(symbol);
+ }
+ },
+ methods: {
+ ...mapActions("home", [SET_COIN_LIST]),
+ ...mapActions("user", ["GET_UERS_KYC"]),
+ typeclick(e) {
+ this.typeindex = e
+ if(e==0){
+ this.initParama(this.symbol)
+ }else{
+ this.symbol = 'wld'
+ this.initParam(this.symbol)
+ }
+ this.$forceUpdate()
+ },
+ onUpdate(symbol,name) {
+ // 更新
+ this.symbol = symbol;
+ this.newname = name
+ this.closeSocket();
+ if(this.typeindex==0){
+ this.closeSocketa();
+ }else{
+ this.closeSocket();
+ }
+ if(this.typeindex==0){
+ this.inita(symbol);
+ }else{
+ this.init(symbol);
+ }
+ },
+ onRecall() {
+ // 撤单or 平仓 evt
+ this.clearTimer();
+ _orderListHold(this.symbol).then((data) => {
+ this.orderHold = data;
+ });
+ this[this.curTab](this.symbol);
+ _initOpen(this.symbol).then((data) => {
+ this.initOpen = data;
+ });
+ },
+ onTopTab(evt) {
+ // 当前tab 永续/交割
+ this.keyIndex += 1;
+ this.selectIndex = evt;
+ this.clearTimer();
+ if (this.selectIndex / 1 === 1) {
+ //this.curTab = 'fetchOrderListCur'
+ this.curTab = "fetchOrderListHold";
+ // this.animated1 = true
+ // this.timer = setTimeout(() => {
+ // this.animated1 = false
+ // clearTimeout(this.timer)
+ // }, 200)
+ this.animated2 = true;
+ this.timer1 = setTimeout(() => {
+ this.animated2 = false;
+ clearTimeout(this.timer1);
+ }, 200);
+ } else {
+ // this.animated2 = true
+ // this.timer = setTimeout(() => {
+ // this.animated2 = false
+ // clearTimeout(this.timer)
+ // }, 200)
+ this.animated1 = true;
+ this.timer1 = setTimeout(() => {
+ this.animated1 = false;
+ clearTimeout(this.timer1);
+ }, 200);
+ }
+ console.log(this.curTab);
+ this[this.curTab](this.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();
+ },
+ changeCurrentType(type) {
+ this.currentType = type;
+ },
+ fetchOrderListHold(symbol) {
+ // 当前持仓
+ if (!symbol) {
+ return;
+ }
+ if (this.userInfo.token) {
+ _orderListHold(symbol).then((data) => {
+ // this.orderHold = data
+ this.orderHold = data.sort(this.sortData);
+ });
+ this.timer = setInterval(() => {
+ _orderListHold(symbol).then((data) => {
+ // if (typeof this.timer === 'string') {
+ // this.timer = null
+ // return
+ // }
+ // this.orderHold = data
+ this.orderHold = data.sort(this.sortData);
+ });
+ }, 1000);
+ } else {
+ this.orderHold = [];
+ }
+ },
+ fetchFutrueHoldList(symbol) {
+ if (!symbol) {
+ return;
+ }
+ // 交割持仓
+ if (this.userInfo.token) {
+ let length = 0;
+ _futrueOrderList(symbol).then((data) => {
+ // this.futrueHold = data
+ this.futrueHold = data.sort(this.sortData);
+ length = data.length;
+ });
+ this.timer = setInterval(() => {
+ _futrueOrderList(symbol).then((data) => {
+ // if (typeof this.timer === 'string') {
+ // this.timer = null
+ // return
+ // }
+
+ this.futrueHold = data.sort(this.sortData);
+ if (length != data.length) {
+ length = data.length;
+ _futrueOrderInit(symbol).then((dataList) => {
+ this.initFutrue = dataList;
+ });
+ }
+ });
+ }, 1000);
+ } else {
+ this.futrueHold = [];
+ }
+ },
+ fetchFutrueHistory(symbol) {
+ // 交割历史持仓
+ _futrueOrderList(symbol, "hisorders").then((data) => {
+ this.futrueHistroy = data;
+ // this.clearTimeout()
+ });
+ },
+ onOrdereda(evt) {
+ // 下单过后的回调
+ this.clearTimer();
+ // this.clearTimeout()
+ if(this.typeindex==0){
+ this.initParama(this.symbol, evt); // 重新初始化
+ }else{
+ this.initParam(this.symbol, evt); // 重新初始化
+ }
+ //console.log('下单后更新数据')
+ },
+ onOrdered(evt) {
+ // 下单过后的回调
+ this.clearTimer();
+ // this.clearTimeout()
+ if(this.typeindex==0){
+ this.initParama(this.symbol, evt); // 重新初始化
+ }else{
+ this.initParam(this.symbol, evt); // 重新初始化
+ }
+ // TODO: 这里要做判断
+ if (this.selectIndex / 1 === 1) {
+ this[this.curTab](this.symbol); // 重新调取记录
+ console.log("this.curTab", this.curTab);
+ } else {
+ // 交割合约
+ this[this.curTab](this.symbol);
+ // this.show = true
+ console.log("curTab", evt, this.curTab);
+ }
+ //console.log('下单后更新数据')
+ },
+ changeValueBack(val) {
+ if (val == 0) {
+ showLength = 7;
+ } else {
+ showLength = 13;
+ }
+ },
+ onTab(evt) {
+ // 点击tab后的回调
+ console.log("evt", evt);
+ this.clearTimer();
+ // this.clearTimeout()
+ this.curTab = evt;
+ this[evt](this.symbol);
+ },
+ fetchQoutes(symbol) {
+ // 获取当前行情
+ // symbol.order = "desc"
+ _getHomeList(symbol).then((data) => {
+ // 获取行情
+ this.handleQoutes(data);
+ this.startQuoteSocket(); // socket
+ if(this.typeindex==0){
+ this.startQuoteSocketa(); // socket
+ }else{
+ this.startQuoteSocket(); // socket
+ }
+ });
+ },
+ handleQoutes(data) {
+ if (data && data.length) {
+ const cur = data[0];
+ this.price = cur.close;
+ this.newname = cur.name;
+ this.range = cur.change_ratio + "";
+ this.quote = cur;
+ this.updateKey++;
+ }
+ },
+ fetchDeepData(symbol) {
+ console.log("sd");
+ _getDeepData(symbol).then((data) => {
+ // 获取深度
+ console.log(data);
+ this.handleDeep(data);
+ this.startDeepSocket(); // socket
+ });
+ },
+ handleDeep(data) {
+ if (this.symbol !== data.symbol) {
+ return;
+ }
+ this.deepData = data;
+ const { asks, bids } = data;
+ this.asks = asks.sort((a, b) => a.price - b.price).slice(0, showLength);
+ this.bids = bids.sort((a, b) => a.price - b.price).slice(-showLength);
+ },
+ fetchOrderListCur(symbol) {
+ // 当前委托
+ //console.log('当前委托')
+ if (this.userInfo.token) {
+ _orderListCur(symbol).then((data) => {
+ this.orderCur = data;
+ });
+ this.clearTimer();
+ this.timer = setInterval(() => {
+ _orderListCur(symbol).then((data) => {
+ // if (typeof this.timer === 'string') {
+ // this.timer = null
+ // return
+ // }
+ this.orderCur = data;
+ });
+ }, 1000);
+ } else {
+ this.orderCur = [];
+ }
+ },
+ startDeepSocket() {
+ // 开启socket链接
+ if(this.typeindex==0){
+ this.closeSocketa();
+ }else{
+ this.closeSocket();
+ }
+
+ this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
+
+ this.socket.onopen = () => {
+ console.log("WebSocket connection established");
+ };
+
+ this.socket.onmessage = (evt) => {
+ const { data } = evt;
+ const { code, data: _data } = JSON.parse(data);
+ if (code / 1 === 0) {
+ this.handleDeep(_data);
+ }
+ };
+
+ this.socket.onerror = (error) => {
+ console.error("WebSocket error:", error);
+ setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
+ };
+
+ this.socket.onclose = (event) => {
+ console.log("WebSocket connection closed:", event);
+ // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
+ };
+ },
+ startQuoteSocketa() {
+ // 行情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);
+ // console.log(_data);
+ if (code / 1 === 0) {
+ this.handleQoutes(_data);
+ }
+ };
+ },
+ initParama(symbol, type) {
+ // 初始化参数
+ if (type === "open" || !type) {
+ //console.log('开仓数据')
+ Axios.tradeBuyToken({}).then((res) => {
+ this.initOpena = 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();
+ }
+ },
+ initParam(symbol, type) {
+ // 初始化参数
+ if (type === "open" || type === "long" || type === "short" || !type) {
+ let initFunTimer = null;
+ let initFun = () => {
+ _initOpen(symbol)
+ .then((data) => {
+ this.initOpen = data;
+ clearTimeout(initFunTimer);
+ initFunTimer = null;
+ })
+ .catch((err) => {
+ initFunTimer = setTimeout(() => {
+ initFun();
+ }, 3000);
+ });
+ };
+ initFun();
+ }
+ if (type === "close" || !type) {
+ let initFunTimer = null;
+ let initFun = () => {
+ _initClose(symbol)
+ .then((data) => {
+ this.initClose = data;
+ console.log(this.initClose);
+ clearTimeout(initFunTimer);
+ initFunTimer = null;
+ })
+ .catch((err) => {
+ initFunTimer = setTimeout(() => {
+ initFun();
+ }, 3000);
+ });
+ };
+ initFunTimer = setTimeout(() => {
+ initFun();
+ }, 600);
+ }
+ if (type === "futrue" || !type) {
+ _futrueOrderInit(symbol).then((data) => {
+ this.initFutrue = data;
+ });
+ }
+ },
+ init(symbol) {
+ // 初始化页面
+ this.symbol = symbol.toLowerCase();
+ this.fetchQoutes(symbol);
+ this.fetchDeepData(symbol);
+ this.initParam(symbol); // 'open'
+ this.clearTimer();
+ //if (this.curTab === 'fetchOrderListCur') {
+ if (this.curTab === "fetchOrderListHold") {
+ //this.fetchOrderListCur(symbol)
+ this.fetchOrderListHold(symbol);
+ } else {
+ this.fetchFutrueHoldList(symbol);
+ }
+ },
+ inita(symbol) {
+ // 初始化页面
+ this.symbol = symbol.toLowerCase();
+ if (!this.socket) {
+ if(this.typeindex==0){
+ this.startQuoteSocketa(); // socket
+ }else{
+ this.startQuoteSocket(); // socket
+ }
+ }
+ // this.initParam(symbol); // 'open'
+ if(this.typeindex==0){
+ this.initParama(symbol); // 'open'
+ }else{
+ this.initParam(symbol); // 'open'
+ }
+ this.clearTimer();
+ this.getCoinPrce(symbol);
+ },
+ closeSocketa() {
+ this.socket && this.socket.close();
+ this.socket = null;
+ },
+ closeSocket() {
+ this.sockets.quotes && this.sockets.quotes.close();
+ this.sockets.deep && this.sockets.deep.close();
+ this.sockets.quotes = null;
+ this.sockets.deep = 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) => {
+ if(this.typeindex==0){
+ this.initParama(this.symbol);
+ }else{
+ 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}`);
+ },
+ //价格类型下拉框切换
+ 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;
+ },
+ },
+ startQuoteSocket() {
+ // 行情socket
+ this.sockets.quotes = new WebSocket(`${WS_URL}/1/${this.symbol}`);
+ // socket.onopen = () => {
+ // console.log('open')
+ // socket.send('hello')
+ // }
+ this.sockets.quotes.onmessage = (evt) => {
+ const { data } = evt;
+ const { code, data: _data } = JSON.parse(data);
+ if (code / 1 === 0) {
+ this.handleQoutes(_data);
+ }
+ };
+ },
+
+ beforeRouteEnter(to, from, next) {
+ var that = this
+ let {
+ params: {
+ symbol
+ },
+ } = to;
+ 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.init(symbol);
+ });
+ // }
+
+ } else {
+ next();
+ }
+ },
+ activated() {
+ let symbol = this.$route.params.symbol;
+ let catchSymbol = getStorage("symbol");
+ if (!symbol && catchSymbol) {
+ symbol = catchSymbol;
+ }
+ if (this.selectIndex / 1 === 2) {
+ this.curTab = "fetchFutrueHoldList";
+ } else {
+ this.curTab = "fetchOrderListHold";
+ }
+ this.symbol = symbol;
+ if(this.typeindex==0){
+ this.inita(symbol);
+ }else{
+ this.init(symbol);
+ }
+ },
+ activated() {
+ this.currentType = this.$route.query.currentType
+ ? this.$route.query.currentType
+ : "long";
+ },
+ deactivated() {
+ if(this.typeindex==0){
+ this.closeSocketa();
+ }else{
+ this.closeSocket();
+ }
+ this.clearTimer();
+ },
+
+
+ beforeDestroy() {
+ if(this.typeindex==0){
+ this.closeSocketa();
+ }else{
+ this.closeSocket();
+ }
+ // this.clearTimeout(true)
+ this.clearTimer();
+ },
+ };
</script>
<style lang="scss" scoped>
-//.list-enter-active, .list-leave-active {
-// transition: all .5s;
-// transform: translateY(30px)
-//}
-//.list-enter, .list-leave-to
-// /* .list-leave-active for below version 2.1.8 */ {
-// transform: translateY(0)
-//}
+ //.list-enter-active, .list-leave-active {
+ // transition: all .5s;
+ // transform: translateY(30px)
+ //}
+ //.list-enter, .list-leave-to
+ // /* .list-leave-active for below version 2.1.8 */ {
+ // transform: translateY(0)
+ //}
+ .typebox_box {
+ width: 50%;
+ background-color: #9691fa;
+ color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
-.no_touch {
- -webkit-user-select: none;
- user-select: none;
- -ms-user-select: none;
- -moz-user-select: none;
+ .typebox_boxa {
+ width: 50%;
+ background-color: #fff;
+ color: #9691fa;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
- @include themify() {
- background: themed("main_background");
- }
+ .no_touch {
+ -webkit-user-select: none;
+ user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
- min-height: 100vh;
-}
+ @include themify() {
+ background: themed("main_background");
+ }
-.list-enter-active,
-.list-leave-active {
- will-change: transform;
- transition: all 250ms;
-}
+ min-height: 100vh;
+ }
-.list-enter {
- opacity: 0;
- transform: translate3d(-100%, 0, 0);
-}
+ .typebox {
+ width: 100%;
+ height: 100px;
-.list-leave {
- 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;
-}
+ .list-enter-active,
+ .list-leave-active {
+ will-change: transform;
+ transition: all 250ms;
+ }
-.my-swipe {
- width: 100%;
-}
+ .list-enter {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
-.active-line {
- position: relative;
- // padding: 15px 0;
- color: #9691fa;
- font-weight: 600;
+ .list-leave {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
- @include themify() {
- // background-color: themed("color_main");
- }
-}
+ .rounded-view {
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ padding: 0 30px;
+ box-sizing: border-box;
+ }
-// .active-line::after {
-// content: '';
-// position: absolute;
-// left: 50%;
-// transform: translateX(-50%);
-// bottom: 0;
-// right: 0;
-// width: 280px;
-// height: 8px;
-// @include themify() {
-// background-color: themed("color_main");
-// }
-// }
+ .my-swipe {
+ width: 100%;
+ }
-.shadow {
- bottom: 108px;
- box-sizing: border-box;
-}
+ .active-line {
+ position: relative;
+ // padding: 15px 0;
+ color: #9691fa;
+ font-weight: 600;
-// .textColor {
-// color: #DAD5DC;
-// }
+ @include themify() {
+ // background-color: themed("color_main");
+ }
+ }
-.borderColor,
-.border-solid-grey {
- @include themify() {
- border: 1px solid themed("border_color");
- }
-}
+ // .active-line::after {
+ // content: '';
+ // position: absolute;
+ // left: 50%;
+ // transform: translateX(-50%);
+ // bottom: 0;
+ // right: 0;
+ // width: 280px;
+ // height: 8px;
+ // @include themify() {
+ // background-color: themed("color_main");
+ // }
+ // }
-.tabBackground1 {
- @include themify() {
- border: 1px solid themed("border_color1");
- }
-}
+ .shadow {
+ bottom: 108px;
+ box-sizing: border-box;
+ }
-// 下拉
-.option-box {
- position: absolute;
- left: 0;
- right: 0;
- top: 90px;
- width: 100%;
+ // .textColor {
+ // color: #DAD5DC;
+ // }
- @include themify() {
- background: themed("grey_bg");
- }
+ .borderColor,
+ .border-solid-grey {
+ @include themify() {
+ border: 1px solid themed("border_color");
+ }
+ }
- text-align: center;
- border-radius: 4px;
+ .tabBackground1 {
+ @include themify() {
+ border: 1px solid themed("border_color1");
+ }
+ }
- @include themify() {
- color: themed("text_color3");
- }
+ // 下拉
+ .option-box {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 90px;
+ width: 100%;
- z-index: 10;
-}
+ @include themify() {
+ background: themed("grey_bg");
+ }
-.option-box > div {
- padding: 30px 0;
-}
+ text-align: center;
+ border-radius: 4px;
-.option-box > div:hover {
- // background-color: #F5F5F5;
-}
+ @include themify() {
+ color: themed("text_color3");
+ }
-.k-select-box {
- position: relative;
- top: -130px;
- // justify-content: flex-end;
- padding: 0 30px;
- align-items: center;
+ z-index: 10;
+ }
- .select-box {
- width: 220px;
+ .option-box>div {
+ padding: 30px 0;
+ }
- @include themify() {
- background: themed("input_background");
- }
+ .option-box>div:hover {
+ // background-color: #F5F5F5;
+ }
- margin-right: 20px;
- }
-}
+ .k-select-box {
+ position: relative;
+ top: -130px;
+ // justify-content: flex-end;
+ padding: 0 30px;
+ align-items: center;
-.van-popup {
- @include themify() {
- background: themed("color_main");
- }
-}
+ .select-box {
+ width: 220px;
-.actions-active {
- @include themify() {
- background: themed("color_main") !important;
- }
-}
+ @include themify() {
+ background: themed("input_background");
+ }
-.trade {
- ::v-deep .van-action-sheet__item,
- ::v-deep .van-action-sheet__cancel {
- @include themify() {
- background: themed("input_background1");
- }
+ margin-right: 20px;
+ }
+ }
- @include themify() {
- color: themed("text_color");
- }
- }
+ .van-popup {
+ @include themify() {
+ background: themed("color_main");
+ }
+ }
- ::v-deep .van-action-sheet__gap {
- @include themify() {
- background: themed("cont_background");
- }
- }
-}
+ .actions-active {
+ @include themify() {
+ background: themed("color_main") !important;
+ }
+ }
-.list-data {
- margin: 30px;
- min-height: 550px;
- box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
- //
-}
-</style>
+ .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__gap {
+ @include themify() {
+ background: themed("cont_background");
+ }
+ }
+ }
+
+ .list-data {
+ margin: 30px;
+ min-height: 550px;
+ box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
+ //
+ }
+
+ //.list-enter-active, .list-leave-active {
+ // transition: all .5s;
+ // transform: translateY(30px)
+ //}
+ //.list-enter, .list-leave-to
+ // /* .list-leave-active for below version 2.1.8 */ {
+ // transform: translateY(0)
+ //}
+ .no_touch {
+ -webkit-user-select: none;
+ user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+ padding-bottom: 150px !important;
+ }
+
+ .list-enter-active,
+ .list-leave-active {
+ will-change: transform;
+ transition: all 250ms;
+ }
+
+ .list-enter {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ .list-leave {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+
+ .rounded-view {
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ box-sizing: border-box;
+ }
+
+ .my-swipe {
+ width: 100%;
+ }
+
+ .my-swipe .van-swipe-item {
+ }
+
+ .line {
+ height: 13px;
+
+ @include themify() {
+ background: themed("tab_background");
+ }
+ }
+
+ @keyframes animate1 {
+ 0% {
+ opacity: 1;
+ transform: translate3d(100%, 0, 0);
+ }
+
+ // 40% {
+ // opacity: 1;
+ // transform: translate3d(50%, 0, 0);
+ // }
+ 100% {
+ opacity: 1;
+ transform: translate3d(0%, 0, 0);
+ }
+ }
+
+ @keyframes animate2 {
+ 0% {
+ opacity: 1;
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ // 40% {
+ // opacity: 1;
+ // transform: translate3d(50%, 0, 0);
+ // }
+ 100% {
+ opacity: 1;
+ transform: translate3d(0%, 0, 0);
+ }
+ }
+
+ .slide1 {
+ animation: animate1 200ms linear;
+ }
+
+ .slide2 {
+ animation: animate2 200ms linear;
+ }
+
+ .line {
+ @include themify() {
+ background: themed("divi_line");
+ }
+ }
+
+ ::v-deep .contract-header {
+ @include themify() {
+ background: themed("main_background");
+ }
+ }
+
+ .tabBackground1 {
+ @include themify() {
+ border: 1px solid themed("border_color1");
+ }
+ }
+
+ .shadow {
+ bottom: 108px;
+ box-sizing: border-box;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3