cunzaicourseMall_user_app/pages_company/paymentStatistics.vue

<template>
	<view class="column hb flex-1" >
		<view class="searchbox">
			<view class="searchbox-bar x-ac">
				<view :class="queryParam.type == index+1 ? 'searchbox-item searchbox-active':'searchbox-item'"
					v-for="(item,index) in typeOption" :key="index" @click="handleType(index+1)">{{item.label}}</view>
			</view>
			<view class="x-ac ss mt20" v-show="queryParam.type == 4">
				<view class="calendar-day x-c" @click="showCalendar = true"><u-icon name="calendar" color="#999"
						size="20"></u-icon>{{startTime}}</view>
				<view class="calendar-day x-c" @click="showCalendar = true"><u-icon name="calendar" color="#999"
						size="20"></u-icon>{{endTime}}</view>
			</view>
		</view>
		<view >
			<u-calendar :show="showCalendar" :mode="mode" @confirm="confirmCalendar" style="flex: 0; overflow: hidden;"
				@close="closeCalendar" :minDate="new Date().getTime()-(3600*1000*24*60)" :maxDate="new Date().getTime()"
				></u-calendar>
		</view>
		<view class="justify-between p40 align-center">
			<view>{{PaymentData.statPeriod}}</view>
			<view class='base-color-6 fs24'>
				<text class="base-color-dark fs32">{{PaymentData.payCount}}</text>笔
			</view>
			<view>
				<view class='fs28 base-color-6'>收入:
					<text class="base-success">￥{{PaymentData.totalSales?PaymentData.totalSales:'0.00'}}</text></view>
				<!-- <view class='fs28 base-color-6 mt4'>退款:
					<text class="base-color-red ">￥{{PaymentData.totalReturn?PaymentData.totalReturn:'0.00'}}</text></view> -->
			</view>
		</view>
		<view class="column scrolly">
			<scroll-view :scroll-y="true" class="hb pb40" :refresher-enabled="isEnabled" :refresher-triggered="triggered"
				refresher-background="rgba(0,0,0,0)" @refresherrefresh="pullDownRefresh"
				@refresherrestore="triggered = false" :upper-threshold="100" :lower-threshold="100"
				@refresherabort="triggered = false" @scrolltolower="reachBottom">
				<view class="bgf p40 m4 " v-for="(item,index) in paymentList" :key="index">
					<!-- <view class="justify-between align-center" @click="tolineDetails(item)"> -->
						<view class="justify-between align-center">
						<view>
							<view class="fs28 base-color-6 mt4" v-if="item.remark">备注：{{item.remark}}</view>
							<view class="fs24 base-color-9">支付时间：{{item.payTime}}</view>
						</view>
						<view class="column centerV">
							<view class="base-success fs40 bold">{{item.payMoney.toFixed(2)}}</view>
							<!-- <view class="orangecol fs24" v-if="item.refundAuditStatus==0&&item.refundAuditStatus==1"
							>{{item.refundAuditStatus==0?'待审核':'退款中'}}</view>
							<view class="base-price fs24" v-if="item.refundAuditStatus==2"
							>{{item.refundAuditStatus==2?'已退款':''}}</view> -->
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {getPaymentList,getPaymentData} from '@/api/payment'
	export default {
		data() {
			return {
				typeOption: [{
					label: '今日',
					value: 1
				}, {
					label: '本月',
					value: 2
				}, {
					label: '本年',
					value: 3
				}, {
					label: '自定义',
					value: 4
				}],
				queryParam: {
					type: 1
				},
				showCalendar:false,
				mode: 'range',
				startTime:uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				endTime:uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				companyId:'',
				companyUserId:'',
				pageSize:12,
				pageNum:1,
				triggered: false,
				status: 'loadmore',
				isEnabled: true,
				paymentList:[],
				PaymentData:[]
			}
		},
		onLoad(option) {
			this.companyUserId=option.companyUserId
			this.companyId=option.companyId
			this.getlistDiscount()
			this.getPaymentDatas("refresh")
		},
		methods:{
			tolineDetails(item){
				uni.navigateTo({
					url:'/pages_company/order/lineDetails?paymentId='+item.paymentId
				})
			},
			getPaymentDatas(){
				const data={
					companyUserId:this.companyUserId,
					statType:this.queryParam.type,
					startDate:this.startTime,
					endDate:this.endTime,
					companyId:this.companyId
				}
				getPaymentData(data).then(res=>{
					if(res.code==200){
						this.PaymentData=res.data
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			},
			handleType(type) {
				this.queryParam.type = type
				if(this.queryParam.type != 4){
					this.pageNum=1
					this.paymentList=[]
					this.getlistDiscount()
					this.getPaymentDatas("refresh")
				}
				if (this.queryParam.type == 4) {
				}
			},
			confirmCalendar(e) {
				this.startTime = e[0]
				this.endTime = e[e.length - 1]
				this.paymentList=[]
				this.getlistDiscount()
				this.getPaymentDatas("refresh")
				this.showCalendar = false
			},
			closeCalendar() {
				this.showCalendar = false
			},
			pullDownRefresh() {
				// 下拉刷新
				this.triggered = true; //下拉了状态为true
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					this.paymentList=[]
					this.getlistDiscount('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottom() {
				// status这个是加载状态
				console.log(111);
				if (this.status === 'loadmore') {
					this.status = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNum++
						this.getlistDiscount() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			getlistDiscount(type){
				const data={
					companyUserId:this.companyUserId,
					companyId:this.companyId,
					statType:this.queryParam.type,
					startDate:this.startTime,
					endDate:this.endTime,
					pageSize:this.pageSize,
					pageNum:this.pageNum
					}
				getPaymentList(data).then(res=>{
					if(res.code==200){
						// refresh 下拉
						if (type == 'refresh') {
							this.paymentList = res.data.list
						} else {
							// 加载更多 当前页和下一页合并
							this.paymentList = [...this.paymentList, ...res.data.list]
						}
						if (res.data.isLastPage) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orangecol{
		color: #ffa006;
	}
	.searchbox {
		background-color: #fff;
		border-radius: 8rpx 8rpx 0 0;
		padding: 15px;
	
		&-item {
			height: 23px;
			line-height: 23px;
			width: 65px;
			background: #f5f5f5;
			text-align: center;
			border-radius: 5px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 12px;
			color: #888;
		}
	
		&-active {
			color: #fff !important;
			background-color: #1677ff !important;
		}
	}
</style>