|
|
@@ -0,0 +1,449 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="flex navbar">
|
|
|
+ <view class="" v-for="(item,index) in navList" :class="{'action':current == index}"
|
|
|
+ @click="changetab(index)">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <swiper class="swiper" :style="{'height': height}" :current="current" disable-touch>
|
|
|
+ <swiper-item v-for="navitem in navList">
|
|
|
+ <scroll-view scroll-y="true" class="scroll" :style="{'height': height}">
|
|
|
+ <view v-for="(item,ind) in navitem.list" class="usdtList padding-t-30 padding-b-30">
|
|
|
+ <view class="flex">
|
|
|
+ <view class="name">
|
|
|
+ <text v-if="item.type==1" class="font-color-green">
|
|
|
+ 購買
|
|
|
+ </text>
|
|
|
+ <text v-if="item.type==2" class="font-color-red">
|
|
|
+ 出售
|
|
|
+ </text>
|
|
|
+ <text>
|
|
|
+ {{item.symbol}}
|
|
|
+ </text>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view @click="clearorder(item)" v-if="current==0" class="usdtListButtom">
|
|
|
+ 撤銷
|
|
|
+ </view>
|
|
|
+ <view v-if="current!= 0" class="usdtListButtom" style="background: none;color: #b3b4b5;">
|
|
|
+ {{item.status == 2?'完成':(item.status == 3?'已撤銷':'')}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex" style="flex-wrap: wrap;justify-content: flex-start;">
|
|
|
+ <template v-if="current == 0">
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 價格(USDT)
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.xjprice}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 數量(USDT)
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.usdtnum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 實際成交(USDT)
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.coinnum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="current != 0">
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 時間
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.tradetime}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 委托價（USDT）
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.ordertype ==2?'市價':item.xjprice}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 交易額（USDT）
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.usdtnum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 成交總價(USDT)
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.usdtnum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 成交均價(USDT)
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.price}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tipList">
|
|
|
+ <view class="nameTip">
|
|
|
+ 成交量{{item.coin}}
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ {{item.coinnum}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ </swiper-item>
|
|
|
+
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { tradebill,closeorder} from "@/api/login.js"
|
|
|
+ import {
|
|
|
+ geLevertade
|
|
|
+ } from '@/api/index.js';
|
|
|
+ import {
|
|
|
+ scoketNew,
|
|
|
+ scoketOpen
|
|
|
+ } from '@/utils/socket.js';
|
|
|
+ import {
|
|
|
+ levertadeLaverorder,
|
|
|
+ // closeorder,
|
|
|
+ clearorder,
|
|
|
+ UpOrderHandle,
|
|
|
+ bond
|
|
|
+ } from '@/api/heyue.js';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listOBj: {}, //保存实际列表对象
|
|
|
+ timer: '',
|
|
|
+ height: '',
|
|
|
+ current: 0,
|
|
|
+ navList: [{
|
|
|
+ status: 1,
|
|
|
+ name: '全部委托',
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ loadingType: 'more',
|
|
|
+ loded: false,
|
|
|
+ list: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ status: 2,
|
|
|
+ name: '歷史記錄',
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ loadingType: 'more',
|
|
|
+ loded: false,
|
|
|
+ list: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ status: 3,
|
|
|
+ name: '成交明細',
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ loadingType: 'more',
|
|
|
+ loded: false,
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // this.geLevertade()
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ this.closeScoket()
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ },
|
|
|
+ // 监听页面卸载
|
|
|
+ onUnload() {
|
|
|
+ // 关闭倒计时
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ },
|
|
|
+ // 监听页面后退
|
|
|
+ onBackPress() {
|
|
|
+ // 关闭倒计时
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady(res) {
|
|
|
+ var obj = this;
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: resu => {
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
+ query.select('.swiper').boundingClientRect();
|
|
|
+ query.exec(function(res) {
|
|
|
+ obj.height = resu.windowHeight - res[0].top + 'px';
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: res => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changetab(index) {
|
|
|
+ this.current = index
|
|
|
+ this.loadData('tab')
|
|
|
+ },
|
|
|
+ loadData(tab) {
|
|
|
+ let obj = this
|
|
|
+ let index = obj.current
|
|
|
+ let item = obj.navList[index]
|
|
|
+ if (tab == 'tab' && item.loaded) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (item.loadingType == 'loading') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ tradebill({
|
|
|
+ type: item.status
|
|
|
+ })
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ // console.log(list, 'list+++++++')
|
|
|
+ // let arr = list.map(e => {
|
|
|
+ // e.direction = +e.direction;
|
|
|
+ // e.bond = +e.bond
|
|
|
+ // e.price = +e.price
|
|
|
+ // e.wt_price = +e.wt_price
|
|
|
+ // return e;
|
|
|
+ // });
|
|
|
+ item.list = data;
|
|
|
+ console.log(item.list)
|
|
|
+ this.$set(item, 'loaded', true);
|
|
|
+ if (obj.timer) {
|
|
|
+ clearTimeout(obj.timer);
|
|
|
+ obj.timer = null;
|
|
|
+ }
|
|
|
+ obj.timer = setTimeout(() => {
|
|
|
+ obj.loadData()
|
|
|
+ }, 2000)
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 平倉
|
|
|
+ closeorder(item) {
|
|
|
+ const that = this;
|
|
|
+ uni.showModal({
|
|
|
+ title: '平倉',
|
|
|
+ content: '是否立即平倉，確認後不可修改',
|
|
|
+ confirmText: '確認',
|
|
|
+ cancelText: '取消',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '請求中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+ closeorder({
|
|
|
+ oid: item.id
|
|
|
+ }).then((e) => {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({
|
|
|
+ title: '平倉成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ that.ddTypeInit()
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: () => {},
|
|
|
+ complete: () => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 撤銷
|
|
|
+ clearorder(item) {
|
|
|
+ const that = this;
|
|
|
+ uni.showModal({
|
|
|
+ title: '撤銷',
|
|
|
+ content: '是否立即撤銷，確認後不可修改',
|
|
|
+ confirmText: '確認',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '請求中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+ clearorder({
|
|
|
+ id: item.id
|
|
|
+ }).then((e) => {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({
|
|
|
+ title: '撤銷成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ that.ddTypeInit()
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: () => {},
|
|
|
+ complete: () => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 獲取幣種列表
|
|
|
+ geLevertade() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '數據加載中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+ const that = this;
|
|
|
+ geLevertade().then((e) => {
|
|
|
+ that.spList = e.list;
|
|
|
+ // 开启长连接
|
|
|
+ that.onScoket()
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 开始请求长连接
|
|
|
+ onScoket() {
|
|
|
+ const that = this;
|
|
|
+ that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
|
|
|
+ that.scoket.scoketOpen().then((res) => {
|
|
|
+ uni.hideLoading()
|
|
|
+ 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 {
|
|
|
+ if (res.data) {
|
|
|
+ // 判断是否已经有这个对象
|
|
|
+ // console.log(res.arg.instId, 'id', that.listOBj);
|
|
|
+ that.listOBj[res.arg.instId] = res.data[0];
|
|
|
+ const item = that.listOBj[res.arg.instId];
|
|
|
+ // 转为数字
|
|
|
+ item.last = +item.last;
|
|
|
+ item.sodUtc0 = +item.sodUtc0;
|
|
|
+ // 保存收益情况
|
|
|
+ item.bool = item.last - item.sodUtc0 > 0 ? true : false;
|
|
|
+ // 算出收益率
|
|
|
+ item.dcf = (+((item.last - item.sodUtc0) / item.sodUtc0 * 100).toFixed(
|
|
|
+ 2)) + '%'
|
|
|
+ item.name = item.instId.replace('-', '/')
|
|
|
+ that.listOBj = Object.assign({}, that.listOBj);
|
|
|
+ console.log(that.listOBj,'that.listOBj')
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log(res, res.data, '报错');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ closeScoket() {
|
|
|
+ this.scoket.scoketClose();
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .swiper {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar {
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 40rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
+ view {
|
|
|
+ width: 184rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .usdtList {
|
|
|
+ color: #707A8A;
|
|
|
+ border-bottom: 1px solid $border-color-light;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: $font-lg;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .usdtListButtom {
|
|
|
+ font-size: $font-base;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ color: $uni-color-warning;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ padding-top: 10rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ font-size: $font-base;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tipList {
|
|
|
+ font-size: $font-sm;
|
|
|
+ text-align: center;
|
|
|
+ width: 33%;
|
|
|
+ max-width: 33%;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ flex-grow: 1;
|
|
|
+
|
|
|
+ .nameTip {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 44rpx;
|
|
|
+ }
|
|
|
+</style>
|
