li
5f40e4e1b5
- 移除秒合约页面及UI - 合约页Tab改为Position Held/Transaction Record - 存款/提款/转账页增加BTC/ETH - 资产页重构(用户信息+盈亏+多语言) - 注册页改版(匹配新设计稿) - 日文全面翻译+首页菜单多语言 - 代理专属注册链接支持(?code=) - 10个locale文件同步更新
341 lines
8.0 KiB
Vue
341 lines
8.0 KiB
Vue
<template>
|
|
<view class="page" :style="'background-color: '+theme.bg+';color: '+theme.text">
|
|
<view class="header" :style="{ paddingTop: statusBar + 'px', backgroundColor: theme.bg }">
|
|
<view class="header-inner">
|
|
<text class="header-title" :style="'color: '+theme.text">{{ i18n.tabBar.market }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="subtabs">
|
|
<view class="subtab-item">
|
|
<text class="subtab-text" :style="'color: '+theme.text">{{ i18n.market.crypto }}</text>
|
|
<view class="subtab-underline" style="background-color: #3c9cff;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-title" :style="'color: '+theme.text">{{ i18n.tabBar.market }}</view>
|
|
|
|
<scroll-view scroll-y class="list">
|
|
<view v-for="(item,index) in list" :key="item.symbol" class="row" :style="rowStyle(index)" @click="gokline(item)">
|
|
<view class="row-left">
|
|
<view class="logo-wrap" :style="'background-color: '+(theme.fu_bg || '#F5F6F7')">
|
|
<image v-if="item.logo" class="logo" :src="item.logo" mode="aspectFit"></image>
|
|
<text v-else class="logo-text" :style="'color: '+theme.text">{{ item.symbol.slice(0, 1) }}</text>
|
|
</view>
|
|
<view class="coin-info">
|
|
<text class="pair" :style="'color: '+theme.text">{{ item.symbol }}</text>
|
|
<view class="price-line">
|
|
<text class="price" :style="'color: '+priceColor(item)">{{ item.priceText }}</text>
|
|
<text class="change" :style="'color: '+priceColor(item)">{{ item.changeText }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="row-mid">
|
|
<text class="mid-top" :style="'color: '+theme.text">{{ item.rightTop }}</text>
|
|
<view class="mid-sub" :style="'color: '+(theme.fu_text || '#9AA0A6')">
|
|
<text class="sub-label">H:</text>
|
|
<text class="sub-val">{{ item.high }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="row-right">
|
|
<text class="right-top" :style="'color: '+theme.text">{{ item.rightTop2 }}</text>
|
|
<view class="right-sub" :style="'color: '+(theme.fu_text || '#9AA0A6')">
|
|
<text class="sub-label">L:</text>
|
|
<text class="sub-val">{{ item.low }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBar: uni.getSystemInfoSync().statusBarHeight,
|
|
theme: '',
|
|
list: [],
|
|
realTimeTimer: null,
|
|
realTimeInFlight: false
|
|
}
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t('message');
|
|
}
|
|
},
|
|
onShow() {
|
|
this.theme = this.$store.state.lightTheme
|
|
this.startRealTime()
|
|
},
|
|
onHide() {
|
|
this.stopRealTime()
|
|
},
|
|
onUnload() {
|
|
this.stopRealTime()
|
|
},
|
|
methods: {
|
|
formatFixed(val, fixed) {
|
|
const n = Number(val)
|
|
if (!Number.isFinite(n)) return val == null ? '' : String(val)
|
|
const f = Number.isFinite(Number(fixed)) ? Number(fixed) : 2
|
|
return n.toFixed(f)
|
|
},
|
|
startRealTime() {
|
|
this.stopRealTime()
|
|
this.getMarketList()
|
|
this.realTimeTimer = setInterval(() => {
|
|
this.getMarketList()
|
|
}, 3000)
|
|
},
|
|
stopRealTime() {
|
|
if (this.realTimeTimer) {
|
|
clearInterval(this.realTimeTimer)
|
|
this.realTimeTimer = null
|
|
}
|
|
this.realTimeInFlight = false
|
|
},
|
|
formatAmountUnit(num) {
|
|
const n = Number(num)
|
|
if (!Number.isFinite(n) || n === 0) return '0w'
|
|
const abs = Math.abs(n)
|
|
if (abs >= 1e8) return (n / 1e8).toFixed(2) + 'w'
|
|
if (abs >= 1e4) return (n / 1e4).toFixed(2) + 'w'
|
|
return n.toFixed(2) + 'w'
|
|
},
|
|
getMarketList() {
|
|
if (this.realTimeInFlight) return
|
|
this.realTimeInFlight = true
|
|
this.post('/market/get_coin').then(res => {
|
|
if (res.code == 1) {
|
|
const coin = (res.data && Array.isArray(res.data.coin)) ? res.data.coin : []
|
|
this.list = coin.map((c) => {
|
|
const increase = Number(c && c.increase != null ? c.increase : 0)
|
|
const dir = increase > 0 ? 1 : (increase < 0 ? -1 : 0)
|
|
const priceJd = Number(c && c.price_jd != null ? c.price_jd : 2)
|
|
const close = Number(c && c.close != null ? c.close : 0)
|
|
const high = c && c.high != null ? this.formatFixed(c.high, priceJd) : ''
|
|
const low = c && c.low != null ? this.formatFixed(c.low, priceJd) : ''
|
|
|
|
return {
|
|
coinname: (c && (c.coinname || c.name)) ? (c.coinname || c.name) : '',
|
|
bb_type: c && c.bb_type != null ? c.bb_type : '',
|
|
rawSymbol: c && c.symbol ? c.symbol : '',
|
|
symbol: (c && c.name ? (c.name + '/USDT') : (c && c.symbol ? c.symbol : '')),
|
|
priceText: Number.isFinite(close) ? close.toFixed(priceJd) : '0',
|
|
changeText: (Number.isFinite(increase) ? (increase * 100).toFixed(2) : '0.00') + '%',
|
|
dir,
|
|
rightTop: c && c.amount ? c.amount : '',
|
|
rightTop2: c && c.count_price ? this.formatAmountUnit(c.count_price) : '',
|
|
high,
|
|
low,
|
|
logo: c && (c.logo_image || c.logo || ''),
|
|
usdt: close
|
|
}
|
|
})
|
|
}
|
|
}).finally(() => {
|
|
this.realTimeInFlight = false
|
|
})
|
|
},
|
|
gokline(item) {
|
|
const symbol = (item && item.rawSymbol) ? item.rawSymbol : (item && item.symbol ? item.symbol : '')
|
|
const title = item && item.coinname ? item.coinname : ''
|
|
const bbType = item && item.bb_type != null ? item.bb_type : ''
|
|
// #ifdef H5
|
|
uni.navigateTo({
|
|
url: '/pages/tradingView/h5?title=' + title + '&bb_type=' + bbType + '&symbol=' + symbol
|
|
})
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
uni.navigateTo({
|
|
url: '/pages/tradingView/index?title=' + title + '&bb_type=' + bbType + '&symbol=' + symbol + '&close=' + (item && item.usdt != null ? item.usdt : '')
|
|
})
|
|
// #endif
|
|
},
|
|
priceColor(item) {
|
|
if (item.dir > 0) return '#16C784'
|
|
if (item.dir < 0) return '#EA3943'
|
|
return this.theme.text
|
|
},
|
|
rowStyle(index) {
|
|
const border = this.theme.fu_bg || '#F0F0F0'
|
|
if (index === this.list.length - 1) return ''
|
|
return 'border-bottom: 1rpx solid ' + border
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
min-height: 100vh;
|
|
background: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.header-inner {
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.subtabs {
|
|
padding: 14rpx 24rpx 0;
|
|
}
|
|
|
|
.subtab-item {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.subtab-text {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.subtab-underline {
|
|
width: 42rpx;
|
|
height: 6rpx;
|
|
border-radius: 999rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.section-title {
|
|
padding: 14rpx 24rpx 10rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 40rpx 15rpx;
|
|
}
|
|
|
|
.row-left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1 1 46%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.logo-wrap {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 56rpx;
|
|
}
|
|
|
|
.logo {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.coin-info {
|
|
margin-left: 16rpx;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.pair {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.price-line {
|
|
margin-top: 8rpx;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 14rpx;
|
|
}
|
|
|
|
.price {
|
|
font-size: 22rpx;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.change {
|
|
font-size: 22rpx;
|
|
line-height: 1.2;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.row-mid,
|
|
.row-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
flex: 0 0 27%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.row-mid {
|
|
padding-right: 10rpx;
|
|
}
|
|
|
|
.mid-top,
|
|
.right-top {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mid-sub,
|
|
.right-sub {
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sub-label {
|
|
font-size: 20rpx;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.sub-val {
|
|
font-size: 20rpx;
|
|
line-height: 1.2;
|
|
}
|
|
</style> |