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.
469 lines
10 KiB
469 lines
10 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 :coin="symbol.coinSymbol" :type="type" :currency="symbol.baseSymbol"></transaction>
|
|
</view>
|
|
<view class="positionSide">
|
|
<positionList v-on:depthChange="depthChange" :sum="sum" :marketDetail="marketDetail" :bboList="bboList">
|
|
</positionList>
|
|
</view>
|
|
</view>
|
|
<view class="orderList">
|
|
<entrustOrderList></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: [],
|
|
symbol: {},
|
|
marketDetail: {
|
|
close: 0,
|
|
usdRate: 0
|
|
},
|
|
bboList: {},
|
|
type:'buy',
|
|
webSocketChannel: {},
|
|
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.type=uni.getStorageSync('orderType');
|
|
console.log(this.type)
|
|
this.type=this.type?this.type:'buy';
|
|
uni.removeStorageSync('orderType');
|
|
},
|
|
methods: {
|
|
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
|
|
|
|
})
|
|
.catch(e => {
|
|
console.log(e)
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
})
|
|
},
|
|
getBboList() {
|
|
const bboList = this.$api.bboList({
|
|
"symbol": this.symbol.symbol
|
|
});
|
|
bboList.then(res => {
|
|
this.bboList = res
|
|
this.statisticsSum()
|
|
})
|
|
.catch(e => {
|
|
console.log(e)
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
})
|
|
},
|
|
getMarketDetail() {
|
|
const marketDetail = this.$api.marketDetail({
|
|
"symbol": this.symbol.symbol
|
|
});
|
|
marketDetail.then(res => {
|
|
this.marketDetail = res
|
|
|
|
})
|
|
.catch(e => {
|
|
console.log(e)
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
})
|
|
},
|
|
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);
|
|
|
|
}
|
|
|
|
})
|
|
.catch(e => {
|
|
console.log(e)
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
})
|
|
|
|
|
|
|
|
},
|
|
initWebSocket() {
|
|
|
|
|
|
this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL
|
|
|
|
|
|
var that = this
|
|
this.websock.getWebSocketMsg(data => {
|
|
|
|
if (data.channel === 'conn') {
|
|
that.websockId = data.data
|
|
that.subpairsgroup()
|
|
that.subbbo()
|
|
that.submarketDetail()
|
|
} else if (data.channel === 'market.pairsgroup') {
|
|
that.symbolList = data.data.USDT;
|
|
} else if (data.channel === that.webSocketChannel.bbo) {
|
|
that.bboList = data.data;
|
|
|
|
} else if (data.channel === that.webSocketChannel.bbo) {
|
|
that.bboList = data.data;
|
|
that.statisticsSum();
|
|
|
|
} else if (data.channel === that.webSocketChannel.trade) {
|
|
that.tradeList = data.data;
|
|
} else if (data.channel === that.webSocketChannel.detail) {
|
|
that.marketDetail = data.data;
|
|
}
|
|
});
|
|
},
|
|
//订阅交易对
|
|
subpairsgroup() {
|
|
this.subWebSocket('pairsgroup', ['market.pairsgroup'])
|
|
},
|
|
//取消订阅交易对
|
|
unsubpairsgroup() {
|
|
this.unsubWebSocket('pairsgroup', ['market.pairsgroup'])
|
|
},
|
|
subbbo() {
|
|
this.webSocketChannel.bbo = 'market.' + this.symbol.symbol + ".bbo";
|
|
this.subWebSocket('bbo', [this.webSocketChannel.bbo])
|
|
},
|
|
|
|
unsubbbo() {
|
|
this.unsubWebSocket('bbo', [this.webSocketChannel.bbo])
|
|
},
|
|
subtrade() {
|
|
this.webSocketChannel.trade = 'market.' + this.symbol.symbol + ".trade";
|
|
this.subWebSocket('trade', [this.webSocketChannel.trade])
|
|
},
|
|
|
|
unsubtrade() {
|
|
this.unsubWebSocket('trade', [this.webSocketChannel.trade])
|
|
},
|
|
submarketDetail() {
|
|
this.webSocketChannel.detail = 'market.' + this.symbol.symbol + ".detail";
|
|
this.subWebSocket('detail', [this.webSocketChannel.detail])
|
|
},
|
|
|
|
unsubmarketDetail() {
|
|
this.unsubWebSocket('detail', [this.webSocketChannel.detail])
|
|
},
|
|
|
|
subWebSocket(type, channel) {
|
|
const data = {
|
|
event: 'sub',
|
|
type: type,
|
|
id: this.websockId,
|
|
channel: channel
|
|
};
|
|
|
|
this.websock.webSocketSendMsg(data)
|
|
console.log("websocket发送", data);
|
|
},
|
|
unsubWebSocket(type, channel) {
|
|
const data = {
|
|
event: 'un_sub',
|
|
type: type,
|
|
id: this.websockId,
|
|
channel: channel
|
|
};
|
|
this.websock.webSocketSendMsg(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.unsubbbo()
|
|
this.unsubmarketDetail()
|
|
this.symbol = item;
|
|
uni.setStorageSync('symbol', this.symbol);
|
|
this.getMarketDetail()
|
|
this.getBboList();
|
|
this.subbbo()
|
|
this.submarketDetail()
|
|
}
|
|
|
|
},
|
|
}
|
|
</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>
|
|
|