This commit is contained in:
2021-09-27 10:56:36 +08:00
50 changed files with 517 additions and 716 deletions

View File

@@ -8,37 +8,31 @@
import { request } from '../index' import { request } from '../index'
// 最新区块列表 // 最新统计
const chain = () => { const chain = () => {
return request({ return request({
url: 'chain' url: 'chain/tasks'
}) })
} }
// 发行量概况 // 水晶原石
const situation = () => { const crystals = () => {
return request({ return request({
url: 'nodes' url: 'user/account/crystals'
}) })
} }
// 区块详情 // 领取水晶
const hash = (hash) => { const thawlog = (data) => {
return request({ return request({
url: 'chain/block/' + hash url: 'user/account/thawlog',
}) method: 'POST',
} data
// 区块链首页
const occ = () => {
return request({
url: 'occ/index'
}) })
} }
export { export {
chain, chain,
situation, crystals,
hash, thawlog
occ
} }

View File

@@ -8,21 +8,6 @@
import { request } from '../index' import { request } from '../index'
// 水晶原石
const crystals = () => {
return request({
url: 'user/account/crystals'
})
}
// 领取水晶
const thawlog = (data) => {
return request({
url: 'user/account/thawlog',
method: 'POST',
data
})
}
// 水晶分类 // 水晶分类
const category = () => { const category = () => {
@@ -34,7 +19,7 @@ const category = () => {
// 水晶任务 // 水晶任务
const task = () => { const task = () => {
return request({ return request({
url: 'crystal/task' url: 'tasks'
}) })
} }
@@ -54,8 +39,6 @@ const operateSign = () => {
} }
export{ export{
crystals,
thawlog,
category, category,
task, task,
sign, sign,

View File

@@ -1,141 +1,106 @@
<template> <template>
<view class="crystal"> <view class="crystal">
<!-- 公共提示弹出 start --> <!-- 签到成功弹出 -->
<order-tips title="温馨提示" content="恭喜您,签到成功" :tipsState="sign.signShow" @tipseject="signject" /> <view class="signBack" v-if="sign.signShow"></view>
<!-- 公共提示弹出 end --> <view class="signPop" v-if="sign.signShow">
<image class="signPop-tips" src="../../static/user/sign_tips.png" mode="widthFix"></image>
<!-- 公共提示弹出 start --> <view class="signPop-cont">
<order-tips :title="tips.tipsTitle" :content="tips.tipsContent" :tipsState="tips.tipsState" @tipseject="tipseject" /> <view class="signPop-cont-name">
<!-- 公共提示弹出 end --> 签到成功
<!-- 账户余额 -->
<view class="total">
<view class="item ellipsis"><image src="@/static/icons/gemstone-icon.png"/>原石 {{ account.coin }}</view>
<view class="item ellipsis"><image src="@/static/icons/crystal-icon.png"/>水晶 {{ account.crystal }}</view>
</view>
<!-- 矿石 -->
<view class="ore">
<image src="/static/img/crystal-ore.png" mode="widthFix" />
<view class="ore-lists">
<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
<block v-if="item.amount !== null">
<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" />
<view class="text">水晶{{ item.amount || '-'}}</view>
</block>
</view>
<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav">
<image src="/static/imgs/gemstone-ore-icon.png" mode="widthFix" class="icon" />
<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view>
</navigator>
</view>
</view>
<!-- 任务分类 -->
<scroll-view class="task-block" scroll-x="true">
<!-- url="../index/index" open-type="switchTab" -->
<view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
<view class="text">{{ item.remark }}</view>
<view class="icon">
<image :src="item.cover" />
</view>
<view class="title">{{ item.title }}</view>
</view>
</scroll-view>
<!-- 内容 -->
<view class="content">
<!-- 签到 -->
<view class="signCont">
<view class="content-title">
<view class="content-title-text">
每日签到
<view class="tips">
累计天数越多水晶奖励越多
</view>
</view>
<view class="content-titl-btn" v-if="sign.signCan" @click="signClick">
立即签到
</view>
</view> </view>
<view class="sign"> <view class="signPop-cont-text">
<view class="sign-list"> 能量碎片<view class="signPop-cont-number">+{{sign.signSuccess}}</view>
<view class="item" v-for="(item, index) in sign.signArr" :key="index">
<view class="item-icon item-done" v-if="item.sign">
<image src="@/static/imgs/crystal-sign.png" mode="aspectFill"></image>
</view>
<view class="item-icon show" :class="{ active: index == 3 || index == 7 }" v-else><text>+{{ item.crystal }}</text></view>
<view class="item-title">{{ item.text }}</view>
</view>
</view>
<view class="sign-text">再签到{{ sign.nextTask.day }}天额外赠送{{ sign.nextTask.diff }}个水晶奖励</view>
</view>
</view>
<!-- 水晶任务 -->
<view class="content-title">
<view class="content-title-text">
水晶任务
</view> </view>
</view> </view>
<view class="task"> </view>
<view class="task-item" v-for="(item, index) in task" :key="index" @click="JumpUrl(item.url, item.title)">
<image class="task-icon" :src="item.ico" mode="aspectFill"></image> <!-- 签到 -->
<view class="task-title">{{item.title || '-'}}</view> <view class="signCont">
<view class="task-subtitle">{{item.remark || '-'}}</view> <view class="content-title">
<view class="task-label">{{item.tips || '-'}}<image class="task-label-icon" src="@/static/imgs/user-crystalMark-grey.png" @click.stop="crystalShow"></image></view> 每日签到能量碎片多多<image @click="showHelp" class="content-title-img" src="../../static/user/sign_privilege.png" mode="aspectFill"></image>
</view> </view>
</view> <view class="sign">
</view> <view class="sign-list" :class="{ active: item.sign }" v-for="(item, index) in sign.signArr" :key="index">
<block v-if="index == 7">
<image class="sign-list-img" :src="item.sign ? '../../static/user/sign_icon_last_active.png' : '../../static/user/sign_icon_last.png'" mode="aspectFill"></image>
</block>
<block v-else>
<image class="sign-list-img" :src="item.sign ? '../../static/user/sign_icon_active.png' : '../../static/user/sign_icon.png'" mode="aspectFill"></image>
</block>
<view class="sign-list-day">
{{ item.text }}
</view>
</view>
</view>
<view class="sign-record">再签到{{ sign.nextTask.day }}天额外赠送{{ sign.nextTask.diff }}个能量碎片</view>
</view>
<view class="signBtn">
<view class="signBtn-go" v-if="sign.signCan" @click="signClick">
签到领取能量碎片
</view>
<view class="signBtn-go" v-else @click="$Router.push({name:'Fragment'})">
能量碎片记录<image class="signBtn-go-icon" src="/static/user/sign_arrow.png" mode="aspectFill"></image>
</view>
</view>
<!-- 水晶任务 -->
<view class="task">
<view class="task-liest">
能量碎片任务
</view>
<view class="task-item" v-for="(item, index) in task" :key="index" @click="JumpUrl(item.url, item.title)">
<image class="task-icon" :src="item.ico" mode="aspectFill"></image>
<view class="task-title">{{item.title}}</view>
<view class="task-subtitle">{{item.remark}}</view>
<view class="task-label">{{item.tips}}<image @click.stop="showHelp" class="task-label-icon" src="@/static/imgs/user-crystalMark-grey.png"></image></view>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
import { crystals, thawlog, task, category, sign, operateSign } from '@/apis/interfaces/crystal' import { task, sign, operateSign } from '@/apis/interfaces/crystal'
import { userIndex } from '@/apis/interfaces/user'
export default { export default {
data() { data() {
return { return {
account: {
coin: 0,
crystal: '0.00'
},
yesterday: '0.00',
crystalArr: [],
categoryArr: [], // 分类列表
ids: [],
task: [], task: [],
sign: { sign: {
signArr : [], signArr : [],
nextTask: '', nextTask: '',
signCan : false, signCan : false,
signShow: false signShow: false,
signSuccess: ''
}, },
tips : { tips : {
tipsTitle : '', // 弹出的动态名称 tipsTitle : '', // 弹出的动态名称
tipsContent : '', // 弹出的动态内容 tipsContent : '', // 弹出的动态内容
tipsState : false // 弹出的动态状态 tipsState : false // 弹出的动态状态
} },
energyShard : '' // 碎片说明
} }
}, },
onShow() { onShow() {
// 获取水晶领取信息 this.sign.signShow = false
crystals().then(res => { // 获取能量领取信息
this.account = { task().then(res => {
coin: res.coin, uni.hideLoading()
crystal: res.crystal this.task = res
} }).catch(err => {
this.crystalArr = res.crystal_array uni.showToast({
this.ids = res.all_ids icon: 'none',
this.yesterday = res.yesterday_crystal title: err.message
}).catch(err => { })
uni.showToast({ })
icon: 'none',
title: err.message
})
})
// 获取水晶任务
task().then(res => {
this.task = res
})
// 获取水晶分类 // 读取配置信息
category().then(res => { userIndex().then(res=>{
this.categoryArr = res this.energyShard = res.help_doc.energy_shard
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
}) })
// 获取水晶签到信息 // 获取水晶签到信息
@@ -143,46 +108,6 @@
}, },
methods: { methods: {
ledCrystal(index) {
// 领取水晶
thawlog({
thaw_id: this.crystalArr[index].log_id,
all_ids: this.ids
}).then(res => {
uni.showToast({
icon: 'none',
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
})
})
},
// 商品详情
onTack(e) {
uni.navigateTo({
url: '../goods/goods?id=' + e.goods_id
})
},
// 提示信息
onShowToast() {
uni.showToast({
title: '暂未开放,敬请期待',
icon : 'none'
})
},
// 水晶签到信息 // 水晶签到信息
signInfo() { signInfo() {
sign().then(res => { sign().then(res => {
@@ -196,15 +121,25 @@
}) })
}) })
}, },
// 能量碎片提示信息
showHelp() {
uni.showModal({
title: '能量碎片',
content: this.energyShard.description,
showCancel: false
})
},
// 签到 // 签到
signClick() { signClick() {
uni.vibrateShort({ uni.vibrateShort({
success: () => { success: () => {
operateSign().then(res => { operateSign().then(res => {
this.sign.signSuccess = res.task_crystals
// 获取水晶签到信息 // 获取水晶签到信息
this.sign.signShow = true
this.signInfo(); this.signInfo();
this.sign.signShow = !this.sign.signShow
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
@@ -214,336 +149,221 @@
} }
}) })
}, },
// 提示语-组件返回参数
signject(val) {
console.log(val)
this.sign.signShow = val.tipsState
},
// 水晶分类跳转 // 能量跳转
JumpUrl(open, title) { JumpUrl(open, title) {
var type = open.openType; var type = open.openType;
switch(type){ switch(type){
case 'switchTab': case 'switchTab':
uni.switchTab({ uni.switchTab({
url: open.path url: open.path
}) })
break; break;
case 'web': case 'web':
uni.navigateTo({ uni.navigateTo({
url: `/pages/web-view/index?title=${title}&url=${open.url}` url: open.url
}) })
break; break;
case 'navigateTo': case 'navigateTo':
uni.navigateTo({ uni.navigateTo({
url: open.path url: open.path
}) })
break; break;
} }
}, },
// 水晶原则提示语
crystalShow () {
this.tips.tipsTitle = '水晶规则'
this.tips.tipsContent = '水晶是用户获取原石的影响因子,同一时段内,水晶越高,获取的原石越多.'
this.tips.tipsState = !this.tips.tipsState
},
// 水晶原则提示语-组件返回参数
tipseject(val) {
this.tips.tipsState = val.tipsState
},
} }
} }
</script> </script>
<style scoped> <style scoped>
/* 水晶漂浮动画 */ page {
.oct-float { background: #FFFFFF;
animation: 4s octfloat infinite; }
}
@keyframes octfloat {
0% {
margin-top: 0;
}
50% {
margin-top: 15rpx;
}
100% {
margin-top: 0;
}
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
// 背景 // 弹出层
.crystal{ .signBack {
background: $mian-color-deep; width: 100%;
min-height: 100vh; height: 100%;
padding-top: var(--status-bar-height); position: fixed;
box-sizing: border-box; background-color: rgba(0,0,0,.7);
background-image: url(@/static/background/crystal-background.png); z-index: 98;
background-size: 100%; left: 0;
background-position: top center; top: 0;
background-repeat: no-repeat; animation: cssAnimation 0s ease-in 4s forwards;
} }
// 底部内容 .signPop {
.content{ width: 60%;
margin-top: $margin * 2; position: fixed;
padding: $padding; z-index: 99;
background: white; left: 20%;
border-radius: $radius $radius 0 0; top: 30%;
// 标题 height: 160px;
.content-title{ animation: cssAnimation 0s ease-in 4s forwards;
padding: 0 $padding / 2; .signPop-tips,
.signPop-cont{
position: absolute;
left: 0;
top: 0;
width: 100%; width: 100%;
}
.signPop-cont {
color: #FFFFFF;
text-align: center;
padding-top: 90px;
.signPop-cont-name {
font-size: 34rpx;
margin-bottom: 10rpx;
}
.signPop-cont-text {
text-align: center;
.signPop-cont-number {
display: inline-block;
color: #ffee4d;
font-size: 38rpx;
color: #f9dc4a;
font-weight: 600;
margin-left: 10rpx;
}
}
}
}
@keyframes cssAnimation {
to {
width: 0;
height: 0;
visibility: hidden;
}
}
// 签到
.signCont {
background: #7c52fc;
color: #FFFFFF;
padding-bottom: 80rpx;
.content-title {
font-size: 40rpx;
padding: 50rpx 45rpx;
box-sizing: border-box; box-sizing: border-box;
color: $text-color; display: flex;
position: relative; .content-title-img {
.content-title-text { width: 32rpx;
font-weight: bold; height: 32rpx;
font-size: $title-size + 4; margin: 12rpx 20rpx;
width: calc(100% - 160rpx); }
margin-bottom: $margin; }
.tips { .sign {
font-weight: normal; margin: 0 0 30rpx;
font-size: $title-size-sm; padding: 0 30rpx;
margin-top: $margin - 10; box-sizing: border-box;
color: $uni-text-color; overflow: hidden;
.sign-list {
width: calc(14.28% - 20rpx);
margin: 0 10rpx;
display: inline-block;
text-align: center;
background-color: rgba(0,0,0,.3);
border-radius: 10rpx;
padding: 20rpx 0;
box-sizing: border-box;
.sign-list-img {
width: 38rpx;
height: 38rpx;
margin-bottom: 5rpx;
}
.sign-list-day {
font-size: 24rpx;
}
&.active {
background-color: #ffdb00;
color: #413e30;
box-shadow: 0 0 20rpx rgba(76,43,177,.3);
} }
} }
.content-titl-btn { }
.sign-record {
opacity: .8;
padding: 0 40rpx;
display: flex;
line-height: 44rpx;
}
}
// 签到按钮
.signBtn {
padding: 0 40rpx;
box-sizing: border-box;
width: 100%;
text-align: center;
margin-top: -50rpx;
.signBtn-go {
width: 100%;
line-height: 100rpx;
border-radius: 80rpx;
background-color: #f9dc4a;
color: #333333;
font-size: 32rpx;
font-weight: 600;
.signBtn-go-icon {
width: 36rpx;
height: 36rpx;
vertical-align: -6rpx;
}
}
}
// 水晶任务
.task{
padding: 60rpx 30rpx;
box-sizing: border-box;
.task-liest {
font-weight: bold;
font-size: 34rpx;
margin-bottom: 20rpx;
}
.task-item {
position: relative;
border-bottom: solid 2rpx #F5F5F5;
padding: 30rpx 200rpx 40rpx 90rpx;
&:last-child {
border: none;
}
.task-icon {
position: absolute;
top: 50rpx;
left: 0;
width: 58rpx;
height: 58rpx
}
.task-title {
font-size: 32rpx;
color: #333;
line-height: 50rpx;
margin-bottom: 10rpx;
}
.task-subtitle {
color: #999;
font-size: 26rpx;
line-height: 30rpx;
}
.task-label {
position: absolute; position: absolute;
right: 0; right: 0;
top: $margin; top: 38rpx;
background-image: linear-gradient(to left, $mian-color-deep, $mian-color); line-height: 80rpx;
color: $uni-text-color-inverse; font-size: 26rpx;
font-size: $title-size-sm; color: #333;
line-height: 60rpx; display: -webkit-box;
line-height: 60rpx; display: -webkit-flex;
border-radius: $radius * 2; display: flex;
width: 160rpx; .task-label-icon {
text-align: center; width: 34rpx;
height: 34rpx;
margin: 24rpx 0 0 20rpx;
}
} }
} }
// 签到 }
.sign{
padding-top: $padding;
padding-bottom: $padding * 2;
.sign-list{
display: flex;
justify-content: space-around;
.item{
text-align: center;
.item-icon{
display: inline-block;
background-image: linear-gradient(to left, $mian-color-deep, $mian-color);
color: white;
width: 54rpx;
height: 54rpx;
line-height: 50rpx;
border-radius: 50%;
border:solid 2rpx $mian-color;
box-sizing: border-box;
&.item-done {
background-image: linear-gradient(to left, #999, #999);
border-color: #999;
}
image {
width: 34rpx;
height: 34rpx;
margin-top: 8rpx;
}
&.active {
background-image: linear-gradient(to left, #ee1d23, #ef8c85);
border-color: #fd6165;
}
text {
font-size: $title-size-sm;
transform: scale(.8);
display: block;
}
}
.item-title{
color: $text-gray;
padding-top: $padding / 2;
font-size: $title-size-sm - 2;
}
}
}
.sign-text{
padding: $padding ($padding / 2) 0;
color: $mian-color-deep;
font-size: $title-size-m;
}
}
// 水晶任务
.task{
padding: 0 ($padding / 2) $padding * 2;
.task-item{
position: relative;
margin: 0 ($margin / 2);
border-bottom: solid 1rpx $border-color;
padding: $padding 200rpx $padding 90rpx;
&:last-child{
border-bottom: none;
}
.task-icon{
position: absolute;
top: $padding + 8;
left: 0;
width: 70rpx;
height: 70rpx;
// background: $border-color-lg;
}
.task-title{
font-size: $title-size;
color: $text-color;
line-height: 50rpx;
}
.task-subtitle{
color: $text-gray;
font-size: $uni-font-size-sm;
line-height: 30rpx;
}
.task-label{
position: absolute;
right: 0;
top: $padding;
line-height: 80rpx;
font-size: $uni-font-size-sm;
color: $text-color;
display: flex;
.task-label-icon {
width: $uni-img-size-sm - 6;
height: $uni-img-size-sm - 6;
margin: $margin + 4 0 0 $margin - 10;
}
}
}
}
}
// 数据统计
.total {
position: relative;
margin: $margin ($margin + $margin/2);
background: rgba($color: $mian-color-deep, $alpha: .6);
padding: 0;
display: flex;
border-radius: $radius;
.item {
width: 50%;
padding: 0 $padding;
text-align: center;
color: white;
font-size: $title-size-m;
line-height: 90rpx;
image{
width: 38rpx;
height: 38rpx;
vertical-align: top;
margin-top: calc((90rpx - 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);
}
}
// 矿石
.ore {
position: relative;
&>image {
width: 100%;
}
.ore-lists {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
.oct-float-item{
position: absolute;
text-align: center;
.text {
margin-top: $margin / 2;
color: white;
font-size: $title-size-sm;
line-height: 40rpx;
text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
}
.icon {
width: 58rpx;
vertical-align: top;
}
}
.ore-item-nav{
@extend .oct-float-item;
right: $margin * 3;
top: 12%;
}
.ore-item {
@extend .oct-float-item;
&:nth-child(1) { top: 16%; left: 13%; }
&:nth-child(2) { top: 50%; right: 10%; }
&:nth-child(3) { top: 23%; right: 20%; }
&:nth-child(4) { top: 70%; left: 33%;}
&:nth-child(5) { top: 40%; left: 20%; }
&:nth-child(6) { top: 58%; left: 10%;}
&:nth-child(7) { top: 10%; right: 43%;}
&:nth-child(8) { top: 46%; right: 29%;}
}
}
}
// 任务
.task-block {
white-space: nowrap;
.item {
background: rgba($color: $mian-color, $alpha: .2);
display: inline-block;
margin-left: $margin;
width: 210rpx;
padding: $padding * 2 $padding;
border-radius: $radius;
box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
text-align: center;
&:first-child {
margin-left: $margin + $margin/2;
}
&:last-child {
margin-right: $margin + $margin/2;
}
.icon {
display: inline-block;
margin: $margin 0;
width: 98rpx;
height: 98rpx;
line-height: 98rpx;
background: $mian-color-deep;
border-radius: 50%;
text-align: center;
image {
width: 56rpx;
height: 56rpx;
vertical-align: middle;
}
}
.text {
font-size: $title-size-m;
color: $mian-color;
}
.title {
font-size: $title-size;
color: white;
font-weight: bold;
}
}
}
</style> </style>

View File

@@ -2,8 +2,8 @@
<view class="content"> <view class="content">
<!-- 账户余额 --> <!-- 账户余额 -->
<view class="total"> <view class="total">
<view class="item nowrap"><image src="@/static/icons/gemstone-icon.png"/>能量球 99</view> <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"/>能量碎片 11</view> <view class="item nowrap"><image src="@/static/icons/crystal-icon.png"/>{{isAuth ? '能量碎片' + account.crystal : '查看能量碎片'}}</view>
</view> </view>
<!-- 矿机 --> <!-- 矿机 -->
<view class="ore"> <view class="ore">
@@ -11,123 +11,114 @@
<view class="ball"> <view class="ball">
<view class="shadow"></view> <view class="shadow"></view>
</view> </view>
<view class="ore-lists"> <block v-if="isAuth">
<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)"> <view class="ore-lists">
<block v-if="item.amount !== null"> <view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" :style="{left: item.left + '%', top: item.top + '%'}" @click="ledCrystal(index)">
<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" /> <block v-if="item.amount !== null">
<view class="text">能量碎片{{ item.amount || '-'}}</view> <view class="oct-icon">
</block> <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> </view>
<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav"> </block>
<image src="/static/imgs/gemstone-ore-icon.png" mode="widthFix" class="icon" /> <block v-else>
<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view> <view class="ore-lists">
</navigator> <view class="oct-float oct-login" @click="$Router.push({name: 'Login'})">
</view> <view class="oct-icon">
<image src="@/static/icons/crystal-icon.png" mode="widthFix" class="icon" />
</view>
<view class="text">登录后领取</view>
</view>
</view>
</block>
</view> </view>
<!-- 任务分类 --> <!-- 任务推荐 -->
<scroll-view class="task-block" scroll-x="true"> <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="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
<view class="text">{{ item.remark }}</view> <view class="text nowrap">{{item.sub_title}}</view>
<view class="icon"> <view class="icon">
<image :src="item.cover" /> <image :src="item.cover" />
</view> </view>
<view class="title">{{ item.title }}</view> <view class="title nowrap">{{item.title}}</view>
<view class="submit-title nowrap">能量碎片{{item.tips}}</view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 平台概况 --> <!-- 平台概况 -->
<view class="situation"> <view class="situation">
<view class="header"> <view class="header">
<view class="header-item"> <view class="header-item">
<view class="title">平台原石余量<uni-icons class="help-icon" @click="showHelp('occBalance')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view> <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 ellipsis">{{ occBalance }}</view> <view class="number nowrap">{{chains.balance}}</view>
</view> </view>
<view class="header-item"> <view class="header-item">
<view class="title">昨日瓜分水晶<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view> <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 ellipsis">{{ yesterdayCrystal }}</view> <view class="number nowrap">{{chains.up}}</view>
</view> </view>
<view class="header-item"> <view class="header-item">
<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('blockHeight')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view> <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 ellipsis">{{ blockHeight }}</view> <view class="number nowrap">{{chains.score}}</view>
</view> </view>
<view class="header-item"> <view class="header-item">
<view class="title">平台累计盈利额<uni-icons class="help-icon" @click="showHelp('gain')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view> <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 ellipsis">{{ gain }}</view> <view class="number nowrap">{{chains.height}}</view>
</view> </view>
<view class="header-item"> <view class="header-item">
<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('nodeNumber')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view> <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 ellipsis">{{ nodeNumber }}</view> <view class="number nowrap">{{chains.number}}</view>
</view> </view>
</view> </view>
<!-- 节点信息 --> <!-- 平台累计盈利能量球 -->
<view class="node-info">
<view class="node-item">
<view class="title">轻节点</view>
<view class="number ellipsis">{{occs.light || '-'}}</view>
</view>
<view class="node-item">
<view class="title">合作节点</view>
<view class="number ellipsis">{{occs.cooperation || '-'}}</view>
</view>
<view class="node-item">
<view class="title">主节点</view>
<view class="number ellipsis">{{occs.main || '-'}}</view>
</view>
<view class="node-item">
<view class="title">超级节点</view>
<view class="number ellipsis">{{occs.super || '-'}}</view>
</view>
<view class="node-item">
<view class="title">运营节点</view>
<view class="number ellipsis">{{occs.operating || '-'}}</view>
</view>
<view class="node-item">
<view class="title">技术节点</view>
<view class="number ellipsis">{{occs.technology || '-'}}</view>
</view>
</view>
<!-- 平台盈利额原石数量 -->
<view class="chart"> <view class="chart">
<view class="title">平台累计营业额和原石价值走势图</view> <view class="title">累计盈利和能量球价值走势图</view>
<view class="chart-f2"> <view class="chart-f2">
<l-f2 ref="chartChange"></l-f2> <l-f2 ref="chartChange"></l-f2>
</view> </view>
</view> </view>
<!-- 提示信息 -->
<u-toast ref="uToast" />
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { occ } from '@/apis/interfaces/chain' import { chain, crystals, thawlog } from '@/apis/interfaces/chain'
import { certified, security } from '@/apis/interfaces/index' import { certified, security } from '@/apis/interfaces/index'
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js' import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/' import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
export default { export default {
components:{
lF2
},
data() { data() {
return { return {
crystalArr : [], isAuth : false,
categoryArr : [], chains : { // 区块链统计
occs: {}, balance : 0,
blockHeight: 0, height : 0,
occBalance: 0, number : 0,
occ: 0, score : 0,
yesterdayCrystal: 0, up : 0
gain: 0, },
nodeNumber: 0, account : { // 账户
notice: [], coin : 0,
isAuth: false, crystal : 0
helpToast: { },
occ: '恒量发行原石量', crystalArr : [], // 待领取
occBalance: '平台原石量', allIds : [], // 可领取ids
yesterdayCrystal: '昨日瓜分水晶', categoryArr : [], // 推荐列表
blockHeight: '区块链高度',
gain: '平台累计盈利额',
nodeNumber: '已开通节点数'
}
}; };
}, },
onShow() { onShow() {
if(this.$store.state.token != '') this.isAuth = true if(this.$store.state.token != '') this.isAuth = true
this.getOcc() this.getIndex()
}, },
methods:{ methods:{
// 求助信息 // 求助信息
@@ -138,72 +129,77 @@
showCancel: false showCancel: false
}) })
}, },
// 原石钱包 // 发权证
openWallet(){ issueGoosd(){
Promise.all([certified(), security()]).then(res=> { console.log('发权证')
let certified = res[0], },
security = res[1] // 领取能量碎片
if(!certified){ ledCrystal(index) {
uni.showModal({ // 播放音频
title: '提示', const innerAudioContext = uni.createInnerAudioContext();
content: '您还为完成个人认证,无法激活您的钱包', innerAudioContext.autoplay = true;
confirmText: '去认证', innerAudioContext.src = require('@/static/mp3/crystal.mp3');
confirmColor: '#009B69', // 请求接口
cancelColor: '#666666', thawlog({
cancelText: '稍后再说', thaw_id: this.crystalArr[index].log_id,
success: res=> { all_ids: this.allIds
if(res.confirm) { }).then(res => {
uni.navigateTo({ uni.showToast({
url: '/pages/certification/personal' 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 return
} }
if(!security) { this.$set(this.crystalArr, index, res.last)
uni.showModal({ }).catch(err => {
title: '激活提示', uni.showToast({
content: '您的钱包未激活,是否立即导出助记词并激活您的钱包?', icon: 'none',
confirmText: '去激活', title: err
confirmColor: '#009B69',
cancelColor: '#666666',
cancelText: '稍后再说',
success: res=> {
if(res.confirm) {
uni.navigateTo({
url: '/pages/wallet/add'
})
}
}
})
return
}
uni.navigateTo({
url: '/pages/wallet/property'
}) })
}) })
}, },
// occ信息 // occ信息
getOcc(){ getIndex(){
occ().then(res => { Promise.all([crystals(), chain()]).then(res=>{
console.log(res) let crystalsData = res[0],
this.occs = res.occs occData = res[1]
this.yesterdayCrystal = res.yesterday_crystal if(!crystalsData.needLogin){
this.occ = res.occ this.account = {
this.occBalance = res.occ_balance coin : crystalsData.coin,
this.blockHeight = res.block_height crystal : crystalsData.crystal
this.gain = res.gain }
this.nodeNumber = res.node_number this.crystalArr = crystalsData.crystal_array
this.notice = res.notice this.allIds = crystalsData.all_ids
if(res.help_toast) this.helpToast = res.help_toast }
this.showCartc(res.movements) this.chains = occData.data
this.categoryArr = occData.tasks
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
icon : 'none' 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){ showCartc(data){
@@ -270,7 +266,29 @@
chart.render(); chart.render();
return chart; return chart;
}) })
} },
// 能量跳转
JumpUrl(open, title) {
var type = open.openType;
switch(type){
case 'switchTab':
uni.switchTab({
url: open.path
})
break;
case 'web':
uni.navigateTo({
url: open.url
})
break;
case 'navigateTo':
uni.navigateTo({
url: open.path
})
break;
}
}
} }
} }
</script> </script>
@@ -349,7 +367,7 @@
} }
50% { 50% {
margin-top: 15rpx; margin-top: 10rpx;
} }
100% { 100% {
@@ -374,20 +392,22 @@
.header{ .header{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: $margin*2; padding-bottom: $padding;
.number{ .number{
color: white; color: white;
font-size: $title-size; font-size: $title-size;
padding-top: $padding/2;
font-weight: bold; font-weight: bold;
line-height: 70rpx;
} }
.title{ .title{
color: rgba($color: white, $alpha: .4); color: rgba($color: white, $alpha: .4);
font-size: $title-size-sm; font-size: $title-size-sm;
line-height: 40rpx;
} }
.header-item{ .header-item{
width: 50%; width: 50%;
padding: $padding / 2; padding: $padding / 2;
padding-bottom: $padding;
box-sizing: border-box; box-sizing: border-box;
&:first-child{ &:first-child{
width: 100%; width: 100%;
@@ -397,40 +417,16 @@
} }
} }
} }
// 节点信息
.node-info{
display: flex;
flex-wrap: wrap;
margin: 0 -$margin / 2;
.node-item{
background: rgba($color: $block-color, $alpha: .8);
width: calc(50% - #{$margin});
margin: $margin / 2;
padding: $padding;
box-sizing: border-box;
border-radius: $radius/2;
}
.number{
font-size: $title-size + 4;
font-weight: bold;
color: white;
}
.title{
font-size: $title-size-sm;
color: white;
}
}
// 图表 // 图表
.chart{ .chart{
background: rgba($color: $block-color, $alpha: .8); background: rgba($color: $block-color, $alpha: .8);
padding: $padding; padding: $padding/2;
border-radius: $radius/2; border-radius: $radius/2;
margin-top: $margin;
.title{ .title{
text-align: center; text-align: center;
line-height: 80rpx; line-height: 80rpx;
color: white; color: rgba($color: #FFFFFF, $alpha: .4);
font-size: $title-size-m; font-size: $title-size-sm;
} }
.chart-f2{ .chart-f2{
height: 200px; height: 200px;
@@ -473,7 +469,6 @@
} }
// 求助icon // 求助icon
.help-icon{ .help-icon{
vertical-align: middle;
margin-left: $margin/3; margin-left: $margin/3;
opacity: .7; opacity: .7;
} }
@@ -487,70 +482,77 @@
top: 0; top: 0;
left: 0; left: 0;
} }
.ore-lists { .ore-lists {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 1;
.oct-float-item{ .oct-float-item{
position: absolute; position: absolute;
text-align: center; text-align: center;
.text { .text {
margin-top: $margin / 2;
color: white; color: white;
font-size: $title-size-sm; font-size: $title-size-sm - 4;
line-height: 40rpx; line-height: 40rpx;
text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2); text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
} }
.icon { .oct-icon{
width: 58rpx; display: inline-block;
vertical-align: top; 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{ .ore-item-nav{
@extend .oct-float-item; @extend .oct-float-item;
right: $margin * 3; right: $margin;
top: 12%; top: 12%;
} }
.ore-item { .ore-item {
@extend .oct-float-item; @extend .oct-float-item;
&:nth-child(1) { top: 16%; left: 13%; } }
&:nth-child(2) { top: 50%; right: 10%; } .oct-login{
&:nth-child(3) { top: 23%; right: 20%; } @extend .oct-float-item;
&:nth-child(4) { top: 70%; left: 33%;} left: 42%;
&:nth-child(5) { top: 40%; left: 20%; } top: 45%;
&:nth-child(6) { top: 58%; left: 10%;}
&:nth-child(7) { top: 10%; right: 43%;}
&:nth-child(8) { top: 46%; right: 29%;}
} }
} }
} }
// 任务 // 任务
.task-block { .task-block {
white-space: nowrap; white-space: nowrap;
margin-bottom: $margin;
.item { .item {
background: rgba($color: $mian-color, $alpha: .2); background: $block-color;
display: inline-block; display: inline-block;
margin-left: $margin; margin-left: $margin;
width: 210rpx; width: 260rpx;
padding: $padding * 2 $padding;
border-radius: $radius; border-radius: $radius;
box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
text-align: center; text-align: center;
padding: ($padding - 10) $padding/2;
&:first-child { &:first-child {
margin-left: $margin + $margin/2; margin-left: $margin;
} }
&:last-child { &:last-child {
margin-right: $margin + $margin/2; margin-right: $margin;
} }
.icon { .icon {
display: inline-block; display: inline-block;
margin: $margin 0; margin: ($margin/2) 0;
width: 98rpx; width: 98rpx;
height: 98rpx; height: 98rpx;
line-height: 98rpx; line-height: 98rpx;
background: $mian-color-deep; background: #1f183d;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
image { image {
@@ -560,13 +562,20 @@
} }
} }
.text { .text {
font-size: $title-size-m; font-size: $title-size-sm;
color: $mian-color; color: rgba($color: white, $alpha: .4);
line-height: 40rpx;
} }
.title { .title {
font-size: $title-size; font-size: $title-size-lg;
color: white; color: white;
font-weight: bold; font-weight: bold;
line-height: 50rpx;
}
.submit-title{
font-size: $title-size-sm - 4;
color: rgba($color: white, $alpha: .4);
line-height: 40rpx;
} }
} }
} }

View File

@@ -1,7 +1,7 @@
<template> <template>
<view class="content"> <view class="content">
<view class="codeContent"> <view class="codeContent">
<image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image> <!-- <image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image> -->
<image class="codeContent-cont" src="../../static/icons/store_contBack.png" mode="widthFix"></image> <image class="codeContent-cont" src="../../static/icons/store_contBack.png" mode="widthFix"></image>
<view class="textContent"> <view class="textContent">
<view class="company"> <view class="company">
@@ -146,7 +146,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
background-color: #e93340; background: #7c52fc;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
} }
@@ -227,14 +227,14 @@
} }
.codeBnt { .codeBnt {
background-color: #e1293f; background-color: #7c52fc;
text-align: center; text-align: center;
border-radius: 10rpx; border-radius: 10rpx;
line-height: 90rpx; line-height: 90rpx;
font-weight: 600; font-weight: 600;
font-size: $title-size; font-size: $title-size;
color: #FFFFFF; color: #FFFFFF;
box-shadow: 4rpx 0 10rpx rgba(155,0,19,.5); box-shadow: 2px 0 5px rgb(124, 82, 252);
position: relative; position: relative;
} }

View File

@@ -55,12 +55,6 @@
code: this.code code: this.code
}).then(res => { }).then(res => {
this.$store.commit('setToken', res.token_type + ' ' + res.access_token) this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
if (!res.is_company) {
this.$Router.replace({
name: "Index"
})
return
}
this.$Router.back() this.$Router.back()
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({

View File

@@ -22,7 +22,7 @@
</view> </view>
</view> </view>
<view class="codeBack-yard"> <view class="codeBack-yard">
<image class="codeBack-yard-img" src="/static/user/wallet-code.png" mode="widthFix"></image> <image class="codeBack-yard-img" :src="inviteData.code" mode="widthFix"></image>
<view class="codeBack-yard-name"> <view class="codeBack-yard-name">
扫码识别链商星球 扫码识别链商星球
</view> </view>
@@ -51,7 +51,6 @@
// 二维码 // 二维码
inviteInfo(){ inviteInfo(){
userInvite().then(res => { userInvite().then(res => {
console.log(res)
this.inviteData = res this.inviteData = res
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
@@ -134,7 +133,7 @@
position: absolute; position: absolute;
background-color: #8c62fe; background-color: #8c62fe;
content: ''; content: '';
top: 266px; top: 278px;
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
border-radius: $uni-border-radius-circle; border-radius: $uni-border-radius-circle;
@@ -220,7 +219,9 @@
border-top: #cccbd0 2rpx dashed; border-top: #cccbd0 2rpx dashed;
} }
.codeBack-yard-img { .codeBack-yard-img {
max-width: 80%; max-width: 75%;
border: 4rpx solid #f3f3f3;
margin: 20rpx 0 40rpx;
} }
.codeBack-yard-name { .codeBack-yard-name {
color: #a0a1a3; color: #a0a1a3;

View File

@@ -431,7 +431,7 @@
height: 300rpx; height: 300rpx;
} }
.customerCont-text { .customerCont-text {
width: 260rpx; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
.customerClose { .customerClose {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 166 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 255 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 261 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

BIN
static/mp3/crystal.mp3 Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/user/sign_arrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/user/sign_icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
static/user/sign_img_54.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/user/sign_tips.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB