index.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  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. <!-- -->
  72. <view class="list">
  73. <view class="list-title flex">
  74. <view class="title-left">交易對</view>
  75. <view class="title-center">最新價格</view>
  76. <view class="title-right">24h漲跌</view>
  77. </view>
  78. <!-- <scroll-view class="swiper-box" scroll-y="true" :style="{ height: maxheight }">
  79. <view class="list-main flex">
  80. <view class="main-left">{{ }}</view>
  81. <view class="main-center" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.price == 0 ? '--.--' : item.price }}</view>
  82. <view class="main-right">
  83. <view class="btn" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.zd }}%</view>
  84. </view>
  85. </view>
  86. </scroll-view> -->
  87. </view>
  88. </view>
  89. </template>
  90. <script>
  91. import {
  92. scoketNew,
  93. scoketOpen
  94. } from '@/utils/socket.js';
  95. import {
  96. geLevertade
  97. } from '@/api/index.js';
  98. export default {
  99. data() {
  100. return {
  101. maxheight: '',
  102. scoket: '',
  103. instId: 'IOTA-USDT', //请求的产品id
  104. spList:[],//需要查询的列表
  105. listOBj:{}//保存实际列表对象
  106. };
  107. },
  108. computed: {
  109. },
  110. onLoad: function(option) {
  111. },
  112. onReady(res) {
  113. var _this = this;
  114. uni.getSystemInfo({
  115. success: resu => {
  116. const query = uni.createSelectorQuery();
  117. query.select('.swiper-box').boundingClientRect();
  118. query.exec(function(res) {
  119. _this.maxheight = resu.windowHeight - res[0].top + 'px';
  120. console.log('打印页面的剩余高度', _this.maxheight);
  121. });
  122. },
  123. fail: res => {
  124. console.log('打印页面的剩余高度', res);
  125. }
  126. });
  127. },
  128. onShow: function() {
  129. this.geLevertade()
  130. },
  131. onHide() {
  132. this.closeScoket()
  133. },
  134. //下拉刷新
  135. onPullDownRefresh() {
  136. },
  137. methods: {
  138. swiperChange(){
  139. },
  140. // 开始请求长连接
  141. onScoket(){
  142. const that = this;
  143. that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
  144. that.scoket.scoketOpen().then((res) => {
  145. const requestList=that.spList.map((e)=>{
  146. return{
  147. "channel": "tickers",
  148. "instId": e.coinname.toUpperCase()+"-USDT"
  149. }
  150. })
  151. that.scoket.scoketSend({
  152. "op": "subscribe",
  153. "args": requestList
  154. }).then((res) => {
  155. console.log(res, '发送成功');
  156. })
  157. that.scoket.scoketMessage((res)=>{
  158. try{
  159. that.listOBj[res.arg.instId] = res.data
  160. console.log(that.listOBj,'that.listOBj++++++')
  161. }catch(e){
  162. console.log(res,'报错');
  163. }
  164. })
  165. })
  166. },
  167. closeScoket(){
  168. that.scoket.scoketClose();
  169. },
  170. // 获取查询列表
  171. geLevertade(){
  172. const that = this;
  173. geLevertade().then((e)=>{
  174. that.spList = e.list;
  175. // 开启长连接
  176. that.onScoket()
  177. })
  178. },
  179. // 轮播图跳转
  180. bannerNavToUrl(item) {
  181. // #ifdef H5
  182. console.log(item.wap_url.indexOf('http'), 'banner');
  183. if (item.wap_url.indexOf('http') >= 0) {
  184. window.location.href = item.wap_url;
  185. }
  186. // #endif
  187. //测试数据没有写id,用title代替
  188. uni.navigateTo({
  189. url: item.wap_url
  190. });
  191. },
  192. }
  193. };
  194. </script>
  195. <style lang="scss">
  196. // 顶部轮播图
  197. .top-swiper {
  198. margin: auto;
  199. width: 726rpx;
  200. height: 273rpx;
  201. .carousel-item {}
  202. // margin: 20rpx 0 0;
  203. image {
  204. // margin: auto;
  205. width: 726rpx;
  206. height: 273rpx;
  207. }
  208. }
  209. .gnh-wrap {
  210. margin: 20rpx 0;
  211. width: 750rpx;
  212. height: 315rpx;
  213. background-color: #fff;
  214. border-radius: 50rpx 50rpx 0 0;
  215. .gnh-top {
  216. justify-content: space-around;
  217. height: 156rpx;
  218. .top-item {
  219. flex-direction: column;
  220. justify-content: center;
  221. align-items: center;
  222. image {
  223. width: 66rpx;
  224. height: 75rpx;
  225. }
  226. view {
  227. font-weight: 500;
  228. color: #525C6E;
  229. }
  230. }
  231. }
  232. .gnh-btm {
  233. justify-content: space-around;
  234. .btm-item {
  235. width: 33%;
  236. text-align: center;
  237. padding-top: 20rpx;
  238. .btm-item-name {
  239. font-size: 24rpx;
  240. font-weight: 500;
  241. color: #525C6E;
  242. }
  243. .btm-item-val {
  244. font-size: 26rpx;
  245. font-weight: 500;
  246. color: #DD3745;
  247. padding: 20rpx 0;
  248. }
  249. .btm-item-bl {
  250. font-size: 24rpx;
  251. font-weight: 500;
  252. color: #DD3745;
  253. }
  254. }
  255. }
  256. }
  257. .list {
  258. background: #ffffff;
  259. border-top-left-radius: 26rpx;
  260. border-top-right-radius: 26rpx;
  261. padding: 40rpx 15rpx 0;
  262. .list-title {
  263. font-size: 28rpx;
  264. font-family: PingFang SC;
  265. font-weight: 500;
  266. color: #525c6e;
  267. padding-bottom: 32rpx;
  268. .title-left {
  269. text-align: left;
  270. width: 33%;
  271. }
  272. .title-center {
  273. text-align: center;
  274. width: 33%;
  275. }
  276. .title-right {
  277. text-align: right;
  278. width: 33%;
  279. }
  280. }
  281. .list-main {
  282. padding: 12rpx 0;
  283. .main-left {
  284. text-align: left;
  285. width: 33%;
  286. font-size: 28rpx;
  287. font-family: PingFang SC;
  288. font-weight: 500;
  289. color: #525c6e;
  290. }
  291. .main-center {
  292. text-align: center;
  293. width: 33%;
  294. font-size: 28rpx;
  295. font-family: PingFang SC;
  296. font-weight: 500;
  297. color: #e15560;
  298. &.down {
  299. color: #5ec886;
  300. }
  301. &.ping {
  302. color: #525c6e;
  303. }
  304. }
  305. .main-right {
  306. text-align: right;
  307. width: 33%;
  308. display: flex;
  309. justify-content: flex-end;
  310. .btn {
  311. width: 122rpx;
  312. height: 63rpx;
  313. background: #e15562;
  314. border-radius: 5rpx;
  315. text-align: center;
  316. line-height: 63rpx;
  317. font-size: 24rpx;
  318. font-family: PingFang SC;
  319. font-weight: 500;
  320. color: #ffffff;
  321. &.down {
  322. background: #5ec886;
  323. }
  324. &.ping {
  325. background: #f6f6f6;
  326. }
  327. }
  328. }
  329. }
  330. }
  331. </style>