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">
				<view class="recordCon uni-list-cell-pd">
					<text>+66</text>
					<text>充值成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="color-green">微信充值</text>
					<text>2020-10-01 01:01:01</text>
				</view>
			</uni-list>
			<uni-list class="rechargeWrap">
				<view class="recordCon uni-list-cell-pd">
					<text>+66</text>
					<text>充值成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="color-blue">支付宝充值</text>
					<text>2020-10-01 01:01:01</text>
				</view>
			</uni-list>
			<uni-list class="rechargeWrap">
				<view class="recordCon uni-list-cell-pd">
					<text>+66</text>
					<text>充值成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="color-red">线下公对公充值</text>
					<text>2020-10-01 01:01:01</text>
				</view>
			</uni-list>
			<uni-list class="rechargeWrap">
				<view class="recordCon uni-list-cell-pd">
					<text>-66</text>
					<text>支付成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="color-green">购买卡券</text>
					<text>2020-10-01 01:01:01</text>
				</view>
				<view class="rechargeArrow">
					>
				</view>
			</uni-list>
			<uni-list class="rechargeWrap">
				<view class="recordCon uni-list-cell-pd">
					<text>-66</text>
					<text>支付成功</text>
				</view>
				<view class="recordCon uni-list-cell-pd">
					<text class="">停车支付</text>
					<text>2020-10-01 01:01:01</text>
				</view>
				<view class="rechargeArrow">
					>
				</view>
			</uni-list>
		</view>
		<!-- 底部文案 -->
		<view class="">
			<text>{{status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore)}}</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				detailText: '',
				title: 'picker',
				kindArray: [],
				arrayWay: [],
				index: 0,
				indexWay: 0,
				beginDate: currentDate,
				overDate: currentDate,
				orderList: [],
				page: 1,
				pageSize: 10,
				status: 'more', // 默认展示上拉显示更多
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		onLoad(params) {
			wx.showShareMenu({
				withShareTicket: true
			});
			this.getKindType();
			// 页码归为第1页
			this.page = 1
			// 初始化获取列表数据
			this.fetchData()
		},
		onShow() {
			this.getDetailSummary();
			this.page = 1
			this.pageSize = 10
			this.orderList = []
			this.fetchData()
		},
		// 下拉刷新触发
		onPullDownRefresh(val) {
			this.page = 1
			this.pageSize = 10
			console.log('下拉刷新', val)
			this.fetchData().then(() => {
				uni.stopPullDownRefresh();
			}).catch(err => {
				uni.stopPullDownRefresh();
				// 弹窗提示
				uni.showToast({
					title: '请求出错了',
					icon: 'none'
				})
			})
		},
		// 上拉加载触发
		onReachBottom() {
			// 改变状态为加载中
			this.status = 'loading'
				// 页码发生变化
				++this.page
			// 加载更多
			this.fetchData('loadMore').then(resArray => {
				// 此时判断当前有没有请求到数据
				if (resArray.length) {
					this.status = 'more'
				} else {
					this.status = 'noMore';
					--this.page;
				}
			}).catch(err => {
				console.log('网络请求失败')
			})
		},
		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.arrayWay = data[0].typeList;
					console.log(data)
				})
			},
			bindPickerChange: function(e) {
				let that = this;
				that.index = e.detail.value
				that.arrayWay = that.kindArray[that.index].typeList;
				that.fetchData()
			},
			bindPickerChangeWay: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.indexWay = e.detail.value
				that.fetchData()
			},
			bindStartDateChange: function(e) {
				this.beginDate = e.detail.value
				that.fetchData()
			},
			bindEndDateChange: function(e) {
				this.overDate = e.detail.value
				that.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: '1',
					type: '1',
					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(way) {
				let that = this
				let paramsData = {
					pageNum: that.page,
					pageSize: that.pageSize,
					kind: '1',
					type: '1',
					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
					if (way === 'loadMore') {
						that.orderList = that.orderList.concat(resDataArray)
					} else {
						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>