pages/rechargeDetail/rechargeDetail.vue

<template>
	<view>
		<view class="statistics yellow-bg uni-list-cell-pd" style="color: #fff">{{detailText | tranNull}}</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					消费类型
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="kindArray" :range-key="'kindName'">
						<view class="uni-input">{{kindArray[index].kindName}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					充值方式
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChangeWay" :value="indexWay" :range="arrayWay" :range-key="'typeName'">
						<view class="uni-input">{{arrayWay[indexWay].typeName}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					开始时间
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
						<view class="uni-input">{{beginDate}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					结束时间
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
						<view class="uni-input">{{overDate}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="border-bg"></view>
		<view class="" v-if="orderList.length > 0">
			<uni-list class="rechargeWrap" v-for="(item, index) in orderList" :key="index">
				<view class="recordCon uni-list-cell-pd">
					<text class="color-black">{{item.changeFeeDetail}}</text>
					<text>{{item.payStateDesc}}</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="color-green">{{item.typeName}}</text>
					<text>{{item.opTime}}</text>
				</view>
			</uni-list>
			<view class="grace-loading text-center jy-fix-height34" v-if="isLoadAll">{{ loadingTxt }}</view>
		</view>
		<view v-else class="margin-top-30">
			<image class="marginAuto" src="../../static/vipcard/novipcard.png" mode="aspectFit"></image>
			<view class="text-center">
				暂无记录
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				detailText: '',
				title: 'picker',
				kindArray: [],
				arrayWay: [],
				index: 0,
				indexWay: 0,
				kind: '',
				type: '',
				beginDate: currentDate,
				overDate: currentDate,
				orderList: [],
				isLoadAll: false,
				totalPages: 1, // 总页数
				page: 1,
				pageSize: 5,
				loadingTxt: '加载中...',
			}
		},
		onLoad(params) {
			wx.showShareMenu({
				withShareTicket: true
			});
			this.getKindType();
			this.page = 1
			this.pageSize = 5
			this.totalPages = 1
			this.orderList = []
		},
		onShow() {
			this.page = 1
			this.pageSize = 5
			this.totalPages = 1
			this.orderList = []
		},
		// 下拉刷新触发
		onPullDownRefresh(val) {
			this.page = 1
			this.pageSize = 5
			this.totalPages = 1
			console.log('下拉刷新', val)
			this.fetchData()
		},
		// 上拉加载触发
		onReachBottom() {
			// 判断当前页是否大于等于总页数
			if (this.totalPages <= this.page) {
				this.isLoadAll = true;
				this.loadingTxt = '没有更多数据啦~';
			} else {
				this.page++;
				this.isLoadAll = true;
				this.loadingTxt = '加载中...';
				this.fetchData(); // 每次滑动请求接口，实现上拉加载更多数据
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getKindType() {
				let that = this;
				that.$myRequest({
					url: that.$common.walletKindType,
					method: 'POST',
					data: that.$common.requestSign()
				}).then(res => {
					let data = res.data;
					that.kindArray = data;
					that.kind = data[0].kind;
					that.arrayWay = data[0].typeList;
					that.type = data[0].typeList[0].type;
					console.log(data)
					console.log(that.kind, that.type)
					that.getDetailSummary();
					that.page = 1
					that.pageSize = 5
					that.orderList = []
					that.fetchData()
				})
			},
			bindPickerChange: function(e) {
				let that = this;
				that.index = e.detail.value
				that.kind = that.kindArray[that.index].kind;
				that.arrayWay = that.kindArray[that.index].typeList;
				that.type = that.kindArray[that.index].typeList[0].type;
				console.log(that.kind, that.type)
				that.getDetailSummary();
				that.fetchData()
			},
			bindPickerChangeWay: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.indexWay = e.detail.value;
				this.type = this.arrayWay[this.indexWay].type;
				console.log(this.kind, this.type)
				this.getDetailSummary();
				this.fetchData()
			},
			bindStartDateChange: function(e) {
				this.beginDate = e.detail.value
				this.getDetailSummary();
				this.fetchData()
			},
			bindEndDateChange: function(e) {
				this.overDate = e.detail.value
				this.getDetailSummary();
				this.fetchData()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDetailSummary() {
				let that = this;
				let data = {
					kind: that.kind,
					type: that.type,
					beginDate: new Date(that.beginDate + " 00:00:00"),
					endDate: new Date(that.overDate + " 23:59:59")
				};
				console.log(data)
				that.$myRequest({
					url: that.$common.detailSummary,
					method: 'POST',
					data: that.$common.requestSign(data)
				}).then(res => {
					let data = res.data;
					if (data.rechargeSummary) {
						that.detailText = data.rechargeSummary
					}
					if (data.paySummary) {
						that.detailText = data.paySummary
					}
				})
			},
			fetchData() {
				let that = this
				let paramsData = {
					pageNum: that.page,
					pageSize: that.pageSize,
					kind: that.kind,
					type: that.type,
					beginDate: new Date(that.beginDate + " 00:00:00"),
					endDate: new Date(that.overDate + " 23:59:59")
				}
				// 首页信息获取 接口
				that.$myRequest({
					url: that.$common.walletDetailsPage,
					method: 'POST',
					data: that.$common.requestSign(paramsData)
				}).then(res => {
					const resDataArray = res.data.dataList;
					if (that.totalPages === res.data.pageTotals) {
						that.isLoadAll = true;
						that.loadingTxt = '没有更多数据啦~';
						that.orderList = resDataArray;
					} else {
						that.totalPages = res.data.pageTotals;
						that.isLoadAll = true;
						that.loadingTxt = '上拉加载更多数据';
						that.orderList = resDataArray
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.rechargeWrap {
		position: relative;
		.rechargeArrow {
			position: absolute;
			right: 10px;
			top: 30px;
			font-size: 20px;
			color: #999;
		}
	}
	.recordCon {
		padding-right: 35px;
		color: #999;
		display: flex;
		justify-content: space-between;
	}
</style>