index.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <template>
  2. <view class="container">
  3. <view class="flex" style="justify-content: space-between;padding: 20rpx 30rpx;">
  4. <image src="../../static/icon/user.png" mode="" style="width: 53rpx;height: 53rpx;" @click="navto('/pages/user/menu')"></image>
  5. <!-- <image src="../../static/icon/tz.png" mode="" style="width: 53rpx;height: 53rpx;"></image> -->
  6. </view>
  7. <!-- 轮播图 start -->
  8. <swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
  9. <swiper-item v-for="(item, index) in 2" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
  10. <image src="../../static/img/banner.png" />
  11. </swiper-item>
  12. </swiper>
  13. <!-- 轮播图 end -->
  14. <!-- 功能盒 start -->
  15. <view class="gnh-wrap">
  16. <view class="gnh-top flex">
  17. <view class="top-item flex">
  18. <image src="../../static/icon/gn-1.png" mode="" class=""></image>
  19. <view class="">認購</view>
  20. </view>
  21. <view class="top-item flex">
  22. <image src="../../static/icon/gn-2.png" mode="" class=""></image>
  23. <view class="">充幣</view>
  24. </view>
  25. <view class="top-item flex">
  26. <image src="../../static/icon/gn-3.png" mode="" class=""></image>
  27. <view class="">提幣</view>
  28. </view>
  29. <!-- <view class="top-item flex">
  30. <image src="../../static/icon/gn-4.png" mode="" class=""></image>
  31. <view class="">語言</view>
  32. </view> -->
  33. <view class="top-item flex">
  34. <image src="../../static/icon/gn-5.png" mode="" class=""></image>
  35. <view class="">客服</view>
  36. </view>
  37. </view>
  38. <view class="gnh-btm flex">
  39. <view class="btm-item">
  40. <view class="btm-item-name">
  41. BTC/USDT
  42. </view>
  43. <template v-if="listOBj['BTC-USDT']">
  44. <view class="btm-item-val" :style="{'color': listOBj['BTC-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
  45. {{listOBj['BTC-USDT'].last|| '--,--'}}
  46. </view>
  47. <view class="btm-item-bl" :style="{'color': listOBj['BTC-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
  48. {{listOBj['BTC-USDT'].dcf || '--,--'}}%
  49. </view>
  50. </template>
  51. </view>
  52. <view class="btm-item">
  53. <view class="btm-item-name">
  54. BCH/USDT
  55. </view>
  56. <template v-if="listOBj['BCH-USDT']">
  57. <view class="btm-item-val" :style="{'color': listOBj['BCH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}" >
  58. {{listOBj['BCH-USDT'].last || '--,--'}}
  59. </view>
  60. <view class="btm-item-bl" :style="{'color': listOBj['BCH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
  61. {{listOBj['BCH-USDT'].dcf || '--,--'}}%
  62. </view>
  63. </template>
  64. </view>
  65. <view class="btm-item">
  66. <view class="btm-item-name">
  67. ETH/USDT
  68. </view>
  69. <template v-if="listOBj['ETH-USDT']">
  70. <view class="btm-item-val" :style="{'color': listOBj['ETH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
  71. {{listOBj['ETH-USDT'].last || '--,--'}}
  72. </view>
  73. <view class="btm-item-bl" :style="{'color': listOBj['ETH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
  74. {{listOBj['ETH-USDT'].dcf || '--,--'}}%
  75. </view>
  76. </template>
  77. </view>
  78. </view>
  79. </view>
  80. <!-- 功能盒 end -->
  81. <!-- -->
  82. <view class="list">
  83. <view class="list-title flex">
  84. <view class="title-left">交易對</view>
  85. <view class="title-center">最新價格</view>
  86. <view class="title-right">24h漲跌</view>
  87. </view>
  88. <view class="list-main flex" v-for="(item,index ) in listOBj">
  89. <view class="main-left">{{index}}</view>
  90. <view class="main-center" :class="{ down: item.dcf > 0, ping: item.dcf == 0 }">
  91. {{ item.last == 0 ? '--.--' : item.last }}</view>
  92. <view class="main-right">
  93. <view class="btn" :class="{ down: item.dcf > 0, ping: item.dcf == 0 }">{{ item.dcf }}%</view>
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. </template>
  99. <script>
  100. import {
  101. mapState,
  102. mapMutations
  103. } from 'vuex';
  104. import {
  105. scoketNew,
  106. scoketOpen
  107. } from '@/utils/socket.js';
  108. import {
  109. geLevertade
  110. } from '@/api/index.js';
  111. export default {
  112. data() {
  113. return {
  114. scoket: '',
  115. instId: 'IOTA-USDT', //请求的产品id
  116. spList: [], //需要查询的列表
  117. listOBj: {} //保存实际列表对象
  118. };
  119. },
  120. computed: {
  121. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  122. },
  123. onLoad: function(option) {
  124. },
  125. onShow: function() {
  126. this.geLevertade()
  127. },
  128. onHide() {
  129. this.closeScoket()
  130. },
  131. //下拉刷新
  132. onPullDownRefresh() {
  133. },
  134. methods: {
  135. navto(url) {
  136. console.log(url);
  137. if (!this.hasLogin) {
  138. // 保存地址
  139. saveUrl();
  140. // 登录拦截
  141. interceptor();
  142. } else {
  143. uni.navigateTo({
  144. url
  145. });
  146. }
  147. },
  148. swiperChange() {
  149. },
  150. // 开始请求长连接
  151. onScoket() {
  152. const that = this;
  153. that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
  154. that.scoket.scoketOpen().then((res) => {
  155. const requestList = that.spList.map((e) => {
  156. return {
  157. "channel": "tickers",
  158. "instId": e.coinname.toUpperCase() + "-USDT"
  159. }
  160. })
  161. that.scoket.scoketSend({
  162. "op": "subscribe",
  163. "args": requestList
  164. }).then((res) => {
  165. console.log(res, '发送成功');
  166. })
  167. that.scoket.scoketMessage((res) => {
  168. try {
  169. if (res.data) {
  170. // res.res.data[0].name = res.arg.instId
  171. that.listOBj[res.arg.instId] = res.data[0];
  172. that.listOBj[res.arg.instId].dcf = ((res.data[0].last*1 - res.data[0].sodUtc0*1)/(res.data[0].sodUtc0*1) * 100 ).toFixed(2)
  173. that.listOBj = Object.assign( {},that.listOBj);
  174. }
  175. console.log(that.listOBj, 'that.listOBj++++++')
  176. } catch (e) {
  177. console.log(res, res.data, '报错');
  178. }
  179. })
  180. })
  181. },
  182. closeScoket() {
  183. this.scoket.scoketClose();
  184. },
  185. // 获取查询列表
  186. geLevertade() {
  187. const that = this;
  188. geLevertade().then((e) => {
  189. that.spList = e.list;
  190. // 开启长连接
  191. that.onScoket()
  192. })
  193. },
  194. // 轮播图跳转
  195. bannerNavToUrl(item) {
  196. // #ifdef H5
  197. console.log(item.wap_url.indexOf('http'), 'banner');
  198. if (item.wap_url.indexOf('http') >= 0) {
  199. window.location.href = item.wap_url;
  200. }
  201. // #endif
  202. //测试数据没有写id,用title代替
  203. uni.navigateTo({
  204. url: item.wap_url
  205. });
  206. },
  207. }
  208. };
  209. </script>
  210. <style lang="scss">
  211. // 顶部轮播图
  212. .top-swiper {
  213. margin: auto;
  214. width: 726rpx;
  215. height: 273rpx;
  216. .carousel-item {}
  217. // margin: 20rpx 0 0;
  218. image {
  219. // margin: auto;
  220. width: 726rpx;
  221. height: 273rpx;
  222. }
  223. }
  224. .gnh-wrap {
  225. margin: 20rpx 0;
  226. width: 750rpx;
  227. height: 315rpx;
  228. background-color: #fff;
  229. border-radius: 50rpx 50rpx 0 0;
  230. .gnh-top {
  231. justify-content: space-around;
  232. height: 156rpx;
  233. .top-item {
  234. flex-direction: column;
  235. justify-content: center;
  236. align-items: center;
  237. image {
  238. width: 66rpx;
  239. height: 75rpx;
  240. }
  241. view {
  242. font-weight: 500;
  243. color: #525C6E;
  244. }
  245. }
  246. }
  247. .gnh-btm {
  248. justify-content: space-around;
  249. .btm-item {
  250. width: 33%;
  251. text-align: center;
  252. padding-top: 20rpx;
  253. .btm-item-name {
  254. font-size: 24rpx;
  255. font-weight: 500;
  256. color: #525C6E;
  257. }
  258. .btm-item-val {
  259. font-size: 26rpx;
  260. font-weight: 500;
  261. color: #DD3745;
  262. padding: 20rpx 0;
  263. }
  264. .btm-item-bl {
  265. font-size: 24rpx;
  266. font-weight: 500;
  267. color: #DD3745;
  268. }
  269. }
  270. }
  271. }
  272. .list {
  273. background: #ffffff;
  274. border-top-left-radius: 26rpx;
  275. border-top-right-radius: 26rpx;
  276. padding: 40rpx 15rpx 0;
  277. .list-title {
  278. font-size: 28rpx;
  279. font-family: PingFang SC;
  280. font-weight: 500;
  281. color: #525c6e;
  282. padding-bottom: 32rpx;
  283. .title-left {
  284. text-align: left;
  285. width: 33%;
  286. }
  287. .title-center {
  288. text-align: center;
  289. width: 33%;
  290. }
  291. .title-right {
  292. text-align: right;
  293. width: 33%;
  294. }
  295. }
  296. .list-main {
  297. padding: 12rpx 0;
  298. .main-left {
  299. text-align: left;
  300. width: 33%;
  301. font-size: 28rpx;
  302. font-family: PingFang SC;
  303. font-weight: 500;
  304. color: #525c6e;
  305. }
  306. .main-center {
  307. text-align: center;
  308. width: 33%;
  309. font-size: 28rpx;
  310. font-family: PingFang SC;
  311. font-weight: 500;
  312. color: #e15560;
  313. &.down {
  314. color: #5ec886;
  315. }
  316. &.ping {
  317. color: #525c6e;
  318. }
  319. }
  320. .main-right {
  321. text-align: right;
  322. width: 33%;
  323. display: flex;
  324. justify-content: flex-end;
  325. .btn {
  326. width: 122rpx;
  327. height: 63rpx;
  328. background: #e15562;
  329. border-radius: 5rpx;
  330. text-align: center;
  331. line-height: 63rpx;
  332. font-size: 24rpx;
  333. font-family: PingFang SC;
  334. font-weight: 500;
  335. color: #ffffff;
  336. &.down {
  337. background: #5ec886;
  338. }
  339. &.ping {
  340. background: #f6f6f6;
  341. }
  342. }
  343. }
  344. }
  345. }
  346. </style>