no message

App.vue

@@ -69,7 +69,15 @@
 	flex-direction: row;
 	justify-content: flex-end;
 }
-
+.flex-r{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.flex-col{
+	display: flex;
+	flex-direction: column;
+}
 .text-white{
 	color:#fff;
 }

components/common/header.vue

@@ -8,7 +8,10 @@
 			</slot>
 		</view>
 		<view class="header-mid">
-			<text :style="{fontSize:fontSize,fontWeight:fontWeight,color:color}">{{title}}</text>
+			<slot name="mid" v-if="isMid">
+				
+			</slot>
+			<text v-else :style="{fontSize:fontSize,fontWeight:fontWeight,color:color}">{{title}}</text>
 		</view>
 		<view class="header-right">
 			<slot name="right">
@@ -39,6 +42,10 @@
 				type:Boolean,
 				default:false
 			},
+			isMid:{
+				type:Boolean,
+				default:false
+			},
 			title:{
 				type:String,
 				default:''

main.js

@@ -6,6 +6,7 @@ let i18nConfig = {
   messages
 }
 
+window.wx = {}
 // #ifndef VUE3
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'

package-lock.json

@@ -111,6 +111,15 @@
                 "gopd": "^1.2.0"
             }
         },
+        "echarts": {
+            "version": "5.6.0",
+            "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
+            "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+            "requires": {
+                "tslib": "2.3.0",
+                "zrender": "5.6.1"
+            }
+        },
         "es-define-property": {
             "version": "1.0.1",
             "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -293,6 +302,19 @@
                 "object-inspect": "^1.13.3",
                 "side-channel-map": "^1.0.1"
             }
+        },
+        "tslib": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+            "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        },
+        "zrender": {
+            "version": "5.6.1",
+            "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
+            "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+            "requires": {
+                "tslib": "2.3.0"
+            }
         }
     }
 }

package.json

@@ -77,6 +77,7 @@
         "axios-adapter-uniapp": "^0.1.4",
         "axios-miniprogram-adapter": "^0.3.4",
         "crypto-js": "^4.2.0",
+        "echarts": "^5.1.2",
         "dayjs": "^1.11.13",
         "qs": "^6.14.0"
     }

pages.json

@@ -47,6 +47,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/user/finance",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/contract/check",
 			"style": {

pages/mine/mine.vue

@@ -303,7 +303,7 @@ export default {
 					id: 12,
 					title: "财务",
 					url: '/static/mine/tool_cw.png',
-					path: "/pages/finance/finance",
+					path: "/pages/user/finance",
 				}, {
 					id: 11,
 					title: "股东行权",

pages/user/finance.vue

@@ -0,0 +1,260 @@
+<template>
+	<view class="content">
+		<TopSafe></TopSafe>
+		<Header :isMid="true" borderWidth="1rpx"  >
+			<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="contract-view">
+			<view class="tu-view" id="chart" v-if="topSelect == 0"></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>
+					<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" id="chartTwo" v-if="topSelect == 1"></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>
+					<text class="text-24 text-fu" style="margin-top:12rpx">
+						占比:
+						<text :style="{color:dataTwoColor[index]}">{{item.value}}%</text>
+						
+					</text>
+				</view>
+				
+			</view>
+		</view>
+	</view>
+</template>
+
+<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';
+
+export default {
+	components: { Header,TopSafe },
+	data() {
+		return {
+			topSelect:0,
+			topList:[
+				'股权架构','营收数据'
+			],
+			myChart:null,
+			myChartTwo:null,
+			data: [
+				{ value: '51', name: '股东' },
+				{ value: '29', name: '推广' },
+				{ value: '10', name: '团队' },
+				{ value: '10', name: '基金会' },
+								
+			],
+			dataColor:['#FC5E05', '#BC52FD', '#FCC139', '#0474E0'],
+			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'],
+		
+		};
+	},
+	onReady(){
+		
+		
+		// this.initTwo();
+	},
+	onLoad() {
+		setTimeout(()=>{
+			this.init()
+		},500)
+	},
+	methods: {
+		onTop(index){
+			if(this.topSelect !== index){
+				this.topSelect = index;
+				if(index == 0){
+					setTimeout(()=>{
+						this.init()
+					},500)
+				}else{
+					setTimeout(()=>{
+						this.initTwo()
+					},500)
+				}
+				
+				
+			}
+		},
+		init(){
+			let chartDom = document.getElementById('chart');
+			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);
+		},
+		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
+				}
+			  ]
+			};
+			this.myChartTwo.setOption(option);
+		}
+		
+	}
+}
+</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;
+			
+		}
+	}
+.contract-view{
+	width:100%;
+	height:calc(100% - 88rpx - 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;
+	.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;
+		box-sizing: border-box;
+		.yuan{
+			border-radius: 50%;
+			width:28rpx;
+			min-height:28rpx;
+		}
+	}
+	
+}
+</style>