|
|
@@ -1,383 +1,383 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <!-- #ifdef APP-PLUS -->
|
|
|
- <view class="vheight"></view>
|
|
|
- <!-- #endif -->
|
|
|
- <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 -->
|
|
|
- <swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
|
- <swiper-item v-for="item in clist" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item" /></swiper-item>
|
|
|
- </swiper>
|
|
|
- <!-- 轮播图 end -->
|
|
|
- <!-- 通告欄 start -->
|
|
|
- <u-notice-bar type="none" :more-icon="true" mode="vertical" :list="list" @click="goDetail" @getMore="navto('/pages/index/gglist')"></u-notice-bar>
|
|
|
- <!-- 通告欄 end -->
|
|
|
- <!-- 功能盒 start -->
|
|
|
- <view class="gnh-wrap">
|
|
|
- <view class="gnh-top flex">
|
|
|
- <view class="top-item flex" @click="navto('/pages/index/rg')">
|
|
|
- <image src="../../static/icon/gn-1.png" mode="" class=""></image>
|
|
|
- <view class="">認購</view>
|
|
|
- </view>
|
|
|
- <view class="top-item flex" @click="navto('/pages/transaction/cblist')">
|
|
|
- <image src="../../static/icon/gn-2.png" mode="" class=""></image>
|
|
|
- <view class="">充幣</view>
|
|
|
- </view>
|
|
|
- <view class="top-item flex" @click="navto('/pages/transaction/tblist')">
|
|
|
- <image src="../../static/icon/gn-3.png" mode="" class=""></image>
|
|
|
- <view class="">提幣</view>
|
|
|
- </view>
|
|
|
- <!-- <view class="top-item flex">
|
|
|
- <image src="../../static/icon/gn-4.png" mode="" class=""></image>
|
|
|
- <view class="">語言</view>
|
|
|
- </view> -->
|
|
|
- <view class="top-item flex" @click="navto('/pages/index/kf')">
|
|
|
- <image src="../../static/icon/gn-5.png" mode="" class=""></image>
|
|
|
- <view class="">客服</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="gnh-btm flex">
|
|
|
- <view class="btm-item">
|
|
|
- <view class="btm-item-name">BTC/USDT</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 class="btm-item">
|
|
|
- <view class="btm-item-name">BCH/USDT</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 class="btm-item">
|
|
|
- <view class="btm-item-name">ETH/USDT</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>
|
|
|
- <!-- 功能盒 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>
|
|
|
- <view class="list-main flex" @click="navto('/pages/transaction/transactionDetail?type='+index)" 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>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { tradelist } from '@/api/login.js';
|
|
|
-import { saveUrl, interceptor } from '@/utils/loginUtils.js';
|
|
|
-import { mapState, mapMutations } from 'vuex';
|
|
|
-import { scoketNew, scoketOpen } from '@/utils/socket.js';
|
|
|
-import { geLevertade, gglist } from '@/api/index.js';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- clist: {},
|
|
|
- scoket: '',
|
|
|
- instId: 'IOTA-USDT', //请求的产品id
|
|
|
- spList: [], //需要查询的列表
|
|
|
- list: [],
|
|
|
- listInfo: [],
|
|
|
- listOBj: {} //保存实际列表对象
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
|
- },
|
|
|
- onLoad: function(option) {},
|
|
|
- onShow: function() {
|
|
|
- this.geLevertade();
|
|
|
- this.tradelist();
|
|
|
- this.getgg();
|
|
|
- },
|
|
|
- onHide() {
|
|
|
- this.closeScoket();
|
|
|
- },
|
|
|
- //下拉刷新
|
|
|
- onPullDownRefresh() {},
|
|
|
- methods: {
|
|
|
- navto(url) {
|
|
|
- console.log(url);
|
|
|
- if (!this.hasLogin) {
|
|
|
- // 保存地址
|
|
|
- saveUrl();
|
|
|
- // 登录拦截
|
|
|
- interceptor();
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- goDetail(e) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/index/ggDetail?id=' + this.listInfo[e].id
|
|
|
- });
|
|
|
- },
|
|
|
- getgg() {
|
|
|
- const obj = this;
|
|
|
- gglist({ page: 1, limit: 1000 }).then(e => {
|
|
|
- obj.listInfo = e.data;
|
|
|
- e.data.forEach(e => {
|
|
|
- obj.list.push(e.title);
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- 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 {
|
|
|
- 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() {
|
|
|
- this.scoket.scoketClose();
|
|
|
- },
|
|
|
- // 获取查询列表
|
|
|
- geLevertade() {
|
|
|
- const that = this;
|
|
|
- geLevertade().then(e => {
|
|
|
- that.spList = e.list;
|
|
|
- // 开启长连接
|
|
|
- that.onScoket();
|
|
|
- });
|
|
|
- },
|
|
|
- // 轮播图跳转
|
|
|
- bannerNavToUrl(item) {
|
|
|
- // #ifdef H5
|
|
|
- console.log(item.wap_url.indexOf('http'), 'banner');
|
|
|
- if (item.wap_url.indexOf('http') >= 0) {
|
|
|
- window.location.href = item.wap_url;
|
|
|
- }
|
|
|
- // #endif
|
|
|
- //测试数据没有写id，用title代替
|
|
|
- uni.navigateTo({
|
|
|
- url: item.wap_url
|
|
|
- });
|
|
|
- },
|
|
|
- tradelist() {
|
|
|
- tradelist().then(res => {
|
|
|
- console.log(res);
|
|
|
- this.clist = res.data.clist;
|
|
|
- this.clist = Object.assign({}, this.clist);
|
|
|
- console.log(this.clist, 'this.clist');
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-// 顶部轮播图
|
|
|
-.top-swiper {
|
|
|
- margin: auto;
|
|
|
- width: 726rpx;
|
|
|
- height: 273rpx;
|
|
|
-
|
|
|
- .carousel-item {
|
|
|
- }
|
|
|
-
|
|
|
- // margin: 20rpx 0 0;
|
|
|
- image {
|
|
|
- // margin: auto;
|
|
|
- width: 726rpx;
|
|
|
- height: 273rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.gnh-wrap {
|
|
|
- margin: 20rpx 0;
|
|
|
- width: 750rpx;
|
|
|
- height: 315rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 50rpx 50rpx 0 0;
|
|
|
-
|
|
|
- .gnh-top {
|
|
|
- justify-content: space-around;
|
|
|
- height: 156rpx;
|
|
|
-
|
|
|
- .top-item {
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 66rpx;
|
|
|
- height: 75rpx;
|
|
|
- }
|
|
|
-
|
|
|
- view {
|
|
|
- font-weight: 500;
|
|
|
- color: #525c6e;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .gnh-btm {
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .btm-item {
|
|
|
- width: 33%;
|
|
|
- text-align: center;
|
|
|
- padding-top: 20rpx;
|
|
|
-
|
|
|
- .btm-item-name {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #525c6e;
|
|
|
- }
|
|
|
-
|
|
|
- .btm-item-val {
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #dd3745;
|
|
|
- padding: 20rpx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .btm-item-bl {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #dd3745;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- #ifdef APP-PLUS -->
|
|
|
+ <view class="vheight"></view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <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 -->
|
|
|
+ <swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
|
+ <swiper-item v-for="item in clist" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item" /></swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <!-- 轮播图 end -->
|
|
|
+ <!-- 通告欄 start -->
|
|
|
+ <u-notice-bar type="none" :more-icon="true" mode="vertical" :list="list" @click="goDetail" @getMore="navto('/pages/index/gglist')"></u-notice-bar>
|
|
|
+ <!-- 通告欄 end -->
|
|
|
+ <!-- 功能盒 start -->
|
|
|
+ <view class="gnh-wrap">
|
|
|
+ <view class="gnh-top flex">
|
|
|
+ <view class="top-item flex" @click="navto('/pages/index/rg')">
|
|
|
+ <image src="../../static/icon/gn-1.png" mode="" class=""></image>
|
|
|
+ <view class="">{{ $t('index.rg') }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="top-item flex" @click="navto('/pages/transaction/cblist')">
|
|
|
+ <image src="../../static/icon/gn-2.png" mode="" class=""></image>
|
|
|
+ <view class="">充幣</view>
|
|
|
+ </view>
|
|
|
+ <view class="top-item flex" @click="navto('/pages/transaction/tblist')">
|
|
|
+ <image src="../../static/icon/gn-3.png" mode="" class=""></image>
|
|
|
+ <view class="">提幣</view>
|
|
|
+ </view>
|
|
|
+ <view class="top-item flex" @click="navto('/pages/index/language')">
|
|
|
+ <image src="../../static/icon/gn-4.png" mode="" class=""></image>
|
|
|
+ <view class="">語言</view>
|
|
|
+ </view>
|
|
|
+ <view class="top-item flex" @click="navto('/pages/index/kf')">
|
|
|
+ <image src="../../static/icon/gn-5.png" mode="" class=""></image>
|
|
|
+ <view class="">客服</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="gnh-btm flex">
|
|
|
+ <view class="btm-item">
|
|
|
+ <view class="btm-item-name">BTC/USDT</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 class="btm-item">
|
|
|
+ <view class="btm-item-name">BCH/USDT</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 class="btm-item">
|
|
|
+ <view class="btm-item-name">ETH/USDT</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>
|
|
|
+ <!-- 功能盒 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>
|
|
|
+ <view class="list-main flex" @click="navto('/pages/transaction/transactionDetail?type=' + index)" 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>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { tradelist } from '@/api/login.js';
|
|
|
+import { saveUrl, interceptor } from '@/utils/loginUtils.js';
|
|
|
+import { mapState, mapMutations } from 'vuex';
|
|
|
+import { scoketNew, scoketOpen } from '@/utils/socket.js';
|
|
|
+import { geLevertade, gglist } from '@/api/index.js';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ clist: {},
|
|
|
+ scoket: '',
|
|
|
+ instId: 'IOTA-USDT', //请求的产品id
|
|
|
+ spList: [], //需要查询的列表
|
|
|
+ list: [],
|
|
|
+ listInfo: [],
|
|
|
+ listOBj: {} //保存实际列表对象
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
|
+ },
|
|
|
+ onLoad: function(option) {},
|
|
|
+ onShow: function() {
|
|
|
+ this.geLevertade();
|
|
|
+ this.tradelist();
|
|
|
+ this.getgg();
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ this.closeScoket();
|
|
|
+ },
|
|
|
+ //下拉刷新
|
|
|
+ onPullDownRefresh() {},
|
|
|
+ methods: {
|
|
|
+ navto(url) {
|
|
|
+ console.log(url);
|
|
|
+ if (!this.hasLogin) {
|
|
|
+ // 保存地址
|
|
|
+ saveUrl();
|
|
|
+ // 登录拦截
|
|
|
+ interceptor();
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goDetail(e) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/index/ggDetail?id=' + this.listInfo[e].id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getgg() {
|
|
|
+ const obj = this;
|
|
|
+ gglist({ page: 1, limit: 1000 }).then(e => {
|
|
|
+ obj.listInfo = e.data;
|
|
|
+ e.data.forEach(e => {
|
|
|
+ obj.list.push(e.title);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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 {
|
|
|
+ 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() {
|
|
|
+ this.scoket.scoketClose();
|
|
|
+ },
|
|
|
+ // 获取查询列表
|
|
|
+ geLevertade() {
|
|
|
+ const that = this;
|
|
|
+ geLevertade().then(e => {
|
|
|
+ that.spList = e.list;
|
|
|
+ // 开启长连接
|
|
|
+ that.onScoket();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 轮播图跳转
|
|
|
+ bannerNavToUrl(item) {
|
|
|
+ // #ifdef H5
|
|
|
+ console.log(item.wap_url.indexOf('http'), 'banner');
|
|
|
+ if (item.wap_url.indexOf('http') >= 0) {
|
|
|
+ window.location.href = item.wap_url;
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ //测试数据没有写id，用title代替
|
|
|
+ uni.navigateTo({
|
|
|
+ url: item.wap_url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tradelist() {
|
|
|
+ tradelist().then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.clist = res.data.clist;
|
|
|
+ this.clist = Object.assign({}, this.clist);
|
|
|
+ console.log(this.clist, 'this.clist');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+// 顶部轮播图
|
|
|
+.top-swiper {
|
|
|
+ margin: auto;
|
|
|
+ width: 726rpx;
|
|
|
+ height: 273rpx;
|
|
|
+
|
|
|
+ .carousel-item {
|
|
|
+ }
|
|
|
+
|
|
|
+ // margin: 20rpx 0 0;
|
|
|
+ image {
|
|
|
+ // margin: auto;
|
|
|
+ width: 726rpx;
|
|
|
+ height: 273rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.gnh-wrap {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 315rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50rpx 50rpx 0 0;
|
|
|
+
|
|
|
+ .gnh-top {
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 156rpx;
|
|
|
+
|
|
|
+ .top-item {
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 66rpx;
|
|
|
+ height: 75rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ view {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #525c6e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gnh-btm {
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .btm-item {
|
|
|
+ width: 33%;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 20rpx;
|
|
|
+
|
|
|
+ .btm-item-name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #525c6e;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btm-item-val {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #dd3745;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btm-item-bl {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #dd3745;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.vheight {
|
|
|
- height: var(--status-bar-height);
|
|
|
-}
|
|
|
+ height: var(--status-bar-height);
|
|
|
+}
|
|
|
</style>
|
