645 lines
17 KiB
Vue
645 lines
17 KiB
Vue
<template>
|
||
<view class="content">
|
||
<TopSafe></TopSafe>
|
||
<Header :isMid="true" >
|
||
<template v-slot:mid>
|
||
<view class="top-view">
|
||
<view class="top-box-view flex-c" :style="{
|
||
background:topSelect == index ? '#7934F6' : 'rgba(0,0,0,0)'
|
||
}"
|
||
v-for="(item,index) in topList" :key="index" @click="onTop(index)">
|
||
<text class="text-28 " :style="{
|
||
color:topSelect == index ? '#fff' : '#333'
|
||
}">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</Header>
|
||
<view class="top-line"></view>
|
||
<view class="contract-view" v-if="topSelect == 0">
|
||
<view class="top-head">
|
||
<text class="text-32 text-zu1 text-bold">股权分布</text>
|
||
<text class="text-28 text-fu">51%的股权回馈消费者（免费赠予），股权以数字积分形式发放。</text>
|
||
</view>
|
||
<view class="tu-view">
|
||
<!-- <view class="tu-box"> -->
|
||
<qiun-data-charts
|
||
type="ring"
|
||
canvasId="four_one"
|
||
:canvas2d="isCanvas2d"
|
||
:resshow="delayload"
|
||
:opts="oneOps"
|
||
:chartData="oneData"/>
|
||
|
||
</view>
|
||
<view class="top-line"></view>
|
||
<view class="top-head">
|
||
<text class="text-32 text-zu1 text-bold">股权赠予计划</text>
|
||
<text class="text-28 text-fu">51%的股权分五期赠送，前4期每期10%，第五期11%其他分配则为：投资机构，基金会，活动激励，运营团队，推广奖励的集合。</text>
|
||
</view>
|
||
<view class="tu-view">
|
||
<qiun-data-charts
|
||
type="ring"
|
||
canvasId="four_two"
|
||
:canvas2d="isCanvas2d"
|
||
:resshow="delayload"
|
||
:opts="twoOps"
|
||
:chartData="twoData"/>
|
||
</view>
|
||
<view class="bottom-view">
|
||
<text class="text-32 text-zu1 text-bold">免费赠予详细规则</text>
|
||
<view class="bottom-head">
|
||
<view class="head-one">
|
||
<text class="text-24 text-fu">期数</text>
|
||
</view>
|
||
<view class="head-two">
|
||
<text class="text-24 text-fu">赠予规则</text>
|
||
</view>
|
||
<view class="head-three">
|
||
<text class="text-24 text-fu">开启下一期规则</text>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-value-view">
|
||
<view class="bottom-value-view-row" v-for="(item,index) in oneList" :key="index">
|
||
<view class="head-one-one" :style="{'border-radius':index == 4 ? '0 0 0 16rpx' : 0,}">
|
||
<text class="text-24 text-fu">{{item.one}}</text>
|
||
</view>
|
||
<view class="head-two-two">
|
||
<text class="text-24 text-fu">{{item.two}}</text>
|
||
</view>
|
||
<view class="head-three-three"
|
||
:style="{'border-radius':index == 4 ? '0 0 16rpx 0' : 0,'border-left-color':index == 0 ? '#eaeaea' : 'rgba(0,0,0,0)'}">
|
||
<text class="text-24 text-fu">{{item.three}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="contract-view" v-if="topSelect == 1 && curData">
|
||
<view class="top-head-1">
|
||
<text class="text-32 text-zu1 text-bold">总营收</text>
|
||
<text class="text-48 text-zu1 text-bold">￥
|
||
<text class="text-64 text-zu1 ">{{curData.totalProfitSharing || 0}}</text>
|
||
</text>
|
||
</view>
|
||
<view class="top-line"></view>
|
||
<view class="top-head">
|
||
<text class="text-32 text-zu1 text-bold">商城分配数据</text>
|
||
</view>
|
||
<view class="tu-view">
|
||
<qiun-data-charts
|
||
v-if="threeData.series.length"
|
||
type="ring"
|
||
canvasId="four_three"
|
||
:canvas2d="isCanvas2d"
|
||
:resshow="delayload"
|
||
:opts="threeOps"
|
||
:chartData="threeData"/>
|
||
</view>
|
||
<view class="bottom-view">
|
||
<text class="text-32 text-zu1 text-bold">分配明细数据</text>
|
||
<view class="bottom-head">
|
||
<view class="head-one" style="width:278rpx">
|
||
<text class="text-24 text-fu">名称</text>
|
||
</view>
|
||
<view class="head-two" style="width:234rpx">
|
||
<text class="text-24 text-fu">金额</text>
|
||
</view>
|
||
<view class="head-three">
|
||
<text class="text-24 text-fu">占比</text>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-value-view">
|
||
<view class="bottom-value-view-row" v-for="(item,index) in threeData.series" :key="index">
|
||
<view class="head-one-one" style="width:278rpx" :style="{'border-radius':index == 4 ? '0 0 0 16rpx' : 0,}">
|
||
<text class="text-24 text-fu">{{item.name}}</text>
|
||
</view>
|
||
<view class="head-two-two" style="width:234rpx">
|
||
<text class="text-24 text-fu">{{item.amount}}</text>
|
||
</view>
|
||
<view class="head-three-three"
|
||
:style="{'border-radius':index == 4 ? '0 0 16rpx 0' : 0}">
|
||
<text class="text-24 text-fu">{{item.data}}%</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top-line" style="margin-top:20rpx;"></view>
|
||
<view class="top-head">
|
||
<text class="text-32 text-zu1 text-bold">商城营收数据</text>
|
||
</view>
|
||
<view class="tab-view-one">
|
||
<view v-for="(item,index) in tabOne" :key="index" @click="onOne(index)" :style="{
|
||
background:index == curOne ? 'rgba(121, 52, 246, 0.1)' : '#F5F5F5'
|
||
}">
|
||
<text class="text-24 text-zi" :style="{color:index == curOne ? '#7934F6' : '#999'}">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="tu-view-one" style="margin-top:32rpx">
|
||
<!-- <view class="charts-box">
|
||
<qiun-data-charts
|
||
type="line"
|
||
canvasId="scrolllineid"
|
||
:opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}"
|
||
:chartData="fourData"
|
||
:ontouch="true"
|
||
:canvas2d="true"
|
||
/>
|
||
</view> -->
|
||
<qiun-data-charts
|
||
type="area" :ontouch="true" :canvas2d="true" canvasId="scrolllineid"
|
||
:opts="fourOps" :chartData="fourData"/>
|
||
</view>
|
||
<view class="tab-view-two">
|
||
<view class="tab-view-two-two" v-for="(item,index) in tabTwo" :key="index" @click="onTwo(index)" >
|
||
<text class="text-32 text-zi" style="font-weight: 500;" :style="{color:index == curTwo ? '#7934F6' : '#999'}">{{item}}</text>
|
||
<view class="line-view" v-if="index == curTwo"></view>
|
||
</view>
|
||
</view>
|
||
<view class="top-head">
|
||
<text class="text-32 text-zu1 text-bold">已分配总额：{{fiveTotal}}</text>
|
||
</view>
|
||
<view class="tu-view-one" style="margin:32rpx 0">
|
||
<qiun-data-charts type="area" :ontouch="true" :canvas2d="true" canvasId="scrolllineid1"
|
||
:opts="fourOps" :chartData="fiveData"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Header from '@/components/common/header.vue';
|
||
import TopSafe from '@/components/common/top-safe.nvue'
|
||
import func from '@/utils/func.js';
|
||
import { getProfitSharingData } from '@/api/finance.js'
|
||
export default {
|
||
components: { Header,TopSafe },
|
||
data() {
|
||
return {
|
||
topSelect:0,
|
||
topList:[
|
||
'股权架构','营收数据'
|
||
],
|
||
tabOne:['每日','每月'],
|
||
curOne:0,
|
||
tabTwo:['数字积分','贡献共享计划'],
|
||
curTwo:0,
|
||
delayload: false,
|
||
oneList:[
|
||
{one:'第一期',two:'商城优选区消费1:1获得贡献值，每消费1元获得1贡献值，次日根据当日商城营收占比获得数字积分直推用户消费10:1获得贡献值，直推用户优选区每消费10元您将获得1积分',three:'4000万数字积分分配完成则开启第2期'},
|
||
{one:'第二期',two:'待定，敬请期待',three:''},
|
||
{one:'第三期',two:'待定，敬请期待',three:''},
|
||
{one:'第四期',two:'待定，敬请期待',three:''},
|
||
{one:'第五期',two:'待定，敬请期待',three:''},
|
||
],
|
||
oneOps:{
|
||
label:{show:false},
|
||
legend:{show:false},
|
||
title:{name: '100%',fontSize:16,color:'#333',},
|
||
subtitle: {name: '股权分布',fontSize:12,color:'#666',},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 60,
|
||
},
|
||
}
|
||
},
|
||
oneData:{
|
||
series:[
|
||
{"name": "免费赠予消费者","data": 51,"color":"#7934F6",top:'108rpx',left:'32rpx'},
|
||
{"name": "投资机构","data": 9,"color":"#AF39C4",top:0,right:'32rpx'},
|
||
{"name": "基金会","data": 10,"color":"#0370FF",top:'108rpx',right:'32rpx'},
|
||
{"name": "活动激励","data": 10,"color":"#00A6CC",top:'208rpx',right:'32rpx'},
|
||
{"name": "运营团队","data": 10,"color":"#FFA700",top:'314rpx',right:'32rpx'},
|
||
{"name": "推广奖励","data": 10,"color":"#00A776",top:'402rpx',right:'32rpx'},
|
||
|
||
|
||
|
||
]
|
||
},
|
||
twoOps:{
|
||
legend:{show:false},
|
||
title:{name: '100%',fontSize:16,color:'#333',},
|
||
subtitle: {name: '五期分配比例',fontSize:12,color:'#666',},
|
||
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 60,
|
||
},
|
||
}
|
||
},
|
||
twoData:{
|
||
series:[
|
||
{"name": "其他分配集合","data": 49,"color":"#7934F6"},
|
||
{"name": "第一期","data": 10,"color":"#AF39C4"},
|
||
{"name": "第二期","data": 10,"color":"#0370FF"},
|
||
{"name": "第三期","data": 10,"color":"#00A6CC"},
|
||
{"name": "第四期","data": 10,"color":"#FFA700"},
|
||
{"name": "第五期","data": 11,"color":"#00A776"},
|
||
|
||
]
|
||
},
|
||
threeData:{
|
||
series:[]
|
||
},
|
||
threeOps:{
|
||
legend:{show:false},
|
||
title:{name: '100%',fontSize:16,color:'#333',},
|
||
subtitle: {name: '分配分布',fontSize:12,color:'#666',},
|
||
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 60,
|
||
},
|
||
}
|
||
},
|
||
fourData:{
|
||
categories: [1,2,3,4,2,3,4,2,3,4,2,3,4,2,3,4,2,3,4,2,3,4,2,3,4],
|
||
series: [{
|
||
|
||
name: "",
|
||
data:['1','2','3','4','5','2','3','4','5','2','3','4','5','2','3','4','5','2','3','4','5','2','3','4','5']
|
||
}]
|
||
},
|
||
fiveData:{
|
||
categories: [1,2,3,4],
|
||
series: [{
|
||
|
||
name: "",
|
||
data:[]
|
||
}]
|
||
},
|
||
fourOps:{
|
||
color: ["#7632FF","#7632FF","#B039C2"],
|
||
padding: [15,15,0,15],
|
||
enableScroll: true,
|
||
legend: {show:false},
|
||
xAxis: {
|
||
scrollShow:true,
|
||
itemCount:4,
|
||
disableGrid: true
|
||
},
|
||
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2,
|
||
},
|
||
extra: {
|
||
area: {
|
||
type: "straight",
|
||
opacity: 0.2,
|
||
addLine: true,
|
||
width: 2,
|
||
gradient: false,
|
||
activeType: "hollow"
|
||
}
|
||
}
|
||
},
|
||
|
||
curData:null,
|
||
fiveTotal:0
|
||
|
||
};
|
||
},
|
||
onReady(){
|
||
|
||
|
||
// this.initTwo();
|
||
},
|
||
onLoad() {
|
||
// setTimeout(()=>{
|
||
// this.init()
|
||
// },500)
|
||
this.profitSharingData();
|
||
},
|
||
methods: {
|
||
onTop(index){
|
||
if(this.topSelect !== index){
|
||
this.topSelect = index;
|
||
}
|
||
},
|
||
onOne(index){
|
||
if(this.curOne !== index){
|
||
this.curOne = index;
|
||
this.getFour();
|
||
}
|
||
},
|
||
onTwo(index){
|
||
if(this.curTwo !== index){
|
||
this.curTwo = index;
|
||
this.getFive();
|
||
}
|
||
},
|
||
getFive(){
|
||
this.fiveData.categories = [];
|
||
this.fiveData.series[0].data = [];
|
||
this.fiveData.series[0].name = '';
|
||
if(this.curTwo == 0){
|
||
this.fiveTotal = this.curData.profitSharingTbcBonus.tbcTotal;
|
||
let arr = this.curData.profitSharingTbcBonus.tbcList;
|
||
arr.forEach((item,index)=>{
|
||
this.fiveData.categories.push(item.key);
|
||
this.fiveData.series[0].data.push(item.amount);
|
||
})
|
||
}else{
|
||
this.fiveTotal = this.curData.profitSharingTbcBonus.bonusTotal;
|
||
let arr = this.curData.profitSharingTbcBonus.bonusList;
|
||
let max = 0;
|
||
arr.forEach((item,index)=>{
|
||
if(max < item.amount){
|
||
max = item.amount;
|
||
}
|
||
this.fiveData.categories.push(item.key);
|
||
this.fiveData.series[0].data.push(item.amount);
|
||
})
|
||
if(max != 0){
|
||
max = max / 1000;
|
||
}
|
||
console.log('max',max.toFixed(0))
|
||
// this.fourOps.yAxis.data.max =
|
||
}
|
||
},
|
||
getFour(){
|
||
this.fourData.categories = [];
|
||
this.fourData.series[0].data = [];
|
||
this.fourData.series[0].name = '';
|
||
if(this.curOne == 0){
|
||
let arr = this.curData.profitSharingStat.dayList;
|
||
arr.forEach((item,index)=>{
|
||
this.fourData.categories.push(item.key);
|
||
this.fourData.series[0].data.push(item.amount);
|
||
})
|
||
}else{
|
||
let arr = this.curData.profitSharingStat.monthList;
|
||
arr.forEach((item,index)=>{
|
||
this.fourData.categories.push(item.key);
|
||
this.fourData.series[0].data.push(item.amount);
|
||
|
||
})
|
||
}
|
||
},
|
||
profitSharingData(){
|
||
getProfitSharingData().then(res=>{
|
||
if (res.bizcode == 100) {
|
||
this.curData = res.data;
|
||
if(this.curData){
|
||
this.threeData.series = [];
|
||
this.threeData.series.push(this.curData.profitSharingDetail.cost);
|
||
this.threeData.series.push(this.curData.profitSharingDetail.bonus);
|
||
this.threeData.series.push(this.curData.profitSharingDetail.addedTax);
|
||
this.threeData.series.push(this.curData.profitSharingDetail.encourrage);
|
||
this.threeData.series.push(this.curData.profitSharingDetail.nextYearFund);
|
||
this.threeData.series.push(this.curData.profitSharingDetail.rwaMarketManage);
|
||
this.threeData.series.push(this.curData.profitSharingDetail.stockStabilizing);
|
||
this.threeData.series.push(this.curData.profitSharingDetail.tradeEncourrage);
|
||
this.threeData.series.push(this.curData.profitSharingDetail.yearEndShare);
|
||
this.threeData.series.forEach((item,index)=>{
|
||
item.data = Number(item.percent);
|
||
if(index == 0)item.color = '#7934F6';
|
||
if(index == 1)item.color = '#AF39C4';
|
||
if(index == 2)item.color = '#0370FF';
|
||
if(index == 3)item.color = '#00A6CC';
|
||
if(index == 4)item.color = '#FFB322';
|
||
if(index == 5)item.color = '#FF9035';
|
||
if(index == 6)item.color = '#FF5369';
|
||
if(index == 7)item.color = '#00A776';
|
||
if(index == 8)item.color = '#5840FF';
|
||
})
|
||
this.getFour();
|
||
this.getFive();
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.top-view{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height:72rpx;
|
||
background-color: #eee;
|
||
border-radius: 36rpx;
|
||
.top-box-view{
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
height:100%;
|
||
border-radius: 36rpx;
|
||
|
||
}
|
||
}
|
||
.top-line{
|
||
width:100%;
|
||
height:12rpx;
|
||
min-height:12rpx;
|
||
display: flex;
|
||
background-color: #F5F5F5;
|
||
}
|
||
.contract-view{
|
||
width:100%;
|
||
height:calc(100% - 88rpx - 12rpx - var(--status-bar-height));
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
position: relative;
|
||
.top-head-1{
|
||
width:100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 40rpx 32rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.tab-view-two{
|
||
width:100%;
|
||
height:54rpx;
|
||
min-height:54rpx;
|
||
margin-top:32rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding:0 32rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1rpx solid #eaeaea;
|
||
.tab-view-two-two{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
justify-content: space-between;
|
||
margin-right:48rpx;
|
||
height:54rpx;
|
||
min-height:54rpx;
|
||
.line-view{
|
||
width:48rpx;
|
||
height:4rpx;
|
||
min-height:4rpx;
|
||
background-color: #7934F6;
|
||
}
|
||
}
|
||
}
|
||
.tab-view-one{
|
||
width:100%;
|
||
height:48rpx;
|
||
min-height:48rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding:0 32rpx;
|
||
box-sizing: border-box;
|
||
view{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding:0 32rpx;
|
||
box-sizing: border-box;
|
||
height:48rpx;
|
||
border-radius: 24rpx;
|
||
margin-right:24rpx;
|
||
}
|
||
}
|
||
.top-head{
|
||
width:100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 36rpx 32rpx;
|
||
box-sizing: border-box;
|
||
|
||
}
|
||
.tu-view-one{
|
||
display: flex;
|
||
width:100%;
|
||
min-height:400rpx;
|
||
padding: 0 32rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
.tu-view{
|
||
display: flex;
|
||
width:100%;
|
||
min-height:calc(100vw - 64rpx);
|
||
padding: 0 32rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.tu-box{
|
||
width:calc(100% - 100rpx);
|
||
min-height:calc(100% - 200rpx);
|
||
}
|
||
.zi-box{
|
||
position: absolute;
|
||
left:32rpx;
|
||
top:0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
.bottom-view{
|
||
width:100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom:20rpx;
|
||
.bottom-value-view{
|
||
width:100%;
|
||
border-radius: 0 0 16rpx 16rpx;
|
||
flex-direction: column;
|
||
// border-bottom:1rpx solid #eaeaea;
|
||
// border-left:1rpx solid #eaeaea;
|
||
// border-right:1rpx solid #eaeaea;
|
||
display: flex;
|
||
.bottom-value-view-row{
|
||
width:100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
.head-one-one{
|
||
width:134rpx;
|
||
height:100%;
|
||
border-right:1rpx solid #eaeaea;
|
||
border-left:1rpx solid #eaeaea;
|
||
border-bottom:1rpx solid #eaeaea;
|
||
display: flex;
|
||
flex-direction: row;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
}
|
||
.head-two-two{
|
||
width:318rpx;
|
||
height:100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
box-sizing: border-box;
|
||
border-bottom:1rpx solid #eaeaea;
|
||
padding: 20rpx;
|
||
}
|
||
.head-three-three{
|
||
flex:1;
|
||
padding: 20rpx;
|
||
height:100%;
|
||
border-left:1rpx solid #eaeaea;
|
||
border-right:1rpx solid #eaeaea;
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-bottom:1rpx solid #eaeaea;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
}
|
||
.bottom-head{
|
||
width:100%;
|
||
margin-top:28rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
height:80rpx;
|
||
min-height:80rpx;
|
||
align-items: cneter;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
background-color: #F8F8F8;
|
||
border:1rpx solid #F8F8F8;
|
||
.head-one{
|
||
width:134rpx;
|
||
height:100%;
|
||
border-right:1rpx solid #eaeaea;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
.head-two{
|
||
width:318rpx;
|
||
max-height:318rpx;
|
||
height:100%;
|
||
border-right:1rpx solid #eaeaea;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.head-three{
|
||
flex:1;
|
||
height:100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</style>
|