| | |
| | | <template> |
| | | <div class="contract"> |
| | | <div class="flex justify-between box-border px-30 mt-43"> |
| | | <div @click="onTap(0)" :class="{ active: tapIndex === 0 }" |
| | | class=" w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20">{{ $t('永续合约') }}</div> |
| | | <div @click="onTap(1)" :class="{ active: tapIndex === 1 }" class=" w-370 h-75 lh-75 rounded-lg font-27 text-center"> |
| | | {{ $t('交割合约') }}</div> |
| | | <div |
| | | @click="onTap(0)" |
| | | :class="{ active: tapIndex === 0 }" |
| | | class="w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20" |
| | | > |
| | | {{ $t("永续合约") }} |
| | | </div> |
| | | <div |
| | | @click="onTap(1)" |
| | | :class="{ active: tapIndex === 1 }" |
| | | class="w-370 h-75 lh-75 rounded-lg font-27 text-center" |
| | | > |
| | | {{ $t("交割合约") }} |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <div class="box-border px-30 mt-42"> |
| | | <div class="flex justify-between text-grey relative"> |
| | | <div class="flex"> |
| | | <span class="text-grey font-30">{{ $t('总资产') }}(USDT)</span> |
| | | <span class="text-grey font-30">{{ $t("总资产") }}(USDT)</span> |
| | | <div @click.stop="changeEyes"> |
| | | <img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" /> |
| | | <img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" /> |
| | | <img |
| | | :src="require('../../assets/image/assets-center/eye-open.png')" |
| | | class="w-32 h-18" |
| | | v-show="!eyetel" |
| | | /> |
| | | <img |
| | | :src="require('../../assets/image/assets-center/eye-close.png')" |
| | | class="w-32 h-18" |
| | | v-show="eyetel" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div class="right-clock"> |
| | | <img @click="goHistory" :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" /> |
| | | <div class="right-clock" @click="goHistory"> |
| | | <img |
| | | :src="require('../../assets/image/assets-center/Subtract.png')" |
| | | class="w-44 h-38" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel"> |
| | | {{ tapIndex === 0 ? funds.money_contract : funds.money_futures }} |
| | | <span class="font-39 text-grey">≈{{ currency.currency_symbol }}{{ funds.money_contract ? (((tapIndex === 0 ? |
| | | funds.money_contract : |
| | | funds.money_futures) * currency.rate).toFixed(2)) : ' --' }}</span> |
| | | <span class="font-39 text-grey" |
| | | >≈{{ currency.currency_symbol |
| | | }}{{ |
| | | funds.money_contract |
| | | ? ( |
| | | (tapIndex === 0 |
| | | ? funds.money_contract |
| | | : funds.money_futures) * currency.rate |
| | | ).toFixed(2) |
| | | : " --" |
| | | }}</span |
| | | > |
| | | </div> |
| | | <div class="font-70 font-66 mt-18 textColor" v-else>******** </div> |
| | | <div class="font-70 font-66 mt-18 textColor" v-else>********</div> |
| | | <div class="flex font-26 lh-32 mb-35 mt-40"> |
| | | <div class="flex flex-col "> |
| | | <div>{{ tapIndex === 0 ? $t('保证金余额') : $t('全部未实现盈亏') }}(USDT)</div> |
| | | <div class="flex flex-col"> |
| | | <div> |
| | | {{ |
| | | tapIndex === 0 ? $t("保证金余额") : $t("全部未实现盈亏") |
| | | }}(USDT) |
| | | </div> |
| | | <template v-if="!eyetel"> |
| | | <div class="font-40 mt-17 mb-9 textColor">{{ tapIndex === 0 ? funds.money_contract_deposit : |
| | | funds.money_futures_profit }}</div> |
| | | <div>≈{{ currency.currency_symbol }}{{ funds.money_contract_deposit ? (((tapIndex === 0 ? |
| | | funds.money_contract_deposit : |
| | | funds.money_futures_profit) * currency.rate).toFixed(2)) : ' --' }}</div> |
| | | <div class="font-40 mt-17 mb-9 textColor"> |
| | | {{ |
| | | tapIndex === 0 |
| | | ? funds.money_contract_deposit |
| | | : funds.money_futures_profit |
| | | }} |
| | | </div> |
| | | <div> |
| | | ≈{{ currency.currency_symbol |
| | | }}{{ |
| | | funds.money_contract_deposit |
| | | ? ( |
| | | (tapIndex === 0 |
| | | ? funds.money_contract_deposit |
| | | : funds.money_futures_profit) * currency.rate |
| | | ).toFixed(2) |
| | | : " --" |
| | | }} |
| | | </div> |
| | | </template> |
| | | <template v-else> |
| | | <div class="font-40 mt-17 mb-9 textColor">*********</div> |
| | | </template> |
| | | </div> |
| | | <div class="flex flex-col ml-110"> |
| | | <div>{{ $t('钱包余额(USDT)') }}</div> |
| | | <div>{{ $t("钱包余额(USDT)") }}</div> |
| | | <template v-if="!eyetel"> |
| | | <div class="font-40 mt-17 mb-9 textColor">{{ funds.money_wallet }}</div> |
| | | <div>≈{{ currency.currency_symbol }}{{ funds.money_wallet ? (funds.money_wallet * currency.rate).toFixed(2) |
| | | : |
| | | ' --' }}</div> |
| | | <div class="font-40 mt-17 mb-9 textColor"> |
| | | {{ funds.money_wallet }} |
| | | </div> |
| | | <div> |
| | | ≈{{ currency.currency_symbol |
| | | }}{{ |
| | | funds.money_wallet |
| | | ? (funds.money_wallet * currency.rate).toFixed(2) |
| | | : " --" |
| | | }} |
| | | </div> |
| | | </template> |
| | | <template v-else> |
| | | <div class="font-40 mt-17 mb-9 textColor">*********</div> |
| | | </template> |
| | | </div> |
| | | </div> |
| | | <div v-if="tapIndex === 0" class="flex flex-col lh-32 mb-35 "> |
| | | <div v-if="tapIndex === 0" class="flex flex-col lh-32 mb-35"> |
| | | <template v-if="!eyetel"> |
| | | <div>{{ $t('全部未实现盈亏') }}(USDT)</div> |
| | | <div class="font-40 mt-17 mb-9 textColor">{{ funds.money_contract_profit }}</div> |
| | | <div>≈{{ currency.currency_symbol }}{{ funds.money_contract_profit ? (funds.money_contract_profit * |
| | | currency.rate).toFixed(2) : ' --' }}</div> |
| | | <div>{{ $t("全部未实现盈亏") }}(USDT)</div> |
| | | <div class="font-40 mt-17 mb-9 textColor"> |
| | | {{ funds.money_contract_profit }} |
| | | </div> |
| | | <div> |
| | | ≈{{ currency.currency_symbol |
| | | }}{{ |
| | | funds.money_contract_profit |
| | | ? (funds.money_contract_profit * currency.rate).toFixed(2) |
| | | : " --" |
| | | }} |
| | | </div> |
| | | </template> |
| | | <template v-else> |
| | | <div class="font-40 mt-17 mb-9 textColor">*********</div> |
| | |
| | | <!--永续合约持有仓位--> |
| | | <div class="px-30"> |
| | | <template v-if="tapIndex === 0"> |
| | | <PerpetualPositionList :list-data="orderHold" @sell="onRecall"></PerpetualPositionList> |
| | | <PerpetualPositionList |
| | | :list-data="orderHold" |
| | | @sell="onRecall" |
| | | ></PerpetualPositionList> |
| | | </template> |
| | | <!--交割合约持有仓位--> |
| | | <template v-else> |
| | |
| | | <script> |
| | | import Axios from "@/API/assets"; |
| | | import { mapGetters } from "vuex"; |
| | | import PerpetualPositionList from '../perpetual-position-list/index.vue'; |
| | | import futrueHoldList from '@/page/deliveryContract/hold.vue' |
| | | import PerpetualPositionList from "../perpetual-position-list/index.vue"; |
| | | import futrueHoldList from "@/page/deliveryContract/hold.vue"; |
| | | import { _futrueOrderList, _orderListHold } from "@/API/trade.api"; |
| | | export default { |
| | | name: "contract", |
| | | components: { |
| | | PerpetualPositionList, |
| | | futrueHoldList |
| | | futrueHoldList, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | eyetel: false, |
| | | total: "", |
| | | timer: null, |
| | | timer2: null |
| | | } |
| | | timer2: null, |
| | | }; |
| | | }, |
| | | props: ['funds', 'index'], |
| | | props: ["funds", "index"], |
| | | computed: { |
| | | ...mapGetters('home', ['currency']) |
| | | ...mapGetters("home", ["currency"]), |
| | | }, |
| | | watch: { |
| | | index: { |
| | | handler: function (val) { |
| | | console.log(val) |
| | | this.tapIndex = val / 1 |
| | | console.log(val); |
| | | this.tapIndex = val / 1; |
| | | }, |
| | | immediate: true |
| | | } |
| | | immediate: true, |
| | | }, |
| | | }, |
| | | created() { |
| | | this.fetch() |
| | | this.fetch(); |
| | | }, |
| | | methods: { |
| | | goHistory() { |
| | | if (this.tapIndex === 0) { |
| | | this.$router.push({ path: '/perpetualHistory', query: { goback: 1 } }) |
| | | this.$router.push({ path: "/perpetualHistory", query: { goback: 1 } }); |
| | | } else { |
| | | this.$router.push({ path: '/deliveryContractHistory', query: { goback: 1 } }) |
| | | this.$router.push({ |
| | | path: "/deliveryContractHistory", |
| | | query: { goback: 1 }, |
| | | }); |
| | | } |
| | | }, |
| | | onTap(index) { |
| | | this.tapIndex = index |
| | | this.fetch() |
| | | this.tapIndex = index; |
| | | this.fetch(); |
| | | }, |
| | | fetch() { |
| | | this.clearTimer() |
| | | this.clearTimer(); |
| | | if (this.tapIndex === 0) { |
| | | this.fetchOrderListHold() |
| | | this.fetchOrderListHold(); |
| | | } else { |
| | | this.fetchFutrueHoldList() |
| | | this.fetchFutrueHoldList(); |
| | | } |
| | | }, |
| | | onRecall() { // 撤单or 平仓 evt |
| | | onRecall() { |
| | | // 撤单or 平仓 evt |
| | | // this.clearTimer() |
| | | // this[this.curTab](this.symbol) |
| | | // this.fetchOrderListHold() |
| | | }, |
| | | clearTimer() { |
| | | clearInterval(this.timer) |
| | | clearInterval(this.timer2) |
| | | this.timer = null |
| | | this.timer2 = null |
| | | clearInterval(this.timer); |
| | | clearInterval(this.timer2); |
| | | this.timer = null; |
| | | this.timer2 = null; |
| | | }, |
| | | fetchOrderListHold() { // 获取永续当前持仓 |
| | | _orderListHold().then(data => { |
| | | this.orderHold = data |
| | | }) |
| | | fetchOrderListHold() { |
| | | // 获取永续当前持仓 |
| | | _orderListHold().then((data) => { |
| | | this.orderHold = data; |
| | | }); |
| | | this.timer = setInterval(() => { |
| | | _orderListHold().then(data => { |
| | | this.orderHold = data |
| | | }) |
| | | }, 2000) |
| | | _orderListHold().then((data) => { |
| | | this.orderHold = data; |
| | | }); |
| | | }, 2000); |
| | | }, |
| | | fetchFutrueHoldList() { // 获取交割当前持仓 |
| | | _futrueOrderList().then(data => { |
| | | this.futrueHold = data |
| | | }) |
| | | console.log('fetchFutrueHoldList') |
| | | fetchFutrueHoldList() { |
| | | // 获取交割当前持仓 |
| | | _futrueOrderList().then((data) => { |
| | | this.futrueHold = data; |
| | | }); |
| | | console.log("fetchFutrueHoldList"); |
| | | this.timer2 = setInterval(() => { |
| | | _futrueOrderList().then(data => { |
| | | this.futrueHold = data |
| | | }) |
| | | }, 2000) |
| | | _futrueOrderList().then((data) => { |
| | | this.futrueHold = data; |
| | | }); |
| | | }, 2000); |
| | | }, |
| | | changeEyes() { |
| | | console.log('666') |
| | | console.log("666"); |
| | | this.eyetel = !this.eyetel; |
| | | }, |
| | | getData() { |
| | |
| | | }, |
| | | }, |
| | | beforeDestroy() { |
| | | this.clearTimer() |
| | | } |
| | | } |
| | | this.clearTimer(); |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .w-370 { |
| | | border: 1px solid #EAEDF2; |
| | | color: #868D9A; |
| | | border: 1px solid #eaedf2; |
| | | color: #868d9a; |
| | | } |
| | | |
| | | .active { |
| | | color: #FFFFFF; |
| | | color: #ffffff; |
| | | |
| | | @include themify() { |
| | | background: themed("btn_main"); |
| | |
| | | } |
| | | |
| | | .lh-32 { |
| | | color: #848E9C; |
| | | color: #848e9c; |
| | | } |
| | | |
| | | .font-40 { |
| | |
| | | |
| | | .cl { |
| | | color: #333333; |
| | | background: #EBECF0; |
| | | background: #ebecf0; |
| | | } |
| | | |
| | | .mr-13 { |
| | |
| | | } |
| | | |
| | | .col { |
| | | color: #848E9C; |
| | | color: #848e9c; |
| | | } |
| | | |
| | | .num { |
| | |
| | | } |
| | | |
| | | .blue { |
| | | color: #1D91FF; |
| | | color: #1d91ff; |
| | | } |
| | | |
| | | .active_green { |
| | | color: #2EBD85; |
| | | color: #2ebd85; |
| | | } |
| | | |
| | | .active_red { |
| | | color: #FF3E3E; |
| | | color: #ff3e3e; |
| | | } |
| | | |
| | | .active_tab1 { |
| | | background: #FF3E3E; |
| | | color: #FFFFFF; |
| | | background: #ff3e3e; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .active_tab2 { |
| | | background: #2EBD85; |
| | | color: #FFFFFF; |
| | | background: #2ebd85; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .font-6 { |