fix
This commit is contained in:
X1627315083
267
src/component/affiliate/home.vue
Normal file
267
src/component/affiliate/home.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<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">
|
||||
213
|
||||
</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)=>{
|
||||
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>
|
||||
Reference in New Issue
Block a user