|
|
@@ -1,13 +1,14 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
<view class="flex navbar">
|
|
|
- <view class="" v-for="(item,index) in navList" :class="{'action':current == index}" @click="changetab(index)">
|
|
|
+ <view class="" v-for="(item,index) in navList" :class="{'action':current == index}"
|
|
|
+ @click="changetab(index)">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <swiper class="swiper" :style="{'height': height}" :current="current">
|
|
|
+ <swiper class="swiper" :style="{'height': height}" :current="current" disable-touch>
|
|
|
<swiper-item v-for="navitem in navList">
|
|
|
- <scroll-view scroll-y="true" class="scroll" :style="{'height': height}">
|
|
|
+ <scroll-view scroll-y="true" class="scroll" :style="{'height': height}">
|
|
|
<view v-for="(item,ind) in navitem.list" class="usdtList padding-t-30 padding-b-30">
|
|
|
<view class="flex">
|
|
|
<view class="name">
|
|
|
@@ -20,9 +21,13 @@
|
|
|
<text>
|
|
|
{{item.symbol}}
|
|
|
</text>
|
|
|
- <text v-if="current==0"
|
|
|
- :class="{'font-color-green':+item.profit>=0,'font-color-red':+item.profit<0}">
|
|
|
- {{+item.profit}}
|
|
|
+ <text v-if="current==1 && item.direction==2"
|
|
|
+ :class="{'font-color-green':+((item.price - listOBj[item.symbol.replace('/','-')].last)/item.num)>=0,'font-color-red':+((item.price - listOBj[item.symbol.replace('/','-')].last)/item.num)<0}">
|
|
|
+ <!-- {{+item.profit}} -->{{ ((item.price - listOBj[item.symbol.replace('/','-')].last)/item.num).toFixed(2)|| ''}}
|
|
|
+ </text>
|
|
|
+ <text v-if="current==1 && item.direction==1"
|
|
|
+ :class="{'font-color-green':+(( listOBj[item.symbol.replace('/','-')].last- item.price )/item.num)>=0,'font-color-red':+(( listOBj[item.symbol.replace('/','-')].last- item.price )/item.num)<0}">
|
|
|
+ <!-- {{+item.profit}} -->{{ (( listOBj[item.symbol.replace('/','-')].last- item.price )/item.num).toFixed(2) || ''}}
|
|
|
</text>
|
|
|
</view>
|
|
|
<view @click="clearorder(item)" v-if="current==0" class="usdtListButtom">
|
|
|
@@ -109,7 +114,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<template v-if="current == 2">
|
|
|
- <view class="tipList" >
|
|
|
+ <view class="tipList">
|
|
|
<view class="nameTip">
|
|
|
盈虧狀態
|
|
|
</view>
|
|
|
@@ -126,7 +131,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
@@ -138,6 +143,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ geLevertade
|
|
|
+ } from '@/api/index.js';
|
|
|
+ import {
|
|
|
+ scoketNew,
|
|
|
+ scoketOpen
|
|
|
+ } from '@/utils/socket.js';
|
|
|
import {
|
|
|
levertadeLaverorder,
|
|
|
closeorder,
|
|
|
@@ -148,6 +160,8 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ listOBj: {}, //保存实际列表对象
|
|
|
+ timer: '',
|
|
|
height: '',
|
|
|
current: 0,
|
|
|
navList: [{
|
|
|
@@ -181,11 +195,29 @@
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
-
|
|
|
+ if (this.timer) {
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
},
|
|
|
onShow() {
|
|
|
+ this.geLevertade()
|
|
|
this.loadData()
|
|
|
},
|
|
|
+ onHide() {
|
|
|
+ this.closeScoket()
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ },
|
|
|
+ // 监听页面卸载
|
|
|
+ onUnload() {
|
|
|
+ // 关闭倒计时
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ },
|
|
|
+ // 监听页面后退
|
|
|
+ onBackPress() {
|
|
|
+ // 关闭倒计时
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ },
|
|
|
onReachBottom() {
|
|
|
|
|
|
},
|
|
|
@@ -214,7 +246,7 @@
|
|
|
if (tab == 'tab' && item.loaded) {
|
|
|
return
|
|
|
}
|
|
|
- if (item.loadingType == 'loading' || item.loadingType == 'noMore') {
|
|
|
+ if (item.loadingType == 'loading') {
|
|
|
return
|
|
|
}
|
|
|
levertadeLaverorder({
|
|
|
@@ -225,8 +257,7 @@
|
|
|
.then(({
|
|
|
list
|
|
|
}) => {
|
|
|
- // uni.hideLoading()
|
|
|
- console.log(list,'list+++++++')
|
|
|
+ console.log(list, 'list+++++++')
|
|
|
let arr = list.map(e => {
|
|
|
e.direction = +e.direction;
|
|
|
e.bond = +e.bond
|
|
|
@@ -236,9 +267,16 @@
|
|
|
});
|
|
|
item.list = arr;
|
|
|
this.$set(item, 'loaded', true);
|
|
|
+ if (obj.timer) {
|
|
|
+ clearTimeout(obj.timer);
|
|
|
+ obj.timer = null;
|
|
|
+ }
|
|
|
+ obj.timer = setTimeout(() => {
|
|
|
+ obj.loadData()
|
|
|
+ }, 2000)
|
|
|
+
|
|
|
})
|
|
|
.catch(e => {
|
|
|
- // uni.hideLoading()
|
|
|
console.log(e);
|
|
|
});
|
|
|
},
|
|
|
@@ -305,6 +343,66 @@
|
|
|
complete: () => {}
|
|
|
});
|
|
|
},
|
|
|
+ // 獲取幣種列表
|
|
|
+ geLevertade() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '數據加載中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+ const that = this;
|
|
|
+ geLevertade().then((e) => {
|
|
|
+ that.spList = e.list;
|
|
|
+ // 开启长连接
|
|
|
+ that.onScoket()
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 开始请求长连接
|
|
|
+ onScoket() {
|
|
|
+ const that = this;
|
|
|
+ that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
|
|
|
+ that.scoket.scoketOpen().then((res) => {
|
|
|
+ uni.hideLoading()
|
|
|
+ const requestList = that.spList.map((e) => {
|
|
|
+ return {
|
|
|
+ "channel": "tickers",
|
|
|
+ "instId": e.coinname.toUpperCase() + "-USDT"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ that.scoket.scoketSend({
|
|
|
+ "op": "subscribe",
|
|
|
+ "args": requestList
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res, '发送成功');
|
|
|
+ })
|
|
|
+ that.scoket.scoketMessage((res) => {
|
|
|
+ try {
|
|
|
+ if (res.data) {
|
|
|
+ // 判断是否已经有这个对象
|
|
|
+ // console.log(res.arg.instId, 'id', that.listOBj);
|
|
|
+ that.listOBj[res.arg.instId] = res.data[0];
|
|
|
+ const item = that.listOBj[res.arg.instId];
|
|
|
+ // 转为数字
|
|
|
+ item.last = +item.last;
|
|
|
+ item.sodUtc0 = +item.sodUtc0;
|
|
|
+ // 保存收益情况
|
|
|
+ item.bool = item.last - item.sodUtc0 > 0 ? true : false;
|
|
|
+ // 算出收益率
|
|
|
+ item.dcf = (+((item.last - item.sodUtc0) / item.sodUtc0 * 100).toFixed(
|
|
|
+ 2)) + '%'
|
|
|
+ item.name = item.instId.replace('-', '/')
|
|
|
+ that.listOBj = Object.assign({}, that.listOBj);
|
|
|
+ console.log(that.listOBj,'that.listOBj')
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log(res, res.data, '报错');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ closeScoket() {
|
|
|
+ this.scoket.scoketClose();
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -313,13 +411,16 @@
|
|
|
.swiper {
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.scroll {
|
|
|
padding: 0 20rpx;
|
|
|
}
|
|
|
+
|
|
|
.navbar {
|
|
|
justify-content: flex-start;
|
|
|
font-size: 40rpx;
|
|
|
padding: 30rpx;
|
|
|
+
|
|
|
view {
|
|
|
width: 184rpx;
|
|
|
height: 100rpx;
|
|
|
@@ -327,15 +428,16 @@
|
|
|
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.usdtList {
|
|
|
color: #707A8A;
|
|
|
border-bottom: 1px solid $border-color-light;
|
|
|
-
|
|
|
+
|
|
|
.name {
|
|
|
font-size: $font-lg;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.usdtListButtom {
|
|
|
font-size: $font-base;
|
|
|
background-color: #F5F5F5;
|
|
|
@@ -343,13 +445,13 @@
|
|
|
border-radius: 10rpx;
|
|
|
padding: 10rpx 20rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.tip {
|
|
|
padding-top: 10rpx;
|
|
|
padding-bottom: 30rpx;
|
|
|
font-size: $font-base;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.tipList {
|
|
|
font-size: $font-sm;
|
|
|
text-align: center;
|
|
|
@@ -357,11 +459,13 @@
|
|
|
max-width: 33%;
|
|
|
padding-top: 20rpx;
|
|
|
flex-grow: 1;
|
|
|
+
|
|
|
.nameTip {
|
|
|
padding-bottom: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.action {
|
|
|
font-weight: bold;
|
|
|
font-size: 44rpx;
|
