employ-front/pages_subpack/record/index.vue

<template>
	<view>
		<view class="se-bgc-orange se-pos se-h-200">
			<view class="se-pos-cb se-flex se-flex-h-sb se-w-vw-90 se-py-30 se-bgc-white se-fs-28 se-br-20 se-bs" style="bottom: -100rpx;">
				<view class="se-flex se-flex-v-sa se-b-r se-flex-1">
					<view class="se-flex se-fs-26 se-fw-6 se-c-black">
						总余额(元）
					</view>
					<view class="se-c-orange se-fs-26 se-c-orange se-mt-20">
						￥{{money || 0}}
					</view>
					<view class="se-fs-24 se-mt-10 se-px-30 se-py-10 se-b-orange se-c-orange se-br-10 se-fw-6">
						提现
					</view>
				</view>
				<view class="se-flex se-flex-v-sa se-flex-1">
					<view class="se-flex se-fs-26 se-fw-6 se-c-black">
						累计提现
					</view>
					<view class="se-c-orange se-fs-26 se-c-orange se-mt-20">
						￥{{moneyLog || 0}}
					</view>
					<view class="se-fs-24 se-mt-10 se-px-30 se-py-10 se-b-orange se-c-orange se-br-10 se-fw-6">
						提现记录
					</view>
				</view>
			</view>
		</view>
		<view class="se-flex-h-sb se-pt-130 se-pb-20 se-px-40">
			<view class="se-c-black se-fs-30 se-fw-5">
				金额明细
			</view>
			<view class="se-flex">
				<view  class="se-flex se-ml-10 se-b-orange se-c-orange se-br-10 se-flex-h-c se-px-10 se-py-8 se-fs-20" @click="startShow=true">
					<text class="se-mr-8">{{startDate}}</text>
					<u-icon name="arrow-down" size="10" color="#ff7a31"></u-icon>
				</view>
				<!-- <view class="se-flex se-ml-10 se-b-orange se-c-orange se-br-10 se-flex-h-c se-px-10 se-py-8 se-fs-20">
					<text class="se-mr-8">{{month}}月</text>
					<u-icon name="arrow-down" size="10" color="#ff7a31"></u-icon>
				</view> -->
				<view class="se-flex se-ml-10 se-c-orange se-flex-h-c se-px-10 se-py-8 se-fs-20">
					<text>至</text>
				</view>
				<view class="se-flex se-ml-10 se-b-orange se-c-orange se-br-10 se-flex-h-c se-px-10 se-py-8 se-fs-20" @click="endShow=true">
					<text class="se-mr-8">{{endDate}}</text>
					<u-icon name="arrow-down" size="10" color="#ff7a31"></u-icon>
				</view>
			</view>
		</view>
		<view class="se-m-20 se-bgc-white se-br-10">
			<view class="se-b-b se-m-20 se-py-20 se-px-20 se-flex-h-sb" v-for="(items,indexs) in records" :key="indexs" @click="onMasterDetail(items)">
				<view class="se-flex se-flex-v">
					<view class="se-flex">
						<text class="se-fw-6 se-c-33 se-fs-30">{{items.title}}</text>
					</view>
					<view class="se-c-text-third se-fs-22 se-mt-20">
						<text >{{items.createTime}}</text>
					</view>
				</view>
				<view class="se-c-33 se-fs-30 se-fw-5" :class="items.type==0?'se-c-red':'se-c-green'">
					{{items.type==0?'-':'+'}}
					￥{{items.amount}}
				</view>
			</view>
			
		</view>
		<u-empty v-if="records && records.length==0" mode="list"></u-empty>
		<view class="se-h-200"></view>
		<u-picker :show="startShow" ref="uPicker" :columns="dates" @cancel="startShow=false" @confirm="startDateConfirm"></u-picker>
		<u-picker :show="endShow" ref="uPicker" :columns="dates" @cancel="endShow=false" @confirm="endDateConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		payLog,
		CountCashOut,
		queryBalance
	} from "@/common/api.js"
	export default{
		data(){
			return{
				startShow:false,
				endShow:false,
				year:this.$dayjs().format('YYYY'),
				month:this.$dayjs().format('MM'),
				day:this.$dayjs().format('DD'),
				dates:[
					['2024','2025','2026','2027','2028'],
					['01','02','03','04','05','06','07','08','09','10','11','12'],
					['01','02','03','04','05','06','07','08','09','10','11','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'],
				],
				pageNo:1,
				pageSize:20,
				startTime:"",
				startDate:"",
				endTime:"",
				endDate:"",
				money:0,
				moneyLog:0,
				records:[]
			}
		},
		mounted() {
			this.startTime = this.$dayjs().subtract(1, 'day').valueOf();
			this.startDate = this.$dayjs().subtract(1, 'day').format('YYYY-MM-DD')
			this.endTime = this.$dayjs().valueOf();
			this.endDate = this.$dayjs().format('YYYY-MM-DD')
			this.onPayLog();
			this.onCountCashOut()
			this.onQueryBalance()
		},
		onReachBottom() {
			let that = this
			that.pageNo = that.pageNo + 1
			that.onPayLog()
		},
		methods:{
			onCountCashOut(){
				let that = this
				let params={}
				CountCashOut(params).then(response=>{
					console.info("CountCashOut",response)
					that.moneyLog = response.result
				}).catch(error=>{
					
				})
			},
			onQueryBalance(){
				let that = this
				let params={}
				queryBalance(params).then(response=>{
					console.info("queryBalance",response)
					that.money = response.result
				}).catch(error=>{
					
				})
			},
			onPayLog(){
				let that = this
				let params = {
					pageNo:that.pageNo,
					pageSize:that.pageSize,
					startTime:that.startDate+" 00:00:00",
					endTime:that.endDate+" 23:59:59",
					userId:uni.getStorageSync('userInfo').id
				}
				payLog(params).then(response=>{
					console.info("payLog",response)
					// that.money = response.result.money?response.result.money:0
					// that.moneyLog = response.result.moneyLog?response.result.moneyLog:0
					if(that.pageNo==1){
						that.records = response.result.records
					}else{
						that.records = that.records.concat(response.result.records)
					}
				}).catch(error=>{
					
				})
			},
			startDateConfirm(event){
				this.startTime = this.$dayjs(event.value[0]+"-"+event.value[1]+"-"+event.value[2]).valueOf();
				this.startDate = event.value[0]+"-"+event.value[1]+"-"+event.value[2]
				this.startShow = false
				this.onPayLog();
			},
			endDateConfirm(event){
				this.endTime = this.$dayjs(event.value[0]+"-"+event.value[1]+"-"+event.value[2]).valueOf();
				this.endDate = event.value[0]+"-"+event.value[1]+"-"+event.value[2]
				this.endShow = false
				this.onPayLog();
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
</style>