index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <template>
  2. <view class="container">
  3. <!-- 轮播图 start -->
  4. <swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
  5. <swiper-item v-for="(item, index) in 2" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
  6. <image src="../../static/img/banner.png" />
  7. </swiper-item>
  8. </swiper>
  9. <!-- 轮播图 end -->
  10. <!-- 功能盒 start -->
  11. <view class="gnh-wrap">
  12. <view class="gnh-top flex">
  13. <view class="top-item flex">
  14. <image src="../../static/icon/gn-1.png" mode="" class=""></image>
  15. <view class="">认购</view>
  16. </view>
  17. <view class="top-item flex">
  18. <image src="../../static/icon/gn-2.png" mode="" class=""></image>
  19. <view class="">充币</view>
  20. </view>
  21. <view class="top-item flex">
  22. <image src="../../static/icon/gn-3.png" mode="" class=""></image>
  23. <view class="">提币</view>
  24. </view>
  25. <view class="top-item flex">
  26. <image src="../../static/icon/gn-4.png" mode="" class=""></image>
  27. <view class="">语言</view>
  28. </view>
  29. <view class="top-item flex">
  30. <image src="../../static/icon/gn-5.png" mode="" class=""></image>
  31. <view class="">客服</view>
  32. </view>
  33. </view>
  34. <view class="gnh-btm flex">
  35. <view class="btm-item">
  36. <view class="btm-item-name">
  37. BTC/USDT
  38. </view>
  39. <view class="btm-item-val">
  40. 15716.53
  41. </view>
  42. <view class="btm-item-bl">
  43. -2.44%
  44. </view>
  45. </view>
  46. <view class="btm-item">
  47. <view class="btm-item-name">
  48. BTC/USDT
  49. </view>
  50. <view class="btm-item-val">
  51. 15716.53
  52. </view>
  53. <view class="btm-item-bl">
  54. -2.44%
  55. </view>
  56. </view>
  57. <view class="btm-item">
  58. <view class="btm-item-name">
  59. ETH/USDT
  60. </view>
  61. <view class="btm-item-val">
  62. 15716.53
  63. </view>
  64. <view class="btm-item-bl">
  65. -2.44%
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. <!-- 功能盒 end -->
  71. </view>
  72. </template>
  73. <script>
  74. import {
  75. scoketNew,
  76. scoketOpen
  77. } from '@/utils/socket.js';
  78. import {
  79. geLevertade
  80. } from '@/api/index.js';
  81. export default {
  82. data() {
  83. return {
  84. scoket: '',
  85. instId: 'IOTA-USDT', //请求的产品id
  86. spList:[],//需要查询的列表
  87. listOBj:{}//保存实际列表对象
  88. };
  89. },
  90. computed: {
  91. },
  92. onLoad: function(option) {
  93. },
  94. onShow: function() {
  95. this.geLevertade()
  96. },
  97. onHide() {
  98. this.closeScoket()
  99. },
  100. //下拉刷新
  101. onPullDownRefresh() {
  102. },
  103. methods: {
  104. swiperChange(){
  105. },
  106. // 开始请求长连接
  107. onScoket(){
  108. const that = this;
  109. that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
  110. that.scoket.scoketOpen().then((res) => {
  111. const requestList=that.spList.map((e)=>{
  112. return{
  113. "channel": "tickers",
  114. "instId": e.coinname.toUpperCase()+"-USDT"
  115. }
  116. })
  117. that.scoket.scoketSend({
  118. "op": "subscribe",
  119. "args": requestList
  120. }).then((res) => {
  121. console.log(res, '发送成功');
  122. })
  123. that.scoket.scoketMessage((res)=>{
  124. try{
  125. that.listOBj[res.arg.instId] = res.data
  126. }catch(e){
  127. console.log(res,'报错');
  128. }
  129. })
  130. })
  131. },
  132. closeScoket(){
  133. that.scoket.scoketClose();
  134. },
  135. // 获取查询列表
  136. geLevertade(){
  137. const that = this;
  138. geLevertade().then((e)=>{
  139. that.spList = e.list;
  140. // 开启长连接
  141. that.onScoket()
  142. })
  143. },
  144. // 轮播图跳转
  145. bannerNavToUrl(item) {
  146. // #ifdef H5
  147. console.log(item.wap_url.indexOf('http'), 'banner');
  148. if (item.wap_url.indexOf('http') >= 0) {
  149. window.location.href = item.wap_url;
  150. }
  151. // #endif
  152. //测试数据没有写id,用title代替
  153. uni.navigateTo({
  154. url: item.wap_url
  155. });
  156. },
  157. }
  158. };
  159. </script>
  160. <style lang="scss">
  161. // 顶部轮播图
  162. .top-swiper {
  163. margin: auto;
  164. width: 726rpx;
  165. height: 273rpx;
  166. .carousel-item {}
  167. // margin: 20rpx 0 0;
  168. image {
  169. // margin: auto;
  170. width: 726rpx;
  171. height: 273rpx;
  172. }
  173. }
  174. .gnh-wrap {
  175. margin: 20rpx 0;
  176. width: 750rpx;
  177. height: 315rpx;
  178. background-color: #fff;
  179. border-radius: 50rpx 50rpx 0 0;
  180. .gnh-top {
  181. justify-content: space-around;
  182. height: 156rpx;
  183. .top-item {
  184. flex-direction: column;
  185. justify-content: center;
  186. align-items: center;
  187. image {
  188. width: 66rpx;
  189. height: 75rpx;
  190. }
  191. view {
  192. font-weight: 500;
  193. color: #525C6E;
  194. }
  195. }
  196. }
  197. .gnh-btm {
  198. justify-content: space-around;
  199. .btm-item {
  200. width: 33%;
  201. text-align: center;
  202. padding-top: 20rpx;
  203. .btm-item-name {
  204. font-size: 24rpx;
  205. font-weight: 500;
  206. color: #525C6E;
  207. }
  208. .btm-item-val {
  209. font-size: 26rpx;
  210. font-weight: 500;
  211. color: #DD3745;
  212. padding: 20rpx 0;
  213. }
  214. .btm-item-bl {
  215. font-size: 24rpx;
  216. font-weight: 500;
  217. color: #DD3745;
  218. }
  219. }
  220. }
  221. }
  222. </style>