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.
 
 
 
sliyun-web-h5/src/view/order/OrderDetail.vue

303 lines
9.3 KiB

<template>
<div class="content">
<van-nav-bar
title="算力详情 "
left-text="返回"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
<div class="order-detail-content">
<div class="order-detail-top">
<span>{{detail.totalProfit==0?"未挖到区块": '+'+ detail.totalProfit}}
</span>
</div>
<div>
<div class="order-detail-top-item">
<span>算力:</span> {{detail.enName}} | {{detail.coinPackage.number}}{{detail.coinPackage.packageUnitName}}/S
</div>
<div class="order-detail-top-item">
<span>租用状态:</span>{{getLeaseStatus(detail.leaseStatus)}}
</div>
<div class="order-detail-top-item">
<span>租用时长:</span> {{detail.duration}} min(分钟)
</div>
<div class="order-detail-top-item">
<span>剩余时长:</span> {{getLeaseTime(detail.leaseEndTime)}} min(分钟)
</div>
<div class="order-detail-divider"></div>
</div>
<!-- 算力监控 /-->
<div>
<div class="order-detail-title">
<span>算力监控</span>
</div>
<ve-line :data-empty="dataEmpty" :settings="chartSettings" :data="chartData" :resize-delay="1000"
:extend="extend" width="100%"
height="280px"></ve-line>
</div>
<!-- 区块记录 /-->
<div>
<div class="order-detail-title">
<span>区块记录</span>
</div>
<div class="order-detail-record">
<div class="order-detail-record-left">
<span>时间</span>
</div>
<div class="order-detail-record-right">
<span>收益单位</span>
</div>
</div>
<div class="order-detail-divider" style="margin-top: 10px"></div>
<van-list
style="margin-top: 10px"
v-model="loading"
:finished="finished"
@load="onLoad"
>
<div class="order-detail-record-item" v-for="item in detail.blockList" :key="item.id">
<span>{{timestampToTime(item.created_at)}}</span>
<span class="order-detail-record-item-right">+{{item.rewards}} {{detail.enName}}</span>
</div>
</van-list>
</div>
</div>
</div>
</template>
<script>
import {getOrderDetail} from '@/api/order'
import 'v-charts/lib/style.css'
export default {
name: "OrderDetail",
data() {
this.extend = {
darkMode: "auto",
color: colorPalette,
title: {
show: false,
padding: 0,
height: 0,
},
legend: {
show: false,
padding: 0,
height: 0,
},
series: {
type: "line",
smooth: false,
},
grid: {
top: 25,
bottom: 15,
show: false,
},
xAxis: {},
};
let colorPalette = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff', '#91ca8c', '#f49f42'];
return {
profit: "+12.3482 BTC",
detail: {
coinPackage: {},
profit: [],
},
list: [],
loading: false,
finished: false,
dataEmpty: true,
chartSettings: {
area: true,//是否显示为面积图
xAxisType: "category",
yAxisType: "value",
yAxisName: "",
boundaryGap: false,
lineStyle: {// 使用深浅的间隔色
color: ['#B9B8CE'],
},
itemStyle: {
normal: {
color: '#100C2A',
color0: '#0CF49B',
borderColor: '#100C2A',
borderColor0: '#0CF49B'
}
}
},
chartData: {
columns: ["time", "hash"],
rows: [
{time: "12:00", hash: 1393},
{time: "12:30", hash: 3530},
{time: "12:40", hash: 2923},
{time: "12:50", hash: 3792},
{time: "13:00", hash: 4593}
]
},
}
},
created() {
// let params = this.$route.query.item
// window.console.log('submit', params);
// this.item = JSON.parse(params);
},
mounted() {
},
methods: {
onClickLeft() {
this.$router.go(-1)
},
onClickRight() {
},
onLogin() {
this.$router.go(-1)
},
getLeaseStatus(status) {
if (status == "0") {
return "待进行";
} else if (status == "1") {
return "进行中";
} else if (status == "2") {
return "已完成";
}
return "暂无"
},
onLoad() {
const params = {
"orderSn": this.$route.query.orderSn
}
getOrderDetail(params).then(res => {
this.detail = res.data;
this.chartData.rows = res.data.hash
if (this.detail.hash.length > 0) {
this.dataEmpty = false;
}
})
this.loading = false;
this.finished = true;
},
timestampToTime(timestamp) {
var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘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();
return Y + M + D + h + m + s;
},
getLeaseTime(time) {
let date = new Date(time);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
let timestamp = date.getTime();
if (this.detail.leaseStatus == "0") {
return this.detail.duration;
} else if (this.detail.leaseStatus == "1") {
return timestamp - new Date().getTime()/1000;
}
return "0";
}
}
,
setup() {
}
}
</script>
<style scoped>
.order-detail-content {
margin-right: 15px;
margin-left: 15px;
background: white;
}
.order-detail-top {
margin-top: 35px;
margin-left: 20px;
margin-bottom: 20px;
font-weight: bold;
font-size: 16px;
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
}
.order-detail-top-item {
height: 30px;
margin-left: 20px;
font-weight: normal;
font-size: 14px;
}
.order-detail-title {
height: 35px;
line-height: 35px;
margin-left: 20px;
font-weight: bold;
font-size: 18px;
}
.order-detail-divider {
margin: 10px 20px;
background-color: #f2f2f2;
height: 1px;
clear: both;
}
.order-detail-record {
margin-left: 20px;
margin-right: 20px;
}
.order-detail-record-left {
float: left;
}
.order-detail-record-right {
float: right;
}
.order-detail-record-item {
margin-left: 20px;
margin-right: 20px;
min-height: 30px;
line-height: 30px;
/*实现垂直居中*/
align-items: center;
}
.order-detail-record-item-right {
right: 0;
float: right;
}
.order-detail-item-title {
margin-top: 8px;
height: 30px;
text-align: center;
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
clear: both;
}
.order-detail-item-title span {
margin-left: 5px;
margin-left: 20px;
font-weight: bold;
}
</style>