增加音乐,摇一摇,服务等页面
This commit is contained in:
cansnow
@@ -0,0 +1,563 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title=" " :title-bold="true" :title-size="34"
|
||||
:background="{ background: '#57ab6d'}"
|
||||
back-icon-name="close" back-icon-size="34" back-icon-color="#f0f0f0"
|
||||
:border-bottom="false">
|
||||
</u-navbar>
|
||||
<view>
|
||||
<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
|
||||
style="'width: 100%;background-color: #ffffff;height:88.5vh">
|
||||
<!-- 头部块 -->
|
||||
<view style="padding-bottom: 20rpx;background-color:#57ab6d;">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<!-- 年度账单/月度账单 -->
|
||||
<view style="width: 500rpx;">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTab" @change="tabChange"
|
||||
:font-size="32" :height="90" :bar-width="100"
|
||||
active-color="#ffffff" inactive-color="#d6d6d6" bg-color="#57ab6d"></u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 月份,年份,类型 -->
|
||||
<view style="padding:40rpx;width:100%;padding-bottom: 30rpx;"
|
||||
class="u-flex u-row-between u-col-center">
|
||||
<view style="width: 50%;" v-if="currentTab==0">
|
||||
<u-icon name="arrow-down" size="24" color="#ffffff" @click="openTimePicker('month')"
|
||||
:label="currentBillObj.year+'年'+currentBillObj.month+'月'"
|
||||
label-color="#ffffff"
|
||||
label-size="30rpx" label-pos="left"
|
||||
margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view style="width: 50%;" v-if="currentTab==1">
|
||||
<u-icon name="arrow-down" size="24" color="#ffffff" @click="openTimePicker('year')"
|
||||
:label="currentBillObj.year+'年'"
|
||||
label-color="#ffffff"
|
||||
label-size="30rpx" label-pos="left"
|
||||
margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center" style="color:#d6d6d6;width: 50%;">
|
||||
<view :class="currentBillObj.currentbillTitle==0?'active-bill-type':'bill-type'" @click="changebillTitle(0)">支出</view>
|
||||
<view :class="currentBillObj.currentbillTitle==1?'active-bill-type':'bill-type'" @click="changebillTitle(1)">收入</view>
|
||||
<view :class="currentBillObj.currentbillTitle==2?'active-bill-type':'bill-type'" @click="changebillTitle(2)">其他</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付类型摘要信息 -->
|
||||
<view v-if="currentBillObj.currentbillTitle!=2"
|
||||
style="padding:40rpx;background-color:#57ab6d;width:100%;padding-top: 20rpx;">
|
||||
<view style="color:#d6d6d6;font-size: 26rpx;">
|
||||
共{{currentBillObj.currentbillTitle==0?'支出':'收入'}}{{currentBillObj.tradeCount}}笔，合计
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-top"
|
||||
style="color: #ffffff;font-size: 26px;margin-top: 20rpx;font-weight: bold;">
|
||||
<view style="margin-right:16rpx;font-size: 22px;margin-top: 4rpx;">¥</view>
|
||||
<view class="u-m-l-10">{{Number(currentBillObj.tradeAmount).toFixed(2)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 白色块 -->
|
||||
<view class="u-p-20" v-show="currentTab==0"
|
||||
style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view class="u-flex u-row-between u-col-center u-p-30"
|
||||
style="background-color: #f0f0f0;border-radius: 20rpx;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-20">
|
||||
<u-icon name="red-packet-fill" color="#57ab6d" size="32"></u-icon>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-line-2" style="color:#909399;">使用记账本，查看分类统计(餐饮、交通等)</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon name="arrow-right" color="#909399" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="currentBillObj.currentbillTitle!=2" >
|
||||
<!-- 图表 -->
|
||||
<view class="u-p-20">
|
||||
<view class="u-font-34 ">{{currentBillObj.currentbillTitle==0?'每月支出':'每月收入'}}对比</view>
|
||||
<view style="height: 500rpx;">
|
||||
<l-echart ref="chart"></l-echart>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 排行榜 -->
|
||||
<view class="u-p-20">
|
||||
<view class="u-m-b-50">{{currentBillObj.currentbillTitle==0?'支出':'收入'}}排行榜</view>
|
||||
|
||||
<view class="u-flex u-row-between u-col-center u-m-b-30"
|
||||
v-for="(rankItem,index) in monthRankingkList" :key="index">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-30" style="width: 40rpx;">{{rankItem.id}}</view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-image width="60rpx" height="60rpx" shape="circle" :src="rankItem.iconSrc"></u-image>
|
||||
</view>
|
||||
<view class="u-m-l-20 u-line-1" style="width: 350rpx;">{{rankItem.billTitle}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view style="color: #000000;font-weight: bold;width: 150rpx;text-align: right;">
|
||||
<text>¥</text>
|
||||
<text>{{Number(rankItem.amountValue).toFixed(2)}}</text>
|
||||
</view>
|
||||
<view class="u-m-l-20">
|
||||
<u-icon name="arrow-right" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-show="currentBillObj.currentbillTitle==2">
|
||||
<view style="padding-top: 20%;">
|
||||
<!-- 可以给src图片 -->
|
||||
<u-empty text="无其他资金流转记录" mode="data" :icon-size="100"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-40" v-show="currentTab==1"
|
||||
style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view v-if="currentBillObj.currentbillTitle!=2">
|
||||
<view class="u-font-34">
|
||||
{{currentBillObj.currentbillTitle==0?'支出':'收入'}}构成
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-40" v-for="(yearBillItem,index) in yearBillBuildArr" :key="index">
|
||||
<u-row>
|
||||
<u-col :span="4">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-image :src="yearBillItem.iconSrc" :width="36" :height="36"></u-image>
|
||||
</view>
|
||||
<view class="u-m-l-20 u-line-1"
|
||||
style="width: 70%;font-size: 28rpx;">
|
||||
{{yearBillItem.billTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4">
|
||||
<view>
|
||||
<u-line-progress :show-percent="false" :height="16"
|
||||
:active-color="yearBillItem.color"
|
||||
:percent="yearBillItem.percentValue"></u-line-progress>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4">
|
||||
<view style="width: 100%;" class="u-flex u-row-right u-col-center">
|
||||
<view style="text-align: right;font-weight: bold;color:#000000;font-size: 26rpx;">
|
||||
¥{{Number(yearBillItem.amountValue).toFixed(2)}}
|
||||
</view>
|
||||
<view class="u-m-l-10">
|
||||
<u-icon name="arrow-right" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view v-if="currentBillObj.currentbillTitle==2">
|
||||
<view class="u-font-34">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view> 个人资金流转</view>
|
||||
<view class="u-m-l-16">
|
||||
<u-icon name="info-circle" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-40">
|
||||
<view class="u-flex u-row-between u-col-center u-m-t-40"
|
||||
v-for="(otherItem,otherIndex) in yearBillBuildOtherArr" :key="otherIndex">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-icon name="rmb-circle" color="#ff9900" size="40"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-l-20 u-font-32">{{otherItem.title}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view style="font-weight: bold;">¥{{Number(otherItem.amountValue).toFixed(2)}}</view>
|
||||
<view class="u-m-l-10">
|
||||
<u-icon name="arrow-right" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 月份查询筛选-->
|
||||
<u-picker mode="time" v-model="monthPickerShow" :params="monthTimeParams" end-year="2026"
|
||||
confirm-color="#3c2e55" confirm-text="确定" @confirm="monthTimePickerConfirm"
|
||||
:show-time-tag="false"></u-picker>
|
||||
<!-- 年度查询筛选-->
|
||||
<u-picker mode="time" v-model="yearPickerShow" :params="yearTimeParams" end-year="2026"
|
||||
confirm-color="#3c2e55" confirm-text="确定" @confirm="yearTimePickerConfirm"
|
||||
:show-time-tag="false"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-PLUS
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/app/echarts.min';
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/web/echarts.esm.min';
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//年月tab切换器
|
||||
tabList:[
|
||||
{name:"月账单"},{name:"年账单"}
|
||||
],
|
||||
//当期年月tab的下标
|
||||
currentTab:0,
|
||||
//参数
|
||||
currentBillObj:{
|
||||
year:new Date().getFullYear(), //年
|
||||
month:new Date().getMonth()+1, //月
|
||||
currentbillTitle:0 ,//0支出 ,1收入 2其他
|
||||
tradeCount:264,
|
||||
tradeAmount:216734.8
|
||||
},
|
||||
monthPickerShow:false, //月份时间选择器开关
|
||||
yearPickerShow:false, //年度事件选择器开关
|
||||
//时间参数-月
|
||||
monthTimeParams:{
|
||||
year: true,
|
||||
month: true,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
timestamp: true,
|
||||
},
|
||||
//时间参数-年
|
||||
yearTimeParams:{
|
||||
year: true,
|
||||
month: false,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
timestamp: true,
|
||||
},
|
||||
//月度排行榜
|
||||
monthRankingkList:[],
|
||||
//年度账单构成
|
||||
yearBillBuildArr:[
|
||||
{
|
||||
billTitle:"转账",
|
||||
percentValue:70,
|
||||
amountValue:513080,
|
||||
color:"#F29100",
|
||||
iconSrc:"/static/image/bill/zhuanzhang.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"消费支出",
|
||||
percentValue:20,
|
||||
amountValue:231160.58,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/xiaofei.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"发红包",
|
||||
percentValue:10,
|
||||
amountValue:44650,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
}
|
||||
],
|
||||
//年度账单其他类型的数据结构
|
||||
yearBillBuildOtherArr:[],
|
||||
//图表插件 :https://ext.dcloud.net.cn/plugin?id=4899
|
||||
//图表的配置 参考:https://echarts.apache.org/zh/option.html#xAxis.axisLine.lineStyle.join
|
||||
chartOption: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
color: '#909399',
|
||||
fontSize:10,
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgb(172, 233, 189)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show:false,
|
||||
},
|
||||
series: [{
|
||||
data: [0,0,0,0,0,0],
|
||||
type: 'bar',//柱状
|
||||
showBackground:false,//是否显示阴影
|
||||
color:'rgb(172, 233, 189)',//柱体颜色
|
||||
borderColor:'#fff',//柱体背景颜色
|
||||
barWidth:20,//柱条的宽度，
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
fontSize:9,
|
||||
color:'inherit',
|
||||
formatter:function(params){
|
||||
//console.log(params);
|
||||
let val= params.value;
|
||||
//console.log("数值",val);
|
||||
if(val<10000){
|
||||
return "¥"+val.toFixed(2);
|
||||
}else{
|
||||
return "¥"+(val/10000).toFixed(1)+"万"
|
||||
}
|
||||
}
|
||||
},
|
||||
}]
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
mounted:function(){
|
||||
let that=this;
|
||||
that.$refs.chart.init(echarts, chart=> {
|
||||
that.getMonthData();
|
||||
chart.on('click',function(params){
|
||||
that.listenerChartClick(params.dataIndex)
|
||||
})
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
//年账单,月账单切换事件
|
||||
tabChange:function(index){
|
||||
this.currentTab = index;
|
||||
if(index==1){
|
||||
this.getYearBillData();
|
||||
}else{
|
||||
//获取月度数据,以图表为例
|
||||
this.getMonthData();
|
||||
}
|
||||
},
|
||||
//打开时间选择器
|
||||
openTimePicker:function(type){
|
||||
let that=this;
|
||||
if(type=='month'){
|
||||
that.monthPickerShow=true;
|
||||
}
|
||||
if(type=='year'){
|
||||
that.yearPickerShow=true;
|
||||
}
|
||||
},
|
||||
//选择时间变化-月度
|
||||
monthTimePickerConfirm:function(obj){
|
||||
let year=obj.year;
|
||||
let monthStr=obj.month;
|
||||
let month= (new Date(obj.timestamp*1000)).getMonth()+1;
|
||||
console.log("选择的月份",month);
|
||||
this.currentBillObj.month=month;
|
||||
this.currentBillObj.year=year;
|
||||
this.getMonthData();
|
||||
},
|
||||
//选择时间变化-年度
|
||||
yearTimePickerConfirm:function(obj){
|
||||
let year=obj.year;
|
||||
this.currentBillObj.year=year;
|
||||
this.getYearBillData();
|
||||
},
|
||||
//改变账单类型 0支出 1收入 2其他
|
||||
changebillTitle:function(index){
|
||||
this.currentBillObj.currentbillTitle=index;
|
||||
//年度账单
|
||||
if(this.currentTab==1){
|
||||
this.getYearBillData();
|
||||
}
|
||||
//获取月度数据,以图表为例
|
||||
if(this.currentTab==0&&index!=2){
|
||||
this.getMonthData();
|
||||
}
|
||||
},
|
||||
//获取图表数据
|
||||
getMonthData:function(){
|
||||
let that=this;
|
||||
let param={
|
||||
currentTab:this.currentTab, //0月度 1年度
|
||||
currentBillType:this.currentBillObj.currentbillTitle,//0支出 1收入 2其他
|
||||
year:this.currentBillObj.year, //当前年度
|
||||
month:this.currentBillObj.month //当前月度(如果当前选择是年度,month参数要忽略的)
|
||||
};
|
||||
console.log("获取月度账单参数",param);
|
||||
if(this.currentTab==0){
|
||||
if(this.currentBillObj.currentbillTitle==1){
|
||||
//下面数据临时写死,实际后端请求要得到柱状图的的x,y坐标系的数据以及月度排行数据
|
||||
let xData=['6月', '7月', '8月', '9月', '10月', '11月'];
|
||||
let currentMonthIndex= xData.findIndex(item=>item.indexOf(that.currentBillObj.month)!=-1);
|
||||
//console.log("currentMonthIndex",currentMonthIndex);
|
||||
let dataArr=[21000,84000,16000,98000,102000,216743];
|
||||
let currentMonthValue= dataArr[currentMonthIndex];
|
||||
dataArr[currentMonthIndex]={
|
||||
value:currentMonthValue,
|
||||
itemStyle:{
|
||||
color:"#19bE6B"
|
||||
}
|
||||
}
|
||||
that.chartOption.xAxis.data=xData;
|
||||
that.chartOption.series[0].data=dataArr;
|
||||
that.$refs.chart.setOption(this.chartOption);
|
||||
//模拟后台数据
|
||||
that.currentBillObj.tradeCount=267;//交易记录次数
|
||||
that.currentBillObj.tradeAmount=318962.2;//交易记录总额
|
||||
//月度排行数据
|
||||
that.monthRankingkList=[
|
||||
{id:1,iconSrc:"/static/image/bill/zhuanzhang.jpg",billTitle:"转账",amountValue:182204.3},
|
||||
{id:2,iconSrc:"/static/image/bill/xiaofei.jpg",billTitle:"二维码收付款",amountValue:21523.5},
|
||||
{id:3,iconSrc:"/static/image/bill/hongbao.jpg",billTitle:"微信红包",amountValue:8550},
|
||||
];
|
||||
}else{
|
||||
let xData=['6月', '7月', '8月', '9月', '10月', '11月'];
|
||||
let currentMonthIndex= xData.findIndex(item=>item.indexOf(that.currentBillObj.month)!=-1);
|
||||
//console.log("currentMonthIndex",currentMonthIndex);
|
||||
let dataArr=[55000,102000,38000,116000,114000,265400];
|
||||
let currentMonthValue= dataArr[currentMonthIndex];
|
||||
dataArr[currentMonthIndex]={
|
||||
value:currentMonthValue,
|
||||
itemStyle:{
|
||||
color:"#19bE6B"
|
||||
}
|
||||
}
|
||||
that.chartOption.xAxis.data=xData;
|
||||
this.chartOption.series[0].data=dataArr;//模拟后台数据
|
||||
this.$refs.chart.setOption(this.chartOption);
|
||||
that.currentBillObj.tradeCount=324;//交易记录次数
|
||||
that.currentBillObj.tradeAmount=216734.8;//交易记录总额
|
||||
that.monthRankingkList=[
|
||||
{id:1,iconSrc:"/static/image/bill/zhuanzhang.jpg",billTitle:"转账",amountValue:182204.3},
|
||||
{id:2,iconSrc:"/static/image/bill/xiaofei.jpg",billTitle:"二维码收付款",amountValue:21523.5},
|
||||
{id:3,iconSrc:"/static/image/bill/hongbao.jpg",billTitle:"微信红包",amountValue:8550},
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
//获取年账单
|
||||
getYearBillData:function(){
|
||||
let that=this;
|
||||
let param={
|
||||
currentTab:this.currentTab, //0月度 1年度
|
||||
currentBillType:this.currentBillObj.currentbillTitle,//0支出 1收入 2其他
|
||||
year:this.currentBillObj.year, //当前年度
|
||||
month:this.currentBillObj.month //当前月度(如果当前选择是年度,month参数要忽略的)
|
||||
};
|
||||
console.log("获取年度度账单参数",param);
|
||||
if(this.currentTab==1){
|
||||
that.currentBillObj.currentbillTitle;
|
||||
//收入
|
||||
if(that.currentBillObj.currentbillTitle==0){
|
||||
that.currentBillObj.tradeCount=3120;
|
||||
that.currentBillObj.tradeAmount=3816734.8;
|
||||
this.yearBillBuildArr=[
|
||||
{
|
||||
billTitle:"转账",
|
||||
percentValue:78,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.78,
|
||||
color:"#F29100",
|
||||
iconSrc:"/static/image/bill/zhuanzhang.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"消费支出",
|
||||
percentValue:21,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.21,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/xiaofei.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"发红包",
|
||||
percentValue:1,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.01,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
}
|
||||
];
|
||||
}
|
||||
//支出
|
||||
if(that.currentBillObj.currentbillTitle==1){
|
||||
that.currentBillObj.tradeCount=3878;
|
||||
that.currentBillObj.tradeAmount=4201384.68;
|
||||
this.yearBillBuildArr=[
|
||||
{
|
||||
billTitle:"收转账",
|
||||
percentValue:80,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.8,
|
||||
color:"#F29100",
|
||||
iconSrc:"/static/image/bill/zhuanzhang.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"二维码收款",
|
||||
percentValue:10,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.1,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"收红包",
|
||||
percentValue:5,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.05,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"退款",
|
||||
percentValue:3,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.03,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/xiaofei.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"其他",
|
||||
percentValue:2,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.02,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
}
|
||||
];
|
||||
}
|
||||
//其他
|
||||
if(that.currentBillObj.currentbillTitle==2){
|
||||
this.yearBillBuildOtherArr=[
|
||||
{title:"零钱提现",amountValue:1001},
|
||||
{title:"零钱提现",amountValue:430}
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
//监听柱状图点击事件
|
||||
listenerChartClick(dataIndex){
|
||||
console.log("dataIndex",dataIndex);
|
||||
let monthIndex= this.chartOption.xAxis.data[dataIndex];
|
||||
this.currentBillObj.month=monthIndex.replace('月','');
|
||||
this.getMonthData();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bill-type{
|
||||
border-radius: 30rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.active-bill-type{
|
||||
border: 1rpx solid #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user