|
|
@ -3,106 +3,106 @@ |
|
|
|
<!-- nav --> |
|
|
|
<navigation>{{ symbol.pair }}</navigation> |
|
|
|
<!-- 价格百分比 --> |
|
|
|
|
|
|
|
<!-- #ifdef APP-PLUS --> |
|
|
|
<view class="header"> |
|
|
|
|
|
|
|
<!-- #ifdef APP-PLUS --> |
|
|
|
<view class="header"> |
|
|
|
<!-- #endif --> |
|
|
|
|
|
|
|
<!-- #ifdef H5 --> |
|
|
|
<view class="headerH5"> |
|
|
|
<!-- #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 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> |
|
|
|
<view class="bottom"> |
|
|
|
<view class="left"> |
|
|
|
<view class="title">{{ i18n.Highest }}</view> |
|
|
|
<view class="value">{{marketDetail.high}}</view> |
|
|
|
<view class="tab"> |
|
|
|
<view class="item" :class="{ select: type === '1min' }" @click="onChangeType('1min')">1min |
|
|
|
</view> |
|
|
|
<view class="center"> |
|
|
|
<view class="title">{{ i18n.Lowest }}</view> |
|
|
|
<view class="value">{{marketDetail.low}}</view> |
|
|
|
<view class="item" :class="{ select: type === '5min' }" @click="onChangeType('5min')">5min |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="title">{{ i18n.Amount }}</view> |
|
|
|
<view class="value">{{marketDetail.amount}}</view> |
|
|
|
<view class="item" :class="{ select: type === '15min' }" @click="onChangeType('15min')">15min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '30min' }" @click="onChangeType('30min')">30min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '60min' }" @click="onChangeType('60min')">60min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '1day' }" @click="onChangeType('1day')">1day |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '1week' }" @click="onChangeType('1week')">1week |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '1mon' }" @click="onChangeType('1mon')">1mon |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="tab"> |
|
|
|
<view class="item" :class="{ select: type === '1min' }" @click="onChangeType('1min')">1min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '5min' }" @click="onChangeType('5min')">5min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '15min' }" @click="onChangeType('15min')">15min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '30min' }" @click="onChangeType('30min')">30min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '60min' }" @click="onChangeType('60min')">60min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '1day' }" @click="onChangeType('1day')">1day |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '1week' }" @click="onChangeType('1week')">1week |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '1mon' }" @click="onChangeType('1mon')">1mon |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- K线图 --> |
|
|
|
<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive" |
|
|
|
style="height:500rpx;width: 100%;position: relative; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"> |
|
|
|
<!-- K线图 --> |
|
|
|
<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive" |
|
|
|
style="height:500rpx;width: 100%;position: relative; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"> |
|
|
|
|
|
|
|
</view> |
|
|
|
<!-- 买卖挂牌表 --> |
|
|
|
<view class="MarketTrades"> |
|
|
|
<view class="headTitle">Market trades</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 class="MarketTrades"> |
|
|
|
<view class="headTitle">Market trades</view> |
|
|
|
<view class="table"> |
|
|
|
<view class="box"> |
|
|
|
<view class="title"> |
|
|
|
<view class="quantity">{{ i18n.Quantity }}</view> |
|
|
|
<view class="price">{{ i18n.BuyingPrice }}</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 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> |
|
|
|
|
|
|
|
<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 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> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
@ -138,16 +138,16 @@ |
|
|
|
onShow() { |
|
|
|
this.into(); |
|
|
|
|
|
|
|
}, |
|
|
|
onHide() { |
|
|
|
this.websock.closeSocket(); |
|
|
|
}, |
|
|
|
onUnload() { |
|
|
|
this.websock.closeSocket(); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
}, |
|
|
|
onHide() { |
|
|
|
this.websock.closeSocket(); |
|
|
|
}, |
|
|
|
onUnload() { |
|
|
|
this.websock.closeSocket(); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
into() { |
|
|
|
this.symbol = uni.getStorageSync('symbol'); |
|
|
|
if (!this.symbol) { |
|
|
@ -183,10 +183,10 @@ |
|
|
|
|
|
|
|
}, |
|
|
|
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); |
|
|
|
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); |
|
|
|
}, |
|
|
|
|
|
|
|
formateDate(time) { |
|
|
@ -207,14 +207,22 @@ |
|
|
|
// } |
|
|
|
|
|
|
|
// return time; |
|
|
|
var time;
time=this.$index.formatyymmddhhmmss(parseInt(time * 1000))
if (this.type === '1mon' ) {
time = time.split(' ')[0];
time=time.substring(time.indexOf('/')+1,time.length)
} else if (this.type === '1day' || this.type === '1week') {
time = time.split(' ')[0];
}
return time; |
|
|
|
var time; |
|
|
|
time = this.$index.formatyymmddhhmmss(parseInt(time * 1000)) |
|
|
|
if (this.type === '1mon') { |
|
|
|
time = time.split(' ')[0]; |
|
|
|
time = time.substring(time.indexOf('/') + 1, time.length) |
|
|
|
} else if (this.type === '1day' || this.type === '1week') { |
|
|
|
time = time.split(' ')[0]; |
|
|
|
} |
|
|
|
return time; |
|
|
|
}, |
|
|
|
getBboList() { |
|
|
|
const bboList = this.$api.bboList({ |
|
|
|
"symbol": this.symbol.symbol |
|
|
|
}); |
|
|
|
bboList.then(res => { |
|
|
|
console.log(9999999,res) |
|
|
|
bboList.then(res => { |
|
|
|
console.log(9999999, res) |
|
|
|
this.bboList = res |
|
|
|
this.statisticsSum(); |
|
|
|
}) |
|
|
@ -255,15 +263,15 @@ |
|
|
|
|
|
|
|
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) |
|
|
|
|
|
|
|
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') { |
|
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + '.bbo') { |
|
|
|
that.bboList = data.data; |
|
|
|
that.statisticsSum(); |
|
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + '.trade') { |
|
|
@ -280,7 +288,7 @@ |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
upkline(data) { |
|
|
|
|
|
|
|
if (data.id === this.kdata.values[this.kdata.values.length - 1][5]) { |
|
|
@ -332,8 +340,8 @@ |
|
|
|
url, |
|
|
|
}); |
|
|
|
}, |
|
|
|
btnClick(type) { |
|
|
|
uni.setStorageSync('orderType',type); |
|
|
|
btnClick(type) { |
|
|
|
uni.setStorageSync('orderType', type); |
|
|
|
// #ifdef H5 |
|
|
|
history.back() |
|
|
|
// #endif |
|
|
@ -348,13 +356,13 @@ |
|
|
|
</script> |
|
|
|
<script module="klineE" lang="renderjs"> |
|
|
|
let kline |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
start: 98, |
|
|
|
end: 100 |
|
|
|
|
|
|
|
}; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
start: 98, |
|
|
|
end: 100 |
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
|
|
|
@ -409,25 +417,25 @@ |
|
|
|
var chartDom = document.getElementById('kline'); |
|
|
|
if (!this.is) { |
|
|
|
console.log("this.is11111111", this.is) |
|
|
|
this.myChart = echarts.init(chartDom); |
|
|
|
if(this.kdata.categoryData.length<100){ |
|
|
|
this.start=50 |
|
|
|
this.end=100 |
|
|
|
}else if(this.kdata.categoryData.length<200){ |
|
|
|
this.start=85 |
|
|
|
this.end=100 |
|
|
|
}else{ |
|
|
|
this.start=98 |
|
|
|
this.end=100 |
|
|
|
} |
|
|
|
|
|
|
|
}else{ |
|
|
|
console.log(this.myChart.getModel().option.dataZoom[0].start) |
|
|
|
this.start=this.myChart.getModel().option.dataZoom[0].start |
|
|
|
this.end=this.myChart.getModel().option.dataZoom[0].end |
|
|
|
this.myChart = echarts.init(chartDom); |
|
|
|
if (this.kdata.categoryData.length < 100) { |
|
|
|
this.start = 50 |
|
|
|
this.end = 100 |
|
|
|
} else if (this.kdata.categoryData.length < 200) { |
|
|
|
this.start = 85 |
|
|
|
this.end = 100 |
|
|
|
} else { |
|
|
|
this.start = 98 |
|
|
|
this.end = 100 |
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
console.log(this.myChart.getModel().option.dataZoom[0].start) |
|
|
|
this.start = this.myChart.getModel().option.dataZoom[0].start |
|
|
|
this.end = this.myChart.getModel().option.dataZoom[0].end |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.is = true; |
|
|
|
var option; |
|
|
|
this.myChart.setOption( |
|
|
@ -570,7 +578,7 @@ |
|
|
|
xAxisIndex: [0, 1], |
|
|
|
type: 'slider', |
|
|
|
top: '85%', |
|
|
|
start: this.start, |
|
|
|
start: this.start, |
|
|
|
end: this.end |
|
|
|
} |
|
|
|
], |
|
|
@ -746,21 +754,21 @@ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.headerH5{ |
|
|
|
|
|
|
|
.headerH5 { |
|
|
|
background: #000000; |
|
|
|
margin-top: 122rpx; |
|
|
|
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; |
|
|
@ -769,46 +777,46 @@ |
|
|
|
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; |
|
|
@ -852,6 +860,7 @@ |
|
|
|
flex: 1; |
|
|
|
overflow: hidden; |
|
|
|
height: 450rpx; |
|
|
|
margin-bottom: 132rpx; |
|
|
|
|
|
|
|
.title { |
|
|
|
display: flex; |
|
|
@ -932,7 +941,11 @@ |
|
|
|
|
|
|
|
.btn { |
|
|
|
display: flex; |
|
|
|
margin: 96rpx 32rpx; |
|
|
|
z-index: 999; |
|
|
|
position: fixed; |
|
|
|
bottom: 16rpx; |
|
|
|
left: 2%; |
|
|
|
width: 96%; |
|
|
|
|
|
|
|
.button { |
|
|
|
flex: 1; |
|
|
|