tradlist.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. <template>
  2. <view class="content">
  3. <view class="flex navbar">
  4. <view class="" v-for="(item,index) in navList" :class="{'action':current == index}"
  5. @click="changetab(index)">
  6. {{item.name}}
  7. </view>
  8. </view>
  9. <swiper class="swiper" :style="{'height': height}" :current="current" disable-touch>
  10. <swiper-item v-for="navitem in navList">
  11. <scroll-view scroll-y="true" class="scroll" :style="{'height': height}">
  12. <view v-for="(item,ind) in navitem.list" class="usdtList padding-t-30 padding-b-30">
  13. <view class="flex">
  14. <view class="name">
  15. <text v-if="item.direction==1" class="font-color-green">
  16. 做多
  17. </text>
  18. <text v-if="item.direction==2" class="font-color-red">
  19. 做空
  20. </text>
  21. <text>
  22. {{item.symbol}}
  23. </text>
  24. <text v-if="current==1 && item.direction==2"
  25. :class="{'font-color-green':+((item.price - listOBj[item.symbol.replace('/','-')].last)/item.num)>=0,'font-color-red':+((item.price - listOBj[item.symbol.replace('/','-')].last)/item.num)<0}">
  26. <!-- {{+item.profit}} -->{{ ((item.price - listOBj[item.symbol.replace('/','-')].last)/item.num).toFixed(2)|| ''}}
  27. </text>
  28. <text v-if="current==1 && item.direction==1"
  29. :class="{'font-color-green':+(( listOBj[item.symbol.replace('/','-')].last- item.price )/item.num)>=0,'font-color-red':+(( listOBj[item.symbol.replace('/','-')].last- item.price )/item.num)<0}">
  30. <!-- {{+item.profit}} -->{{ (( listOBj[item.symbol.replace('/','-')].last- item.price )/item.num).toFixed(2) || ''}}
  31. </text>
  32. </view>
  33. <view @click="clearorder(item)" v-if="current==0" class="usdtListButtom">
  34. 撤銷
  35. </view>
  36. <view @click="closeorder(item)" v-if="current==1" class="usdtListButtom">
  37. 一鍵平倉
  38. </view>
  39. </view>
  40. <view class="tip ">
  41. <text v-if="item.direction==1">
  42. 委託時間:{{item.wttime}}
  43. </text>
  44. <text v-if="item.direction==2">
  45. 開倉時間:{{item.addtime}}
  46. </text>
  47. </view>
  48. <view class="flex" style="flex-wrap: wrap;justify-content: flex-start;">
  49. <view v-if="current == 0" class="tipList">
  50. <view class="nameTip">
  51. 限價
  52. </view>
  53. <view class="text">
  54. {{item.wt_price}}
  55. </view>
  56. </view>
  57. <view v-if="current != 0" class="tipList">
  58. <view class="nameTip">
  59. 開倉單價
  60. </view>
  61. <view class="text">
  62. {{item.price}}
  63. </view>
  64. </view>
  65. <view class="tipList" v-if="current == 2">
  66. <view class="nameTip">
  67. 平倉單價
  68. </view>
  69. <view class="text">
  70. {{item.pc_price}}
  71. </view>
  72. </view>
  73. <view class="tipList">
  74. <view class="nameTip">
  75. {{current == 0?'委托手數': '交易個數'}}
  76. </view>
  77. <view class="text">
  78. {{item.num}}
  79. </view>
  80. </view>
  81. <view class="tipList">
  82. <view class="nameTip">
  83. 槓桿倍數
  84. </view>
  85. <view class="text">
  86. {{item.ggan}}
  87. </view>
  88. </view>
  89. <template v-if="current == 1">
  90. <view class="tipList">
  91. <view class="nameTip">
  92. 止盈單價
  93. </view>
  94. <view class="text">
  95. {{item.zyprice}}
  96. </view>
  97. </view>
  98. <view class="tipList">
  99. <view class="nameTip">
  100. 止損單價
  101. </view>
  102. <view class="text">
  103. {{item.zsprice}}
  104. </view>
  105. </view>
  106. </template>
  107. <view class="tipList" v-if="current != 0">
  108. <view class="nameTip">
  109. 手續費
  110. </view>
  111. <view class="text">
  112. {{item.fee}}
  113. </view>
  114. </view>
  115. <template v-if="current == 2">
  116. <view class="tipList">
  117. <view class="nameTip">
  118. 盈虧狀態
  119. </view>
  120. <view class="text" :style="{'color': item.yk_status == 1?'#5DC887':'#dd524d'}">
  121. {{item.yk_status == 1?'盈利':'虧損'}}
  122. </view>
  123. </view>
  124. <view class="tipList">
  125. <view class="nameTip">
  126. 盈虧金額
  127. </view>
  128. <view class="text" :style="{'color': item.yk_status == 1?'#5DC887':'#dd524d'}">
  129. {{item.yk_status == 1?'+':'-'}}{{item.ylmoney}}
  130. </view>
  131. </view>
  132. </template>
  133. </view>
  134. </view>
  135. </scroll-view>
  136. </swiper-item>
  137. </swiper>
  138. </view>
  139. </template>
  140. <script>
  141. import {
  142. geLevertade
  143. } from '@/api/index.js';
  144. import {
  145. scoketNew,
  146. scoketOpen
  147. } from '@/utils/socket.js';
  148. import {
  149. levertadeLaverorder,
  150. closeorder,
  151. clearorder,
  152. UpOrderHandle,
  153. bond
  154. } from '@/api/heyue.js';
  155. export default {
  156. data() {
  157. return {
  158. listOBj: {}, //保存实际列表对象
  159. timer: '',
  160. height: '',
  161. current: 0,
  162. navList: [{
  163. status: 1,
  164. name: '全部委托',
  165. page: 1,
  166. limit: 10,
  167. loadingType: 'more',
  168. loded: false,
  169. list: []
  170. },
  171. {
  172. status: 2,
  173. name: '全部持倉',
  174. page: 1,
  175. limit: 10,
  176. loadingType: 'more',
  177. loded: false,
  178. list: []
  179. },
  180. {
  181. status: 3,
  182. name: '成交明細',
  183. page: 1,
  184. limit: 10,
  185. loadingType: 'more',
  186. loded: false,
  187. list: []
  188. }
  189. ]
  190. }
  191. },
  192. onLoad() {
  193. if (this.timer) {
  194. clearTimeout(this.timer);
  195. this.timer = null;
  196. }
  197. },
  198. onShow() {
  199. this.geLevertade()
  200. this.loadData()
  201. },
  202. onHide() {
  203. this.closeScoket()
  204. clearTimeout(this.timer);
  205. },
  206. // 监听页面卸载
  207. onUnload() {
  208. // 关闭倒计时
  209. clearTimeout(this.timer);
  210. },
  211. // 监听页面后退
  212. onBackPress() {
  213. // 关闭倒计时
  214. clearTimeout(this.timer);
  215. },
  216. onReachBottom() {
  217. },
  218. onReady(res) {
  219. var obj = this;
  220. uni.getSystemInfo({
  221. success: resu => {
  222. const query = uni.createSelectorQuery();
  223. query.select('.swiper').boundingClientRect();
  224. query.exec(function(res) {
  225. obj.height = resu.windowHeight - res[0].top + 'px';
  226. });
  227. },
  228. fail: res => {}
  229. });
  230. },
  231. methods: {
  232. changetab(index) {
  233. this.current = index
  234. this.loadData('tab')
  235. },
  236. loadData(tab) {
  237. let obj = this
  238. let index = obj.current
  239. let item = obj.navList[index]
  240. if (tab == 'tab' && item.loaded) {
  241. return
  242. }
  243. if (item.loadingType == 'loading') {
  244. return
  245. }
  246. levertadeLaverorder({
  247. type: item.status,
  248. page: item.page,
  249. limit: item.limit
  250. })
  251. .then(({
  252. list
  253. }) => {
  254. console.log(list, 'list+++++++')
  255. let arr = list.map(e => {
  256. e.direction = +e.direction;
  257. e.bond = +e.bond
  258. e.price = +e.price
  259. e.wt_price = +e.wt_price
  260. return e;
  261. });
  262. item.list = arr;
  263. this.$set(item, 'loaded', true);
  264. if (obj.timer) {
  265. clearTimeout(obj.timer);
  266. obj.timer = null;
  267. }
  268. obj.timer = setTimeout(() => {
  269. obj.loadData()
  270. }, 2000)
  271. })
  272. .catch(e => {
  273. console.log(e);
  274. });
  275. },
  276. // 平倉
  277. closeorder(item) {
  278. const that = this;
  279. uni.showModal({
  280. title: '平倉',
  281. content: '是否立即平倉,確認後不可修改',
  282. confirmText: '確認',
  283. cancelText: '取消',
  284. success: res => {
  285. if (res.confirm) {
  286. uni.showLoading({
  287. title: '請求中...',
  288. mask: true
  289. });
  290. closeorder({
  291. id: item.id
  292. }).then((e) => {
  293. uni.hideLoading()
  294. uni.showToast({
  295. title: '平倉成功',
  296. icon: 'success'
  297. });
  298. that.ddTypeInit()
  299. }).catch(() => {
  300. uni.hideLoading()
  301. })
  302. }
  303. },
  304. fail: () => {},
  305. complete: () => {}
  306. });
  307. },
  308. // 撤銷
  309. clearorder(item) {
  310. const that = this;
  311. uni.showModal({
  312. title: '撤銷',
  313. content: '是否立即撤銷,確認後不可修改',
  314. confirmText: '確認',
  315. success: res => {
  316. if (res.confirm) {
  317. uni.showLoading({
  318. title: '請求中...',
  319. mask: true
  320. });
  321. clearorder({
  322. id: item.id
  323. }).then((e) => {
  324. uni.hideLoading()
  325. uni.showToast({
  326. title: '撤銷成功',
  327. icon: 'success'
  328. });
  329. that.ddTypeInit()
  330. }).catch(() => {
  331. uni.hideLoading()
  332. })
  333. }
  334. },
  335. fail: () => {},
  336. complete: () => {}
  337. });
  338. },
  339. // 獲取幣種列表
  340. geLevertade() {
  341. uni.showLoading({
  342. title: '數據加載中...',
  343. mask: true
  344. });
  345. const that = this;
  346. geLevertade().then((e) => {
  347. that.spList = e.list;
  348. // 开启长连接
  349. that.onScoket()
  350. })
  351. },
  352. // 开始请求长连接
  353. onScoket() {
  354. const that = this;
  355. that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
  356. that.scoket.scoketOpen().then((res) => {
  357. uni.hideLoading()
  358. const requestList = that.spList.map((e) => {
  359. return {
  360. "channel": "tickers",
  361. "instId": e.coinname.toUpperCase() + "-USDT"
  362. }
  363. })
  364. that.scoket.scoketSend({
  365. "op": "subscribe",
  366. "args": requestList
  367. }).then((res) => {
  368. console.log(res, '发送成功');
  369. })
  370. that.scoket.scoketMessage((res) => {
  371. try {
  372. if (res.data) {
  373. // 判断是否已经有这个对象
  374. // console.log(res.arg.instId, 'id', that.listOBj);
  375. that.listOBj[res.arg.instId] = res.data[0];
  376. const item = that.listOBj[res.arg.instId];
  377. // 转为数字
  378. item.last = +item.last;
  379. item.sodUtc0 = +item.sodUtc0;
  380. // 保存收益情况
  381. item.bool = item.last - item.sodUtc0 > 0 ? true : false;
  382. // 算出收益率
  383. item.dcf = (+((item.last - item.sodUtc0) / item.sodUtc0 * 100).toFixed(
  384. 2)) + '%'
  385. item.name = item.instId.replace('-', '/')
  386. that.listOBj = Object.assign({}, that.listOBj);
  387. console.log(that.listOBj,'that.listOBj')
  388. }
  389. } catch (e) {
  390. console.log(res, res.data, '报错');
  391. }
  392. })
  393. })
  394. },
  395. closeScoket() {
  396. this.scoket.scoketClose();
  397. },
  398. }
  399. }
  400. </script>
  401. <style lang="scss">
  402. .swiper {
  403. background-color: #fff;
  404. }
  405. .scroll {
  406. padding: 0 20rpx;
  407. }
  408. .navbar {
  409. justify-content: flex-start;
  410. font-size: 40rpx;
  411. padding: 30rpx;
  412. view {
  413. width: 184rpx;
  414. height: 100rpx;
  415. line-height: 100rpx;
  416. }
  417. }
  418. .usdtList {
  419. color: #707A8A;
  420. border-bottom: 1px solid $border-color-light;
  421. .name {
  422. font-size: $font-lg;
  423. font-weight: bold;
  424. }
  425. .usdtListButtom {
  426. font-size: $font-base;
  427. background-color: #F5F5F5;
  428. color: $uni-color-warning;
  429. border-radius: 10rpx;
  430. padding: 10rpx 20rpx;
  431. }
  432. .tip {
  433. padding-top: 10rpx;
  434. padding-bottom: 30rpx;
  435. font-size: $font-base;
  436. }
  437. .tipList {
  438. font-size: $font-sm;
  439. text-align: center;
  440. width: 25%;
  441. max-width: 33%;
  442. padding-top: 20rpx;
  443. flex-grow: 1;
  444. .nameTip {
  445. padding-bottom: 20rpx;
  446. }
  447. }
  448. }
  449. .action {
  450. font-weight: bold;
  451. font-size: 44rpx;
  452. }
  453. </style>