charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
money
2025-12-11 13:48:48 +08:00
parent f11a12a416
commit 6c92138283
17 changed files with 1446 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/rwa_package/dongjian/finance.vue
+497 -274
View File
@@ -1,7 +1,7 @@
<template>
<view class="content">
<TopSafe></TopSafe>
<Header :isMid="true" borderWidth="1rpx" >
<Header :isMid="true" >
<template v-slot:mid>
<view class="top-view">
<view class="top-box-view flex-c" :style="{
@@ -15,53 +15,146 @@
</view>
</template>
</Header>
<view class="contract-view">
<view class="tu-view" v-if="topSelect == 0">
<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="zi-box" v-for="(item,index) in oneData.series" :key="index"
:style="{top:item.top,left:index == 0 ? item.left : 'auto',right:index != 0 ? item.right : 'none'}">
<text class="text-28" :style="{color:item.color,'text-align':index == 0 ? 'start' : 'end'}">{{item.data}}%</text>
<text class="text-28" :style="{color:item.color}">{{item.name}}</text>
</view> -->
</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_b"
canvasId="four_two"
:canvas2d="isCanvas2d"
:resshow="delayload"
:opts="{legend:{position: 'bottom'},title:{name: '',},subtitle: {name: ''}}"
:chartData="dataSeries"/>
:opts="twoOps"
:chartData="twoData"/>
</view>
<view class="bottom-panel" v-if="topSelect == 0">
<view class="flex-col mt-24" style="width:50%" v-for="(item,index) in data" :key="item">
<view class="flex-r">
<view class="yuan" :style="{background:dataColor[index]}"></view>
<text class="text-28 text-zu" style="margin-left:10rpx">{{item.name}}</text>
<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>
<text class="text-24 text-fu" style="margin-top:12rpx">
总营收分红占比:
<text :style="{color:dataColor[index]}">{{item.value}}%</text>
</text>
</view>
</view>
<view class="tu-view" v-if="topSelect == 1">
</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_b"
canvasId="four_three"
:canvas2d="isCanvas2d"
:resshow="delayload"
:opts="{legend:{position: 'bottom'},title:{name: '',},subtitle: {name: ''}}"
:chartData="dataSeriesTwo"/>
:opts="threeOps"
:chartData="threeData"/>
</view>
<view class="bottom-panel" v-if="topSelect == 1">
<view class="flex-col mt-24" style="width:50%" v-for="(item,index) in dataTwo" :key="item">
<view class="flex-r">
<view class="yuan" :style="{background:dataTwoColor[index]}"></view>
<text class="text-28 text-zu" style="margin-left:10rpx">{{item.name}}</text>
<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>
<text class="text-24 text-fu" style="margin-top:12rpx">
占比:
<text :style="{color:dataTwoColor[index]}">{{item.value}}%</text>
</text>
</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" style="margin-top:32rpx">
<qiun-data-charts type="area" :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" style="margin:32rpx 0">
<qiun-data-charts type="area" :opts="fourOps" :chartData="fiveData"/>
</view>
</view>
</view>
@@ -70,9 +163,8 @@
<script>
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import * as echarts from 'echarts'
import func from '@/utils/func.js';
import { getProfitSharingData } from '@/api/finance.js'
export default {
components: { Header,TopSafe },
data() {
@@ -81,141 +173,118 @@ export default {
topList:[
'股权架构','营收数据'
],
tabOne:['每日','每月'],
curOne:0,
tabTwo:['数字积分','贡献共享计划'],
curTwo:0,
delayload: false,
myChart:null,
myChartTwo:null,
data: [
{ value: '10', name: '用户股东第一期' },
{ value: '10', name: '用户股东第二期' },
{ value: '10', name: '用户股东第三期' },
{ value: '10', name: '用户股东第四期' },
{ value: '11', name: '用户股东第五期' },
{ value: '10', name: '推广奖励' },
{ value: '10', name: '运营团队' },
{ value: '10', name: '活动激励' },
{ value: '9', name: '投资机构' },
{ value: '10', name: '基金会' },
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:''},
],
dataSeries:{
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": 10,
"color":"#FF8400"
},
{
"name": "用户股东第二期",
"data": 10,
"color":"#6136FF"
},
{
"name": "用户股东第三期",
"data": 10,
"color":"#19CEB3"
},
{
"name": "用户股东第四期",
"data": 10,
"color":"#F1B900"
},
{
"name": "用户股东第五期",
"data": 11,
"color":"#AE9BF5"
},
{
"name": "推广奖励",
"data": 10,
"color":"#94F7A1"
},
{
"name": "运营团队",
"data": 10,
"color":"#006EFF"
},
{
"name": "投资机构",
"data": 10,
"color":"#FF2440"
},
{
"name": "活动激励",
"data": 9,
"color":"#00A776"
},
{
"name": "基金会",
"data": 10,
"color":"#FF2440"
}
{"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'},
]
},
dataSeriesTwo:{
},
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": 25,
"color":"#FF8400"
},
{
"name": "分红",
"data": 15,
"color":"#6136FF"
},
{
"name": "销售增值税",
"data": 13,
"color":"#19CEB3"
},
{
"name": "市场激励",
"data": 12,
"color":"#F1B900"
},
{
"name": "次年发展资金",
"data": 10.5,
"color":"#AE9BF5"
},
{
"name": "RWA市值管理",
"data": 10,
"color":"#94F7A1"
},
{
"name": "股标护盘",
"data": 5,
"color":"#006EFF"
},
{
"name": "交易激励",
"data": 5,
"color":"#FF2440"
},
{
"name": "年终分红",
"data": 4.5,
"color":"#00A776"
}
{"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"},
]
},
dataColor:['#FF8400','#6136FF', '#19CEB3', '#F1B900',
'#AE9BF5','#94F7A1','#006EFF','#FF2440','#00A776','#FF2440'],
dataTwo:[
{ value: '25', name: '成本' },
{ value: '15', name: '消费贡献共享计划' },
{ value: '13', name: '销售增值税' },
{ value: '12', name: '市场激励' },
{ value: '10.5', name: '次年发展资金' },
{ value: '10', name: 'RWA市值管理' },
{ value: '5', name: '股标护盘' },
{ value: '5', name: '交易激励' },
{ value: '4.5', name: '年终共享' },
],
dataTwoColor:['#FF8400','#6136FF', '#19CEB3', '#F1B900', '#AE9BF5'
,'#94F7A1','#006EFF','#FF2440','#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],
series: [{
name: "",
data:[]
}]
},
fiveData:{
categories: [1,2,3,4],
series: [{
name: "",
data:[]
}]
},
fourOps:{
color: ["#7632FF","#7632FF","#B039C2"],
padding: [15,15,0,15],
enableScroll: false,
legend: {show:false},
xAxis: {
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
};
},
@@ -228,110 +297,99 @@ export default {
// setTimeout(()=>{
// this.init()
// },500)
this.profitSharingData();
},
methods: {
onTop(index){
if(this.topSelect !== index){
this.topSelect = index;
// if(index == 0){
// setTimeout(()=>{
// this.init()
// },500)
// }else{
// setTimeout(()=>{
// this.initTwo()
// },500)
// }
}
},
async init(){
// let chartDom = document.getElementById('chart');
let chartDom = await uni.createSelectorQuery().select('#chart');
console.log('chartDom',chartDom)
this.myChart = echarts.init(chartDom);
const option = {
color: this.dataColor,
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
// legend: {
// top: '5%',
// left: 'center'
// },
label:{
formatter: ' {d}% '
},
series: [
{
name: '股权架构',
type: 'pie',
radius: '50%',
// avoidLabelOverlap: false,
// label: {
// show: false,
// position: 'center'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: 24,
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: false
// },
data: this.data
}
]
};
this.myChart.setOption(option);
onOne(index){
if(this.curOne !== index){
this.curOne = index;
this.getFour();
}
},
initTwo(){
let chartDomTwo = document.getElementById('chartTwo');
this.myChartTwo = echarts.init(chartDomTwo);
const option = {
color: this.dataTwoColor,
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
// legend: {
// top: '0',
// left: 'center'
// },
label:{
formatter: '{d}%'
},
series: [
{
name: '营收数据',
type: 'pie',
radius: '50%',
// avoidLabelOverlap: false,
// selectedMode: 'single',
// label: {
// show: false,
// position: 'center'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: 24,
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: false
// },
data: this.dataTwo
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.slice(-5);
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.slice(-5);
arr.forEach((item,index)=>{
this.fiveData.categories.push(item.key);
this.fiveData.series[0].data.push(item.amount);
})
}
},
getFour(){
this.fourData.categories = [];
this.fourData.series[0].data = [];
this.fourData.series[0].name = '';
if(this.curOne == 0){
let arr = this.curData.profitSharingStat.dayList.slice(-5);
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.slice(-5);
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();
}
}
]
};
this.myChartTwo.setOption(option);
})
}
}
@@ -354,37 +412,202 @@ export default {
}
}
.top-line{
width:100%;
height:12rpx;
min-height:12rpx;
display: flex;
background-color: #F5F5F5;
}
.contract-view{
width:100%;
height:calc(100% - 88rpx - var(--status-bar-height));
height:calc(100% - 88rpx - 12rpx - var(--status-bar-height));
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
padding: 0 32rpx;
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{
margin:32rpx 0;
display: flex;
width:100%;
min-height:calc(100vw - 64rpx);
}
.bottom-panel{
display: flex;
width:100%;
border-radius: 24rpx;
box-shadow: 0rpx 0rpx 29rpx 0rpx #E5E5E5;
flex-wrap: wrap;
justify-content: space-between;
padding: 24rpx;
padding: 0 32rpx;
align-items: center;
justify-content: center;
box-sizing: border-box;
.yuan{
border-radius: 50%;
width:28rpx;
min-height:28rpx;
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;
borer: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;
}
}
}
}