medicine-xcx/pages/my/consumption_gold/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.consumption }}</text>
		</view>
		<u-picker mode="time" v-model="show_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.getUserInfo();
		// this.userInfo = this.$store.state.userInfo
		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.getConsumptionGold({
			pageNo: this.pageNo,
			pageSize: this.pageSize,
			stringDate: this.default_time.replace(/-/, '/')
		});
	},
	computed: {
		// userInfo() {
		// 	return this.$store.state.userInfo
		// }
	},
	async onPullDownRefresh() {
		this.pageNo= 1;
		this.total = null;
		this.list = [];
		await this.getUserInfo();
		await this.getConsumptionGold({
			pageNo: this.pageNo,
			pageSize: this.pageSize,
			stringDate: this.default_time.replace(/-/,'/')
		})
	},
	onReachBottom() {
		if(this.isLock) {
			if(this.total !== null && this.pageNo * this.pageSize >= this.total){
				this.isLock = false;
				this.$Toast('没有更多数据了哦！');
				setTimeout(()=>{
					this.isLock = true;
				},3000)
				return
			}
			this.pageNo+=1;
			this.getConsumptionGold({
				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)
						resolve()
					}else {
						reject(message)
					}
				}).catch(err => {
					reject(err.message)
				})
			})
		},
		
		toChangeTime() {
			this.show_time = true;
		},
		getConsumptionGold(params = {}) {
			uni.showLoading();
			this.$api('getConsumptionGold', params)
				.then(res => {
					let { code, result, message } = res;
					if (code === 200) {
						console.log(result.records);
						this.list = this.list.concat(result.records);
						uni.stopPullDownRefresh();
						uni.hideLoading();
					} else {
						this.$Toast(message);
						uni.stopPullDownRefresh();
						uni.hideLoading();
					}
					this.isLock = true;
				})
				.catch(err => {
					this.isLock = true;
					uni.stopPullDownRefresh();
					this.$Toast(err.message);
				});
		},
		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}`
			};
			this.getConsumptionGold(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>