aida_front/src/component/affiliate/home.vue

<template>
	<div class="affiliate_home">
		<div class="detail">
			<div class="detail_item">
				<div class="title">Invitation link</div>
				<div class="link" @click="copyLink">{{affiliateLink}}</div>
			</div>
			<div class="detail_item">
				<div class="title">Number of link visits</div>
				<div class="num">{{linkVisits}}<span>times</span></div>
			</div>
			<div class="detail_item">
				<div class="title">Number of Invitations</div>
				<div class="num">{{people}}<span>people</span></div>
			</div>
			<div class="detail_item">
				<div class="title">Earned commission</div>
				<div class="num"><sup>$</sup>{{earned}}<span>HKD</span></div>
			</div>
			<div class="detail_item">
				<div class="title">Total commission</div>
				<div class="num"><sup>$</sup>{{total}}<span>HKD</span></div>
			</div>
		</div>
		<div class="echarts_box">
			<div class="title generalModel_state">
				<!-- <div class="radio">
					<label>
						<input name="pric" type="radio" value="monthly" v-model="current.type" @change="setPricType('monthly')">
						Monthly
					</label>
					<label>
						<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
						Yearly
					</label>
				</div> -->
				<div class="date generalModel_state_item">
					<a-date-picker
						class="range_picker"
						v-model:value="rangePickerValue"
						picker="year"
						valueFormat="YYYY"
					>
						<template #suffixIcon>
							<span
								class="icon iconfont range_picker_icon icon-rili"
							></span>
						</template>
					</a-date-picker>
				</div>
				<div class="gallery_btn" style="margin-right: 1rem;" @click="search">Search</div>
			</div>
			<div class="echarts" ref="echarts">
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, nextTick, computed, reactive, toRefs, onMounted } from "vue";
import { Https } from "@/tool/https";
import { useI18n } from "vue-i18n";
import type { Dayjs } from 'dayjs';

import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { color } from "echarts";
import { message } from "ant-design-vue";

export default defineComponent({
    components: {
    },
    setup() {
		const affiliateData = reactive({
			rangePickerValue:'2024',
			current:{
				type:'year',
			} as any,	
			affiliateLink:'-------------',
			linkVisits:'--',
			people:'--',
			earned:'--',
			total:'--',

			echartsList:[]
		})
		const affiliateDom = reactive({
			echarts:null,
		})
		const setPricType=(str:any)=>{
			affiliateData.current.type = str
		}
		const getUserInfo = ()=>{
			Https.axiosGet(Https.httpUrls.personalCenter).then((rv)=>{
				affiliateData.affiliateLink = rv.link
				affiliateData.linkVisits = rv.linkViewCount
				affiliateData.people = rv.visits
				affiliateData.earned = rv.unpaidEarnings
				affiliateData.total = rv.totalEarnings
			})
			search()
		}
		const search = ()=>{
			let year = affiliateData.rangePickerValue?affiliateData.rangePickerValue:''
			let data = {
				year,
			}
			Https.axiosGet(Https.httpUrls.getPersonalMonthlyIncome,{params:data}).then((rv)=>{
				let value = rv.map((item:any,index:any)=>{
				    return {product:`${index+1}`,'Earned commission':item}
				})
				console.log(value)
				setEcharts(value)
			})
		}
		const copyLink = (e:any)=>{
			if(!navigator?.clipboard?.writeText)return
			navigator.clipboard.writeText(e.target.innerText)
                .then(() => {
					message.success('Copy Successful')
                })
                .catch(err => {
                    console.error("复制失败:", err);
                });
		}
		let myChart:any
		
		let setEcharts = (data:any) =>{
			if (myChart) {
				myChart.setOption({
					dataset: {
						dimensions: ['product', 'Earned commission'],
						source: data
					},
				});
			}else{
				echarts.use([
					DatasetComponent,
					TooltipComponent,
					GridComponent,
					LegendComponent,
					BarChart,
					CanvasRenderer
				]);

				var app = {};

				var chartDom = affiliateDom.echarts;
				myChart = echarts.init(chartDom);
				var option;
				option = {
					legend: {right: '0%'},
					tooltip: {
						
					},
					dataset: {
						dimensions: ['product', 'Earned commission'],
						source: data
					},
					xAxis: { type: 'category' },
					yAxis: {},
					series: [{ 
						type: 'bar',
						itemStyle:{
							borderRadius: [10, 10, 5, 5],
							color: '#7f43f6',
						} 
					}]
				} 
			};
			option && myChart.setOption(option);

		}
		onMounted(()=>{
			getUserInfo()
		})
		
        return {
			...toRefs(affiliateData),
			...toRefs(affiliateDom),
			setPricType,
			search,
			copyLink,
        };
    },
})
</script>

<style lang="less" scoped>
.affiliate_home{
	height: 100%;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	>.detail{
		display: flex;
		justify-content: space-between;
		margin-bottom: 3rem;
		>.detail_item{
		    padding: 2rem 3rem;
			background: #eeeff6;
			border-radius: 2rem;
			width: calc((100% - 1rem * 4) / 5 );
			>div{
				font-weight: 600;
			}
			>.title{
				margin-bottom: 1rem;
				font-size: 2rem;
				color: #666;
			}
			>.link{
				font-size: 1.8rem;
				color: #000;
				text-decoration-line: underline; 
				cursor: pointer;
			}
			>.num{
				font-size: 4rem;
				>span{
					font-size: 2rem;
				}

			}
		}
	}
	>.echarts_box{
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #fff;
		padding: 3rem;
		border-radius: 2rem;
		>.title{
			>.radio{
				margin-right: 3rem;
				display: flex;
				font-size: 1.8rem;
				font-weight: 400;
				>label{
					margin-right: 2rem;
					display: flex;
					cursor: pointer;
					input{
						margin-right: 1rem;
					}
				}
				>label:last-child{
					margin: 0;
				}
			}
			
		}
		>.echarts{
			flex: 1;
		}
	}
}
</style>