|
@@ -12,20 +12,20 @@
|
|
<view class="gnh-top flex">
|
|
<view class="gnh-top flex">
|
|
<view class="top-item flex">
|
|
<view class="top-item flex">
|
|
<image src="../../static/icon/gn-1.png" mode="" class=""></image>
|
|
<image src="../../static/icon/gn-1.png" mode="" class=""></image>
|
|
- <view class="">认购</view>
|
|
|
|
|
|
+ <view class="">認購</view>
|
|
</view>
|
|
</view>
|
|
<view class="top-item flex">
|
|
<view class="top-item flex">
|
|
<image src="../../static/icon/gn-2.png" mode="" class=""></image>
|
|
<image src="../../static/icon/gn-2.png" mode="" class=""></image>
|
|
- <view class="">充币</view>
|
|
|
|
|
|
+ <view class="">充幣</view>
|
|
</view>
|
|
</view>
|
|
<view class="top-item flex">
|
|
<view class="top-item flex">
|
|
<image src="../../static/icon/gn-3.png" mode="" class=""></image>
|
|
<image src="../../static/icon/gn-3.png" mode="" class=""></image>
|
|
- <view class="">提币</view>
|
|
|
|
|
|
+ <view class="">提幣</view>
|
|
</view>
|
|
</view>
|
|
- <view class="top-item flex">
|
|
|
|
|
|
+ <!-- <view class="top-item flex">
|
|
<image src="../../static/icon/gn-4.png" mode="" class=""></image>
|
|
<image src="../../static/icon/gn-4.png" mode="" class=""></image>
|
|
- <view class="">语言</view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="">語言</view>
|
|
|
|
+ </view> -->
|
|
<view class="top-item flex">
|
|
<view class="top-item flex">
|
|
<image src="../../static/icon/gn-5.png" mode="" class=""></image>
|
|
<image src="../../static/icon/gn-5.png" mode="" class=""></image>
|
|
<view class="">客服</view>
|
|
<view class="">客服</view>
|
|
@@ -68,31 +68,121 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 功能盒 end -->
|
|
<!-- 功能盒 end -->
|
|
|
|
+ <!-- -->
|
|
|
|
+ <view class="list">
|
|
|
|
+ <view class="list-title flex">
|
|
|
|
+ <view class="title-left">交易對</view>
|
|
|
|
+ <view class="title-center">最新價格</view>
|
|
|
|
+ <view class="title-right">24h漲跌</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>
|
|
|
|
+ </scroll-view> -->
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ import {
|
|
|
|
+ scoketNew,
|
|
|
|
+ scoketOpen
|
|
|
|
+ } from '@/utils/socket.js';
|
|
|
|
+ import {
|
|
|
|
+ geLevertade
|
|
|
|
+ } from '@/api/index.js';
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
-
|
|
|
|
|
|
+ maxheight: '',
|
|
|
|
+ scoket: '',
|
|
|
|
+ instId: 'IOTA-USDT', //请求的产品id
|
|
|
|
+ spList:[],//需要查询的列表
|
|
|
|
+ listOBj:{}//保存实际列表对象
|
|
};
|
|
};
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
|
|
|
|
},
|
|
},
|
|
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()
|
|
|
|
+ },
|
|
|
|
+ onHide() {
|
|
|
|
+ this.closeScoket()
|
|
},
|
|
},
|
|
//下拉刷新
|
|
//下拉刷新
|
|
onPullDownRefresh() {
|
|
onPullDownRefresh() {
|
|
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ swiperChange(){
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ // 开始请求长连接
|
|
|
|
+ onScoket(){
|
|
|
|
+ const that = this;
|
|
|
|
+ that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
|
|
|
|
+ that.scoket.scoketOpen().then((res) => {
|
|
|
|
+ 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{
|
|
|
|
+ that.listOBj[res.arg.instId] = res.data
|
|
|
|
+ console.log(that.listOBj,'that.listOBj++++++')
|
|
|
|
+ }catch(e){
|
|
|
|
+ console.log(res,'报错');
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ closeScoket(){
|
|
|
|
+ that.scoket.scoketClose();
|
|
|
|
+ },
|
|
|
|
+ // 获取查询列表
|
|
|
|
+ geLevertade(){
|
|
|
|
+ const that = this;
|
|
|
|
+ geLevertade().then((e)=>{
|
|
|
|
+ that.spList = e.list;
|
|
|
|
+ // 开启长连接
|
|
|
|
+ that.onScoket()
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ },
|
|
// 轮播图跳转
|
|
// 轮播图跳转
|
|
bannerNavToUrl(item) {
|
|
bannerNavToUrl(item) {
|
|
// #ifdef H5
|
|
// #ifdef H5
|
|
@@ -117,9 +207,7 @@
|
|
width: 726rpx;
|
|
width: 726rpx;
|
|
height: 273rpx;
|
|
height: 273rpx;
|
|
|
|
|
|
- .carousel-item {
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
|
|
+ .carousel-item {}
|
|
|
|
|
|
// margin: 20rpx 0 0;
|
|
// margin: 20rpx 0 0;
|
|
image {
|
|
image {
|
|
@@ -128,46 +216,56 @@
|
|
height: 273rpx;
|
|
height: 273rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.gnh-wrap {
|
|
.gnh-wrap {
|
|
margin: 20rpx 0;
|
|
margin: 20rpx 0;
|
|
width: 750rpx;
|
|
width: 750rpx;
|
|
height: 315rpx;
|
|
height: 315rpx;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
border-radius: 50rpx 50rpx 0 0;
|
|
border-radius: 50rpx 50rpx 0 0;
|
|
|
|
+
|
|
.gnh-top {
|
|
.gnh-top {
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
height: 156rpx;
|
|
height: 156rpx;
|
|
|
|
+
|
|
.top-item {
|
|
.top-item {
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+
|
|
image {
|
|
image {
|
|
width: 66rpx;
|
|
width: 66rpx;
|
|
height: 75rpx;
|
|
height: 75rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
view {
|
|
view {
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #525C6E;
|
|
color: #525C6E;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.gnh-btm {
|
|
.gnh-btm {
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
|
|
+
|
|
.btm-item {
|
|
.btm-item {
|
|
width: 33%;
|
|
width: 33%;
|
|
text-align: center;
|
|
text-align: center;
|
|
padding-top: 20rpx;
|
|
padding-top: 20rpx;
|
|
|
|
+
|
|
.btm-item-name {
|
|
.btm-item-name {
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #525C6E;
|
|
color: #525C6E;
|
|
}
|
|
}
|
|
|
|
+
|
|
.btm-item-val {
|
|
.btm-item-val {
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #DD3745;
|
|
color: #DD3745;
|
|
padding: 20rpx 0;
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
|
|
+
|
|
.btm-item-bl {
|
|
.btm-item-bl {
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
@@ -176,4 +274,78 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .list {
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ border-top-left-radius: 26rpx;
|
|
|
|
+ border-top-right-radius: 26rpx;
|
|
|
|
+ padding: 40rpx 15rpx 0;
|
|
|
|
+ .list-title {
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #525c6e;
|
|
|
|
+ padding-bottom: 32rpx;
|
|
|
|
+ .title-left {
|
|
|
|
+ text-align: left;
|
|
|
|
+ width: 33%;
|
|
|
|
+ }
|
|
|
|
+ .title-center {
|
|
|
|
+ text-align: center;
|
|
|
|
+ width: 33%;
|
|
|
|
+ }
|
|
|
|
+ .title-right {
|
|
|
|
+ text-align: right;
|
|
|
|
+ width: 33%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .list-main {
|
|
|
|
+ padding: 12rpx 0;
|
|
|
|
+ .main-left {
|
|
|
|
+ text-align: left;
|
|
|
|
+ width: 33%;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #525c6e;
|
|
|
|
+ }
|
|
|
|
+ .main-center {
|
|
|
|
+ text-align: center;
|
|
|
|
+ width: 33%;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #e15560;
|
|
|
|
+ &.down {
|
|
|
|
+ color: #5ec886;
|
|
|
|
+ }
|
|
|
|
+ &.ping {
|
|
|
|
+ color: #525c6e;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .main-right {
|
|
|
|
+ text-align: right;
|
|
|
|
+ width: 33%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ .btn {
|
|
|
|
+ width: 122rpx;
|
|
|
|
+ height: 63rpx;
|
|
|
|
+ background: #e15562;
|
|
|
|
+ border-radius: 5rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 63rpx;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ &.down {
|
|
|
|
+ background: #5ec886;
|
|
|
|
+ }
|
|
|
|
+ &.ping {
|
|
|
|
+ background: #f6f6f6;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|