TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

发现能量页面调整

Browse Source
This commit is contained in:
唐明明
2021-09-27 12:13:09 +08:00
parent a1d6ec7ee7
commit e82c4e8027
4 changed files with 74 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
pages/index/index.vue
View File

@@ -2,8 +2,8 @@
<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 class="item nowrap" @click="navAccount('walletProperty')"><image src="@/static/icons/gemstone-icon.png"/>{{isAuth ? '能量球' + account.coin : '查看能量球'}}</view>
<view class="item nowrap" @click="navAccount('Fragment')"><image src="@/static/icons/crystal-icon.png"/>{{isAuth ? '能量碎片' + account.crystal : '查看能量碎片'}}</view>
</view>
<!-- 矿机 -->
<view class="ore">
@@ -55,23 +55,23 @@
<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="title">平台能量球余量<uni-icons class="help-icon" @click="showHelp('balance')" 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="title">上期能量球价值<uni-icons class="help-icon" @click="showHelp('up')" 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="title">昨日瓜分能量碎片<uni-icons class="help-icon" @click="showHelp('score')" 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="title">区块链高度<uni-icons class="help-icon" @click="showHelp('height')" 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="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('number')" type="help-filled" size="15" color="rgba(255,255,255,.3)" /></view>
<view class="number nowrap">{{chains.number}}</view>
</view>
</view>
@@ -114,6 +114,12 @@
crystalArr : [], // 待领取
allIds : [], // 可领取ids
categoryArr : [], // 推荐列表
help : {}, // 帮助信息
userAuth : { // 用户认证状态
certification : false,
company : false,
vip : false
}
};
},
onShow() {
@@ -122,16 +128,56 @@
},
methods:{
// 求助信息
showHelp(type) {
showHelp(key) {
uni.showModal({
title: '提示',
content: this.helpToast[type],
showCancel: false
content: this.help[key],
showCancel: false,
confirmColor: $
})
},
// 查看钱包账户
navAccount(pathName){
if(!this.isAuth){
this.$Router.push({name: 'Login'})
return
}
this.$Router.push({name: pathName})
},
// 发权证
issueGoosd(){
console.log('发权证')
let typeAuth = '',
pathName = ''
if(this.userAuth.certification && this.userAuth.company && this.userAuth.vip){
this.$Router.push({name: 'goodsManagement'})
return
}
if(!this.userAuth.certification) {
typeAuth = '暂未完成个人认证，无法发布商品权证'
pathName = 'Personal'
}
if(!this.userAuth.company) {
typeAuth = '暂未开通平台会员节点，无法发布商品权证'
pathName = 'vipIndex'
}
if(!this.userAuth.vip) {
typeAuth = '企业未认证或企业认证审核中，无法发布商品权证'
pathName = 'User'
}
uni.showModal({
title: '提示',
content: typeAuth,
cancelColor: '#555',
cancelText: '稍后',
confirmText: pathName === 'vipIndex' ? '去开通': '去认证',
confirmColor: '#8b64fd',
success: res => {
if(res.confirm) {
this.$Router.push({name: pathName})
}
}
})
},
// 领取能量碎片
ledCrystal(index) {
@@ -170,45 +216,36 @@
Promise.all([crystals(), chain()]).then(res=>{
let crystalsData = res[0],
occData = res[1]
console.log(occData)
if(!crystalsData.needLogin){
this.account = {
this.account = {
coin : crystalsData.coin,
crystal : crystalsData.crystal
}
this.userAuth = {
certification : crystalsData.is_certification,
company : crystalsData.is_company,
vip : crystalsData.is_vip
}
this.crystalArr = crystalsData.crystal_array
this.allIds = crystalsData.all_ids
}
this.chains = occData.data
this.categoryArr = occData.tasks
this.help = occData.help
this.showCartc(occData.movement)
console.log(this.userAuth)
}).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]
config.appendPadding = [10, 30, 10, 15]
const chart = new F2.Chart(config);
chart.source(data, {
date: {
@@ -220,31 +257,6 @@
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,
@@ -252,11 +264,11 @@
});
chart.area()
.position('date*value')
.color('name', [ '#009b69', '#9f8052' ])
.color('name', [ '#5881d3', '#ca66e0' ])
.shape('smooth')
chart.line()
.position('date*value')
.color('name', [ '#009b69', '#9f8052' ])
.color('name', [ '#5881d3', '#ca66e0' ])
.shape('smooth', name=> {
if (name === '预期收益率') {
return 'line';
@@ -286,7 +298,8 @@
border-radius: 50%;
-webkit-transform-style: preserve-3d;
background: url(/static/background/chain-back-02.png) repeat-x;
background-size: auto 100%;
/* background-size: auto 100%; */
background-size: 1616rpx;
-webkit-animation: move-map 30s infinite linear;
-moz-animation: move-map 30s infinite linear;
-o-animation: move-map 30s infinite linear;
@@ -324,16 +337,16 @@
background: radial-gradient(circle at 0 50%, #ca66e0 , rgba(255, 255, 255, .0) 45%);
}
@-webkit-keyframes move-map {
0% {background-position: -1250rpx 0; }
0% {background-position: -1616rpx 0; }
100% {background-position: 0 0;}
}
@-ms-keyframes move-map {
0% {background-position: -1250rpx 0; }
0% {background-position: -1616rpx 0; }
100% {background-position: 0 0;}
}
@keyframes move-map {
0% {background-position: -1250rpx 0; }
0% {background-position: -1616rpx 0; }
100% {background-position: 0 0;}
}