<template>
|
<view class="content">
|
<view class="chart-row">
|
<view class="chart-tab">
|
<text :class="activeName == 'income' ? 'active': ''" @click="handleClick('income')">累计收益</text>
|
<text :class="activeName == 'reward' ? 'active': ''" @click="handleClick('reward')">累计提成</text>
|
</view>
|
<view class="chart-income">6.3</view>
|
<view class="charts-box">
|
<qiun-data-charts type="line" :chartData="chartData" :errorShow="false"
|
:eopts="{seriesTemplate:{smooth:true}}"
|
background="none"/>
|
</view>
|
</view>
|
|
<view class="node-row">
|
<view class="count-row">
|
<view class="uni-flex uni-row">
|
<view class="flex-count-item">
|
<image class="image" mode="widthFix" src="../../static/img/mine.gif" />
|
</view>
|
|
<view class="flex-count-item">
|
<view class="count-title">
|
今日收益
|
<view class="count-text">11</view>
|
</view>
|
</view>
|
|
<el-divider class="divider" direction="vertical"></el-divider>
|
|
<view class="flex-count-item">
|
<view class="count-title">
|
今日提成
|
<view class="count-text">5</view>
|
</view>
|
</view>
|
|
<el-divider class="divider" direction="vertical"></el-divider>
|
|
<view class="flex-count-item">
|
<view class="count-title">
|
节点数量
|
<view class="count-text">50</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="node-input">
|
<view class="uni-flex uni-row">
|
<view class="flex-input-item" style="width:30%">
|
获取节点
|
<el-divider direction="vertical"></el-divider>
|
</view>
|
<view class="flex-input-item" style="width:45%">
|
<input class="uni-input" focus placeholder="请输入数量" v-model="num" />
|
</view>
|
<view class="flex-input-item uni-bg-blue" style="width:25%">
|
一键获取
|
</view>
|
</view>
|
</view>
|
<view class="node-list">
|
<template>
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column prop="date" label="节点名称|位置">
|
</el-table-column>
|
<el-table-column prop="name" label="持有时间(天)" align="center">
|
</el-table-column>
|
<el-table-column prop="address" label="今日|累计收益">
|
</el-table-column>
|
</el-table>
|
</template>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState,
|
mapMutations
|
} from 'vuex'
|
|
import {
|
univerifyLogin
|
} from '@/common/univerify.js'
|
|
export default {
|
data() {
|
return {
|
num: "",
|
activeName: "income",
|
tableData: [{
|
date: '节点名称|北京',
|
name: '46',
|
address: '1.03|11.03'
|
}, {
|
date: '节点名称|北京',
|
name: '22',
|
address: '01.03|1.03'
|
}, {
|
date: '节点名称|北京',
|
name: '100',
|
address: '011.03|22.03'
|
}, {
|
date: '节点名称|北京',
|
name: '1',
|
address: '0.03|111.03'
|
}],
|
chartData: {
|
"categories": [
|
"09-1",
|
"09-2",
|
"09-3",
|
"09-4",
|
"09-5",
|
"09-6",
|
"09-7"
|
],
|
"series": [{
|
"name": "成交量A",
|
"data": [
|
4,
|
8,
|
12,
|
9,
|
14,
|
18,
|
19
|
]
|
}]
|
},
|
}
|
},
|
computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
|
onLoad() {
|
const loginType = uni.getStorageSync('login_type')
|
if (loginType === 'local') {
|
this.login(uni.getStorageSync('username'))
|
return
|
}
|
let uniIdToken = uni.getStorageSync('uni_id_token')
|
if (uniIdToken) {
|
this.login(uni.getStorageSync('username'))
|
uniCloud.callFunction({
|
name: 'user-center',
|
data: {
|
action: 'checkToken',
|
},
|
success: (e) => {
|
|
console.log('checkToken success', e);
|
|
if (e.result.code > 0) {
|
//token过期或token不合法，重新登录
|
if (this.forcedLogin) {
|
uni.reLaunch({
|
url: '../login/login'
|
});
|
} else {
|
uni.navigateTo({
|
url: '../login/login'
|
});
|
}
|
}
|
},
|
fail(e) {
|
uni.showModal({
|
content: JSON.stringify(e),
|
showCancel: false
|
})
|
}
|
})
|
} else {
|
this.guideToLogin()
|
}
|
},
|
methods: {
|
...mapMutations(['login']),
|
handleClick(tabName) {
|
this.activeName = tabName;
|
},
|
guideToLogin() {
|
uni.showModal({
|
title: '未登录',
|
content: '您未登录，需要登录后才能继续',
|
/**
|
* 如果需要强制登录，不显示取消按钮
|
*/
|
showCancel: !this.forcedLogin,
|
success: (res) => {
|
if (res.confirm) {
|
univerifyLogin().catch((err) => {
|
if (err === false) return;
|
/**
|
* 如果需要强制登录，使用reLaunch方式
|
*/
|
if (this.forcedLogin) {
|
uni.reLaunch({
|
url: '../login/login'
|
});
|
} else {
|
uni.navigateTo({
|
url: '../login/login'
|
});
|
}
|
})
|
}
|
}
|
});
|
}
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
.content {
|
padding: 0;
|
|
}
|
|
.chart-row {
|
height: 35%;
|
background-color: #007AFF;
|
text-align: center;
|
|
}
|
|
.node-row {
|
height: 70%;
|
width: 100%;
|
top: 30%;
|
position: absolute;
|
}
|
|
.node-list,
|
.node-input,
|
.count-row {
|
height: 200rpx;
|
background-color: #fff;
|
margin: 3% 4%;
|
border: 1px solid #eee;
|
border-radius: 5px;
|
}
|
|
.node-input {
|
height: 80rpx;
|
}
|
|
.node-list {
|
height: 60%;
|
overflow: auto;
|
}
|
|
.flex-count-item {
|
width: 25%;
|
text-align: center;
|
display: flex;
|
}
|
|
.flex-input-item {
|
height: 80rpx;
|
text-align: center;
|
line-height: 80rpx;
|
}
|
|
.uni-input-placeholder {
|
color: #cacaca;
|
text-align: left;
|
}
|
|
.el-table {
|
font-size: 26rpx;
|
}
|
|
.image {
|
width: 200rpx;
|
}
|
|
.divider {
|
height: 120rpx;
|
margin-top: 30rpx;
|
}
|
|
.count-title {
|
margin: auto;
|
color: #B2B2B2
|
}
|
|
.count-text {
|
font-size: 40rpx;
|
font-weight: 600;
|
margin-top: 20rpx;
|
color: #000
|
}
|
|
.charts-box {
|
width: 100%;
|
height: 300px;
|
}
|
|
.chart-tab {
|
margin-top: 30rpx;
|
}
|
|
.chart-tab text {
|
margin: 50rpx;
|
padding-bottom: 10rpx;
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.active {
|
color: #FFFF33 !important;
|
border-bottom: 4rpx solid #FFFF33;
|
}
|
|
.chart-income {
|
margin-top: 80rpx;
|
color: #fff;
|
font-size: 52rpx;
|
font-weight: 600;
|
font-family: emoji;
|
}
|
</style>
|
