123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 |
- <template>
- <view class="container">
- <!-- 轮播图 start -->
- <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)">
- <image src="../../static/img/banner.png" />
- </swiper-item>
- </swiper>
- <!-- 轮播图 end -->
- <!-- 功能盒 start -->
- <view class="gnh-wrap">
- <view class="gnh-top flex">
- <view class="top-item flex">
- <image src="../../static/icon/gn-1.png" mode="" class=""></image>
- <view class="">认购</view>
- </view>
- <view class="top-item flex">
- <image src="../../static/icon/gn-2.png" mode="" class=""></image>
- <view class="">充币</view>
- </view>
- <view class="top-item flex">
- <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">
- <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>
- <view class="btm-item-val">
- 15716.53
- </view>
- <view class="btm-item-bl">
- -2.44%
- </view>
- </view>
- <view class="btm-item">
- <view class="btm-item-name">
- BTC/USDT
- </view>
- <view class="btm-item-val">
- 15716.53
- </view>
- <view class="btm-item-bl">
- -2.44%
- </view>
- </view>
- <view class="btm-item">
- <view class="btm-item-name">
- ETH/USDT
- </view>
- <view class="btm-item-val">
- 15716.53
- </view>
- <view class="btm-item-bl">
- -2.44%
- </view>
- </view>
- </view>
- </view>
- <!-- 功能盒 end -->
- </view>
- </template>
- <script>
- import {
- scoketNew,
- scoketOpen
- } from '@/utils/socket.js';
- import {
- geLevertade
- } from '@/api/index.js';
- export default {
- data() {
- return {
- scoket: '',
- instId: 'IOTA-USDT', //请求的产品id
- spList:[],//需要查询的列表
- listOBj:{}//保存实际列表对象
- };
- },
- computed: {
- },
- onLoad: function(option) {
-
- },
- onShow: function() {
- this.geLevertade()
- },
- onHide() {
- this.closeScoket()
- },
- //下拉刷新
- onPullDownRefresh() {
- },
- 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
- }catch(e){
- console.log(res,'报错');
- }
- })
- })
- },
- closeScoket(){
- that.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
- });
- },
- }
- };
- </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;
- }
- }
- }
- }
- </style>
|