H5_module/payment/receiveList/receiveList.vue

<template>
	<view>
		<view class="top">
			<view class="search ddflex" @click="search">
				<image src="../../static/pages/images/ssico.png"></image>
				<input v-model="searchText" placeholder="搜索客户名称、收款人" placeholder-class="placeholder" auto-focus="true" @confirm="confirmText" class="ipt fflex" v-if="isSearch" />
				<view v-else>搜索客户名称、收款人</view>
			</view>
			<view class="operate ddflex">
				<view class="date" @click="showPop">
					<view>{{dateIndex == -1 ? startTime + '至' + endTime: dateList[dateIndex].label}}</view>
					<image :src="picUrlss+'blue/yeji_rico.png'" class="rico"></image>
				</view>
				<view class="total">收入 ¥{{count?count:0}}</view>
			</view>
		</view>
		<view style="height: 145rpx;"></view>
		<view class="list" v-if="pageList&&pageList.length>0">
			<view class="li ddflex" v-for="(item,index) in pageList" :key="index">
				<view class="fflex">
					<view class="lis ddflex">
						<view class="fflex"><text>订单编号</text>{{item.id}}</view>
						<view class="money">+{{item.money}}</view>
					</view>
					<view class="li-c ddflex">
						<view class="lis"><text>客户名称</text>{{item.paymentName}}</view>
						<view class="lis"><text>收款人</text>{{item.payeeName}}</view>
						<view class="lis"><text>收款时间</text>{{item.payTime}}</view>
						<view class="lis" v-if="item.pName"><text>归属人</text>{{item.pName}}</view>
					</view>
					<view class="lis" v-if="item.remarks">
						<text>备注</text>{{item.remarks}}
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss+'empty_dd.png'"></image>
			<text>暂无记录</text>
		</view>
		<view class="ceng" v-if="isShowPop" @click="hidePop"></view>
		<view class="popup" :style="'bottom:' + popBottom">
			<view class="default ddflex" @click="setDefault"><image :src="isDefault ? '../static/images/gou_h.png':'../../static/pages/images/gou.png'"></image>设为默认</view>
			<view class="pop-tit">时间</view>
			<view class="pop-con">
				<view class="pop-list ddflex">
					<view :class="'li' + (dateIndex == index ? ' active':'')" v-for="(item,index) in dateList" :key="index" @click="switchType(index)">{{item.label}}</view>
				</view>
				<view class="pop-time ddflex">
					<picker mode="date" class="date-ipt" @change="changeStartTime">
						<view :class="startTime?'':'placeholder'">{{startTime?startTime:'选择日期'}}</view>
					</picker>
					<text>至</text>
					<picker mode="date" class="date-ipt" @change="changeEndTime">
						<view :class="endTime?'':'placeholder'">{{endTime?endTime:'选择日期'}}</view>
					</picker>
				</view>
			</view>
			<view class="pop-btn ddflex">
				<view @click="reset">重置</view>
				<view @click="confirm">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	const req = require('../../utils/request.js');
	const api = require('../../utils/api.js');
	const util = require('../../utils/util.js');
	const app = getApp();
	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				dateIndex: 0,
				dateList: [{
						label: '本日',
						value: 5
					},
					{
						label: '本周',
						value: 1
					},
					{
						label: '本月',
						value: 2
					},
					{
						label: '本季度',
						value: 3
					},
					{
						label: '本年度',
						value: 4
					}
				],
				startTime: '',
				endTime: '',
				form: {
					page: 1,
					limit: 10
				},
				pageList: [],
				isLoad: true,
				openId: '',
				isShowPop: false,
				popBottom: '-100%',
				count: 0,
				isSearch: false,
				searchText: '',
				isDefault: false
			};
		},
		async onLoad(options) {
			this.openId = options.openId;
			await this.getDefault();
			await this.getList();
			await this.getCount();
		},
		onReachBottom() {
			this.form.page++;
			this.getList()
		},
		onShow() {},

		methods: {
			search(){
				this.isSearch = true;
			},
			confirmText(e){
				this.isLoad = true;
				this.form.page = 1;
				this.getCount();
				this.getList();
			},
			setDefault(){
				let params = {};
				if(this.dateIndex == -1){
					params.timeType = 0;
					params.startTime = this.startTime;
					params.endTime = this.endTime;
				}else{
					params.timeType = this.dateList[this.dateIndex].value;
					delete params.startTime;
					delete params.endTime;
				}
				req.postRequest('/api/receipt/setDefaultOption',params,data=>{
					this.isDefault = true;
				})
			},
			getDefault(){
				let that = this;
				return new Promise((resolve,reject)=>{
					req.getRequest('/api/receipt/getDefaultOption',{},data=>{
						if(data){
							let obj = data;
							if(obj.timeType == 0){
								that.dateIndex = -1;
								that.startTime = obj.startTime;
								that.endTime = obj.endTime;
							}else{
								that.dateList.map((it,index)=>{
									if(obj.timeType == it.value){
										that.dateIndex = index;
									}
								})
							}
						}
						resolve();
					})
				})
			},
			switchType(index){
				if(this.dateIndex == index) return false;
				this.dateIndex = index;
				this.startTime = '';
				this.endTime = '';
			},
			changeStartTime(e){
				const endTime = new Date(this.endTime)
				const startTime = new Date(e.detail.value)
				if(endTime.getTime() < startTime.getTime()){
					req.msg("开始时间不能小于结束时间")
					return false;
				}
				this.startTime = e.detail.value;
				this.dateIndex = -1
			},
			changeEndTime(e){
				const endTime = new Date(e.detail.value)
				const startTime = new Date(this.startTime)
				if(endTime.getTime() < startTime.getTime()){
					req.msg("结束时间不能小于开始时间")
					return false;
				}
				this.endTime = e.detail.value;
				this.dateIndex = -1
			},
			confirm(){
				this.hidePop()
				this.isLoad = true;
				this.form.page = 1;
				this.getList();
				this.getCount();
			},
			reset(){
				this.dateIndex = 0;
				this.startTime = '';
				this.endTime = '';
			},
			getList() {
				if(!this.isLoad) return false;
				this.isLoad = false;
				let form = this.form;
				if(this.dateIndex == -1){
					form.timeType = 0;
					form.startTime = this.startTime;
					form.endTime = this.endTime;
				}else{
					form.timeType = this.dateList[this.dateIndex].value;
					delete form.startTime;
					delete form.endTime;
				}
				if(this.searchText){
					form.search = this.searchText
				}else delete form.search;
				if(this.form.page == 1){
					uni.showLoading()
				}
				return new Promise((resolve,reject)=>{
					req.postRequest('/api/receipt/collectionLogs', form, res => {
						if(res && res.length == this.form.limit) this.isLoad = true;
						if(this.form.page > 1) res = this.pageList.concat(res);
						this.pageList = res;
						uni.hideLoading();
						resolve();
					}, true);
				})
			},
			getCount(){
				let params = {};
				if(this.dateIndex == -1){
					params.timeType = 0;
					params.startTime = this.startTime;
					params.endTime = this.endTime;
				}else{
					params.timeType = this.dateList[this.dateIndex].value;
				}
				if(this.searchText){
					params.search = this.searchText
				}else delete params.search;
				return new Promise((resolve,reject)=>{
					req.getRequest('/api/receipt/collectionCount',params,data=>{
						this.count = data;
						resolve()
					})
				})
			},
			showPop(){
				this.isShowPop = true;
				this.popBottom = 0
			},
			hidePop(){
				this.isShowPop = false;
				this.popBottom = '-100%'
			}
		}
	};
</script>

<style>
	@import "./receiveList.css";
</style>