<template>
|
<v-page style="background-color: #F1F3F7;">
|
<!-- <v-header :left-arrow="false" :title="$t('exchange.a2')"></v-header> -->
|
<!-- <van-tabs
|
:ellipsis="false"
|
:border="false"
|
class="border-b"
|
:active="tab"
|
@change="tab = $event.detail.name"
|
>
|
<van-tab :title="`${$t('contract.a0')}`" :name="0"></van-tab>
|
<van-tab
|
:title="`${$t('contract.a1')}(${symbolLeft})`"
|
:name="1"
|
></van-tab>
|
<van-tab :title="$t('contract.a2')" :name="2"></van-tab>
|
<van-tab :title="$t('contract.a3')" :name="3"></van-tab>
|
<van-tab
|
:title="`${$t('exchange.a2')}${$t('assets.a7')}(${symbolLeft})`"
|
:name="4"
|
></van-tab>
|
</van-tabs> -->
|
<!-- 开仓 -->
|
|
<view class="layout-main">
|
<open-position :query="query" :collect="collect" @option="option" :isShow="isShow" ref="openposition"
|
:increase="increase" @symbol="symbolListShow = true" @getSymbolDetail="symbolDetail = $event"
|
:symbolDetail="symbolDetail" :tabs="tabs" v-if="tab == 0" />
|
</view>
|
|
<!-- 持仓 -->
|
<main class="layout-main" v-if="tab == 1">
|
<position :isShow="isShow" :symbolDetail="symbolDetail" :symbolLeft="symbolLeft" />
|
</main>
|
<!-- 委托 -->
|
<main class="layout-main" v-if="tab == 2">
|
<contract-entrustment style="min-height: 100%" />
|
</main>
|
<!-- 历史 -->
|
<main class="layout-main" v-if="tab == 3">
|
<contract-history v-if="tab == 3" />
|
</main>
|
<!-- 流水 -->
|
<main class="layout-main" v-if="tab == 4">
|
<contract-bill :symbolLeft="symbolLeft" />
|
</main>
|
<van-popup :show="symbolListShow" @close="symbolListShow = false" close-on-popstate position="left"
|
custom-style="height:100%;width:70%">
|
<symbol-list :collect="collect" :title="$t('contract.a4')" :marketList="marketList" :heyue="1"
|
:symbols="symbols" @check-symbol="checkSymbol" />
|
</van-popup>
|
<van-dialog use-slot :show="contractStatusShow" :title="contractAgreement.title" @confirm="openContract"
|
show-cancel-button @cancel="contractStatusShow = false">
|
<view class="p-md overflow-scroll">
|
<rich-text class="p-md" :nodes="contractAgreement.body"></rich-text>
|
</view>
|
</van-dialog>
|
</v-page>
|
</template>
|
<script>
|
import openPosition from "@/pages/exchange/open-position";
|
import position from "@/pages/exchange/position";
|
import contractEntrustment from "@/pages/exchange/contract-entrustment";
|
import contractHistory from "@/pages/exchange/contract-history";
|
import symbolList from "@/pages/exchange/symbol-list";
|
import contractBill from "@/pages/exchange/contract-bill";
|
import Home from "@/api/home";
|
import Contract from "@/api/contract";
|
import {
|
mapState
|
} from "vuex";
|
export default {
|
name: "contract",
|
props: {
|
isShow: {
|
default: '',
|
type: Boolean,
|
required: false,
|
},
|
tabs: {
|
default: '',
|
type: String,
|
required: false,
|
},
|
},
|
components: {
|
openPosition,
|
position,
|
contractEntrustment,
|
contractHistory,
|
symbolList,
|
contractBill,
|
},
|
data() {
|
return {
|
tab: 0,
|
collect: [],
|
marketList: [],
|
symbolListShow: false,
|
contractStatusShow: false,
|
contractAgreement: {},
|
symbolDetail: {},
|
query: {},
|
increase: {},
|
tabbar: '',
|
msg: 'swapMarketList',
|
symbols: ''
|
}
|
},
|
onShow() {
|
// if (this.$route.query) {
|
// const username = this.$route.query;
|
// console.log(decodeURIComponent(username.symbol), 1); // 输出：JohnDoe
|
// this.query.symbol = decodeURIComponent(username.symbol)
|
// }
|
|
},
|
mounted() {
|
// if (this.$route.query) {
|
// const username = this.$route.query;
|
// console.log(decodeURIComponent(username.symbol), 1); // 输出：JohnDoe
|
// this.query.symbol = decodeURIComponent(username.symbol)
|
// }
|
},
|
computed: {
|
symbolLeft() {
|
|
if (!this.query.symbol) return "";
|
return this.query.symbol.split("/")[0];
|
},
|
isLogin() {
|
return Boolean(uni.getStorageSync("token"));
|
},
|
...mapState({
|
ws: "ws1",
|
}),
|
},
|
watch: {
|
isShow(n) {
|
if (n) {
|
setTimeout(() => {
|
this.ws.send({
|
cmd: "sub",
|
msg: this.msg,
|
});
|
}, 200);
|
} else {
|
this.ws.send({
|
cmd: "unsub",
|
msg: this.msg,
|
});
|
}
|
},
|
},
|
methods: {
|
// 获取市场行情
|
getMarketList() {
|
Contract.getMarketList().then((res) => {
|
// 整理数据格式
|
this.marketList = res.data.map((item) => {
|
item.marketInfoList.forEach((el) => {
|
el.coin_name = el.symbol;
|
});
|
return item;
|
});
|
this.$nextTick(() => {
|
this.linkSocket();
|
});
|
if (!this.query.symbol) {
|
let parentItem = this.marketList[0].marketInfoList[0];
|
this.checkSymbol(parentItem);
|
}
|
});
|
},
|
//
|
checkSymbol(obj) {
|
this.symbols = obj.coin_name
|
this.symbolListShow = false;
|
if (obj.pair_name != this.query.symbol)
|
this.query = {
|
symbol: obj.pair_name
|
};
|
},
|
// 获取自选列表
|
getCollect() {
|
if (!this.isLogin) return;
|
Home.getCollect()
|
.then((res) => {
|
this.collect = res.data || [];
|
})
|
.catch(() => {});
|
},
|
|
// 链接socket
|
linkSocket() {
|
let msg = this.msg;
|
this.ws.send({
|
cmd: "sub",
|
msg: msg,
|
});
|
this.ws.on("message", (res) => {
|
if (!this.isShow) return;
|
let {
|
data,
|
sub
|
} = res;
|
if (sub == msg) {
|
this.marketList = data.map((item) => {
|
item.marketInfoList.forEach((el) => {
|
el.coin_name = el.symbol;
|
});
|
return item;
|
});
|
if (this.query.symbol) {
|
var symbol = this.query.symbol.split('/')
|
// console.log(symbol)
|
var market = this.marketList.find((item) => item.coin_name == symbol[1])
|
|
this.increase = market.marketInfoList.find((item) => item.coin_name == symbol[0]) || {}
|
// console.log(this.increase)
|
}
|
|
}
|
});
|
},
|
// 添加自选
|
option() {
|
let data = {
|
pair_name: this.query.symbol,
|
};
|
Home.option(data)
|
.then((res) => {
|
this.getCollect();
|
if (res.data) {
|
this.$toast(this.$t("exchange.a6"));
|
} else {
|
this.$toast(this.$t("exchange.a7"));
|
}
|
})
|
.catch(() => {});
|
},
|
// 获取开通永续合约
|
openStatus() {
|
if (!this.isLogin) return;
|
Contract.openStatus({}).then((res) => {
|
if (!res.data.open) {
|
this.contractAgreement = res.data.contractAgreement;
|
this.contractStatusShow = true;
|
this.$refs.openposition.getSymbolDetail();
|
}
|
});
|
},
|
// 开通永续合约
|
openContract() {
|
Contract.opening().then(() => {
|
this.$toast(this.$t("contract.a5"));
|
this.contractStatusShow = false;
|
});
|
},
|
},
|
created() {
|
if (this.$route.query.symbol) {
|
const username = this.$route.query;
|
console.log(decodeURIComponent(username.symbol), 1); // 输出：JohnDoe
|
this.query.symbol = decodeURIComponent(username.symbol)
|
}
|
this.getMarketList();
|
this.getCollect();
|
// this.openStatus();
|
},
|
destroyed() {
|
this.ws.send({
|
cmd: "unsub",
|
msg: "swapMarketList",
|
});
|
},
|
};
|
</script>
|
