lcoco/pages/wallet/bill.vue

<template>
	<view class="bill-box flex-common-css box-sizing-border iPhone-bottom">
		<Nav title='账单' titleColor='#333'></Nav>
		<view class="box-head">
			<view class="box-head-1">
				<view class="sys-size-32 view-box" :class="navId === item.id?'sys-color-black-3 sys-weight-600':'sys-color-gray-9'"
				v-for="(item,i) in navList" :key="i" @click="selectTo(1,item,i)">{{item.name}}</view>
				<view class="xian" :class="navIndex === 0?'left-1':'left-2'"></view>
			</view>
			<view class="box-head-2 box-sizing-border">
				<view class="date-view sys-size-28 sys-color-gray-3" @click="selectTo(2)">
					{{fromData.time}}
					<uni-icons class='ml-4' type="bottom" size="12" color="#333"></uni-icons>
				</view>
				<view class="sys-size-28 sys-color-gray-9">仅展示当月订单</view>
			</view>
		</view>
		<view v-if="false" class="no-view sys-size-40 sys-color-gray-9">暂无数据</view>
		<scroll-view v-else scroll-y="true" class="box-sizing-border list-scroll">
			<view class="list-box" v-for="(item,i) in 10" :key="i">
				<image v-if="navIndex===0" src="@/static/img/wallet/j.png" mode=""></image>
				<image v-else src="@/static/img/wallet/bb.png" mode=""></image>
				<view class="box-right">
					<view class="box-right-1 mb-4">
						<view class="sys-size-32 sys-color-gray-3">收益</view>
						<view class="sys-size-36 sys-color-4BC285 sys-weight-600">+100</view>
						<!-- <view class="sys-size-36 sys-color-gray-3 sys-weight-600">-100</view> -->
					</view>
					<view class="sys-size-24 sys-color-gray-9">4月23日 12:06</view>
				</view>
			</view>
		</scroll-view>
		
		
		<view class="pop-view" v-if="isPop">
			<view class="pop-1"></view>
			<view class="pop-title sys-size-32 sys-color-gray-3 sys-weight-600 sys-background-gray-f">
				选择时间
				<uni-icons class='close-icon' type="closeempty" size="14" color="#333" @click="selectTo(2)"></uni-icons>
			</view>
			<view class="pop-list sys-background-gray-f">
				<view class="list-box sys-size-26" v-for="(item,i) in dateList" @click="selectTo(2,item)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from "@/service/tools";
	export default {
		data(){
			return{
				isPop:false,
				page:1,
				total:0,
				list:[],
				navId:1,
				navIndex:0,
				navList:[{name:'JM币',id:1},{name:'波点',id:2},],
				dateList:[],
				endTime:'',
				fromData:{
					time:'',
				},
			}
		},
		mounted() {
			this.endTime = tools.getDateYM();
			this.fromData.time = this.endTime;
			this.dateList = tools.getCustomTimeList('2020-01',this.endTime,'y-m')
		},
		methods:{
			selectTo(type,item,i){
				if(type === 1){
					if(this.navId != item.id){
						this.navId = item.id;
						this.navIndex = i;
						this.fromData.time = this.endTime;
						this.page = 1;
						this.list = [];
					}
				}else if(type === 2){
					if(item){
						this.fromData.time = item;
						this.page = 1;
						this.list = [];
					}
					this.isPop = !this.isPop;
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.bill-box{
		.ml-4{
			margin-left: 4rpx;
		}
		.mb-4{
			margin-bottom: 4rpx;
		}
		
		.pop-view{
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 201;
			display: flex;
			flex-direction: column;
			.pop-1{
				height: 30%;
			}
			.pop-title{
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-bottom: 1px solid #e3e3e3;
				position: relative;
				border-radius: 16rpx 16rpx 0 0;
				.close-icon{
					position: absolute;
					right: 32rpx;
				}
			}
			.pop-list{
				flex: 1;
				overflow: auto;
				.list-box{
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					border-bottom: 1px solid #e3e3e3;
				}
			}
		}
		
		.no-view{
			text-align: center;
			margin-top: 200rpx;
		}
		.list-scroll{
			flex: 1;
			overflow: auto;
			padding: 8rpx 32rpx;
			.list-box{
				box-sizing:  border-box;
				padding: 32rpx 0;
				border-bottom: 1rpx solid #EEEEEE;
				display: flex;
				image{
					width: 96rpx;
					height: 96rpx;
					margin-right: 20rpx;
				}
				.box-right{
					flex: 1;
					.box-right-1{
						display: flex;
						justify-content: space-between;
					}
					
				}
			}
		}
		.box-head{
			.box-head-1{
				width: 100%;
				height: 94rpx;
				display: flex;
				position: relative;
				border-bottom: 1rpx solid #EEEEEE;
				.view-box{
					flex: 1;
					line-height: 94rpx;
					text-align: center;
				}
				.xian{
					width: 40rpx;
					height: 4rpx;
					background-color: #333;
					position: absolute;
					bottom: 0;
				}
				.left-1{
					left: 168rpx;
					transition: all 0.5s;  
				}
				.left-2{
					left: 545rpx;
					transition: all 0.5s;  
				}
			}
			.box-head-2{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 38rpx 32rpx 0 32rpx;
				.date-view{
					width: 200rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					background: #F2F2F2;
					border-radius: 200rpx;
				}
			}
		}
	}
</style>