You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
402 lines
8.8 KiB
402 lines
8.8 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation :showBack="false">
|
|
<view class="leftMenuBtn" @click="popupShow = true">{{symbol.pair}}</view>
|
|
<view slot="right" class="right" @click="goto('kLine')"></view>
|
|
</navigation>
|
|
<view class="content">
|
|
<view class="transactionSide">
|
|
<transaction v-on:onChangeType="onChangeType" :contractConfig="contractConfig" :symbol="symbol" :marketDetail="marketDetail"
|
|
:type="type" ></transaction>
|
|
</view>
|
|
<view class="positionSide">
|
|
<positionList v-on:depthChange="depthChange" :sum="sum" :marketDetail="marketDetail" :bboList="bboList">
|
|
</positionList>
|
|
</view>
|
|
</view>
|
|
<view class="orderList">
|
|
<entrustOrderList :symbol="symbol"></entrustOrderList>
|
|
</view>
|
|
|
|
<u-popup class="popup" :show="popupShow" mode="left" @close="popupShow = false" @open="popupShow = true"
|
|
bgColor="#15141F">
|
|
<view class="popupContent">
|
|
<!-- nav -->
|
|
<view class="head">
|
|
<text class="item">{{ i18n.TrandingPair }}</text>
|
|
<text class="center">{{ i18n.LatestPrice }}</text>
|
|
<text class="item">{{ i18n.RiseAndfall }}</text>
|
|
</view>
|
|
<!-- 列表 -->
|
|
<view class="coinList">
|
|
<scroll-view scroll-y="true" style="height: 86vh;" scroll-with-animation="true"
|
|
@touchmove.stop.prevent="">
|
|
<view class="coin" v-for="(item, index) in symbolList" :key="index" @click="switchTo(item)">
|
|
<view class="name">{{item.pair}}</view>
|
|
<view class="price">{{ item.price}}</view>
|
|
<view class="priceChange" :class="{ 'down': item.percent< 0 }">
|
|
{{item.percent>=0?'+'+item.percent:item.percent}}%
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- tabBar -->
|
|
<tab-bar :selectActive="2" :isTarde="true"></tab-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "trade",
|
|
data() {
|
|
return {
|
|
popupShow: false,
|
|
symbolList: [],
|
|
contractConfig: {
|
|
leverage:[]
|
|
},
|
|
symbol: {},
|
|
marketDetail: {
|
|
close: 0,
|
|
usdRate: 0
|
|
},
|
|
bboList: {},
|
|
type: 'buy',
|
|
sum: {}
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("markets");
|
|
},
|
|
},
|
|
onHide() {
|
|
this.websock.closeSocket();
|
|
},
|
|
onUnload() {
|
|
this.websock.closeSocket();
|
|
},
|
|
onLoad() {
|
|
|
|
|
|
},
|
|
onShow() {
|
|
this.getSymbolGroup();
|
|
this.initWebSocket();
|
|
this.symbol = uni.getStorageSync('symbol');
|
|
if (this.symbol) {
|
|
this.getMarketDetail()
|
|
this.getBboList();
|
|
this.getContractConfig();
|
|
}
|
|
|
|
|
|
if (uni.getStorageSync('orderType')) {
|
|
this.type = uni.getStorageSync('orderType');
|
|
uni.removeStorageSync('orderType');
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
|
|
onChangeType(type) {
|
|
this.type = type
|
|
},
|
|
statisticsSum() {
|
|
this.sum.buy = 0
|
|
this.sum.sell = 0
|
|
console.log(this.sum.buy);
|
|
|
|
for (var buy in this.bboList.buy) {
|
|
if (buy >= 5) {
|
|
break;
|
|
}
|
|
this.sum.buy += parseFloat(this.bboList.buy[buy].size)
|
|
}
|
|
for (var sell in this.bboList.sell) {
|
|
if (sell >= 5) {
|
|
break;
|
|
}
|
|
this.sum.sell += parseFloat(this.bboList.sell[sell].size)
|
|
}
|
|
|
|
},
|
|
getTradeList() {
|
|
const tradeList = this.$api.tradeList({
|
|
"symbol": this.symbol.symbol
|
|
});
|
|
tradeList.then(res => {
|
|
this.tradeList = res
|
|
|
|
});
|
|
},
|
|
getContractConfig() {
|
|
const tradeList = this.$api.contractConfig({
|
|
"pair": this.symbol.symbol
|
|
});
|
|
tradeList.then(res => {
|
|
this.contractConfig = res
|
|
this.contractConfig.leverage=res.leverage.split(',')
|
|
});
|
|
},
|
|
getBboList() {
|
|
const bboList = this.$api.bboList({
|
|
"symbol": this.symbol.symbol
|
|
});
|
|
bboList.then(res => {
|
|
this.bboList = res
|
|
this.statisticsSum()
|
|
});
|
|
},
|
|
getMarketDetail() {
|
|
const marketDetail = this.$api.marketDetail({
|
|
"symbol": this.symbol.symbol
|
|
});
|
|
marketDetail.then(res => {
|
|
this.marketDetail = res
|
|
|
|
})
|
|
},
|
|
getSymbolGroup() {
|
|
const symbolGroup = this.$api.symbolGroup({
|
|
"model": "contract"
|
|
});
|
|
symbolGroup.then(res => {
|
|
this.symbolList = res.USDT
|
|
this.symbol = uni.getStorageSync('symbol');
|
|
if (!this.symbol) {
|
|
this.symbol = this.symbolList[0]
|
|
this.getMarketDetail()
|
|
this.getBboList();
|
|
this.switchTo(this.symbol);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
initWebSocket() {
|
|
|
|
|
|
this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL
|
|
|
|
|
|
var that = this
|
|
this.websock.getWebSocketMsg(data => {
|
|
|
|
if (data.channel === 'conn') {
|
|
that.websock.setId(data.data);
|
|
that.websock.subPairsgroup();
|
|
that.websock.subBbo(that.symbol.symbol)
|
|
that.websock.subDetail(that.symbol.symbol)
|
|
} else if (data.channel === 'market.pairsgroup') {
|
|
that.symbolList = data.data.USDT;
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + '.bbo') {
|
|
that.bboList = data.data;
|
|
that.statisticsSum();
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + '.trade') {
|
|
that.tradeList = data.data;
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + '.detail') {
|
|
that.marketDetail = data.data;
|
|
} else {
|
|
console.log('未知', data.data)
|
|
}
|
|
});
|
|
},
|
|
|
|
depthChange(e) {
|
|
console.log(e);
|
|
},
|
|
goto(page) {
|
|
let url = '';
|
|
switch (page) {
|
|
case 'kLine':
|
|
url = '/pages/markets/kLine'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
},
|
|
/**
|
|
* 切换当前交易货币对
|
|
*/
|
|
switchTo(item) {
|
|
this.popupShow = false;
|
|
this.getContractConfig();
|
|
this.websock.unSubBbo(this.symbol.symbol)
|
|
this.websock.unSubTrade(this.symbol.symbol)
|
|
this.symbol = item;
|
|
uni.setStorageSync('symbol', this.symbol);
|
|
this.getMarketDetail()
|
|
this.getBboList();
|
|
this.websock.subBbo(this.symbol.symbol)
|
|
this.websock.subDetail(this.symbol.symbol)
|
|
}
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
padding-bottom: 198rpx; // 避免底部TabBar盖住内容
|
|
|
|
.leftMenuBtn {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
position: absolute;
|
|
left: 32rpx;
|
|
font-size: 24rpx;
|
|
background-image: url(../../static/maskets/menu.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 48rpx;
|
|
padding-left: 54rpx;
|
|
font-size: 34rpx;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.right {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
position: absolute;
|
|
right: 32rpx;
|
|
font-size: 24rpx;
|
|
background-image: url(../../static/home/ic_increase.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 48rpx;
|
|
color: #FFBC1F;
|
|
}
|
|
|
|
|
|
.content {
|
|
margin-top: 200rpx;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 40rpx;
|
|
margin-bottom: 32rpx;
|
|
background: #211F32;
|
|
display: flex;
|
|
|
|
.transactionSide {
|
|
width: 444rpx;
|
|
margin-left: 28rpx;
|
|
}
|
|
|
|
.positionSide {
|
|
width: 242rpx;
|
|
margin-left: 36rpx;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.orderList {}
|
|
|
|
.popup {
|
|
.popupContent {
|
|
width: 586rpx;
|
|
font-size: 24rpx;
|
|
|
|
.head {
|
|
margin-top: 108rpx;
|
|
color: #818197;
|
|
margin-left: 16rpx;
|
|
display: flex;
|
|
|
|
.center {
|
|
width: 190rpx;
|
|
padding-left: 30rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.item {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.coinList {
|
|
margin: 0rpx 32rpx 0;
|
|
overflow: hidden;
|
|
|
|
.coin {
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 64rpx;
|
|
padding: 12rpx 0;
|
|
font-size: 24rpx;
|
|
|
|
.name {
|
|
display: inline-block;
|
|
width: 180rpx;
|
|
height: 100%;
|
|
line-height: 64rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.price {
|
|
display: inline-block;
|
|
width: 180rpx;
|
|
height: 100%;
|
|
line-height: 64rpx;
|
|
font-size: 24rpx;
|
|
// text-align: center;
|
|
}
|
|
|
|
.priceChange {
|
|
position: absolute;
|
|
right: 0;
|
|
display: inline-block;
|
|
width: 164rpx;
|
|
height: 64rpx;
|
|
border-radius: 20rpx;
|
|
line-height: 64rpx;
|
|
background-color: $mainColor;
|
|
font-size: 24rpx;
|
|
text-align: right;
|
|
padding-right: 16rpx;
|
|
box-sizing: border-box;
|
|
|
|
|
|
&::before {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
background-image: url(../../static/maskets/ic_arrow_up.png);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
top: 18rpx;
|
|
left: 16rpx;
|
|
}
|
|
|
|
|
|
&.down {
|
|
background-color: $assistRed;
|
|
|
|
&::before {
|
|
background-image: url(../../static/maskets/ic_arrow_down.png);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
</style>
|
|
|