分润记录页面，增加标签卡，将充电订单分润和包月卡分润区分开；

pagesFinance/share/index.vue

@@ -2,8 +2,10 @@
 	<view>
 		<u-navbar :is-back="false">
 			<view class="navbar">
-				<view class="navbar-tit"  >分润记录</view>
-				<view class="navbar-screen" @click="popupShow = true"><span>筛选</span><u-icon name="filter-2-fill" custom-prefix="custom-icon" color="#b0b8c8" size="32"></u-icon></view>
+				<view class="navbar-tit">分润记录</view>
+				<view class="navbar-screen" @click="popupShow = true"><span>筛选</span>
+					<u-icon name="filter-2-fill" custom-prefix="custom-icon" color="#b0b8c8" size="32"></u-icon>
+				</view>
 			</view>
 		</u-navbar>
 		<u-popup v-model="popupShow" mode="top" height="80%">
@@ -12,173 +14,229 @@
 					<view class="screen-item">
 						<view class="screen-head">查询日期</view>
 						<view class="screen-main2">
-							
+
 							<u-calendar v-model="showdate" mode="date" @change="changedate"></u-calendar>
-							
-							<u-input :value="queryDate?queryDate:'选择时间筛选'" :type="type" :border="border" @click="showdate = true" />
-						<!-- 	
+
+							<u-input :value="queryDate?queryDate:'选择时间筛选'" :type="type" :border="border"
+								@click="showdate = true" />
+							<!-- 	
 							<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
-						 --></view>
+						 -->
+						</view>
 					</view>
 					<view class="screen-item">
 						<view class="screen-head">充电桩类型</view>
 						<view class="screen-main">
-							<view 
-							:class="{
+							<view :class="{
 								active:selecttype==''
-							}" @click="selecttype=''"
-							class="screen-entry ">全部</view>
-							<view 
-							:class="{
+							}" @click="selecttype=''" class="screen-entry ">全部</view>
+							<view :class="{
 								active:selecttype=='0'
-							}" @click="selecttype='0'"
-							
-							class="screen-entry type1">自行车充电</view>
-							<view 
-							:class="{
+							}" @click="selecttype='0'" class="screen-entry type1">自行车充电</view>
+							<view :class="{
 								active:selecttype=='2'
-							}" @click="selecttype='2'"
-							class="screen-entry type3">交流慢充</view>
-							<view 
-							:class="{
+							}" @click="selecttype='2'" class="screen-entry type3">交流慢充</view>
+							<view :class="{
 								active:selecttype=='1'
-							}" @click="selecttype='1'"
-							class="screen-entry type2">直流快充</view>
+							}" @click="selecttype='1'" class="screen-entry type2">直流快充</view>
 						</view>
 					</view>
 					<view class="screen-item">
 						<view class="screen-head">站点</view>
 						<view class="screen-main">
-							<view class="screen-entry  "
-							:class="{
+							<view class="screen-entry  " :class="{
 								active:selectstationId==''
-							}"
-							 @click="selectstationId=''"
-							>全部</view>
-							<view 
-							v-for="(item,i) in stationList" :key="i"
-							:class="{
+							}" @click="selectstationId=''">全部</view>
+							<view v-for="(item,i) in stationList" :key="i" :class="{
 								active:selectstationId==item.id
-							}"
-							 @click="selectstationId=item.id,selectdeviceNo=''"
-							class="screen-entry" >{{item.name}}</view>
-						
+							}" @click="selectstationId=item.id,selectdeviceNo=''" class="screen-entry">{{item.name}}</view>
+
 						</view>
 					</view>
-					<view 
-				
-					class="screen-item">
+					<view class="screen-item">
 						<view class="screen-head">桩号</view>
 						<view class="screen-main">
-							 
-							<view class="screen-entry  "
-							:class="{
+
+							<view class="screen-entry  " :class="{
 								active:selectdeviceNo==''
-							}"
-							 @click="selectdeviceNo=''"
-							>全部</view>
-							<view 
-							v-for="(item,i) in stationListSon" :key="i"
-							v-show="selectstationId?(selectstationId==item.stationId):true"
-							:class="{
+							}" @click="selectdeviceNo=''">全部</view>
+							<view v-for="(item,i) in stationListSon" :key="i"
+								v-show="selectstationId?(selectstationId==item.stationId):true" :class="{
 								active:selectdeviceNo==item.deviceNo
-							}"
-							
-							 @click="selectdeviceNo=item.deviceNo"
-							class="screen-entry" >{{item.name}}</view>
+							}" @click="selectdeviceNo=item.deviceNo" class="screen-entry">{{item.name}}</view>
 						</view>
 					</view>
 				</view>
 				<view class="screen-foot">
-					<view class="screen-btn-l"
-					 @click="resetBtn" >重置</view>
-					<view class="screen-btn-r" @click="okbtn" >确定</view>
+					<view class="screen-btn-l" @click="resetBtn">重置</view>
+					<view class="screen-btn-r" @click="okbtn">确定</view>
 				</view>
 			</view>
 		</u-popup>
-		<view class="detailed">
-				<view style="text-align: center;margin-top: 100px" v-if="!list.length">
-					<img src="@/assets/img/blankpage.png">
-					<view>查询为空</view>
+		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change" inactive-color="#acb2af"
+			active-color="#101010"></u-tabs>
+		<!-- 充电订单 -->
+		<view class="detailed" v-if="current==0">
+			<view style="text-align: center;margin-top: 100px" v-if="!list.length">
+				<img src="@/assets/img/blankpage.png">
+				<view>查询为空</view>
+			</view>
+
+			<view class="detailed-list" v-for="(item ,index) in list"
+				@click="gotoUrl('pagesFinance/share/details?id='+item.id)" :key="index">
+
+				<view class="detailed-time" v-if="item.show">
+					<p>{{item.showtime}}</p>
+
+					<p>共收{{showMap.get(item.showtime).num}}笔,{{showMap.get(item.showtime).amount}}元</p>
+
 				</view>
-				
-				<view class="detailed-list" v-for="(item ,index) in list"
-				@click="gotoUrl('pagesFinance/share/details?id='+item.id)"
-				:key="index">
-			 
-					<view class="detailed-time"    v-if="item.show">
-						<p>{{item.showtime}}</p>
-					
-						<p>共收{{showMap.get(item.showtime).num}}笔,{{showMap.get(item.showtime).amount}}元</p>
-						
+				<view class="detailed-item">
+					<view class="detailed-item-name" style="
+								    width: 70%;
+							">
+						<h2 class="showName">{{item.stationName}}/{{item.deviceName}}</h2>
+						<p>{{item.flowNo?item.flowNo:'无充电单号'}}</p>
 					</view>
-					<view class="detailed-item">
-						<view class="detailed-item-name" style="
+					<view class="detailed-item-name" style="
+								min-width: 60px;
+								width: 30%;
+							">
+
+						<h2 style="   text-align: end;">{{item.shareProfitAmount}}元</h2>
+						<p style="   text-align: end;">{{item.createTime?item.createTime.slice(10):''}}</p>
+					</view>
+
+				</view>
+
+				<view class="product_tip" v-if="item.status=='1'">
+					<view class="product_tip_bg"></view>
+					<p>已提现</p>
+				</view>
+			</view>
+			<u-divider v-if="list.length&&list.length == recordsTotal" color="#B6BDC3" style="margin-top:20px;"
+				bg-color="#f4f0f0">已经到底了</u-divider>
+		</view>
+		<!-- 包月卡 -->
+		<view class="" v-if="current==1">
+			<view class="detailed-list">
+
+				<view class="detailed-time">
+					<p>2022-07-19</p>
+
+					<p>今日分润 178.00</p>
+
+				</view>
+				<view class="detailed-item">
+					<view class="detailed-item-name" style="
 								    width: 70%;
 							">
-							<h2 class="showName">{{item.stationName}}/{{item.deviceName}}</h2>
-							<p>{{item.flowNo?item.flowNo:'无充电单号'}}</p>
-						</view>
-						<view class="detailed-item-name"  style="
+						<h2 class="showName">荆鹏软件园充电站</h2>
+						<p>包月卡卡号或用户ID</p>
+					</view>
+					<view class="detailed-item-name" style="
 								min-width: 60px;
 								width: 30%;
 							">
-							
-							<h2 style="   text-align: end;">{{item.shareProfitAmount}}元</h2>
-							<p style="   text-align: end;" >{{item.createTime?item.createTime.slice(10):''}}</p>
-						</view>
-						
+
+						<h2 style="   text-align: end;">100.00</h2>
+						<p style="   text-align: end;">15:21:11</p>
 					</view>
+
+				</view>
+				<view class="detailed-item">
+					<view class="detailed-item-name" style="
+							    width: 70%;
+						">
+						<h2 class="showName">荆鹏软件园充电站</h2>
+						<p>包月卡卡号或用户ID</p>
+					</view>
+					<view class="detailed-item-name" style="
+							min-width: 60px;
+							width: 30%;
+						">
+
+						<h2 style="   text-align: end;">22.00</h2>
+						<p style="   text-align: end;">15:21:11</p>
+					</view>
+
+				</view>
+				<view class="detailed-time">
+					<p>2022-07-18</p>
 				
-					<view  class="product_tip" v-if="item.status=='1'">
-						<view class="product_tip_bg"></view>
-						<p>已提现</p>
+					<p>今日分润 178.00</p>
+				
+				</view>
+				<view class="detailed-item">
+					<view class="detailed-item-name" style="
+								    width: 70%;
+							">
+						<h2 class="showName">荆鹏软件园充电站</h2>
+						<p>包月卡卡号或用户ID</p>
+					</view>
+					<view class="detailed-item-name" style="
+								min-width: 60px;
+								width: 30%;
+							">
+				
+						<h2 style="   text-align: end;">11.00</h2>
+						<p style="   text-align: end;">15:21:11</p>
 					</view>
+				
 				</view>
-			<u-divider v-if="list.length&&list.length == recordsTotal" color="#B6BDC3" style="margin-top:20px;" bg-color="#f4f0f0">已经到底了</u-divider>
-			
-			 
+				<view class="product_tip">
+					<view class="product_tip_bg"></view>
+					<p>已提现</p>
+				</view>
+			</view>
 		</view>
-		<Tabbar  ref="tabbarMain" :current="2"></Tabbar>
- 	</view>
+		<Tabbar ref="tabbarMain" :current="2"></Tabbar>
+	</view>
 </template>
 
 <script>
 	import Tabbar from '@/components/TabbarFinance.vue'
 	import * as API from '@/apis/finance.js'
 	import {
-		
+
 		currentTimeStamp,
 		parseUnixTime
 	} from '@/utils'
-	
+
 	export default {
 		data() {
 			return {
 				showdate: false,
 				startTime: "",
-				queryDate:"",		
+				queryDate: "",
 				endTime: "",
-				selecttype:"",
-				selectstationId:"",
-				selectdeviceNo:"",
-				title:"",
-				year:"",
-				startyear:"",
-				endyear:"",
+				selecttype: "",
+				selectstationId: "",
+				selectdeviceNo: "",
+				title: "",
+				year: "",
+				startyear: "",
+				endyear: "",
+				current: 0,
+				tabList: [{
+					name: '充电订单'
+				}, {
+					name: '包月卡'
+				}],
 				params: {
-			 					year: true,
-			 					month: false,
-			 					day: false,
-			 					hour: false,
-			 					minute: false,
-			 					second: false,
-								// timestamp: true,
-			 	},
-				form:{
-					
+					year: true,
+					month: false,
+					day: false,
+					hour: false,
+					minute: false,
+					second: false,
+					// timestamp: true,
 				},
-				 
+
+				form: {
+
+				},
+
 				pageIndex: 1,
 				recordsTotal: 0,
 				list: [],
@@ -207,16 +265,15 @@
 						customIcon: true,
 					},
 				],
-				showMap:null,
+				showMap: null,
 				current: 0,
 				value: '',
 				type: 'select',
 				show: false,
 				border: true,
-				stationList:[],
-				stationListSon:[],
-				actionSheetList: [
-					{
+				stationList: [],
+				stationListSon: [],
+				actionSheetList: [{
 						text: '男'
 					},
 					{
@@ -231,8 +288,8 @@
 		components: {
 			Tabbar
 		},
-		onShow(){
-			if(this.$refs.tabbarMain){
+		onShow() {
+			if (this.$refs.tabbarMain) {
 				this.$refs.tabbarMain.setcount(2);
 			}
 		},
@@ -243,146 +300,149 @@
 		},
 		onLoad() {
 			// this.queryDate=parseUnixTime(new Date(),"{y}-{m}-{d}")
-			 
-			this.startyear=new Date().getFullYear()
+
+			this.startyear = new Date().getFullYear()
 			console.log(this.startyear)
-			this.endyear=this.startyear-3
+			this.endyear = this.startyear - 3
 			console.log(this.endyear)
 		},
 		onReady() {
-			
+
 			this.getList()
 			this.getStation()
-			
+
 		},
 		methods: {
-			showDateMoth(date){
-				
-				var back=date;
-				if(date){
-					var k=	date.slice(5,6)
+			change(index) {
+				this.current = index;
+			},
+			showDateMoth(date) {
+
+				var back = date;
+				if (date) {
+					var k = date.slice(5, 6)
 					console.log(k)
-					if(k=='0'){
-						back=	date.slice(6,7)
-					}else{
-						back=	date.slice(5,7)
+					if (k == '0') {
+						back = date.slice(6, 7)
+					} else {
+						back = date.slice(5, 7)
 					}
-					
-					
+
+
 				}
 				return back;
 			},
 			changedate(e) {
 				console.log(e)
-				this.queryDate=e.result
-				
-				
+				this.queryDate = e.result
+
+
 			},
-			resetBtn(){
-			//	this.queryDate=parseUnixTime(new Date(),"{y}-{m}-{d}")
-				
-				this.year=""
-				 this.startTime=""
-				 this.endTime=""
-				this.selecttype=""
-				this.selectstationId=""
-				this.selectdeviceNo=""
+			resetBtn() {
+				//	this.queryDate=parseUnixTime(new Date(),"{y}-{m}-{d}")
+
+				this.year = ""
+				this.startTime = ""
+				this.endTime = ""
+				this.selecttype = ""
+				this.selectstationId = ""
+				this.selectdeviceNo = ""
 				this.pageIndex = 1;
 				this.form = {
-					queryDate:"",
-				 
+					queryDate: "",
+
 					pageIndex: this.pageIndex,
-					type:this.selecttype,
-					stationId:this.selectstationId,
-					deviceNo:this.selectdeviceNo,
+					type: this.selecttype,
+					stationId: this.selectstationId,
+					deviceNo: this.selectdeviceNo,
 				};
-				this.popupShow=false;
+				this.popupShow = false;
 				this.list = [];
 				this.getList()
-				
+
 			},
-			okbtn(){
-				this.popupShow=false;
+			okbtn() {
+				this.popupShow = false;
 				this.pageIndex = 1;
-				
+
 				this.form = {
-					queryDate:this.queryDate,
-					
+					queryDate: this.queryDate,
+
 					pageIndex: this.pageIndex,
-					type:this.selecttype,
-					stationId:this.selectstationId,
-					deviceNo:this.selectdeviceNo,
+					type: this.selecttype,
+					stationId: this.selectstationId,
+					deviceNo: this.selectdeviceNo,
 				};
 				this.list = [];
 				this.getList()
 			},
 			getList() {
-				
+
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
 				})
-				this.form.pageIndex=this.pageIndex
-				this.form.pageSize=20
-				
+				this.form.pageIndex = this.pageIndex
+				this.form.pageSize = 20
+
 				API.recordData(this.form).then((res) => {
-					
+
 					this.list = [
 						...this.list,
 						...res.data.data
 					];
-					
-					var showMap=new Map()
-					this.list.forEach(item=>{
-						var ktime=item.createTime.split(" ")[0]
-						if(showMap.has(ktime)){
-							item.show=false;
-						
-							
-						}else{
-							var Amount=item.todaySPAmount 
-							var num=item.todaySPNum
-							showMap.set(ktime,{
-								amount:Amount,
-								num:num
+
+					var showMap = new Map()
+					this.list.forEach(item => {
+						var ktime = item.createTime.split(" ")[0]
+						if (showMap.has(ktime)) {
+							item.show = false;
+
+
+						} else {
+							var Amount = item.todaySPAmount
+							var num = item.todaySPNum
+							showMap.set(ktime, {
+								amount: Amount,
+								num: num
 							})
-													
-							item.show=true;
-							item.showtime=ktime;
+
+							item.show = true;
+							item.showtime = ktime;
 						}
 					})
-					
-					this.showMap=showMap;
-					
+
+					this.showMap = showMap;
+
 					this.recordsTotal = res.data.recordsTotal
 					uni.hideLoading()
-					
+
 				}).catch(error => {
 					uni.showToast({
-					
+
 						title: error
 					})
 				})
 			},
-		
+
 			getStation(bl) {
-				
+
 				API.stationList().then((res) => {
-					
+
 					this.stationList = res.data.stationList
-					this.stationListSon=res.data.deviceList	
+					this.stationListSon = res.data.deviceList
 				}).catch(error => {
 					uni.showToast({
-					
+
 						title: error
 					})
 				})
 			},
 			myLoadmore() {
-					
+
 				this.pageIndex += 1;
 				this.getList()
-				
+
 			},
 			// 点击actionSheet回调
 			actionSheetCallback(index) {
@@ -392,155 +452,188 @@
 	}
 </script>
 <style>
-	page{
+	page {
 		background-color: #F7F7F7;
 	}
 </style>
 <style lang="scss" scoped>
-	
-	.product_tip{
-		    position: relative;
-		    top: -75px;
-		    right: 0;
-		  
-		    text-align: right;
-	 
-	  p{
-	    font-size: 24rpx;
-	    color: #ffffff;
-	    transform: rotate(45deg);
-	    position: absolute;
-	    top: 10rpx;
-	    right: 0rpx;
-	  }
-	  .product_tip_bg{
-	    width: 0;
-	    height: 0;
-	    border-bottom: 52rpx solid #53b56d;
-	    border-right: 52rpx solid transparent;
-	    border-left: 52rpx solid transparent;
-	    transform: rotate(45deg);
-	    position: absolute;
-	    top: -7rpx;
-	    right: -29rpx;
-	  }
+	.product_tip {
+		position: relative;
+		top: -75px;
+		right: 0;
+
+		text-align: right;
+
+		p {
+			font-size: 24rpx;
+			color: #ffffff;
+			transform: rotate(45deg);
+			position: absolute;
+			top: 10rpx;
+			right: 0rpx;
+		}
+
+		.product_tip_bg {
+			width: 0;
+			height: 0;
+			border-bottom: 52rpx solid #53b56d;
+			border-right: 52rpx solid transparent;
+			border-left: 52rpx solid transparent;
+			transform: rotate(45deg);
+			position: absolute;
+			top: -7rpx;
+			right: -29rpx;
+		}
 	}
-	
-	
-	.popup-screen{
+
+
+	.popup-screen {
 		padding: 20px;
 		position: relative;
-		.screen{
+
+		.screen {
 			padding-bottom: 30px;
 		}
-		.screen-item{
+
+		.screen-item {
 			margin-bottom: 20px;
-			.screen-head{
+
+			.screen-head {
 				margin-bottom: 8px;
 				font-size: 16px;
 			}
-			.screen-main{
-				 // display: -webkit-box;
+
+			.screen-main {
+				// display: -webkit-box;
 				display: flex;
 				flex-wrap: wrap;
 			}
-			.screen-entry{
+
+			.screen-entry {
 				width: 29%;
-				padding:6px 0;
+				padding: 6px 0;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				background-color: #F2F5FA ;
+				background-color: #F2F5FA;
 				text-align: center;
 				margin-bottom: 10px;
 				border-radius: 3px;
 				margin-right: 6px;
 			}
-			.screen-entry.active{
+
+			.screen-entry.active {
 				background-color: #185AC6;
-				color:#fff;
+				color: #fff;
 			}
 		}
-		.screen-foot{
+
+		.screen-foot {
 			position: fixed;
 			left: 0;
 			right: 0;
 			bottom: 0;
 			display: flex;
-			height:50px;
+			height: 50px;
 			border-top: 1px solid #ededed;
-			.screen-btn-l{
+
+			.screen-btn-l {
 				background-color: #fff;
 				flex: 0.2;
 				text-align: center;
 				line-height: 50px;
 			}
-			.screen-btn-r{
+
+			.screen-btn-r {
 				flex: 0.8;
 				text-align: center;
 				line-height: 50px;
 				background-color: #185AC6;
-				color:#fff;
+				color: #fff;
 			}
 		}
 	}
-	.navbar{
+
+	.navbar {
 		display: flex;
 		justify-content: space-between;
 		flex: 1;
 		padding: 0 15px;
 	}
-	.navbar-tit{
+
+	.navbar-tit {
 		font-size: 20px;
 	}
-	.navbar-screen{
+
+	.navbar-screen {
 		display: flex;
 		align-items: center;
-		span{
+
+		span {
 			margin-right: 2px;
-			color:#999;
+			color: #999;
 		}
 	}
-	.detailed-time{
+
+	.detailed-time {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 10px 20px;
 		font-size: 16px;
-		p{
-			color:#666;
+
+		p {
+			color: #666;
 		}
 	}
-	.detailed-item{
+
+	.detailed-item {
 		background-color: #fff;
 		display: flex;
 		justify-content: space-between;
 		padding: 10px 20px;
 		border-bottom: 1px solid #ededed;
-		.detailed-item-name{
-			h4{
+
+		.detailed-item-name {
+			h4 {
 				font-weight: normal;
 			}
-			p{
+
+			p {
 				font-size: 15px;
 				margin-top: 4px;
-				color:#A2A9B5;
+				color: #A2A9B5;
 			}
 		}
-		.detailed-item-num{
+
+		.detailed-item-num {
 			display: flex;
 			align-items: center;
-			h2{
+
+			h2 {
 				margin-right: 4px;
 			}
 		}
 	}
-	.showName{
+
+	.showName {
 		font-weight: unset;
-		
+
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		font-size: 16px;
 	}
+
+	/deep/.uni-scroll-view-content {
+		width: 50% !important;
+		margin: auto;
+	}
+
+	/deep/.u-tab-bar {
+		width: 20% !important;
+		background-color: #0076FF !important;
+		left: -4.5%;
+
+	}
 </style>