You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
639 lines
14 KiB
639 lines
14 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation>{{ 'BTC/USDT' }}</navigation>
|
|
<!-- 价格百分比 -->
|
|
<view class="header">
|
|
<view class="top">
|
|
<!-- 实时价格 -->
|
|
<text class="price">34985.93</text>
|
|
<!-- 百分比,根据数据正负判断颜色 -->
|
|
<text class="percent" :class="{ rise: false }">-15.30%</text>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="left">
|
|
<view class="title">{{ i18n.Highest }}</view>
|
|
<view class="value">45930.24</view>
|
|
</view>
|
|
<view class="center">
|
|
<view class="title">{{ i18n.Lowest }}</view>
|
|
<view class="value">45930.24</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">{{ i18n.Amount }}</view>
|
|
<view class="value">28394893.30943094</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tab">
|
|
<view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">1M
|
|
</view>
|
|
<view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">30M
|
|
</view>
|
|
<view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">60M
|
|
</view>
|
|
<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">1D
|
|
</view>
|
|
<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">30D
|
|
</view>
|
|
</view>
|
|
<!-- K线图 -->
|
|
<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive"
|
|
style="height:500rpx;width: 100%;position: relative; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
|
|
|
|
</view>
|
|
<!-- 买卖挂牌表 -->
|
|
<view class="MarketTrades">
|
|
<view class="headTitle">Market trades</view>
|
|
<view class="table">
|
|
<view class="box">
|
|
<view class="title">
|
|
<view class="quantity">{{ i18n.Quantity }}</view>
|
|
<view class="price">{{ i18n.BuyingPrice }}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in buyList" :key="index">
|
|
<text class="price">0.87897874</text>
|
|
<text class="num buy">{{ item }}</text>
|
|
<view class="buybg" :style="`width: ${20 * index}%;`"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<view class="title">
|
|
<view class="quantity">{{ i18n.Quantity }}</view>
|
|
<view class="price">{{ i18n.SellPrice20 }}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in sellList" :key="index">
|
|
<text class="price">0.87897874</text>
|
|
<text class="num sell">{{ item }}</text>
|
|
<view class="sellbg" :style="`width: ${20 * index}%;`"></view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn">
|
|
<!-- open按钮 -->
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick">
|
|
{{ i18n.open }}
|
|
</u-button>
|
|
<!-- close按钮 -->
|
|
<u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick">
|
|
{{ i18n.close }}
|
|
</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ktest from '@/utils/ktest.js'
|
|
export default {
|
|
name: "trade",
|
|
components: {
|
|
ktest
|
|
},
|
|
data() {
|
|
return {
|
|
buyList: 7,
|
|
sellList: 9,
|
|
kdata: [],
|
|
type:1
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("markets");
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.kdata = this.splitData(ktest.JSON);
|
|
// console.log(this.kdata, 1111)
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
into() {
|
|
|
|
},
|
|
splitData(rawData) {
|
|
let categoryData = [];
|
|
let values = [];
|
|
let volumes = [];
|
|
for (let i = 0; i < rawData.length; i++) {
|
|
categoryData.push(rawData[i].splice(0, 1)[0]);
|
|
values.push(rawData[i]);
|
|
volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
|
|
}
|
|
return {
|
|
categoryData: categoryData,
|
|
values: values,
|
|
volumes: volumes
|
|
};
|
|
},
|
|
depthChange(e) {
|
|
console.log(e);
|
|
},
|
|
goto(page) {
|
|
let url = '';
|
|
switch (page) {
|
|
case 'kLine':
|
|
url = '/pages/markets/kLine'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
},
|
|
openBtnClick(){
|
|
// let categoryData = [];
|
|
// let values = [];
|
|
// let volumes = [];
|
|
// this.kdata.values.pop();
|
|
// this.kdata.volumes.pop();
|
|
this.kdata.values.push([17827.33+Math.floor(Math.random()*100),
|
|
17829.73+Math.floor(Math.random()*100),
|
|
17799.8+Math.floor(Math.random()*100),
|
|
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')
|
|
}
|
|
|
|
},
|
|
}
|
|
</script>
|
|
<script module="klineE" lang="renderjs">
|
|
let kline
|
|
export default {
|
|
mounted() {
|
|
console.log('1111', this.kdata.categoryData);
|
|
if (typeof window.echarts === 'function') {
|
|
//this.initEcharts()
|
|
} else {
|
|
// // 动态引入较大类库避免影响页面展示
|
|
// const script = document.createElement('script');
|
|
// //this.kdata=this.splitData(this.kdata);
|
|
// // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
|
// script.src = './static/echarts.js';
|
|
// script.onload = this.initEcharts.bind(this);
|
|
// document.head.appendChild(script);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
receive(newValue, oldValue, ownerVm, vm) {
|
|
|
|
console.log('newValue', newValue)
|
|
const script = document.createElement('script');
|
|
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
|
script.src = './static/echarts.js';
|
|
script.onload = this.upData.bind(this);
|
|
document.head.appendChild(script);
|
|
|
|
|
|
},
|
|
|
|
calculateMA(dayCount, data) {
|
|
var result = [];
|
|
for (var i = 0, len = data.values.length; i < len; i++) {
|
|
if (i < dayCount) {
|
|
result.push('-');
|
|
continue;
|
|
}
|
|
var sum = 0;
|
|
for (var j = 0; j < dayCount; j++) {
|
|
sum += data.values[i - j][1];
|
|
}
|
|
result.push(+(sum / dayCount).toFixed(3));
|
|
}
|
|
return result;
|
|
},
|
|
upData(myChart) {
|
|
const upColor = '#00C873';
|
|
const downColor = '#FF3750';
|
|
var chartDom = document.getElementById('kline');
|
|
if(!this.is){
|
|
this.myChart = echarts.init(chartDom);
|
|
}
|
|
|
|
this.is=true;
|
|
var option;
|
|
this.myChart.setOption(
|
|
(option = {
|
|
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
animation: false,
|
|
type: 'cross',
|
|
lineStyle: {
|
|
width: 1,
|
|
opacity: 3
|
|
}
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: this.kdata.categoryData,
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
show: false,
|
|
onZero: false
|
|
},
|
|
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
min: 'dataMin',
|
|
max: 'dataMax',
|
|
axisPointer: {
|
|
z: 100
|
|
}
|
|
},
|
|
{
|
|
type: 'category',
|
|
gridIndex: 1,
|
|
data: this.kdata.categoryData,
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
onZero: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
min: 'dataMin',
|
|
max: 'dataMax'
|
|
}
|
|
],
|
|
yAxis: [{
|
|
|
|
scale: true,
|
|
|
|
axisLine: {
|
|
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: true
|
|
},
|
|
splitArea: {
|
|
show: false, // areaStyle: {
|
|
// color: 'transparency',
|
|
// },
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: ['#211F32']
|
|
}
|
|
}
|
|
},
|
|
{
|
|
scale: true,
|
|
gridIndex: 1,
|
|
splitNumber: 2,
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
|
|
|
|
visualMap: {
|
|
show: false,
|
|
seriesIndex: 1,
|
|
dimension: 2,
|
|
pieces: [{
|
|
value: 1,
|
|
color: downColor
|
|
},
|
|
{
|
|
value: -1,
|
|
color: upColor
|
|
}
|
|
]
|
|
},
|
|
grid: [{
|
|
top: '8%',
|
|
left: '50rpx',
|
|
right: '10rpx',
|
|
height: '60%',
|
|
|
|
backgroundColor: 'transparent',
|
|
},
|
|
{
|
|
left: '0%',
|
|
right: '0%',
|
|
top: '80%',
|
|
height: '16%'
|
|
}
|
|
],
|
|
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
start: 98,
|
|
end: 100
|
|
},
|
|
{
|
|
show: false,
|
|
xAxisIndex: [0, 1],
|
|
type: 'slider',
|
|
top: '85%',
|
|
start: 98,
|
|
end: 100
|
|
}
|
|
],
|
|
series: [{
|
|
name: 'Dow-Jones index',
|
|
type: 'candlestick',
|
|
data: this.kdata.values,
|
|
itemStyle: {
|
|
color: upColor,
|
|
color0: downColor,
|
|
borderColor: undefined,
|
|
borderColor0: undefined
|
|
},
|
|
markLine: {
|
|
symbol: ['none', 'none'],
|
|
data: [
|
|
|
|
|
|
{
|
|
name: 'max line on close',
|
|
type: 'max',
|
|
valueDim: 'close'
|
|
}
|
|
]
|
|
},
|
|
tooltip: {
|
|
formatter: function(param) {
|
|
param = param[0];
|
|
return [
|
|
'Date: ' + param.name +
|
|
'<hr size=1 style="margin: 3px 0">',
|
|
'Open: ' + param.data[0] + '<br/>',
|
|
'Close: ' + param.data[1] + '<br/>',
|
|
'Lowest: ' + param.data[2] + '<br/>',
|
|
'Highest: ' + param.data[3] + '<br/>'
|
|
].join('');
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'Volume',
|
|
type: 'bar',
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
data: this.kdata.volumes,
|
|
itemStyle: {
|
|
color: upColor,
|
|
borderColor: undefined,
|
|
},
|
|
}
|
|
|
|
]
|
|
}),
|
|
true
|
|
);
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
// 如果 `question` 发生改变，这个函数就会运行
|
|
columData: function(newQuestion, oldQuestion) {
|
|
|
|
// this.updateEcharts(this.option)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
|
|
.header {
|
|
background: #000000;
|
|
margin-top: 200rpx;
|
|
padding: 0 32rpx;
|
|
|
|
|
|
.top {
|
|
height: 80rpx;
|
|
border-bottom: 2rpx solid #A1A0A8;
|
|
|
|
.price {
|
|
line-height: 80rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.percent {
|
|
vertical-align: text-top;
|
|
margin-left: 20rpx;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
background-color: rgba($color: #F26666, $alpha: 0.2);
|
|
color: #F26666;
|
|
|
|
&.rise {
|
|
color: #00E8A2;
|
|
background-color: rgba($color: #00E8A2, $alpha: 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
|
|
.title {
|
|
margin-top: 24rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.value {
|
|
margin: 24rpx 0;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.center {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
}
|
|
.tab {
|
|
display: flex;
|
|
background:#000000;
|
|
.item {
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
|
|
&.select {
|
|
background: rgba(0, 232, 162,0.3);
|
|
border-radius: 19px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.kline {
|
|
|
|
background: #000000;
|
|
}
|
|
|
|
.MarketTrades {
|
|
.headTitle {
|
|
padding-left: 32rpx;
|
|
font-size: 34rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.table {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
|
|
.box {
|
|
padding-left: 32rpx;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
height: 450rpx;
|
|
|
|
.title {
|
|
display: flex;
|
|
margin-bottom: 16rpx;
|
|
color: #A1A0A8;
|
|
|
|
.quantity {
|
|
flex: 1;
|
|
}
|
|
|
|
.price {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
display: flex;
|
|
|
|
.price {
|
|
display: block;
|
|
width: 50%;
|
|
text-align: left;
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.num {
|
|
display: block;
|
|
width: 50%;
|
|
text-align: right;
|
|
padding-right: 32rpx;
|
|
z-index: 1;
|
|
|
|
&.buy {
|
|
color: #00E8A2;
|
|
}
|
|
|
|
&.sell {
|
|
color: #F4506A;
|
|
}
|
|
}
|
|
|
|
.buybg {
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
background: rgba($color: #00E8A2, $alpha: 0.1)
|
|
}
|
|
|
|
.sellbg {
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
background: rgba($color: #F4506A, $alpha: 0.1)
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
margin: 96rpx 32rpx;
|
|
|
|
.button {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
height: 96rpx;
|
|
border-radius: 16rpx;
|
|
font-weight: 700;
|
|
font-size: 28rpx;
|
|
color: #15141F !important;
|
|
|
|
&:nth-child(2) {
|
|
margin-left: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|