563 lines
14 KiB
Vue
563 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 账户余额 -->
|
||
<view class="total">
|
||
<view class="item nowrap"><image src="@/static/icons/gemstone-icon.png"/>{{isAuth ? '能量球' + account.coin : '查看能量球'}}</view>
|
||
<view class="item nowrap"><image src="@/static/icons/crystal-icon.png"/>{{isAuth ? '能量碎片' + account.crystal : '查看能量碎片'}}</view>
|
||
</view>
|
||
<!-- 矿机 -->
|
||
<view class="ore">
|
||
<image class="ore-back" src="@/static/background/chain-back-00.png" mode="widthFix"></image>
|
||
<view class="ball">
|
||
<view class="shadow"></view>
|
||
</view>
|
||
<block v-if="isAuth">
|
||
<view class="ore-lists">
|
||
<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" :style="{left: item.left + '%', top: item.top + '%'}" @click="ledCrystal(index)">
|
||
<block v-if="item.amount !== null">
|
||
<view class="oct-icon">
|
||
<image src="@/static/icons/crystal-icon.png" mode="widthFix" class="icon" />
|
||
</view>
|
||
<view class="text">{{ item.amount || '-'}}</view>
|
||
</block>
|
||
</view>
|
||
<view class="oct-float ore-item-nav" @click="issueGoosd">
|
||
<view class="oct-icon">
|
||
<image src="@/static/icons/gemstone-ore-icon.png" mode="widthFix" class="icon" />
|
||
</view>
|
||
<view class="text">发权证<uni-icons type="arrowright" color="#FFFFFF" size="12"></uni-icons></view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="ore-lists">
|
||
<view class="oct-float oct-login" @click="$Router.push({name: 'Login'})">
|
||
<view class="oct-icon">
|
||
<image src="@/static/icons/crystal-icon.png" mode="widthFix" class="icon" />
|
||
</view>
|
||
<view class="text">登录后领取</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<!-- 任务推荐 -->
|
||
<scroll-view class="task-block" scroll-x="true">
|
||
<view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
|
||
<view class="text nowrap">{{item.sub_title}}</view>
|
||
<view class="icon">
|
||
<image :src="item.cover" />
|
||
</view>
|
||
<view class="title nowrap">{{item.title}}</view>
|
||
<view class="submit-title nowrap">能量碎片{{item.tips}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 平台概况 -->
|
||
<view class="situation">
|
||
<view class="header">
|
||
<view class="header-item">
|
||
<view class="title">平台能量球余量<uni-icons class="help-icon" @click="showHelp('occBalance')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
|
||
<view class="number nowrap">{{chains.balance}}</view>
|
||
</view>
|
||
<view class="header-item">
|
||
<view class="title">上期能量球价值<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
|
||
<view class="number nowrap">{{chains.up}}</view>
|
||
</view>
|
||
<view class="header-item">
|
||
<view class="title">昨日瓜分能量碎片<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
|
||
<view class="number nowrap">{{chains.score}}</view>
|
||
</view>
|
||
<view class="header-item">
|
||
<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('blockHeight')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
|
||
<view class="number nowrap">{{chains.height}}</view>
|
||
</view>
|
||
<view class="header-item">
|
||
<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('nodeNumber')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
|
||
<view class="number nowrap">{{chains.number}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 平台累计盈利，能量球 -->
|
||
<view class="chart">
|
||
<view class="title">累计盈利和能量球价值走势图</view>
|
||
<view class="chart-f2">
|
||
<l-f2 ref="chartChange"></l-f2>
|
||
</view>
|
||
</view>
|
||
<!-- 提示信息 -->
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { chain, crystals, thawlog } from '@/apis/interfaces/chain'
|
||
import { certified, security } from '@/apis/interfaces/index'
|
||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
||
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||
export default {
|
||
components:{
|
||
lF2
|
||
},
|
||
data() {
|
||
return {
|
||
isAuth : false,
|
||
chains : { // 区块链统计
|
||
balance : 0,
|
||
height : 0,
|
||
number : 0,
|
||
score : 0,
|
||
up : 0
|
||
},
|
||
account : { // 账户
|
||
coin : 0,
|
||
crystal : 0
|
||
},
|
||
crystalArr : [], // 待领取
|
||
allIds : [], // 可领取ids
|
||
categoryArr : [], // 推荐列表
|
||
};
|
||
},
|
||
onShow() {
|
||
if(this.$store.state.token != '') this.isAuth = true
|
||
this.getIndex()
|
||
},
|
||
methods:{
|
||
// 求助信息
|
||
showHelp(type) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: this.helpToast[type],
|
||
showCancel: false
|
||
})
|
||
},
|
||
// 发权证
|
||
issueGoosd(){
|
||
console.log('发权证')
|
||
},
|
||
// 领取能量碎片
|
||
ledCrystal(index) {
|
||
// 播放音频
|
||
const innerAudioContext = uni.createInnerAudioContext();
|
||
innerAudioContext.autoplay = true;
|
||
innerAudioContext.src = require('@/static/mp3/crystal.mp3');
|
||
// 请求接口
|
||
thawlog({
|
||
thaw_id: this.crystalArr[index].log_id,
|
||
all_ids: this.allIds
|
||
}).then(res => {
|
||
uni.showToast({
|
||
image: require('@/static/icons/crystal-icon.png'),
|
||
title: '+' + this.crystalArr[index].amount,
|
||
duration: 2000
|
||
})
|
||
this.$set(this.account, 'crystal', res.crystal)
|
||
this.ids = res.all_ids
|
||
if (JSON.stringify(res.last) === '[]') {
|
||
this.$set(this.crystalArr, index, {
|
||
amount: null
|
||
})
|
||
return
|
||
}
|
||
this.$set(this.crystalArr, index, res.last)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err
|
||
})
|
||
})
|
||
},
|
||
// occ信息
|
||
getIndex(){
|
||
Promise.all([crystals(), chain()]).then(res=>{
|
||
let crystalsData = res[0],
|
||
occData = res[1]
|
||
|
||
console.log(occData)
|
||
if(!crystalsData.needLogin){
|
||
this.account = {
|
||
coin : crystalsData.coin,
|
||
crystal : crystalsData.crystal
|
||
}
|
||
this.crystalArr = crystalsData.crystal_array
|
||
this.allIds = crystalsData.all_ids
|
||
}
|
||
this.chains = occData.data
|
||
this.categoryArr = occData.tasks
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
|
||
// occ().then(res => {
|
||
// console.log(res)
|
||
// // this.occs = res.occs
|
||
// // this.yesterdayCrystal = res.yesterday_crystal
|
||
// // this.occ = res.occ
|
||
// // this.occBalance = res.occ_balance
|
||
// // this.blockHeight = res.block_height
|
||
// // this.gain = res.gain
|
||
// // this.nodeNumber = res.node_number
|
||
// // this.notice = res.notice
|
||
// // if(res.help_toast) this.helpToast = res.help_toast
|
||
// // this.showCartc(res.movements)
|
||
// })
|
||
},
|
||
// 绘制图表
|
||
showCartc(data){
|
||
// 图表信息
|
||
this.$refs.chartChange.init(config => {
|
||
config.appendPadding = [10, 15, 10, 15]
|
||
|
||
const chart = new F2.Chart(config);
|
||
chart.source(data, {
|
||
date: {
|
||
range: [0, 1],
|
||
type: 'timeCat',
|
||
mask: 'MM-DD'
|
||
},
|
||
value: {
|
||
tickCount: 5
|
||
}
|
||
});
|
||
chart.axis('time', {
|
||
line: null,
|
||
label: function label(text, index, total) {
|
||
const textCfg = {};
|
||
if (index === 0) {
|
||
textCfg.textAlign = 'left';
|
||
} else if (index === total - 1) {
|
||
textCfg.textAlign = 'right';
|
||
}
|
||
return textCfg;
|
||
}
|
||
});
|
||
chart.axis('tem', {
|
||
grid: function grid(text) {
|
||
if (text === '0%') {
|
||
return {
|
||
lineDash: null,
|
||
lineWidth: 1
|
||
};
|
||
}
|
||
}
|
||
});
|
||
chart.tooltip({
|
||
showCrosshairs: true
|
||
});
|
||
chart.legend({
|
||
position: 'bottom',
|
||
offsetY: 0,
|
||
offsetX: 30
|
||
});
|
||
chart.area()
|
||
.position('date*value')
|
||
.color('name', [ '#009b69', '#9f8052' ])
|
||
.shape('smooth')
|
||
chart.line()
|
||
.position('date*value')
|
||
.color('name', [ '#009b69', '#9f8052' ])
|
||
.shape('smooth', name=> {
|
||
if (name === '预期收益率') {
|
||
return 'line';
|
||
}
|
||
if (name === '实际收益率') {
|
||
return 'dash';
|
||
}
|
||
});
|
||
chart.render();
|
||
return chart;
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 星球旋转 */
|
||
.ball{
|
||
position: absolute;
|
||
height: 480rpx;
|
||
width: 480rpx;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-top: -240rpx;
|
||
margin-left: -240rpx;
|
||
border-radius: 50%;
|
||
-webkit-transform-style: preserve-3d;
|
||
background: url(/static/background/chain-back-02.png) repeat-x;
|
||
background-size: auto 100%;
|
||
-webkit-animation: move-map 30s infinite linear;
|
||
-moz-animation: move-map 30s infinite linear;
|
||
-o-animation: move-map 30s infinite linear;
|
||
-ms-animation: move-map 30s infinite linear;
|
||
animation: move-map 30s infinite linear;
|
||
box-shadow: 0 0 50rpx 50rpx rgba(31,25,34, .2);
|
||
}
|
||
.shadow{
|
||
position: absolute;
|
||
top: 1%;
|
||
left: 5%;
|
||
width: 90%;
|
||
height: 90%;
|
||
border-radius: 50%;
|
||
filter: blur(5px);
|
||
z-index: 3;
|
||
background: radial-gradient(circle at 50% 0, rgba(255,255,255, .6) , rgba(255, 255, 255, .0) 58%);
|
||
}
|
||
.ball:before,
|
||
.ball::after{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
content: "";
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
filter: blur(5px);
|
||
z-index: 2;
|
||
}
|
||
.ball:before {
|
||
background: radial-gradient(circle at 100% 50%, #5881d3 , rgba(255, 255, 255, .0) 45%);
|
||
}
|
||
.ball::after {
|
||
background: radial-gradient(circle at 0 50%, #ca66e0 , rgba(255, 255, 255, .0) 45%);
|
||
}
|
||
@-webkit-keyframes move-map {
|
||
0% {background-position: -1250rpx 0; }
|
||
100% {background-position: 0 0;}
|
||
}
|
||
@-ms-keyframes move-map {
|
||
0% {background-position: -1250rpx 0; }
|
||
100% {background-position: 0 0;}
|
||
}
|
||
|
||
@keyframes move-map {
|
||
0% {background-position: -1250rpx 0; }
|
||
100% {background-position: 0 0;}
|
||
}
|
||
|
||
/* 水晶漂浮动画 */
|
||
.oct-float {
|
||
animation: 4s octfloat infinite;
|
||
}
|
||
@keyframes octfloat {
|
||
0% {
|
||
margin-top: 0;
|
||
}
|
||
|
||
50% {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
100% {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
min-height: calc(100vh - 60px);
|
||
background: #1f1922;
|
||
overflow: hidden;
|
||
}
|
||
// 平台概况
|
||
.situation{
|
||
margin: 0 $margin;
|
||
background-image: linear-gradient(to bottom, $block-color, #1f1922);
|
||
border-radius: $radius;
|
||
padding: $padding $padding/2 $padding*2;
|
||
// 平台统计
|
||
.header{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-bottom: $padding;
|
||
.number{
|
||
color: white;
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
line-height: 70rpx;
|
||
}
|
||
.title{
|
||
color: rgba($color: white, $alpha: .4);
|
||
font-size: $title-size-sm;
|
||
line-height: 40rpx;
|
||
}
|
||
.header-item{
|
||
width: 50%;
|
||
padding: $padding / 2;
|
||
padding-bottom: $padding;
|
||
box-sizing: border-box;
|
||
&:first-child{
|
||
width: 100%;
|
||
.number{
|
||
font-size: $title-size;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 图表
|
||
.chart{
|
||
background: rgba($color: $block-color, $alpha: .8);
|
||
padding: $padding/2;
|
||
border-radius: $radius/2;
|
||
.title{
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
color: rgba($color: #FFFFFF, $alpha: .4);
|
||
font-size: $title-size-sm;
|
||
}
|
||
.chart-f2{
|
||
height: 200px;
|
||
}
|
||
}
|
||
}
|
||
// 数据统计
|
||
.total {
|
||
position: relative;
|
||
margin: $margin;
|
||
background: #2b2449;
|
||
padding: 0;
|
||
display: flex;
|
||
border-radius: $radius;
|
||
.item {
|
||
width: 50%;
|
||
padding: 0 $padding;
|
||
text-align: center;
|
||
color: white;
|
||
font-size: $title-size-sm;
|
||
line-height: 76rpx;
|
||
image{
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
vertical-align: top;
|
||
margin-top: calc((76rpx - 38rpx) / 2);
|
||
margin-right: $margin / 2;
|
||
}
|
||
}
|
||
|
||
&::before {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
content: "";
|
||
width: 2rpx;
|
||
left: 50%;
|
||
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7), transparent);
|
||
}
|
||
}
|
||
// 求助icon
|
||
.help-icon{
|
||
margin-left: $margin/3;
|
||
opacity: .7;
|
||
}
|
||
// 矿石
|
||
.ore {
|
||
position: relative;
|
||
padding-top: 120%;
|
||
&>image {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.ore-lists {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
z-index: 1;
|
||
.oct-float-item{
|
||
position: absolute;
|
||
text-align: center;
|
||
.text {
|
||
color: white;
|
||
font-size: $title-size-sm - 4;
|
||
line-height: 40rpx;
|
||
text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
|
||
}
|
||
.oct-icon{
|
||
display: inline-block;
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
line-height: 58rpx;
|
||
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .0) 40%, #ca66e0);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 5rpx 5rpx rgba($color: #ca66e0, $alpha: .5);
|
||
.icon {
|
||
margin-top: 10rpx;
|
||
height: 38rpx;
|
||
width: 38rpx;
|
||
}
|
||
}
|
||
}
|
||
.ore-item-nav{
|
||
@extend .oct-float-item;
|
||
right: $margin;
|
||
top: 12%;
|
||
}
|
||
.ore-item {
|
||
@extend .oct-float-item;
|
||
}
|
||
.oct-login{
|
||
@extend .oct-float-item;
|
||
left: 42%;
|
||
top: 45%;
|
||
}
|
||
}
|
||
}
|
||
// 任务
|
||
.task-block {
|
||
white-space: nowrap;
|
||
margin-bottom: $margin;
|
||
.item {
|
||
background: $block-color;
|
||
display: inline-block;
|
||
margin-left: $margin;
|
||
width: 260rpx;
|
||
border-radius: $radius;
|
||
text-align: center;
|
||
padding: ($padding - 10) $padding/2;
|
||
&:first-child {
|
||
margin-left: $margin;
|
||
}
|
||
&:last-child {
|
||
margin-right: $margin;
|
||
}
|
||
.icon {
|
||
display: inline-block;
|
||
margin: ($margin/2) 0;
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
line-height: 98rpx;
|
||
background: #1f183d;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
image {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
.text {
|
||
font-size: $title-size-sm;
|
||
color: rgba($color: white, $alpha: .4);
|
||
line-height: 40rpx;
|
||
}
|
||
.title {
|
||
font-size: $title-size-lg;
|
||
color: white;
|
||
font-weight: bold;
|
||
line-height: 50rpx;
|
||
}
|
||
.submit-title{
|
||
font-size: $title-size-sm - 4;
|
||
color: rgba($color: white, $alpha: .4);
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|