|
@@ -1,5 +1,9 @@
|
|
<template>
|
|
<template>
|
|
<view class="container">
|
|
<view class="container">
|
|
|
|
+ <view class="flex" style="justify-content: space-between;padding: 20rpx 30rpx;">
|
|
|
|
+ <image src="../../static/icon/user.png" mode="" style="width: 53rpx;height: 53rpx;" @click="navto('/pages/user/menu')"></image>
|
|
|
|
+ <!-- <image src="../../static/icon/tz.png" mode="" style="width: 53rpx;height: 53rpx;"></image> -->
|
|
|
|
+ </view>
|
|
<!-- 轮播图 start -->
|
|
<!-- 轮播图 start -->
|
|
<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
<swiper-item v-for="(item, index) in 2" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
|
|
<swiper-item v-for="(item, index) in 2" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
|
|
@@ -36,34 +40,43 @@
|
|
<view class="btm-item-name">
|
|
<view class="btm-item-name">
|
|
BTC/USDT
|
|
BTC/USDT
|
|
</view>
|
|
</view>
|
|
- <view class="btm-item-val">
|
|
|
|
- 15716.53
|
|
|
|
- </view>
|
|
|
|
- <view class="btm-item-bl">
|
|
|
|
- -2.44%
|
|
|
|
- </view>
|
|
|
|
|
|
+ <template v-if="listOBj['BTC-USDT']">
|
|
|
|
+ <view class="btm-item-val" :style="{'color': listOBj['BTC-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
|
|
|
|
+ {{listOBj['BTC-USDT'].last|| '--,--'}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btm-item-bl" :style="{'color': listOBj['BTC-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
|
|
|
|
+ {{listOBj['BTC-USDT'].dcf || '--,--'}}%
|
|
|
|
+ </view>
|
|
|
|
+ </template>
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
<view class="btm-item">
|
|
<view class="btm-item">
|
|
<view class="btm-item-name">
|
|
<view class="btm-item-name">
|
|
- BTC/USDT
|
|
|
|
- </view>
|
|
|
|
- <view class="btm-item-val">
|
|
|
|
- 15716.53
|
|
|
|
- </view>
|
|
|
|
- <view class="btm-item-bl">
|
|
|
|
- -2.44%
|
|
|
|
|
|
+ BCH/USDT
|
|
</view>
|
|
</view>
|
|
|
|
+ <template v-if="listOBj['BCH-USDT']">
|
|
|
|
+ <view class="btm-item-val" :style="{'color': listOBj['BCH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}" >
|
|
|
|
+ {{listOBj['BCH-USDT'].last || '--,--'}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btm-item-bl" :style="{'color': listOBj['BCH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
|
|
|
|
+ {{listOBj['BCH-USDT'].dcf || '--,--'}}%
|
|
|
|
+ </view>
|
|
|
|
+ </template>
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
<view class="btm-item">
|
|
<view class="btm-item">
|
|
<view class="btm-item-name">
|
|
<view class="btm-item-name">
|
|
ETH/USDT
|
|
ETH/USDT
|
|
</view>
|
|
</view>
|
|
- <view class="btm-item-val">
|
|
|
|
- 15716.53
|
|
|
|
- </view>
|
|
|
|
- <view class="btm-item-bl">
|
|
|
|
- -2.44%
|
|
|
|
- </view>
|
|
|
|
|
|
+ <template v-if="listOBj['ETH-USDT']">
|
|
|
|
+ <view class="btm-item-val" :style="{'color': listOBj['ETH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
|
|
|
|
+ {{listOBj['ETH-USDT'].last || '--,--'}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btm-item-bl" :style="{'color': listOBj['ETH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
|
|
|
|
+ {{listOBj['ETH-USDT'].dcf || '--,--'}}%
|
|
|
|
+ </view>
|
|
|
|
+ </template>
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -75,20 +88,23 @@
|
|
<view class="title-center">最新價格</view>
|
|
<view class="title-center">最新價格</view>
|
|
<view class="title-right">24h漲跌</view>
|
|
<view class="title-right">24h漲跌</view>
|
|
</view>
|
|
</view>
|
|
- <!-- <scroll-view class="swiper-box" scroll-y="true" :style="{ height: maxheight }">
|
|
|
|
- <view class="list-main flex">
|
|
|
|
- <view class="main-left">{{ }}</view>
|
|
|
|
- <view class="main-center" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.price == 0 ? '--.--' : item.price }}</view>
|
|
|
|
- <view class="main-right">
|
|
|
|
- <view class="btn" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.zd }}%</view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="list-main flex" v-for="(item,index ) in listOBj">
|
|
|
|
+ <view class="main-left">{{index}}</view>
|
|
|
|
+ <view class="main-center" :class="{ down: item.dcf > 0, ping: item.dcf == 0 }">
|
|
|
|
+ {{ item.last == 0 ? '--.--' : item.last }}</view>
|
|
|
|
+ <view class="main-right">
|
|
|
|
+ <view class="btn" :class="{ down: item.dcf > 0, ping: item.dcf == 0 }">{{ item.dcf }}%</view>
|
|
</view>
|
|
</view>
|
|
- </scroll-view> -->
|
|
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ import {
|
|
|
|
+ mapState,
|
|
|
|
+ mapMutations
|
|
|
|
+ } from 'vuex';
|
|
import {
|
|
import {
|
|
scoketNew,
|
|
scoketNew,
|
|
scoketOpen
|
|
scoketOpen
|
|
@@ -99,35 +115,19 @@
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- maxheight: '',
|
|
|
|
|
|
+
|
|
scoket: '',
|
|
scoket: '',
|
|
instId: 'IOTA-USDT', //请求的产品id
|
|
instId: 'IOTA-USDT', //请求的产品id
|
|
- spList:[],//需要查询的列表
|
|
|
|
- listOBj:{}//保存实际列表对象
|
|
|
|
|
|
+ spList: [], //需要查询的列表
|
|
|
|
+ listOBj: {} //保存实际列表对象
|
|
};
|
|
};
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
-
|
|
|
|
|
|
+ ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
},
|
|
},
|
|
onLoad: function(option) {
|
|
onLoad: function(option) {
|
|
-
|
|
|
|
|
|
|
|
- },
|
|
|
|
- onReady(res) {
|
|
|
|
- var _this = this;
|
|
|
|
- uni.getSystemInfo({
|
|
|
|
- success: resu => {
|
|
|
|
- const query = uni.createSelectorQuery();
|
|
|
|
- query.select('.swiper-box').boundingClientRect();
|
|
|
|
- query.exec(function(res) {
|
|
|
|
- _this.maxheight = resu.windowHeight - res[0].top + 'px';
|
|
|
|
- console.log('打印页面的剩余高度', _this.maxheight);
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- fail: res => {
|
|
|
|
- console.log('打印页面的剩余高度', res);
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
|
|
+
|
|
},
|
|
},
|
|
onShow: function() {
|
|
onShow: function() {
|
|
this.geLevertade()
|
|
this.geLevertade()
|
|
@@ -140,18 +140,31 @@
|
|
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- swiperChange(){
|
|
|
|
-
|
|
|
|
|
|
+ navto(url) {
|
|
|
|
+ console.log(url);
|
|
|
|
+ if (!this.hasLogin) {
|
|
|
|
+ // 保存地址
|
|
|
|
+ saveUrl();
|
|
|
|
+ // 登录拦截
|
|
|
|
+ interceptor();
|
|
|
|
+ } else {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ swiperChange() {
|
|
|
|
+
|
|
},
|
|
},
|
|
// 开始请求长连接
|
|
// 开始请求长连接
|
|
- onScoket(){
|
|
|
|
|
|
+ onScoket() {
|
|
const that = this;
|
|
const that = this;
|
|
that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
|
|
that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
|
|
that.scoket.scoketOpen().then((res) => {
|
|
that.scoket.scoketOpen().then((res) => {
|
|
- const requestList=that.spList.map((e)=>{
|
|
|
|
- return{
|
|
|
|
|
|
+ const requestList = that.spList.map((e) => {
|
|
|
|
+ return {
|
|
"channel": "tickers",
|
|
"channel": "tickers",
|
|
- "instId": e.coinname.toUpperCase()+"-USDT"
|
|
|
|
|
|
+ "instId": e.coinname.toUpperCase() + "-USDT"
|
|
}
|
|
}
|
|
})
|
|
})
|
|
that.scoket.scoketSend({
|
|
that.scoket.scoketSend({
|
|
@@ -160,27 +173,33 @@
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
console.log(res, '发送成功');
|
|
console.log(res, '发送成功');
|
|
})
|
|
})
|
|
- that.scoket.scoketMessage((res)=>{
|
|
|
|
- try{
|
|
|
|
- that.listOBj[res.arg.instId] = res.data
|
|
|
|
- console.log(that.listOBj,'that.listOBj++++++')
|
|
|
|
- }catch(e){
|
|
|
|
- console.log(res,'报错');
|
|
|
|
|
|
+ that.scoket.scoketMessage((res) => {
|
|
|
|
+ try {
|
|
|
|
+ if (res.data) {
|
|
|
|
+ // res.res.data[0].name = res.arg.instId
|
|
|
|
+ that.listOBj[res.arg.instId] = res.data[0];
|
|
|
|
+ that.listOBj[res.arg.instId].dcf = ((res.data[0].last*1 - res.data[0].sodUtc0*1)/(res.data[0].sodUtc0*1) * 100 ).toFixed(2)
|
|
|
|
+ that.listOBj = Object.assign( {},that.listOBj);
|
|
|
|
+ }
|
|
|
|
+ console.log(that.listOBj, 'that.listOBj++++++')
|
|
|
|
+ } catch (e) {
|
|
|
|
+
|
|
|
|
+ console.log(res, res.data, '报错');
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- closeScoket(){
|
|
|
|
|
|
+ closeScoket() {
|
|
that.scoket.scoketClose();
|
|
that.scoket.scoketClose();
|
|
},
|
|
},
|
|
// 获取查询列表
|
|
// 获取查询列表
|
|
- geLevertade(){
|
|
|
|
|
|
+ geLevertade() {
|
|
const that = this;
|
|
const that = this;
|
|
- geLevertade().then((e)=>{
|
|
|
|
|
|
+ geLevertade().then((e) => {
|
|
that.spList = e.list;
|
|
that.spList = e.list;
|
|
// 开启长连接
|
|
// 开启长连接
|
|
that.onScoket()
|
|
that.onScoket()
|
|
-
|
|
|
|
|
|
+
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 轮播图跳转
|
|
// 轮播图跳转
|
|
@@ -274,32 +293,39 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.list {
|
|
.list {
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
border-top-left-radius: 26rpx;
|
|
border-top-left-radius: 26rpx;
|
|
border-top-right-radius: 26rpx;
|
|
border-top-right-radius: 26rpx;
|
|
padding: 40rpx 15rpx 0;
|
|
padding: 40rpx 15rpx 0;
|
|
|
|
+
|
|
.list-title {
|
|
.list-title {
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #525c6e;
|
|
color: #525c6e;
|
|
padding-bottom: 32rpx;
|
|
padding-bottom: 32rpx;
|
|
|
|
+
|
|
.title-left {
|
|
.title-left {
|
|
text-align: left;
|
|
text-align: left;
|
|
width: 33%;
|
|
width: 33%;
|
|
}
|
|
}
|
|
|
|
+
|
|
.title-center {
|
|
.title-center {
|
|
text-align: center;
|
|
text-align: center;
|
|
width: 33%;
|
|
width: 33%;
|
|
}
|
|
}
|
|
|
|
+
|
|
.title-right {
|
|
.title-right {
|
|
text-align: right;
|
|
text-align: right;
|
|
width: 33%;
|
|
width: 33%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.list-main {
|
|
.list-main {
|
|
padding: 12rpx 0;
|
|
padding: 12rpx 0;
|
|
|
|
+
|
|
.main-left {
|
|
.main-left {
|
|
text-align: left;
|
|
text-align: left;
|
|
width: 33%;
|
|
width: 33%;
|
|
@@ -308,6 +334,7 @@
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #525c6e;
|
|
color: #525c6e;
|
|
}
|
|
}
|
|
|
|
+
|
|
.main-center {
|
|
.main-center {
|
|
text-align: center;
|
|
text-align: center;
|
|
width: 33%;
|
|
width: 33%;
|
|
@@ -315,18 +342,22 @@
|
|
font-family: PingFang SC;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #e15560;
|
|
color: #e15560;
|
|
|
|
+
|
|
&.down {
|
|
&.down {
|
|
color: #5ec886;
|
|
color: #5ec886;
|
|
}
|
|
}
|
|
|
|
+
|
|
&.ping {
|
|
&.ping {
|
|
color: #525c6e;
|
|
color: #525c6e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.main-right {
|
|
.main-right {
|
|
text-align: right;
|
|
text-align: right;
|
|
width: 33%;
|
|
width: 33%;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
|
|
+
|
|
.btn {
|
|
.btn {
|
|
width: 122rpx;
|
|
width: 122rpx;
|
|
height: 63rpx;
|
|
height: 63rpx;
|
|
@@ -338,9 +369,11 @@
|
|
font-family: PingFang SC;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
|
+
|
|
&.down {
|
|
&.down {
|
|
background: #5ec886;
|
|
background: #5ec886;
|
|
}
|
|
}
|
|
|
|
+
|
|
&.ping {
|
|
&.ping {
|
|
background: #f6f6f6;
|
|
background: #f6f6f6;
|
|
}
|
|
}
|