medicine-xcx/pages/my/integral/index.vue

<template>
	<view>
		<view class="title_box">
			<image class="bg" :src="img_url+'gold_bg.png'" mode=""></image>
			<text class="my_title">我的兑购金</text>
			<text class="my_money">{{userInfo.integral}}</text>
		</view>
		<u-picker mode="time" v-model="show_time" :default-time="default_time" :params="params" @confirm="getTime"></u-picker>
		<!-- 数据展示 -->
		<view class="item_box">
			<view class="item_title" @click="toChangeTime">
				<text class="time">{{data_time}}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="left_box">
					<image :src="img_url+'gold_icon.png'" mode=""></image>
					<view class="text_box">
						<text class="title">{{item.name}}</text>
						<text class="time">{{item.createTime}}</text>
					</view>
				</view>
				<text class="get_num">{{item.payType==0?'+'+item.money:'-'+item.money}}</text>
			</view>
		</view>
		<view class="empty_box" v-if="list.length==0">
			<image :src="img_url+'empty.png'" alt=""></image>
			<text class="text_">暂无兑购金记录</text>
		</view>
	</view>
</template>

<script>
	import config_img from "@/utils/js/config.js";
	export default {
		data() {
			return {
				img_url: config_img.img_url,
				data_time: "",
				default_time: '',
				show_time: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				pageNo: 1,
				pageSize: 10,
				total: null,
				isLock: false,  //上拉加载锁
				list: [],
				userInfo: {},
			}
		},
		onLoad() {
			// this.userInfo = this.$store.state.userInfo
			this.getUserInfo();
			this.default_time = new Date().getFullYear()+'-'+ (new Date().getMonth()+1>10? new Date().getMonth()+1: '0'+(new Date().getMonth()+1))
			this.data_time = new Date().getFullYear()+'年' +(new Date().getMonth()+1)+'月';
			this.getIntegerList({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				stringDate: this.default_time.replace(/-/,'/')
			});
		},
	 async	onPullDownRefresh() {
			this.pageNo= 1;
			this.total = null;
			this.isLock = true
			this.list = [];
			await this.getUserInfo();
			await this.getIntegerList({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				stringDate: this.default_time.replace(/-/,'/')
			})
		},
		
		// 
		onReachBottom() {
			if(!this.isLock){
				if(this.pageNo * this.pageSize > this.total && this.total !== null) {
					// 没有更多加载了
					this.isLock = true;
					this.$Toast('没有更多数据了呢！');
					setTimeout(()=> {
						// 3秒后解锁
						this.isLock = false;
					},3000)
					return
				}
				this.pageNo+=1;
				console.log(this.default_time)
				this.getIntegerList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					stringDate: this.default_time.replace(/-/,'/')
				})
			}
		},
		methods: {
			// 刷新用户信息
			getUserInfo () {
				return new Promise((resolve, reject) => {
					this.$api('getUserInfo').then(res => {
						let { code, result, message} = res;
						if(code == 200){
							let userInfo = {...result.account, ...result.userInfo }
							// 更新用户信息缓存
							this.userInfo = userInfo
							this.$storage.setStorage("__user_info", userInfo)
							// this.getAddressInfo();
							resolve()
						}else {
							reject(message)
						}
					}).catch(err => {
						reject(err.message)
					})
				})
			},
			toChangeTime() {
				this.show_time = true;
			},
			getIntegerList(params={}) {
					uni.showLoading();
					this.$api('getInteger',params)
					.then(res => {
						let { code, result, message } = res
						this.isLock = false;
						if (code === 200) {
							console.log(result)
							this.list= this.list.concat(result.records);
							uni.stopPullDownRefresh();
							uni.hideLoading();
						} else {
							uni.hideLoading();
							uni.stopPullDownRefresh();
							this.$Toast(message)
						}
						this.isLock = true;
						uni.stopPullDownRefresh();
					})
					.catch(err => {
						this.isLock = true;
						uni.hideLoading();
						uni.stopPullDownRefresh();
					})
			},
			getTime(e) {
				this.data_time = e.year+"年"+ (e.month>10?e.month:e.month.replace(/0/,'')) +"月";
				this.default_time= `${e.year}-${e.month}`;
				// 初始化数据
				this.list = [];
				this.pageNo = 1;
				this.total = null;
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					stringDate: `${e.year}/${e.month}`
				}
				console.log(params)
				this.getIntegerList(params)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title_box {
		position: relative;
		display: flex;
		flex-direction: column;
		text-align: center;
		margin-bottom: 68rpx;
		color: #fff;

		.bg {
			position: absolute;
			height: 239rpx;
			z-index: -1;
		}

		.my_title {
			margin-top: 30rpx;
			font-size: 36rpx;
		}

		.my_money {
			font-size: 55rpx;
			font-weight: bold;
			margin-top: 26rpx;
		}
	}
	.empty_box{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 371rpx;
			height: 371rpx;
	
		}
		.text_{
			margin-top: 10rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #01AEEA;
		}
	}
	.item_box {
		.item_title {
			padding-top: 33rpx;
			margin-left: 60rpx;

			.time {
				margin-right: 22rpx;
				font-size: 32rpx;
			}
		}

		.item {
			width: 670rpx;
			margin: 0 auto;
			border-bottom: 1rpx solid #E0E0E0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:last-child {
				border-bottom: none;
			}

			.get_num {
				font-size: 30rpx;
				color: #DD0F00;
			}

			.left_box {
				display: flex;
				align-items: center;
				margin-top: 21rpx;
				padding-bottom: 20rpx;

				image {
					width: 58rpx;
					height: 58rpx;
					margin-right: 30rpx;
				}

				.text_box {
					display: flex;
					flex-direction: column;

					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}

					.time {
						font-size: 26rpx;
						color: #9A9A9A;
					}
				}
			}
		}
	}
</style>