pages/rechargeDetail/rechargeDetail.vue

<template>
	<view>
		<!-- scrollable speed="50" 滚动 -->
		<uni-notice-bar backgroundColor="#f0ad4e" color="#fff"  single :text="detailText | tranNull"></uni-notice-bar>
		<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 pos-rel" 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 v-if="item.typeName == '购买卡券'" class="color-green">{{item.typeName}}</text>
					<text v-if="item.typeName == '微信充值'" class="color-green">{{item.typeName}}</text>
					<text v-if="item.typeName == '支付停车费'" class="color-red">{{item.typeName}}</text>
					<text v-if="item.typeName == '支付宝充值'" class="color-blue">{{item.typeName}}</text>
					<text v-if="item.typeName == '平台现金充值'" class="color-red">{{item.typeName}}</text>
					<text>{{item.opTime}}</text>
				</view>
				<view class="uni-icon pos-abs icon-arrowright uni-icon-arrowright">
				</view>
			</uni-list>
			<uni-load-more :status="status" />
		</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: 10,
				status: 'no-more',
			}
		},
		onLoad(params) {
			wx.showShareMenu({
				withShareTicket: true
			});
			this.getKindType();
		},
		onShow() {
		},
		// 下拉刷新触发
		onPullDownRefresh(val) {
			this.page = 1
			this.pageSize = this.pageSize
			this.totalPages = 1
			this.orderList = []
			console.log('下拉刷新', val)
			this.fetchData()
		},
		// 上拉加载触发
		onReachBottom() {
          console.log(this.totalPages)
          console.log(this.orderList.length)
          if (this.totalPages == this.orderList.length) {
            this.status = 'no-more'
            console.log('111')
            return
          } else {
            this.page++;
            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.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
				that.status = 'loading'
				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 => {
					if (res.data.pageTotals < 10) {
						this.status = 'no-more'
					} else {
						this.status = 'more'
					}
					that.totalPages = res.data.pageTotals;
					that.orderList = that.orderList.concat(res.data.dataList)
				})
			},
		}
	}
</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;
	}
	.icon-arrowright {
		color: #bbb;
		font-size: 20px;
		right: 2upx;
		top: 60upx;
	}
</style>