|
|
@@ -1,6 +1,54 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<u-navbar title="充值记录" title-color="#101010"></u-navbar>
|
|
|
+ <view class="tabs-box" v-if="!popShow" >
|
|
|
+ <view class="tabs1" v-show="tenantList.length>1" :style="{width: tenantList.length>4 ? '' : '100%'}" >
|
|
|
+ <u-tabs :list="tenantList1" inactive-color="#777777" active-color="#333333 "
|
|
|
+ bg-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="icon" @click="popShow=true" v-if="tenantList.length >= 4" >
|
|
|
+ <u-icon name="arrow-down" color="#777777" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 标签弹出层 -->
|
|
|
+ <u-popup v-model="popShow" length="80%" @close="keyword=''" duration="10" mode="top" :negative-top="188" border-radius="32">
|
|
|
+ <u-navbar title="充值记录" title-color="#101010"></u-navbar>
|
|
|
+
|
|
|
+ <view class="head-head">
|
|
|
+ <u-search placeholder="请输入关键字" :show-action="false" v-model="keyword"></u-search>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="head-head-placeholder ">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="popup-tabs" v-if="false">
|
|
|
+ <view class="tabs1">
|
|
|
+ <!-- <u-tabs :list="tenantList1" inactive-color="#777777" active-color="#333333 "
|
|
|
+ bg-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
|
|
|
+ <u-tabs :list="tenantList1" :is-scroll="false" :current="current" @change="change"></u-tabs >
|
|
|
+ </view>
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabs-options">
|
|
|
+ <view class="item" v-for="(item, index) in tenantList"
|
|
|
+ v-show="keyword==''||(item.name&&item.name.indexOf(keyword)!=-1)"
|
|
|
+
|
|
|
+ :class="{
|
|
|
+ 'item-index' : item.id==formData.tenantId
|
|
|
+ }"
|
|
|
+ :key="index"
|
|
|
+ @click="merchantChange(item,index)">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <u-divider nonetext="没有找到相关内容"
|
|
|
+ border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+
|
|
|
<!-- 折线图 -->
|
|
|
<view class="chart-box">
|
|
|
<view class="chart">
|
|
|
@@ -75,6 +123,13 @@
|
|
|
pageSize:9999,
|
|
|
},
|
|
|
|
|
|
+ popShow:false,
|
|
|
+ keyword:'',
|
|
|
+ current:0,
|
|
|
+ current1: 0,
|
|
|
+ current2: 0,
|
|
|
+ tenantList:[],
|
|
|
+ tenantList1:[],
|
|
|
endYear:'',
|
|
|
queryMonth:"",
|
|
|
params: {
|
|
|
@@ -119,8 +174,8 @@
|
|
|
this.formData.startDate=date.getFullYear()+"-"+(date.getMonth() + 1) +"-1"
|
|
|
this.queryMonth=date.getFullYear()+"年"+(date.getMonth() + 1) +"月"
|
|
|
|
|
|
- this.rechargeRecord();
|
|
|
- this.rechargeRecordGraph();
|
|
|
+ this.getTenantList()
|
|
|
+
|
|
|
},
|
|
|
computed:{
|
|
|
|
|
|
@@ -141,6 +196,75 @@
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
+ merchantChangeApi(){
|
|
|
+ this.rechargeRecord();
|
|
|
+ this.rechargeRecordGraph();
|
|
|
+ },
|
|
|
+ change(index) {
|
|
|
+
|
|
|
+ this.current = index;
|
|
|
+ this.formData.tenantId = this.tenantList1[index].id;
|
|
|
+ this.popShow = false;
|
|
|
+ this.merchantChangeApi()
|
|
|
+ },
|
|
|
+ merchantChange(item, index) {
|
|
|
+ // if(this.current==0){
|
|
|
+ // this.current=1;
|
|
|
+ // }
|
|
|
+ this.formData.tenantId= item.id;
|
|
|
+
|
|
|
+
|
|
|
+ //this.$forceUpdate()
|
|
|
+
|
|
|
+ this.getTenantListSort(this.tenantList)
|
|
|
+ this.merchantChangeApi()
|
|
|
+ this.popShow = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ getTenantList(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.tenantList().then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+
|
|
|
+ var list=response.data.tenantInfoList;
|
|
|
+ this.formData.tenantId=list[0].id
|
|
|
+
|
|
|
+ this.getTenantListSort(list)
|
|
|
+ this.merchantChangeApi()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTenantListSort(list){
|
|
|
+ for(var i in list){
|
|
|
+ var obj=list[i]
|
|
|
+ if(this.formData.tenantId==obj.id){
|
|
|
+ var obj1=list[this.current];
|
|
|
+ list[this.current]=obj;
|
|
|
+ list[i]=obj1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.tenantList=list;
|
|
|
+ var mList1 = [];
|
|
|
+
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ if (i >= 4) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ mList1.push(list[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tenantList1 = mList1;
|
|
|
+ },
|
|
|
extraInfoText(extraInfo){
|
|
|
var obj=JSON.parse(extraInfo)
|
|
|
if(obj.outOrderNo){
|
|
|
@@ -201,7 +325,9 @@
|
|
|
},
|
|
|
rechargeRecordGraph(){
|
|
|
|
|
|
- API.rechargeRecordGraph().then((response) => {
|
|
|
+ API.rechargeRecordGraph({
|
|
|
+ tenantId:this.formData.tenantId
|
|
|
+ }).then((response) => {
|
|
|
|
|
|
var list=response.data;
|
|
|
|
|
|
@@ -320,6 +446,94 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+
|
|
|
+ // 标签
|
|
|
+ .tabs-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16rpx 32rpx 16rpx 0;
|
|
|
+ .tabs{
|
|
|
+ width: 96%;
|
|
|
+ }
|
|
|
+ /deep/.u-tabs{
|
|
|
+ background-color: inherit !important
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 标签
|
|
|
+ .tabs-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16rpx 32rpx 16rpx 0;
|
|
|
+ .tabs{
|
|
|
+ width: 96%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs-box{
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16rpx 32rpx 16rpx 32rpx;
|
|
|
+ .tabs1{
|
|
|
+ width: 96%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .popup-tabs {
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 32rpx;
|
|
|
+ padding-right: 32rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ .tabs1 {
|
|
|
+ width: 88%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-tab-item {
|
|
|
+ width: 25% !important;
|
|
|
+ flex: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-options {
|
|
|
+ //display: flex;
|
|
|
+ padding: 24rpx 32rpx ;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ //width: 25%;
|
|
|
+ color:rgb(119, 119, 119);
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .item-index{
|
|
|
+ color: rgb(51, 51, 51);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .head-head{
|
|
|
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
+ background: #fff;
|
|
|
+ padding:24rpx;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 80rpx;
|
|
|
+ z-index: 991;
|
|
|
+ }
|
|
|
+ .head-head-placeholder{
|
|
|
+ height: 112rpx;
|
|
|
+
|
|
|
+ }
|
|
|
// 折线图
|
|
|
.chart-box {
|
|
|
padding: 24rpx 32rpx;
|
zhengkaixin