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 list" :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">{{item.side===1?'+':''}}{{item.amount}}</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">{{item.time}}</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";
  import {getCashFlowHistoryPage, getDailyEarnings, getMyLikeMoments} from "@/api/my";
	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')
      this.startList()
		},
		methods:{
      startList(){
        if(this.userId<=0){
          // return false
        }
        this.list=[]
        this.isAjax=false
        this.total=undefined
        this.page=1
        this.getCashFlowHistoryPage()


      },

      getCashFlowHistoryPage(){
        if(this.isAjax){
          return
        }
        this.isAjax=true
        let that=this
        getCashFlowHistoryPage({'pageNo':this.page,'pageSize':20,'type':this.navId,'month':this.fromData.time}).then((res)=>{
          this.isAjax=false
          if(res.code===0){
            res.data.data.forEach((item)=>{
              that.list.push(item )
            })
            ++that.page
            that.total=res.data.total
          }
        })
      },
			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.startList()
					}
				}else if(type === 2){
					if(item){
						this.fromData.time = item;
            this.startList()
					}
					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>