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.
617 lines
13 KiB
617 lines
13 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation>{{ symbol.pair }}</navigation>
|
|
<!-- 价格百分比 -->
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="header">
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef H5 -->
|
|
<view class="headerH5">
|
|
<!-- #endif -->
|
|
|
|
<view class="top">
|
|
<!-- 实时价格 -->
|
|
<text class="price">{{parseFloat(marketDetail.close).toFixed(marketDetail.baseCoinScale)}}</text>
|
|
<!-- 百分比,根据数据正负判断颜色 -->
|
|
<text class="percent"
|
|
:class="{ rise: marketDetail.percent>=0 }">{{marketDetail.percent>=0?'+'+marketDetail.percent:marketDetail.percent}}%</text>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="left">
|
|
<view class="title">{{ i18n.Highest }}</view>
|
|
<view class="value">{{marketDetail.high}}</view>
|
|
</view>
|
|
<view class="center">
|
|
<view class="title">{{ i18n.Lowest }}</view>
|
|
<view class="value">{{marketDetail.low}}</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">{{ i18n.Amount }}</view>
|
|
<view class="value">{{marketDetail.amount}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<kline v-if="showKline" :width="chartWidth" :height="chartHeight" :symbol="symbol.symbol" :language="language"></kline>
|
|
|
|
<!-- 买卖挂牌表 -->
|
|
<view class="MarketTrades">
|
|
<view class="headTitle"> {{ i18n.Markettrades }}</view>
|
|
<view class="table">
|
|
<view class="box">
|
|
<view class="title">
|
|
<view class="quantity">{{ i18n.Quantity }}</view>
|
|
<view class="price">{{ i18n.BuyingPrice }}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in bboList.buy" :key="index">
|
|
<text class="price">{{parseFloat(item.size).toFixed(6)}}</text>
|
|
<text class="num buy">{{ item.price }}</text>
|
|
<view class="buybg" :style="`width: ${item.size/sum.buy*100 }%;`"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<view class="title">
|
|
<view class="quantity">{{ i18n.Quantity }}</view>
|
|
<view class="price">{{ i18n.SellPrice }}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in bboList.sell" :key="index">
|
|
<text class="price">{{parseFloat(item.size).toFixed(6)}}</text>
|
|
<text class="num sell">{{ item.price }}</text>
|
|
<view class="sellbg" :style="`width: ${item.size/sum.sell*100 }%;`"></view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn">
|
|
<!-- open按钮 -->
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="btnClick('buy')">
|
|
{{ i18n.open }}
|
|
</u-button>
|
|
<!-- close按钮 -->
|
|
<u-button class="button" color="#F4506A" throttleTime="500" @click="btnClick('sell')">
|
|
{{ i18n.close }}
|
|
</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import kline from '@/components/kline/kline.vue'
|
|
export default {
|
|
name: "trade",
|
|
components: {
|
|
kline
|
|
},
|
|
data() {
|
|
return {
|
|
kdata: {},
|
|
type: '1min',
|
|
symbol: null,
|
|
marketDetail: {
|
|
close: 0,
|
|
usdRate: 0
|
|
},
|
|
bboList: {},
|
|
sum: {},
|
|
//设备信息
|
|
device: {},
|
|
//是否是移动H5
|
|
isH5APP: false,
|
|
// 窗口高度
|
|
windowHeight: 0,
|
|
// 窗口宽度
|
|
windowWidth: 0,
|
|
showKline: false,
|
|
// k线图宽度
|
|
chartWidth: 0,
|
|
// K线图高度
|
|
chartHeight: 0,
|
|
//菜单栏高度(单位PX)
|
|
menuHeight: 0,
|
|
language:'en'
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("markets");
|
|
},
|
|
},
|
|
onLoad() {
|
|
//this.kdata = this.splitData(ktest.JSON);
|
|
// console.log(this.kdata, 1111)
|
|
|
|
//延时计算窗口
|
|
|
|
},
|
|
onShow() {
|
|
this.into();
|
|
|
|
},
|
|
onHide() {
|
|
this.websock.closeSocket();
|
|
},
|
|
onUnload() {
|
|
this.websock.closeSocket();
|
|
|
|
},
|
|
|
|
methods: {
|
|
//计算窗口布局
|
|
calcWindow() {
|
|
//获取窗口宽高
|
|
this.windowWidth = uni.getSystemInfoSync().windowWidth
|
|
this.windowHeight = uni.getSystemInfoSync().windowHeight
|
|
//计算K线图宽高
|
|
this.device = uni.getDeviceInfo()
|
|
|
|
let dType = this.device.deviceType
|
|
//如果是PC pad 未知设备 则将高设为K线宽
|
|
if (dType == 'pc' || dType == 'pad' || dType == 'unknow') {
|
|
this.chartWidth = this.windowWidth
|
|
this.chartHeight = this.windowHeight - this.menuHeight
|
|
} else {
|
|
//否则如果是APP因为已经旋转屏幕所以正常
|
|
this.chartWidth = this.windowWidth
|
|
this.chartHeight = this.windowHeight - this.menuHeight
|
|
}
|
|
//计算完成 显示K线图
|
|
this.showKline = true
|
|
},
|
|
// 调整为横屏
|
|
confirmPrimary() {
|
|
plus.screen.lockOrientation('landscape-primary')
|
|
plus.navigator.setFullscreen(true);
|
|
},
|
|
// //取消横屏（调整为竖屏）
|
|
cancelPrimary() {
|
|
plus.screen.lockOrientation('portrait-primary')
|
|
plus.navigator.setFullscreen(false);
|
|
},
|
|
toPage(url) {
|
|
uni.navigateTo({
|
|
url,
|
|
fail(err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
into() {
|
|
this.symbol = uni.getStorageSync('symbol');
|
|
setTimeout(() => {
|
|
//计算窗口
|
|
this.calcWindow()
|
|
}, 200)
|
|
if (!this.symbol) {
|
|
// #ifdef H5
|
|
history.back()
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS
|
|
uni.navigateBack()
|
|
// #endif
|
|
}
|
|
const language = uni.getStorageSync("language")|| 'en_US';
|
|
if(language.indexOf('zh')>-1){
|
|
this.language=language
|
|
}else{
|
|
this.language=language.split('_')[0]
|
|
}
|
|
this.getMarketDetail();
|
|
this.initWebSocket();
|
|
this.getBboList()
|
|
},
|
|
statisticsSum() {
|
|
this.sum.buy = 0
|
|
this.sum.sell = 0
|
|
|
|
for (var buy in this.bboList.buy) {
|
|
if (buy >= 8) {
|
|
break;
|
|
}
|
|
this.sum.buy += parseFloat(this.bboList.buy[buy].size)
|
|
}
|
|
for (var sell in this.bboList.sell) {
|
|
if (sell >= 8) {
|
|
break;
|
|
}
|
|
this.sum.sell += parseFloat(this.bboList.sell[sell].size)
|
|
}
|
|
|
|
},
|
|
onChangeType(type) {
|
|
this.websock.unSubKline(this.type, this.symbol.symbol);
|
|
this.type = type
|
|
this.websock.subKHistory(this.type, this.symbol.symbol);
|
|
this.websock.subKline(this.type, this.symbol.symbol);
|
|
},
|
|
|
|
|
|
getBboList() {
|
|
const bboList = this.$api.bboList({
|
|
"symbol": this.symbol.symbol
|
|
});
|
|
bboList.then(res => {
|
|
// console.log(9999999, 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
|
|
})
|
|
})
|
|
},
|
|
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.websock.setId(data.data);
|
|
that.websock.subBbo(that.symbol.symbol)
|
|
that.websock.subDetail(that.symbol.symbol)
|
|
// that.websock.subKHistory(that.type, that.symbol.symbol)
|
|
// that.websock.subKline(that.type, 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 if (data.channel === 'market.' + that.symbol.symbol + ".kline." + that.type) {
|
|
if (data.event === 'req') {
|
|
//that.kdata = that.splitData(data.data)
|
|
} else {
|
|
//that.upkline(data.data)
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
|
|
goto(page) {
|
|
let url = '';
|
|
switch (page) {
|
|
case 'kLine':
|
|
url = '/pages/markets/kLine'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
},
|
|
btnClick(type) {
|
|
uni.setStorageSync('orderType', type);
|
|
// #ifdef H5
|
|
history.back()
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS
|
|
uni.navigateBack()
|
|
// #endif
|
|
}
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
|
|
.header {
|
|
background: #000000;
|
|
margin-top: 200rpx;
|
|
padding: 0 32rpx;
|
|
|
|
|
|
.top {
|
|
height: 80rpx;
|
|
border-bottom: 2rpx solid #A1A0A8;
|
|
|
|
.price {
|
|
line-height: 80rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.percent {
|
|
vertical-align: text-top;
|
|
margin-left: 20rpx;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
background-color: rgba($color: #F26666, $alpha: 0.2);
|
|
color: #F26666;
|
|
|
|
&.rise {
|
|
color: #00E8A2;
|
|
background-color: rgba($color: #00E8A2, $alpha: 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
|
|
.title {
|
|
margin-top: 24rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.value {
|
|
margin: 24rpx 0;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.center {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.headerH5 {
|
|
background: #000000;
|
|
margin-top: 122rpx;
|
|
padding: 0 32rpx;
|
|
|
|
.top {
|
|
height: 80rpx;
|
|
border-bottom: 2rpx solid #A1A0A8;
|
|
margin-top: 30px;
|
|
.price {
|
|
line-height: 80rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.percent {
|
|
vertical-align: text-top;
|
|
margin-left: 20rpx;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
background-color: rgba($color: #F26666, $alpha: 0.2);
|
|
color: #F26666;
|
|
|
|
&.rise {
|
|
color: #00E8A2;
|
|
background-color: rgba($color: #00E8A2, $alpha: 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
|
|
.title {
|
|
margin-top: 24rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.value {
|
|
margin: 24rpx 0;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.center {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.tab {
|
|
display: flex;
|
|
background: #000000;
|
|
|
|
.item {
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
|
|
&.select {
|
|
background: rgba(0, 232, 162, 0.3);
|
|
border-radius: 19px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.kline {
|
|
|
|
background: #000000;
|
|
}
|
|
|
|
.MarketTrades {
|
|
.headTitle {
|
|
padding-left: 32rpx;
|
|
font-size: 34rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.table {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
|
|
.box {
|
|
padding-left: 32rpx;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
height: 450rpx;
|
|
margin-bottom: 132rpx;
|
|
|
|
.title {
|
|
display: flex;
|
|
margin-bottom: 16rpx;
|
|
color: #A1A0A8;
|
|
|
|
.quantity {
|
|
flex: 1;
|
|
}
|
|
|
|
.price {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
display: flex;
|
|
|
|
.price {
|
|
display: block;
|
|
width: 50%;
|
|
text-align: left;
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.num {
|
|
display: block;
|
|
width: 50%;
|
|
text-align: right;
|
|
padding-right: 32rpx;
|
|
z-index: 1;
|
|
|
|
&.buy {
|
|
color: #00E8A2;
|
|
}
|
|
|
|
&.sell {
|
|
color: #F4506A;
|
|
}
|
|
}
|
|
|
|
.buybg {
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
background: rgba($color: #00E8A2, $alpha: 0.1)
|
|
}
|
|
|
|
.sellbg {
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
background: rgba($color: #F4506A, $alpha: 0.1)
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
z-index: 999;
|
|
position: fixed;
|
|
bottom: 16rpx;
|
|
left: 2%;
|
|
width: 96%;
|
|
|
|
.button {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
height: 96rpx;
|
|
border-radius: 16rpx;
|
|
font-weight: 700;
|
|
font-size: 28rpx;
|
|
color: #15141F !important;
|
|
|
|
&:nth-child(2) {
|
|
margin-left: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|