liang
/
samehome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善推送

master
vee 3 years ago
parent
422c0126c2
commit
05ca8ab4d6
8 changed files with 696 additions and 307 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      components/positionList/positionList.vue
  2. 8
      components/transaction/transaction.vue
  3. 10
      pages/markets/index.vue
  4. 568
      pages/markets/kLine.vue
  5. 358
      pages/markets/trade.vue
  6. 6
      utils/axios.js
  7. 2
      utils/language/en_US.js
  8. 25
      utils/websocket.js

26
components/positionList/positionList.vue
View File

@ -6,9 +6,9 @@
</view> </view>
<view class="sell"> <view class="sell">
<view class="item" v-for="(item, index) in bboList.sell" :key="index" @click="depthClick(item)"> <view class="item" v-for="(item, index) in bboList.sell" :key="index" @click="depthClick(item)">
<text class="price">{{ item.price }}</text> <text class="price">{{ parseFloat(item.price).toFixed(item.baseCoinScale) }}</text>
<text class="num">{{ item.total }}</text> <text class="num">{{ item.size }}</text>
<view class="sellbg" :style="`width: ${20 * index}%;`"></view> <view class="sellbg" :style="`width: ${item.size/sum.sell*100 }%;`"></view>
</view> </view>
</view> </view>
<view class="currentPriceBody" @click="depthClick(item)"> <view class="currentPriceBody" @click="depthClick(item)">
@ -18,9 +18,9 @@
<view class="buy"> <view class="buy">
<view class="item" v-for="(item, index) in bboList.buy" :key="index" @click="depthClick(item)"> <view class="item" v-for="(item, index) in bboList.buy" :key="index" @click="depthClick(item)">
<text class="price">{{ item.price }}</text> <text class="price">{{ parseFloat(item.price).toFixed(item.baseCoinScale) }}</text>
<text class="num">{{ item.total }}</text> <text class="num">{{ item.size }}</text>
<view class="buybg" :style="`width: ${20 * index}%;`"></view> <view class="buybg" :style="`width: ${item.size/sum.buy*100 }%;`"></view>
</view> </view>
</view> </view>
@ -33,7 +33,15 @@ export default {
item: Object, item: Object,
marketDetail: { marketDetail: {
type: Object, type: Object,
default: () => {} default: () => {
}
},
sum: {
type: Object,
default: () => {
}
}, },
bboList:{ bboList:{
type: Object, type: Object,
@ -43,9 +51,7 @@ export default {
data() { data() {
return { return {
popoverVisible: false, popoverVisible: false,
depthValue: 1,
sellList: 9,
buyList: 10,
} }
}, },
computed: { computed: {

8
components/transaction/transaction.vue
View File

@ -86,6 +86,12 @@ export default {
return 'USDT' return 'USDT'
} }
}, },
type: { // 货币名称
type: String,
default() {
return 'buy'
}
},
coinPrice: { // 数字货币价格 coinPrice: { // 数字货币价格
type: Number, type: Number,
default() { default() {
@ -107,7 +113,7 @@ export default {
}, },
data() { data() {
return { return {
type: 'buy',
priceSelectListShow: false, priceSelectListShow: false,
priceTypeValue: 0, priceTypeValue: 0,
priceTypeList: [ priceTypeList: [

10
pages/markets/index.vue
View File

@ -43,11 +43,11 @@
onShow() { onShow() {
}, },
onHide() { onHide() {
this.unsubWebSocket(); this.websock.closeSocket();
}, },
onUnload() { onUnload() {
this.unsubWebSocket(); this.websock.closeSocket();
}, },
computed: { computed: {
i18n() { i18n() {

568
pages/markets/kLine.vue
View File

@ -1,41 +1,48 @@
<template> <template>
<view class="main"> <view class="main">
<!-- nav --> <!-- nav -->
<navigation>{{ 'BTC/USDT' }}</navigation> <navigation>{{ symbol.pair }}</navigation>
<!-- 价格百分比 --> <!-- 价格百分比 -->
<view class="header"> <view class="header">
<view class="top"> <view class="top">
<!-- 实时价格 --> <!-- 实时价格 -->
<text class="price">34985.93</text> <text class="price">{{parseFloat(marketDetail.close).toFixed(marketDetail.baseCoinScale)}}</text>
<!-- 百分比,根据数据正负判断颜色 --> <!-- 百分比,根据数据正负判断颜色 -->
<text class="percent" :class="{ rise: false }">-15.30%</text> <text class="percent"
:class="{ rise: marketDetail.percent>=0 }">{{marketDetail.percent>=0?'+'+marketDetail.percent:marketDetail.percent}}%</text>
</view> </view>
<view class="bottom"> <view class="bottom">
<view class="left"> <view class="left">
<view class="title">{{ i18n.Highest }}</view> <view class="title">{{ i18n.Highest }}</view>
<view class="value">45930.24</view> <view class="value">{{marketDetail.high}}</view>
</view> </view>
<view class="center"> <view class="center">
<view class="title">{{ i18n.Lowest }}</view> <view class="title">{{ i18n.Lowest }}</view>
<view class="value">45930.24</view> <view class="value">{{marketDetail.low}}</view>
</view> </view>
<view class="right"> <view class="right">
<view class="title">{{ i18n.Amount }}</view> <view class="title">{{ i18n.Amount }}</view>
<view class="value">28394893.30943094</view> <view class="value">{{marketDetail.amount}}</view>
</view> </view>
</view> </view>
</view> </view>
<view class="tab"> <view class="tab">
<view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">1M <view class="item" :class="{ select: type === '1min' }" @click="onChangeType('1min')">1min
</view> </view>
<view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">30M <view class="item" :class="{ select: type === '5min' }" @click="onChangeType('5min')">5min
</view> </view>
<view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">60M <view class="item" :class="{ select: type === '15min' }" @click="onChangeType('15min')">15min
</view> </view>
<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">1D <view class="item" :class="{ select: type === '30min' }" @click="onChangeType('30min')">30min
</view> </view>
<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">30D <view class="item" :class="{ select: type === '60min' }" @click="onChangeType('60min')">60min
</view> </view>
<view class="item" :class="{ select: type === '1day' }" @click="onChangeType('1day')">1day
</view>
<view class="item" :class="{ select: type === '1week' }" @click="onChangeType('1week')">1week
</view>
<view class="item" :class="{ select: type === '1mon' }" @click="onChangeType('1mon')">1mon
</view>
</view> </view>
<!-- K线图 --> <!-- K线图 -->
<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive" <view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive"
@ -52,23 +59,23 @@
<view class="price">{{ i18n.BuyingPrice }}</view> <view class="price">{{ i18n.BuyingPrice }}</view>
</view> </view>
<view class="list"> <view class="list">
<view class="item" v-for="(item, index) in buyList" :key="index"> <view class="item" v-for="(item, index) in bboList.buy" :key="index">
<text class="price">0.87897874</text> <text class="price">{{parseFloat(item.size).toFixed(6)}}</text>
<text class="num buy">{{ item }}</text> <text class="num buy">{{ item.price }}</text>
<view class="buybg" :style="`width: ${20 * index}%;`"></view> <view class="buybg" :style="`width: ${item.size/sum.buy*100 }%;`"></view>
</view> </view>
</view> </view>
</view> </view>
<view class="box"> <view class="box">
<view class="title"> <view class="title">
<view class="quantity">{{ i18n.Quantity }}</view> <view class="quantity">{{ i18n.Quantity }}</view>
<view class="price">{{ i18n.SellPrice20 }}</view> <view class="price">{{ i18n.SellPrice }}</view>
</view> </view>
<view class="list"> <view class="list">
<view class="item" v-for="(item, index) in sellList" :key="index"> <view class="item" v-for="(item, index) in bboList.sell" :key="index">
<text class="price">0.87897874</text> <text class="price">{{parseFloat(item.size).toFixed(6)}}</text>
<text class="num sell">{{ item }}</text> <text class="num sell">{{ item.price }}</text>
<view class="sellbg" :style="`width: ${20 * index}%;`"></view> <view class="sellbg" :style="`width: ${item.size/sum.sell*100 }%;`"></view>
</view> </view>
</view> </view>
@ -78,11 +85,11 @@
<view class="btn"> <view class="btn">
<!-- open按钮 --> <!-- open按钮 -->
<u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick"> <u-button class="button" color="#00E8A2" throttleTime="500" @click="btnClick('buy')">
{{ i18n.open }} {{ i18n.open }}
</u-button> </u-button>
<!-- close按钮 --> <!-- close按钮 -->
<u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick"> <u-button class="button" color="#F4506A" throttleTime="500" @click="btnClick('sell')">
{{ i18n.close }} {{ i18n.close }}
</u-button> </u-button>
</view> </view>
@ -99,10 +106,16 @@
}, },
data() { data() {
return { return {
buyList: 7, kdata: {},
sellList: 9, type: '1min',
kdata: [], symbol: null,
type:1 marketDetail: {
close: 0,
usdRate: 0
},
bboList: {},
webSocketChannel: {},
sum: {}
}; };
}, },
@ -112,12 +125,283 @@
}, },
}, },
onLoad() { onLoad() {
this.kdata = this.splitData(ktest.JSON); //this.kdata = this.splitData(ktest.JSON);
// console.log(this.kdata, 1111) // console.log(this.kdata, 1111)
}, },
onShow() {}, onShow() {
methods: { this.into();
},
onHide() {
this.websock.closeSocket();
},
onUnload() {
this.websock.closeSocket();
},
methods: {
into() { into() {
this.symbol = uni.getStorageSync('symbol');
if (!this.symbol) {
// #ifdef H5
history.back()
// #endif
// #ifdef APP-PLUS
uni.navigateBack()
// #endif
}
this.getMarketDetail();
this.initWebSocket();
this.getBboList()
},
statisticsSum() {
this.sum.buy = 0
this.sum.sell = 0
console.log(this.sum.buy);
for (var buy in this.bboList.buy) {
if (buy >= 8) {
break;
}
this.sum.buy += parseFloat(this.bboList.buy[buy].size)
}
for (var sell in this.bboList.sell) {
if (sell >= 8) {
break;
}
this.sum.sell += parseFloat(this.bboList.sell[sell].size)
}
},
onChangeType(type) {
this.unsubkline();
this.type = type
this.subKHistory()
this.subkline();
},
formateDate(time) {
var date = new Date(parseInt(time * 1000));
var Y = date.getFullYear();
var M = '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
var D = '-' + date.getDate();
var h = ' ' + date.getHours();
var m = ':' + date.getMinutes();
var s = ':' + date.getSeconds();
var time;
if (this.type.indexOf('min') > -1) {
time = Y + M + D + h + m;
} else if (this.type === '1day' || this.type === '1week') {
time = Y + M + D;
} else {
time = Y + M;
}
return time;
},
getBboList() {
const bboList = this.$api.bboList({
"symbol": this.symbol.symbol
});
bboList.then(res => {
console.log(9999999,res)
this.bboList = res
this.statisticsSum();
})
.catch(e => {
console.log(e)
uni.showToast({
title: e,
icon: 'none',
duration: 2500
})
})
},
getMarketDetail() {
const marketDetail = this.$api.marketDetail({
"symbol": this.symbol.symbol
});
marketDetail.then(res => {
this.marketDetail = res
})
.catch(e => {
console.log(e)
uni.showToast({
title: e,
icon: 'none',
duration: 2500
})
})
},
initWebSocket() {
this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL
var that = this
this.websock.getWebSocketMsg(data => {
if (data.channel === 'conn') {
that.websockId = data.data
that.subbbo()
that.submarketDetail()
that.subKHistory()
that.subkline();
} else if (data.channel === 'market.pairsgroup') {
that.symbolList = data.data.USDT;
} else if (data.channel === that.webSocketChannel.bbo) {
that.bboList = data.data;
} else if (data.channel === that.webSocketChannel.bbo) {
that.bboList = data.data;
that.statisticsSum();
} else if (data.channel === that.webSocketChannel.trade) {
that.tradeList = data.data;
} else if (data.channel === that.webSocketChannel.detail) {
that.marketDetail = data.data;
} else if (data.channel === that.webSocketChannel.kline) {
if (data.event === 'req') {
that.kdata = that.splitData(data.data)
} else {
that.upkline(data.data)
}
}
});
},
//订阅交易对
subKHistory() {
var toDate = parseInt(new Date().getTime() / 1000);
var num = 100000;
var fromDate = parseInt(new Date().getTime() / 1000);
switch (this.type) {
case '1min':
fromDate = fromDate - num;
break;
case '5min':
fromDate = fromDate - (5 * num);
break;
case '15min':
fromDate = fromDate - (15 * num);
break;
case '30min':
fromDate = fromDate - (30 * num);
break;
case '60min':
fromDate = fromDate - (60 * num);
break;
case '1day':
fromDate = fromDate - (60 * 24 * num);
break;
case '1week':
fromDate = fromDate - (60 * 24 * 7 * num);
break;
case '1mon':
fromDate = fromDate - (60 * 24 * 30 * num);
break;
}
this.webSocketChannel.kline = 'market.' + this.symbol.symbol + ".kline." + this.type;
const data = {
event: 'req',
type: 'kline',
id: this.websockId,
channel: [this.webSocketChannel.kline],
fromDate: parseInt(fromDate),
toDate: toDate
};
this.websock.webSocketSendMsg(data)
},
subkline() {
this.webSocketChannel.kline = 'market.' + this.symbol.symbol + ".kline." + this.type;
const data = {
event: 'sub',
type: 'kline',
id: this.websockId,
channel: [this.webSocketChannel.kline],
};
this.websock.webSocketSendMsg(data)
},
unsubkline() {
this.webSocketChannel.kline = 'market.' + this.symbol.symbol + ".kline." + this.type;
const data = {
event: 'un_sub',
type: 'kline',
id: this.websockId,
channel: [this.webSocketChannel.kline],
};
this.websock.webSocketSendMsg(data)
},
upkline(data) {
if (data.id === this.kdata.values[this.kdata.values.length - 1][5]) {
this.kdata.values.pop();
this.kdata.volumes.pop();
this.kdata.values.push([data.open, data.close, data.low, data.high, data.kTime, data.id]);
this.kdata.volumes.push([this.kdata.volumes.length, data.high, data.open > data.close ? 1 : -1])
} else {
this.kdata.values.push([data.open, data.close, data.low, data.high, data.kTime, data.id]);
this.kdata.volumes.push([this.kdata.volumes.length, this.kdata.volumes.length, data.high, data.open >
data.close ? 1 : -1
])
this.kdata.categoryData.push(this.formateDate(data.kTime));
}
},
subbbo() {
this.webSocketChannel.bbo = 'market.' + this.symbol.symbol + ".bbo";
this.subWebSocket('bbo', [this.webSocketChannel.bbo])
},
unsubbbo() {
this.unsubWebSocket('bbo', [this.webSocketChannel.bbo])
},
subtrade() {
this.webSocketChannel.trade = 'market.' + this.symbol.symbol + ".trade";
this.subWebSocket('trade', [this.webSocketChannel.trade])
},
unsubtrade() {
this.unsubWebSocket('trade', [this.webSocketChannel.trade])
},
submarketDetail() {
this.webSocketChannel.detail = 'market.' + this.symbol.symbol + ".detail";
this.subWebSocket('detail', [this.webSocketChannel.detail])
},
unsubmarketDetail() {
this.unsubWebSocket('detail', [this.webSocketChannel.detail])
},
subWebSocket(type, channel) {
const data = {
event: 'sub',
type: type,
id: this.websockId,
channel: channel
};
this.websock.webSocketSendMsg(data)
console.log("websocket发送", data);
},
unsubWebSocket(type, channel) {
const data = {
event: 'un_sub',
type: type,
id: this.websockId,
channel: channel
};
this.websock.webSocketSendMsg(data)
}, },
splitData(rawData) { splitData(rawData) {
@ -125,15 +409,20 @@
let values = []; let values = [];
let volumes = []; let volumes = [];
for (let i = 0; i < rawData.length; i++) { for (let i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]); var ldata = rawData[i];
values.push(rawData[i]); categoryData.push(this.formateDate(ldata.kTime));
volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
values.push([ldata.open, ldata.close, ldata.low, ldata.high, ldata.kTime, ldata.id]);
volumes.push([i, ldata.high, ldata.open > ldata.close ? 1 : -1]);
} }
return { return {
categoryData: categoryData, categoryData: categoryData,
values: values, values: values,
volumes: volumes volumes: volumes,
webSocketChannel: this.webSocketChannel.kline
}; };
}, },
depthChange(e) { depthChange(e) {
console.log(e); console.log(e);
@ -150,19 +439,16 @@
uni.navigateTo({ uni.navigateTo({
url, url,
}); });
}, },
openBtnClick(){ btnClick(type) {
// let categoryData = []; uni.setStorageSync('orderType',type);
// let values = []; // #ifdef H5
// let volumes = []; history.back()
// this.kdata.values.pop(); // #endif
// this.kdata.volumes.pop();
this.kdata.values.push([17827.33+Math.floor(Math.random()*100), // #ifdef APP-PLUS
17829.73+Math.floor(Math.random()*100), uni.navigateBack()
17799.8+Math.floor(Math.random()*100), // #endif
17877.84+Math.floor(Math.random()*100) , 85130000+Math.floor(Math.random()*100)])
this.kdata.volumes.push([3140,1688777777,1])
this.kdata.categoryData.push('2016-06-22')
} }
}, },
@ -172,7 +458,7 @@
let kline let kline
export default { export default {
mounted() { mounted() {
console.log('1111', this.kdata.categoryData);
if (typeof window.echarts === 'function') { if (typeof window.echarts === 'function') {
//this.initEcharts() //this.initEcharts()
} else { } else {
@ -187,16 +473,20 @@
}, },
methods: { methods: {
receive(newValue, oldValue, ownerVm, vm) { receive(newValue, oldValue, ownerVm, vm) {
console.log('newValue', newValue) if (this.channel != newValue.webSocketChannel) {
this.is = false
}
this.channel = newValue.webSocketChannel
const script = document.createElement('script'); const script = document.createElement('script');
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算 // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = './static/echarts.js'; script.src = './static/echarts.js';
script.onload = this.upData.bind(this); script.onload = this.upData.bind(this);
document.head.appendChild(script); document.head.appendChild(script);
}, },
calculateMA(dayCount, data) { calculateMA(dayCount, data) {
@ -217,12 +507,13 @@
upData(myChart) { upData(myChart) {
const upColor = '#00C873'; const upColor = '#00C873';
const downColor = '#FF3750'; const downColor = '#FF3750';
var chartDom = document.getElementById('kline'); var chartDom = document.getElementById('kline');
if(!this.is){ if (!this.is) {
this.myChart = echarts.init(chartDom); console.log("this.is11111111", this.is)
this.myChart = echarts.init(chartDom);
} }
this.is=true; this.is = true;
var option; var option;
this.myChart.setOption( this.myChart.setOption(
(option = { (option = {
@ -245,8 +536,8 @@
axisLine: { axisLine: {
show: false, show: false,
onZero: false onZero: false
}, },
axisTick: { axisTick: {
show: false show: false
}, },
@ -280,12 +571,12 @@
max: 'dataMax' max: 'dataMax'
} }
], ],
yAxis: [{ yAxis: [{
position: 'right',
scale: true, scale: true,
axisLine: { axisLine: {
show: false show: false
}, },
axisTick: { axisTick: {
@ -326,7 +617,7 @@
visualMap: { visualMap: {
show: false, show: false,
seriesIndex: 1, seriesIndex: 5,
dimension: 2, dimension: 2,
pieces: [{ pieces: [{
value: 1, value: 1,
@ -338,17 +629,17 @@
} }
] ]
}, },
grid: [{ grid: [{
top: '8%', top: '8%',
left: '50rpx', left: '10rpx',
right: '10rpx', right: '50rpx',
height: '60%', height: '60%',
backgroundColor: 'transparent', backgroundColor: 'transparent',
}, },
{ {
left: '0%', left: '10rpx',
right: '0%', right: '50rpx',
top: '80%', top: '80%',
height: '16%' height: '16%'
} }
@ -369,7 +660,7 @@
} }
], ],
series: [{ series: [{
name: 'Dow-Jones index',
type: 'candlestick', type: 'candlestick',
data: this.kdata.values, data: this.kdata.values,
itemStyle: { itemStyle: {
@ -377,19 +668,20 @@
color0: downColor, color0: downColor,
borderColor: undefined, borderColor: undefined,
borderColor0: undefined borderColor0: undefined
}, },
markLine: { markLine: {
symbol: ['none', 'none'], symbol: ['none', 'none'],
data: [ data: [
{ {
name: 'max line on close', name: 'max line on close',
type: 'max', type: 'max',
valueDim: 'close' valueDim: 'highest'
} }
] ]
}, },
tooltip: { tooltip: {
formatter: function(param) { formatter: function(param) {
param = param[0]; param = param[0];
@ -404,6 +696,47 @@
} }
} }
}, },
{
name: 'MA5',
type: 'line',
showSymbol: false,
data: this.calculateMA(5, this.kdata),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA10',
type: 'line',
showSymbol: false,
data: this.calculateMA(10, this.kdata),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA20',
type: 'line',
showSymbol: false,
data: this.calculateMA(20, this.kdata),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA30',
type: 'line',
showSymbol: false,
data: this.calculateMA(30, this.kdata),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{ {
name: 'Volume', name: 'Volume',
type: 'bar', type: 'bar',
@ -419,8 +752,8 @@
] ]
}), }),
true true
); );
} }
}, },
watch: { watch: {
@ -498,26 +831,29 @@
} }
} }
.tab {
display: flex; .tab {
background:#000000; display: flex;
.item { background: #000000;
height: 64rpx;
line-height: 64rpx; .item {
flex: 1; height: 64rpx;
font-size: 24rpx; line-height: 64rpx;
text-align: center; flex: 1;
font-size: 24rpx;
&.select { text-align: center;
background: rgba(0, 232, 162,0.3);
border-radius: 19px; &.select {
} background: rgba(0, 232, 162, 0.3);
} border-radius: 19px;
}
}
} }
.kline { .kline {
background: #000000; background: #000000;
} }
@ -533,7 +869,7 @@
display: flex; display: flex;
font-size: 24rpx; font-size: 24rpx;
.box { .box {
padding-left: 32rpx; padding-left: 32rpx;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;

358
pages/markets/trade.vue
View File

@ -7,10 +7,11 @@
</navigation> </navigation>
<view class="content"> <view class="content">
<view class="transactionSide"> <view class="transactionSide">
<transaction></transaction> <transaction :coin="symbol.coinSymbol" :type="type" :currency="symbol.baseSymbol"></transaction>
</view> </view>
<view class="positionSide"> <view class="positionSide">
<positionList v-on:depthChange="depthChange" :marketDetail="marketDetail" :bboList="bboList"></positionList> <positionList v-on:depthChange="depthChange" :sum="sum" :marketDetail="marketDetail" :bboList="bboList">
</positionList>
</view> </view>
</view> </view>
<view class="orderList"> <view class="orderList">
@ -54,84 +55,115 @@
return { return {
popupShow: false, popupShow: false,
symbolList: [], symbolList: [],
symbol: null, symbol: {},
marketDetail:null, marketDetail: {
bboList:{}, close: 0,
tradeList:{}, usdRate: 0
webSocketChannel:{} },
bboList: {},
type:'buy',
webSocketChannel: {},
sum:{}
}; };
}, },
computed: { computed: {
i18n() { i18n() {
return this.$t("markets"); return this.$t("markets");
}, },
},
onHide() {
this.websock.closeSocket();
},
onUnload() {
this.websock.closeSocket();
}, },
onLoad() { onLoad() {
},
onShow() {
this.getSymbolGroup(); this.getSymbolGroup();
this.initWebSocket(); this.initWebSocket();
this.symbol=uni.getStorageSync('symbol'); this.symbol = uni.getStorageSync('symbol');
if(this.symbol!=null){ if (this.symbol) {
this.getMarketDetail() this.getMarketDetail()
this.getBboList(); this.getBboList();
this.getTradeList(); }
} this.type=uni.getStorageSync('orderType');
console.log(this.type)
this.type=this.type?this.type:'buy';
}, uni.removeStorageSync('orderType');
onShow() {
console.log(11111, uni.getStorageSync('symbol'));
}, },
methods: { methods: {
getTradeList(){ statisticsSum(){
const tradeList = this.$api.tradeList({ this.sum.buy=0
"symbol": this.symbol.symbol this.sum.sell=0
}); console.log(this.sum.buy);
tradeList.then(res => {
this.tradeList = res
}) for(var buy in this.bboList.buy){
.catch(e => { if(buy>=5){
console.log(e) break;
uni.showToast({ }
title: e, this.sum.buy+=parseFloat(this.bboList.buy[buy].size)
icon: 'none', }
duration: 2500 for(var sell in this.bboList.sell){
}) if(sell>=5){
}) break;
}, }
getBboList(){ this.sum.sell+=parseFloat(this.bboList.sell[sell].size)
const bboList = this.$api.bboList({ }
"symbol": this.symbol.symbol
});
bboList.then(res => {
this.bboList = res
})
.catch(e => {
console.log(e)
uni.showToast({
title: e,
icon: 'none',
duration: 2500
})
})
},
getMarketDetail(){
const marketDetail = this.$api.marketDetail({
"symbol": this.symbol.symbol
});
marketDetail.then(res => {
this.marketDetail = res
}) },
.catch(e => { getTradeList() {
console.log(e) const tradeList = this.$api.tradeList({
uni.showToast({ "symbol": this.symbol.symbol
title: e, });
icon: 'none', tradeList.then(res => {
duration: 2500 this.tradeList = res
})
}) })
.catch(e => {
console.log(e)
uni.showToast({
title: e,
icon: 'none',
duration: 2500
})
})
},
getBboList() {
const bboList = this.$api.bboList({
"symbol": this.symbol.symbol
});
bboList.then(res => {
this.bboList = res
this.statisticsSum()
})
.catch(e => {
console.log(e)
uni.showToast({
title: e,
icon: 'none',
duration: 2500
})
})
},
getMarketDetail() {
const marketDetail = this.$api.marketDetail({
"symbol": this.symbol.symbol
});
marketDetail.then(res => {
this.marketDetail = res
})
.catch(e => {
console.log(e)
uni.showToast({
title: e,
icon: 'none',
duration: 2500
})
})
}, },
getSymbolGroup() { getSymbolGroup() {
const symbolGroup = this.$api.symbolGroup({ const symbolGroup = this.$api.symbolGroup({
@ -139,8 +171,13 @@
}); });
symbolGroup.then(res => { symbolGroup.then(res => {
this.symbolList = res.USDT this.symbolList = res.USDT
if(this.symbol==null){ this.symbol = uni.getStorageSync('symbol');
this.symbol=this.symbolList[0] if (!this.symbol) {
this.symbol = this.symbolList[0]
this.getMarketDetail()
this.getBboList();
this.switchTo(this.symbol);
} }
}) })
@ -155,90 +192,90 @@
}, },
initWebSocket() { initWebSocket() {
this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL
var that = this var that = this
this.websock.getWebSocketMsg(data => { this.websock.getWebSocketMsg(data => {
if (data.channel === 'conn') { if (data.channel === 'conn') {
that.websockId = data.data that.websockId = data.data
that.subpairsgroup() that.subpairsgroup()
that.subbbo() that.subbbo()
that.subtrade() that.submarketDetail()
that.submarketDetail() } else if (data.channel === 'market.pairsgroup') {
} else if (data.channel === 'market.pairsgroup') { that.symbolList = data.data.USDT;
that.symbolList = data.data.USDT; } else if (data.channel === that.webSocketChannel.bbo) {
}else if (data.channel === that.webSocketChannel.bbo) { that.bboList = data.data;
that.bboList = data.data;
} else if (data.channel === that.webSocketChannel.bbo) {
}else if (data.channel === that.webSocketChannel.bbo) {
that.bboList = data.data; that.bboList = data.data;
that.statisticsSum();
}else if(data.channel === that.webSocketChannel.trade){
that.tradeList=data.data; } else if (data.channel === that.webSocketChannel.trade) {
}else if(data.channel === that.webSocketChannel.detail){ that.tradeList = data.data;
that.marketDetail=data.data; } else if (data.channel === that.webSocketChannel.detail) {
} that.marketDetail = data.data;
}); }
}, });
//订阅交易对 },
subpairsgroup(){ //订阅交易对
this.subWebSocket('pairsgroup',['market.pairsgroup']) subpairsgroup() {
}, this.subWebSocket('pairsgroup', ['market.pairsgroup'])
//取消订阅交易对 },
unsubpairsgroup(){ //取消订阅交易对
this.unsubWebSocket('pairsgroup',['market.pairsgroup']) unsubpairsgroup() {
}, this.unsubWebSocket('pairsgroup', ['market.pairsgroup'])
subbbo(){ },
this.webSocketChannel.bbo='market.'+this.symbol.symbol+".bbo"; subbbo() {
this.subWebSocket('bbo',[this.webSocketChannel.bbo]) this.webSocketChannel.bbo = 'market.' + this.symbol.symbol + ".bbo";
}, this.subWebSocket('bbo', [this.webSocketChannel.bbo])
},
unsubbbo(){
this.unsubWebSocket('bbo',[this.webSocketChannel.bbo]) unsubbbo() {
}, this.unsubWebSocket('bbo', [this.webSocketChannel.bbo])
subtrade(){ },
this.webSocketChannel.trade='market.'+this.symbol.symbol+".trade"; subtrade() {
this.subWebSocket('trade',[this.webSocketChannel.trade]) this.webSocketChannel.trade = 'market.' + this.symbol.symbol + ".trade";
}, this.subWebSocket('trade', [this.webSocketChannel.trade])
},
unsubtrade(){
this.unsubWebSocket('trade',[this.webSocketChannel.trade]) unsubtrade() {
}, this.unsubWebSocket('trade', [this.webSocketChannel.trade])
submarketDetail(){ },
this.webSocketChannel.detail='market.'+this.symbol.symbol+".detail"; submarketDetail() {
this.subWebSocket('detail',[this.webSocketChannel.detail]) this.webSocketChannel.detail = 'market.' + this.symbol.symbol + ".detail";
}, this.subWebSocket('detail', [this.webSocketChannel.detail])
},
unsubmarketDetail(){
this.unsubWebSocket('detail',[this.webSocketChannel.detail]) unsubmarketDetail() {
}, this.unsubWebSocket('detail', [this.webSocketChannel.detail])
},
subWebSocket(type,channel) {
const data = { subWebSocket(type, channel) {
event: 'sub', const data = {
type: type, event: 'sub',
id: this.websockId, type: type,
channel: channel id: this.websockId,
}; channel: channel
};
this.websock.webSocketSendMsg(data)
console.log("websocket发送", data); this.websock.webSocketSendMsg(data)
}, console.log("websocket发送", data);
unsubWebSocket(type,channel) { },
const data = { unsubWebSocket(type, channel) {
event: 'un_sub', const data = {
type: type, event: 'un_sub',
id: this.websockId, type: type,
channel: channel id: this.websockId,
}; channel: channel
this.websock.webSocketSendMsg(data) };
this.websock.webSocketSendMsg(data)
}, },
depthChange(e) { depthChange(e) {
console.log(e); console.log(e);
@ -260,18 +297,15 @@
* 切换当前交易货币对 * 切换当前交易货币对
*/ */
switchTo(item) { switchTo(item) {
this.popupShow = false; this.popupShow = false;
this.unsubbbo() this.unsubbbo()
this.unsubtrade() this.unsubmarketDetail()
this.unsubmarketDetail() this.symbol = item;
this.symbol=item; uni.setStorageSync('symbol', this.symbol);
uni.setStorageSync('symbol',this.symbol); this.getMarketDetail()
this.getMarketDetail() this.getBboList();
this.getBboList(); this.subbbo()
this.getTradeList();
this.subbbo()
this.subtrade()
this.submarketDetail() this.submarketDetail()
} }

6
utils/axios.js
View File

@ -132,10 +132,10 @@ service.interceptors.request.use(
//配置成功后的拦截器 //配置成功后的拦截器
service.interceptors.response.use(res => { service.interceptors.response.use(res => {
console.log('过期了吗', res)
uni.hideLoading() uni.hideLoading()
res=res.data; res=res.data;
console.log('11111', res)
// console.log(res) // console.log(res)
// console.log(res.data) // console.log(res.data)
// console.log(res.data.data[0].nameAlias) // console.log(res.data.data[0].nameAlias)

2
utils/language/en_US.js
View File

@ -141,7 +141,7 @@ export default {
MarketTrades:'Market Trades', MarketTrades:'Market Trades',
Quantity:'Quantity', Quantity:'Quantity',
BuyingPrice:'Buying Price', BuyingPrice:'Buying Price',
SellPrice20:'Sell Price20', SellPrice:'Sell Price',
open:'Open', open:'Open',
}, },

25
utils/websocket.js
View File

@ -165,15 +165,22 @@ class WebSocketClass {
// 关闭ws方法 // 关闭ws方法
closeSocket() { closeSocket() {
if (this.ws) { if (this.ws) {
this.userClose = true; this.userClose = true;
this.ws.close({ // #ifdef H5
success(res) { this.ws && this.ws.close();
console.log("关闭成功", res) // #endif
},
fail(err) { // #ifdef APP-PLUS
console.log("关闭失败", err) this.ws.close({
} success(res) {
}); console.log("关闭成功", res)
},
fail(err) {
console.log("关闭失败", err)
}
});
// #endif
} }
} }

Write Preview
Loading…
Cancel
Save