|
|
@ -4,105 +4,105 @@ |
|
|
|
<navigation>{{ symbol.pair }}</navigation> |
|
|
|
<!-- 价格百分比 --> |
|
|
|
|
|
|
|
<!-- #ifdef APP-PLUS --> |
|
|
|
<view class="header"> |
|
|
|
<!-- #endif --> |
|
|
|
<!-- #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> |
|
|
@ -183,10 +183,10 @@ |
|
|
|
|
|
|
|
}, |
|
|
|
onChangeType(type) { |
|
|
|
this.websock.unSubKline(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); |
|
|
|
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) |
|
|
|
console.log(9999999, res) |
|
|
|
this.bboList = res |
|
|
|
this.statisticsSum(); |
|
|
|
}) |
|
|
@ -258,12 +266,12 @@ |
|
|
|
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.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') { |
|
|
@ -333,7 +341,7 @@ |
|
|
|
}); |
|
|
|
}, |
|
|
|
btnClick(type) { |
|
|
|
uni.setStorageSync('orderType',type); |
|
|
|
uni.setStorageSync('orderType', type); |
|
|
|
// #ifdef H5 |
|
|
|
history.back() |
|
|
|
// #endif |
|
|
@ -410,21 +418,21 @@ |
|
|
|
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 |
|
|
|
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{ |
|
|
|
} 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.start = this.myChart.getModel().option.dataZoom[0].start |
|
|
|
this.end = this.myChart.getModel().option.dataZoom[0].end |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -747,7 +755,7 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.headerH5{ |
|
|
|
.headerH5 { |
|
|
|
background: #000000; |
|
|
|
margin-top: 122rpx; |
|
|
|
padding: 0 32rpx; |
|
|
@ -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; |
|
|
|