hs_hzl_uniapp_ml/pages/user/rechargeHistory.vue

<template>
	<view>
		<view>
			<view>
				<u-list @scrolltolower="scrolltolower">
					<view class="hand">
						<uni-row>
							<uni-col :span="10">
								<u--text text="所属机构" size="22" bold color="#619f8a"></u--text>
							</uni-col>
							<uni-col :span="14">
								<u--text :text="data.organizationName" size="22" bold color="#757575">
								</u--text>
							</uni-col>
						</uni-row>
					</view>
					<view v-if="indexList.length === 0" style="padding: 0 50px;">
						<image style="margin: 0 auto; width: 100%;" src="../../static/img/page/empty_view.png">
						</image>
					</view>
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="listItemStyle">
							<u-row>
								<u-col v-if="item.moneyType === 1" class="orderFoodStyle orderFoodType0">[机构充值]
								</u-col>
								<u-col v-if="item.moneyType === 2">
									<view class="orderFoodStyle orderFoodType0">
										[个人充值]
									</view>
								</u-col>
								<u-col v-if="item.moneyType === 3">
									<view class="orderFoodStyle orderFoodType0">
										[记账额度]
									</view>
								</u-col>
								<u-col v-if="item.moneyType === 4">
									<view class="orderFoodStyle orderFoodType0">
										[押金充值]
									</view>
								</u-col>
								<u-col v-if="item.moneyType === 5">
									<view class="orderFoodStyle orderFoodType0">
										[因错退还]
									</view>
								</u-col>
								<u-col v-if="item.moneyType === 6">
									<view class="orderFoodStyle orderFoodType0">
										[余额退还]
									</view>
								</u-col>
								<u-col v-if="item.moneyType === 7">
									<view class="orderFoodStyle orderFoodType0">
										[押金退还]
									</view>
								</u-col>
								<u-col v-if="item.moneyType === 8">
									<view class="orderFoodStyle orderFoodType0">
										[额度调整]
									</view>
								</u-col>
							</u-row>
							<u-row>
								<u-col span="6" class="orderTimeText">{{item.rechargeTime}}</u-col>
								<u-col span="6" textAlign="right" class="moneyPlusText">
									{{item.rechargeIntegral+"￥"}}
								</u-col>
								<!-- 	<u-col span="6" v-if="item.moneyType === 4" textAlign="right" class="moneyMinusText">
									{{item.rechargeIntegral+"￥"}}
								</u-col> -->
							</u-row>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateShow: false,
				changeDate: Number(new Date()),
				data: {
					organizationName: "梅陇卫生服务中心",
				},
				from: {},
				pageNum: 1,
				pageSize: 10,
				indexList: [],
				total: 1
			}
		},
		onLoad() {
			this.getRechargeHistoryList()
		},
		methods: {
			async getRechargeHistoryList() {
				if (this.indexList.length >= this.total) {
					return;
				}
				this.from.userName = uni.getStorageSync('userInfo').userName
				this.from.organizationCode = uni.getStorageSync('orgInfo').organizationCode
				this.data.organizationName = uni.getStorageSync('orgInfo').organizationName
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/getRecharge?' + "pageNum=" + this.pageNum + "&" + "pageSize=" + this.pageSize,
					method: 'post',
					data: this.from,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.total = res.total
					this.loadmore(res.rows)
				}
			},
			submitDate(e) {
				this.dateShow = false
				//使用change事件中的日期数据 防止用户快速滑动同时点击确定后数据丢失
				this.from.date = this.changeDate
				//获取消费信息
				this.indexList = this.getRechargeHistoryList()
			},
			change(e) {
				this.changeDate = this.result(e.value, e.mode)
			},
			scrolltolower() {
				this.getRechargeHistoryList()
			},
			loadmore(data) {
				if (data.length === 0) {
					return;
				}
				for (var i = 0; i < data.length; i++) {
					this.indexList.push(data[i])
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

			result(time, mode) {
				const timeFormat = uni.$u.timeFormat
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			}
		}
	}
</script>

<style>
	.hand {
		padding: 5%;
		border-radius: 10px 10px 0 0;
		background: linear-gradient(to bottom right, #85c1bf, #f1fef9);
	}

	.orgTop {
		margin-bottom: 5px;
	}

	.sxButton {
		width: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.listTermDate {
		padding: 10px 0;
	}

	.listItemStyle {
		padding: 10px;
		border-bottom: 1px solid #d8d8d8;
		border-top: 1px solid #d8d8d8;
	}

	.orderFoodStyle {
		font-size: 22px;
	}

	.orderFoodType0 {
		color: #1787ff;
	}

	.orderFoodType1 {
		color: #000000;
	}

	.moneyPlusText {
		font-size: 26px;
		color: #40a25d;
	}

	.moneyMinusText {
		font-size: 26px;
		color: #b30000;
	}

	.orderTimeText {
		position: relative;
		top: 5px;
		color: #bebebe;
		font-size: 14px;
	}
</style>