7 changed files with 1261 additions and 816 deletions
Binary file not shown.
@ -1,167 +1,237 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<view class="nav-head"> |
|||
<view class="left">{{ i18n.TrandingPair }}</view> |
|||
<view class="middle">{{ i18n.LatestPrice }}</view> |
|||
<view class="right">{{ i18n.RiseAndfall }}</view> |
|||
</view> |
|||
<!-- 列表 --> |
|||
<view class="coinList"> |
|||
<view class="coin" v-for="(item, index) in 20" :key="index" @click="goto(item)"> |
|||
<view class="icon"> |
|||
<u-icon name="../../static/maskets/bye.png" size="40rpx" width="40rpx"></u-icon> |
|||
</view> |
|||
<view class="name">BTC/USDT</view> |
|||
<view class="price">{{ 5145 * index * index * index }}</view> |
|||
<view class="priceChange" :class="{ 'down': index % 2 === 0 }">500.30%</view> |
|||
</view> |
|||
</view> |
|||
<!-- tabBar --> |
|||
<tab-bar :selectActive="2"></tab-bar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'markets', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onHide() { |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t('markets') |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 跳转 |
|||
*/ |
|||
goto(data) { |
|||
uni.navigateTo({ |
|||
url: '/pages/markets/trade', |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 |
|||
|
|||
.nav-head { |
|||
overflow: hidden; |
|||
position: fixed; |
|||
top: 0rpx; |
|||
height: 112rpx; |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
width: 750rpx; |
|||
z-index: 8; |
|||
background-color: #15141F; |
|||
border-bottom: 4rpx solid #323045; |
|||
padding-top: 88rpx; |
|||
|
|||
} |
|||
|
|||
.coinList { |
|||
margin: 212rpx 32rpx 0; |
|||
overflow: hidden; |
|||
|
|||
.coin { |
|||
overflow: hidden; |
|||
position: relative; |
|||
height: 64rpx; |
|||
padding: 12rpx 0; |
|||
|
|||
|
|||
.icon { |
|||
vertical-align: top; |
|||
overflow: hidden; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: #211F32; |
|||
border-radius: 20rpx; |
|||
padding: 12rpx; |
|||
} |
|||
|
|||
.name { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
margin-left: 16rpx; |
|||
} |
|||
|
|||
.price { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
.priceChange { |
|||
position: absolute; |
|||
right: 0; |
|||
display: inline-block; |
|||
width: 164rpx; |
|||
height: 64rpx; |
|||
border-radius: 20rpx; |
|||
line-height: 64rpx; |
|||
background-color: $mainColor; |
|||
font-size: 24rpx; |
|||
text-align: right; |
|||
padding-right: 16rpx; |
|||
box-sizing: border-box; |
|||
|
|||
|
|||
&::before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/maskets/ic_arrow_up.png); |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
top: 18rpx; |
|||
left: 16rpx; |
|||
} |
|||
|
|||
|
|||
&.down { |
|||
background-color: $assistRed; |
|||
|
|||
&::before { |
|||
background-image: url(../../static/maskets/ic_arrow_down.png); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<view class="nav-head"> |
|||
<view class="left">{{ i18n.TrandingPair }}</view> |
|||
<view class="middle">{{ i18n.LatestPrice }}</view> |
|||
<view class="right">{{ i18n.RiseAndfall }}</view> |
|||
</view> |
|||
<!-- 列表 --> |
|||
<view class="coinList"> |
|||
<view class="coin" v-for="(item, index) in symbolList" :key="index" @click="goto(item)"> |
|||
<view class="icon"> |
|||
<u-icon :name="BASE_URL+item.coinSymbol+'.png'" size="40rpx" width="40rpx"></u-icon> |
|||
</view> |
|||
<view class="name">{{item.pair}}</view> |
|||
<view class="price">{{ item.price}}</view> |
|||
<view class="priceChange" :class="{ 'down': item.percent< 0 }"> |
|||
{{item.percent>=0?'+'+item.percent:item.percent}}% |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- tabBar --> |
|||
<tab-bar :selectActive="2"></tab-bar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'markets', |
|||
data() { |
|||
return { |
|||
BASE_URL: '', |
|||
symbolList: [], |
|||
websock: null, |
|||
websockId: null |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.BASE_URL = this.$constant.BASE_URL + '/coins/'; |
|||
this.getSymbolGroup(); |
|||
this.initWebSocket() |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onHide() { |
|||
this.unsubWebSocket(); |
|||
}, |
|||
onUnload() { |
|||
this.unsubWebSocket(); |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t('markets') |
|||
} |
|||
}, |
|||
methods: { |
|||
getSymbolGroup() { |
|||
const symbolGroup = this.$api.symbolGroup({ |
|||
"model": "contract" |
|||
}); |
|||
symbolGroup.then(res => { |
|||
this.symbolList = res.USDT |
|||
|
|||
}) |
|||
.catch(e => { |
|||
console.log(e) |
|||
uni.showToast({ |
|||
title: e, |
|||
icon: 'none', |
|||
duration: 2500 |
|||
}) |
|||
}) |
|||
|
|||
|
|||
|
|||
}, |
|||
subWebSocket() { |
|||
const data = { |
|||
event: 'sub', |
|||
type: 'pairsgroup', |
|||
id: this.websockId, |
|||
channel: ["market.pairsgroup"] |
|||
}; |
|||
|
|||
this.websock.webSocketSendMsg(data) |
|||
console.log("websocket发送", data); |
|||
}, |
|||
unsubWebSocket() { |
|||
const data = { |
|||
event: 'un_sub', |
|||
type: 'pairsgroup', |
|||
id: this.websockId, |
|||
channel: ["market.pairsgroup"] |
|||
}; |
|||
this.websock.webSocketSendMsg(data) |
|||
|
|||
}, |
|||
initWebSocket() { |
|||
|
|||
|
|||
this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL |
|||
|
|||
|
|||
var that = this |
|||
this.websock.getWebSocketMsg(data => { |
|||
console.log(data, 1111) |
|||
if (data.channel === 'conn') { |
|||
that.websockId = data.data |
|||
that.subWebSocket(); |
|||
} else if (data.channel === 'market.pairsgroup') { |
|||
that.symbolList = data.data.USDT; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 跳转 |
|||
*/ |
|||
goto(data) { |
|||
uni.setStorageSync('symbol', data); |
|||
uni.navigateTo({ |
|||
url: '/pages/markets/trade', |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 |
|||
|
|||
.nav-head { |
|||
overflow: hidden; |
|||
position: fixed; |
|||
top: 0rpx; |
|||
height: 112rpx; |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
width: 750rpx; |
|||
z-index: 8; |
|||
background-color: #15141F; |
|||
border-bottom: 4rpx solid #323045; |
|||
padding-top: 88rpx; |
|||
|
|||
} |
|||
|
|||
.coinList { |
|||
margin: 212rpx 32rpx 0; |
|||
overflow: hidden; |
|||
|
|||
.coin { |
|||
overflow: hidden; |
|||
position: relative; |
|||
height: 64rpx; |
|||
padding: 12rpx 0; |
|||
|
|||
|
|||
.icon { |
|||
vertical-align: top; |
|||
overflow: hidden; |
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
background: #211F32; |
|||
border-radius: 20rpx; |
|||
padding: 12rpx; |
|||
} |
|||
|
|||
.name { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
margin-left: 16rpx; |
|||
} |
|||
|
|||
.price { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 28rpx; |
|||
color: #A1A0A8; |
|||
} |
|||
|
|||
.priceChange { |
|||
position: absolute; |
|||
right: 0; |
|||
display: inline-block; |
|||
width: 164rpx; |
|||
height: 64rpx; |
|||
border-radius: 20rpx; |
|||
line-height: 64rpx; |
|||
background-color: $mainColor; |
|||
font-size: 24rpx; |
|||
text-align: right; |
|||
padding-right: 16rpx; |
|||
box-sizing: border-box; |
|||
|
|||
|
|||
&::before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/maskets/ic_arrow_up.png); |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
top: 18rpx; |
|||
left: 16rpx; |
|||
} |
|||
|
|||
|
|||
&.down { |
|||
background-color: $assistRed; |
|||
|
|||
&::before { |
|||
background-image: url(../../static/maskets/ic_arrow_down.png); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
|
|||
@ -1,245 +1,381 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation :showBack="false"> |
|||
<view class="leftMenuBtn" @click="popupShow = true">{{ 'BTC/USDT' }}</view> |
|||
<view slot="right" class="right" @click="goto('kLine')"></view> |
|||
</navigation> |
|||
<view class="content"> |
|||
<view class="transactionSide"> |
|||
<transaction></transaction> |
|||
</view> |
|||
<view class="positionSide"> |
|||
<positionList v-on:depthChange="depthChange"></positionList> |
|||
</view> |
|||
</view> |
|||
<view class="orderList"> |
|||
<entrustOrderList></entrustOrderList> |
|||
</view> |
|||
|
|||
<u-popup class="popup" :show="popupShow" mode="left" @close="popupShow = false" @open="popupShow = true" |
|||
bgColor="#15141F"> |
|||
<view class="popupContent"> |
|||
<!-- nav --> |
|||
<view class="head"> |
|||
<text class="item">{{ i18n.TrandingPair }}</text> |
|||
<text class="center">{{ i18n.LatestPrice }}</text> |
|||
<text class="item">{{ i18n.RiseAndfall }}</text> |
|||
</view> |
|||
<!-- 列表 --> |
|||
<view class="coinList"> |
|||
<scroll-view scroll-y="true" style="height: 86vh;" scroll-with-animation="true" |
|||
@touchmove.stop.prevent=""> |
|||
<view class="coin" v-for="(item, index) in 20" :key="index" @click="switchTo(item)"> |
|||
<view class="name">BTC/USDT</view> |
|||
<view class="price">{{ 5145 * index * index * index }}</view> |
|||
<view class="priceChange" :class="{ 'down': index % 2 === 0 }">500.30%</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
<!-- tabBar --> |
|||
<tab-bar :selectActive="2" :isTarde="true"></tab-bar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "trade", |
|||
data() { |
|||
return { |
|||
popupShow: false, |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("markets"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
depthChange(e) { |
|||
console.log(e); |
|||
}, |
|||
goto(page) { |
|||
let url = ''; |
|||
switch (page) { |
|||
case 'kLine': |
|||
url = '/pages/markets/kLine' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
uni.navigateTo({ |
|||
url, |
|||
}); |
|||
}, |
|||
/** |
|||
* 切换当前交易货币对 |
|||
*/ |
|||
switchTo(item) { |
|||
this.popupShow = false; |
|||
} |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 |
|||
|
|||
.leftMenuBtn { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
position: absolute; |
|||
left: 32rpx; |
|||
font-size: 24rpx; |
|||
background-image: url(../../static/maskets/menu.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 48rpx; |
|||
padding-left: 54rpx; |
|||
font-size: 34rpx; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.right { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
position: absolute; |
|||
right: 32rpx; |
|||
font-size: 24rpx; |
|||
background-image: url(../../static/home/ic_increase.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 48rpx; |
|||
color: #FFBC1F; |
|||
} |
|||
|
|||
|
|||
.content { |
|||
margin-top: 200rpx; |
|||
padding-top: 20rpx; |
|||
padding-bottom: 40rpx; |
|||
margin-bottom: 32rpx; |
|||
background: #211F32; |
|||
display: flex; |
|||
|
|||
.transactionSide { |
|||
width: 444rpx; |
|||
margin-left: 28rpx; |
|||
} |
|||
|
|||
.positionSide { |
|||
width: 242rpx; |
|||
margin-left: 36rpx; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.orderList {} |
|||
|
|||
.popup { |
|||
.popupContent { |
|||
width: 586rpx; |
|||
font-size: 24rpx; |
|||
|
|||
.head { |
|||
margin-top: 108rpx; |
|||
color: #818197; |
|||
margin-left: 16rpx; |
|||
display: flex; |
|||
|
|||
.center { |
|||
width: 190rpx; |
|||
padding-left: 30rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.item { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.coinList { |
|||
margin: 0rpx 32rpx 0; |
|||
overflow: hidden; |
|||
|
|||
.coin { |
|||
overflow: hidden; |
|||
position: relative; |
|||
height: 64rpx; |
|||
padding: 12rpx 0; |
|||
font-size: 24rpx; |
|||
|
|||
.name { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.price { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
// text-align: center; |
|||
} |
|||
|
|||
.priceChange { |
|||
position: absolute; |
|||
right: 0; |
|||
display: inline-block; |
|||
width: 164rpx; |
|||
height: 64rpx; |
|||
border-radius: 20rpx; |
|||
line-height: 64rpx; |
|||
background-color: $mainColor; |
|||
font-size: 24rpx; |
|||
text-align: right; |
|||
padding-right: 16rpx; |
|||
box-sizing: border-box; |
|||
|
|||
|
|||
&::before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/maskets/ic_arrow_up.png); |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
top: 18rpx; |
|||
left: 16rpx; |
|||
} |
|||
|
|||
|
|||
&.down { |
|||
background-color: $assistRed; |
|||
|
|||
&::before { |
|||
background-image: url(../../static/maskets/ic_arrow_down.png); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation :showBack="false"> |
|||
<view class="leftMenuBtn" @click="popupShow = true">{{symbol.pair}}</view> |
|||
<view slot="right" class="right" @click="goto('kLine')"></view> |
|||
</navigation> |
|||
<view class="content"> |
|||
<view class="transactionSide"> |
|||
<transaction></transaction> |
|||
</view> |
|||
<view class="positionSide"> |
|||
<positionList v-on:depthChange="depthChange"></positionList> |
|||
</view> |
|||
</view> |
|||
<view class="orderList"> |
|||
<entrustOrderList></entrustOrderList> |
|||
</view> |
|||
|
|||
<u-popup class="popup" :show="popupShow" mode="left" @close="popupShow = false" @open="popupShow = true" |
|||
bgColor="#15141F"> |
|||
<view class="popupContent"> |
|||
<!-- nav --> |
|||
<view class="head"> |
|||
<text class="item">{{ i18n.TrandingPair }}</text> |
|||
<text class="center">{{ i18n.LatestPrice }}</text> |
|||
<text class="item">{{ i18n.RiseAndfall }}</text> |
|||
</view> |
|||
<!-- 列表 --> |
|||
<view class="coinList"> |
|||
<scroll-view scroll-y="true" style="height: 86vh;" scroll-with-animation="true" |
|||
@touchmove.stop.prevent=""> |
|||
<view class="coin" v-for="(item, index) in symbolList" :key="index" @click="switchTo(item)"> |
|||
<view class="name">{{item.pair}}</view> |
|||
<view class="price">{{ item.price}}</view> |
|||
<view class="priceChange" :class="{ 'down': item.percent< 0 }"> |
|||
{{item.percent>=0?'+'+item.percent:item.percent}}% |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
<!-- tabBar --> |
|||
<tab-bar :selectActive="2" :isTarde="true"></tab-bar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "trade", |
|||
data() { |
|||
return { |
|||
popupShow: false, |
|||
symbolList: [], |
|||
symbol: null, |
|||
marketDetail:null, |
|||
bboList:[], |
|||
tradeList:[] |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("markets"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
this.symbol=uni.getStorageSync('symbol'); |
|||
if(this.symbol!=null){ |
|||
this.getMarketDetail(this.symbol.symbol) |
|||
this.getBboList(this.symbol.symbol); |
|||
this.getTradeList(this.symbol.symbol); |
|||
} |
|||
this.getSymbolGroup(); |
|||
this.initWebSocket(); |
|||
}, |
|||
onShow() { |
|||
console.log(11111, uni.getStorageSync('symbol')); |
|||
}, |
|||
methods: { |
|||
getTradeList(symbol){ |
|||
const tradeList = this.$api.tradeList({ |
|||
"symbol": symbol |
|||
}); |
|||
tradeList.then(res => { |
|||
this.tradeList = res |
|||
|
|||
}) |
|||
.catch(e => { |
|||
console.log(e) |
|||
uni.showToast({ |
|||
title: e, |
|||
icon: 'none', |
|||
duration: 2500 |
|||
}) |
|||
}) |
|||
}, |
|||
getBboList(symbol){ |
|||
const bboList = this.$api.bboList({ |
|||
"symbol": symbol |
|||
}); |
|||
bboList.then(res => { |
|||
this.bboList = res |
|||
|
|||
}) |
|||
.catch(e => { |
|||
console.log(e) |
|||
uni.showToast({ |
|||
title: e, |
|||
icon: 'none', |
|||
duration: 2500 |
|||
}) |
|||
}) |
|||
}, |
|||
getMarketDetail(symbol){ |
|||
const marketDetail = this.$api.marketDetail({ |
|||
"symbol": symbol |
|||
}); |
|||
marketDetail.then(res => { |
|||
this.marketDetail = res |
|||
|
|||
}) |
|||
.catch(e => { |
|||
console.log(e) |
|||
uni.showToast({ |
|||
title: e, |
|||
icon: 'none', |
|||
duration: 2500 |
|||
}) |
|||
}) |
|||
}, |
|||
getSymbolGroup() { |
|||
const symbolGroup = this.$api.symbolGroup({ |
|||
"model": "contract" |
|||
}); |
|||
symbolGroup.then(res => { |
|||
this.symbolList = res.USDT |
|||
if(this.symbol==null){ |
|||
this.symbol=this.symbolList[0] |
|||
} |
|||
|
|||
}) |
|||
.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.subpairsgroup(); |
|||
} else if (data.channel === 'market.pairsgroup') { |
|||
that.symbolList = data.data.USDT; |
|||
}else if (data.channel === 'market.pairsgroup') { |
|||
that.symbolList = data.data.USDT; |
|||
} |
|||
}); |
|||
}, |
|||
//订阅交易对 |
|||
subpairsgroup(){ |
|||
this.subWebSocket('pairsgroup',['market.pairsgroup']) |
|||
}, |
|||
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) |
|||
|
|||
}, |
|||
depthChange(e) { |
|||
console.log(e); |
|||
}, |
|||
goto(page) { |
|||
let url = ''; |
|||
switch (page) { |
|||
case 'kLine': |
|||
url = '/pages/markets/kLine' |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
uni.navigateTo({ |
|||
url, |
|||
}); |
|||
}, |
|||
/** |
|||
* 切换当前交易货币对 |
|||
*/ |
|||
switchTo(item) { |
|||
this.popupShow = false; |
|||
this.symbol=item; |
|||
} |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 |
|||
|
|||
.leftMenuBtn { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
position: absolute; |
|||
left: 32rpx; |
|||
font-size: 24rpx; |
|||
background-image: url(../../static/maskets/menu.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 48rpx; |
|||
padding-left: 54rpx; |
|||
font-size: 34rpx; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.right { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
position: absolute; |
|||
right: 32rpx; |
|||
font-size: 24rpx; |
|||
background-image: url(../../static/home/ic_increase.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 48rpx; |
|||
color: #FFBC1F; |
|||
} |
|||
|
|||
|
|||
.content { |
|||
margin-top: 200rpx; |
|||
padding-top: 20rpx; |
|||
padding-bottom: 40rpx; |
|||
margin-bottom: 32rpx; |
|||
background: #211F32; |
|||
display: flex; |
|||
|
|||
.transactionSide { |
|||
width: 444rpx; |
|||
margin-left: 28rpx; |
|||
} |
|||
|
|||
.positionSide { |
|||
width: 242rpx; |
|||
margin-left: 36rpx; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.orderList {} |
|||
|
|||
.popup { |
|||
.popupContent { |
|||
width: 586rpx; |
|||
font-size: 24rpx; |
|||
|
|||
.head { |
|||
margin-top: 108rpx; |
|||
color: #818197; |
|||
margin-left: 16rpx; |
|||
display: flex; |
|||
|
|||
.center { |
|||
width: 190rpx; |
|||
padding-left: 30rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.item { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
.coinList { |
|||
margin: 0rpx 32rpx 0; |
|||
overflow: hidden; |
|||
|
|||
.coin { |
|||
overflow: hidden; |
|||
position: relative; |
|||
height: 64rpx; |
|||
padding: 12rpx 0; |
|||
font-size: 24rpx; |
|||
|
|||
.name { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.price { |
|||
display: inline-block; |
|||
width: 180rpx; |
|||
height: 100%; |
|||
line-height: 64rpx; |
|||
font-size: 24rpx; |
|||
// text-align: center; |
|||
} |
|||
|
|||
.priceChange { |
|||
position: absolute; |
|||
right: 0; |
|||
display: inline-block; |
|||
width: 164rpx; |
|||
height: 64rpx; |
|||
border-radius: 20rpx; |
|||
line-height: 64rpx; |
|||
background-color: $mainColor; |
|||
font-size: 24rpx; |
|||
text-align: right; |
|||
padding-right: 16rpx; |
|||
box-sizing: border-box; |
|||
|
|||
|
|||
&::before { |
|||
display: block; |
|||
position: absolute; |
|||
content: ''; |
|||
background-image: url(../../static/maskets/ic_arrow_up.png); |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
top: 18rpx; |
|||
left: 16rpx; |
|||
} |
|||
|
|||
|
|||
&.down { |
|||
background-color: $assistRed; |
|||
|
|||
&::before { |
|||
background-image: url(../../static/maskets/ic_arrow_down.png); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,184 @@ |
|||
class WebSocketClass { |
|||
constructor(url) { |
|||
this.lockReconnect = false; // 是否开始重连
|
|||
this.wsUrl = ""; // ws 地址
|
|||
this.globalCallback = null; // 回调方法
|
|||
this.userClose = false; // 是否主动关闭
|
|||
this.createWebSocket(url); |
|||
} |
|||
|
|||
createWebSocket(url) { |
|||
// #ifdef H5
|
|||
if (typeof(WebSocket) === 'undefined') { |
|||
this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据"); |
|||
return false |
|||
} |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS
|
|||
if (typeof(uni.connectSocket) === 'undefined') { |
|||
this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据"); |
|||
return false |
|||
} |
|||
// #endif
|
|||
|
|||
this.wsUrl = url; |
|||
try { |
|||
// 创建一个this.ws对象【发送、接收、关闭socket都由这个对象操作】
|
|||
|
|||
// #ifdef H5
|
|||
this.ws = new WebSocket(this.wsUrl); |
|||
this.initEventHandle(); |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS
|
|||
let that = this |
|||
this.ws = uni.connectSocket({ |
|||
url: this.wsUrl, |
|||
success(data) { |
|||
console.log("websocket连接成功"); |
|||
|
|||
that.initEventHandle(); |
|||
}, |
|||
}); |
|||
// #endif
|
|||
} catch (e) { |
|||
this.reconnect(url); |
|||
} |
|||
} |
|||
|
|||
// 初始化
|
|||
initEventHandle() { |
|||
/** |
|||
* 监听WebSocket连接打开成功 |
|||
*/ |
|||
|
|||
// #ifdef H5
|
|||
this.ws.onopen = (event) => { |
|||
console.log("WebSocket连接打开"); |
|||
}; |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS
|
|||
this.ws.onOpen(res => { |
|||
console.log('WebSocket连接打开'); |
|||
}); |
|||
// #endif
|
|||
|
|||
|
|||
/** |
|||
* 连接关闭后的回调函数 |
|||
*/ |
|||
|
|||
// #ifdef H5
|
|||
this.ws.onclose = (event) => { |
|||
if (!this.userClose) { |
|||
this.reconnect(this.wsUrl); //重连
|
|||
} |
|||
}; |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS
|
|||
this.ws.onClose(() => { |
|||
if (!this.userClose) { |
|||
this.reconnect(this.wsUrl); //重连
|
|||
} |
|||
}); |
|||
// #endif
|
|||
|
|||
|
|||
/** |
|||
* 报错时的回调函数 |
|||
*/ |
|||
|
|||
// #ifdef H5
|
|||
this.ws.onerror = (event) => { |
|||
if (!this.userClose) { |
|||
this.reconnect(this.wsUrl); //重连
|
|||
} |
|||
}; |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS
|
|||
this.ws.onError(() => { |
|||
if (!this.userClose) { |
|||
this.reconnect(this.wsUrl); //重连
|
|||
} |
|||
}); |
|||
// #endif
|
|||
|
|||
|
|||
/** |
|||
* 收到服务器数据后的回调函数 |
|||
*/ |
|||
|
|||
// #ifdef H5
|
|||
this.ws.onmessage = (event) => { |
|||
|
|||
this.globalCallback(JSON.parse(event.data)) |
|||
}; |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS
|
|||
this.ws.onMessage(event => { |
|||
this.globalCallback(JSON.parse(event.data)) |
|||
}); |
|||
// #endif
|
|||
} |
|||
|
|||
// 关闭ws连接回调
|
|||
reconnect(url) { |
|||
if (this.lockReconnect) return; |
|||
this.ws.close(); |
|||
this.lockReconnect = true; // 关闭重连，没连接上会一直重连，设置延迟避免请求过多
|
|||
setTimeout(() => { |
|||
this.createWebSocket(url); |
|||
this.lockReconnect = false; |
|||
}, 1000); |
|||
} |
|||
|
|||
// 发送信息方法
|
|||
webSocketSendMsg(msg) { |
|||
// #ifdef H5
|
|||
this.ws && this.ws.send(JSON.stringify(msg)); |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS
|
|||
this.ws && this.ws.send({ |
|||
data: JSON.stringify(msg), |
|||
success() { |
|||
console.log("消息发送成功"); |
|||
}, |
|||
fail(err) { |
|||
console.log("关闭失败", err) |
|||
} |
|||
}); |
|||
// #endif
|
|||
|
|||
} |
|||
|
|||
// 获取ws返回的数据方法
|
|||
getWebSocketMsg(callback) { |
|||
this.globalCallback = callback |
|||
} |
|||
|
|||
// 关闭ws方法
|
|||
closeSocket() { |
|||
if (this.ws) { |
|||
this.userClose = true; |
|||
this.ws.close({ |
|||
success(res) { |
|||
console.log("关闭成功", res) |
|||
}, |
|||
fail(err) { |
|||
console.log("关闭失败", err) |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
writeToScreen(massage) { |
|||
console.log(massage); |
|||
} |
|||
} |
|||
export default WebSocketClass; |
|||
Loading…
Reference in new issue