jp-railway/pages/mine/myMealCard.vue

<template>
	<view>
		<u-navbar title="我的饭卡"></u-navbar>
		<view class="background">
			<view class="head">
				<view class="balance">
					饭卡余额（元）
				</view>
				<view class="time">
					<!-- <text class="icon"><img src="../../assets/img/riLine-information-line@1x.png" alt=""></text>
					<text>下次清零 2023月6月1日 0点</text> -->
				</view>
			</view>
			<view class="main">
				<view class="number">
					{{balance}}
				</view>
				<view class="img">
					<img src="../../assets/img/ze-card@1x.png" alt="">
				</view>
			</view>

		</view>

		<view class="content">
			<view class="tabs">
				<u-tabs bar-width="100" inactive-color="#bbbbbb" active-color="#101010" :list="list" :is-scroll="false"
					:current="current" @change="change"></u-tabs>
			</view>
			<!-- 消费 -->
			<view class="consumption" v-if="this.current==0">
				<view class="total">
					{{month}}月消费{{payAmountTotal}}元
				</view>
				<view class="each" v-for="(item,index) in payAmountList" :key="index">
					<view class="place-date">
						<view class="place">
							{{item.deviceName}}
						</view>
						<view class="date">
							{{item.payTime}}
						</view>
					</view>
					<view class="number">
						-{{item.payAmount}}
					</view>
				</view>
			</view>
			<!-- 餐费存入 -->
			<view class="deposit" v-if="this.current==1">
				<view class="each" v-for="(item,index) in rechargeRecordList" :key="index">
					<view class="place-date">
						<view class="place">
							{{item.chargeTime.slice(0,4)}}年{{parseInt(item.chargeTime.slice(5,7))}}月餐费存入
						</view>
						<view class="date">
							{{item.chargeTime}}
						</view>
					</view>
					<view class="number">
						+{{item.rechargeAmount}}
					</view>
				</view>
			</view>

		</view>

		<!-- <u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider> -->
	</view>
</template>

<script>
	import * as mineAPI from '@/apis/pagejs/mine.js'
	
	export default {
		data() {
			return {
				list: [{
					name: '余额消费'
				}, {
					name: '餐费存入'
				}],
				current: 0,
				balance: 0,
				payAmountList: [],
				payAmountTotal: 0,
				rechargeRecordList: [],
				month: ''
			}
		},
		onReady() {
			var date = new Date();
			this.month = date.getMonth() + 1;
			
			this.getCardPayAmountList();
		},
		methods: {
			getCardPayAmountList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineAPI.cardPayAmountList().then((response) => {
					uni.hideLoading();
					this.balance = response.data.balance;
					this.payAmountList = response.data.payAmountList;
					this.payAmountTotal = response.data.payAmountTotal;
					this.rechargeRecordList = response.data.rechargeRecordList;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		padding-bottom: 100px;
	}

	.background {
		background: linear-gradient(-0.06deg, rgba(246, 248, 248, 1) -0.15%, rgba(240, 225, 198, 1) 48.47%, rgba(236, 193, 148, 1) 101.15%);
		padding: 32rpx;
		color: #fff;
		height: 231px;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.balance {
				color: rgba(51, 51, 51, 1);
				font-family: 'Regular';
			}

			.time {
				opacity: 0.7;
				color: rgba(49, 54, 66, 1);
				font-size: 24rpx;
				font-family: 'PingFang Regular';

				.icon {
					vertical-align: middle;
					margin-right: 4rpx;
				}
			}
		}

		.main {

			display: flex;
			justify-content: space-between;

			.number {
				color: rgba(16, 16, 16, 1);
				font-size: 80rpx;
				font-weight: bold;
			}

			.img {
				margin-top: -20rpx
			}
		}



	}

	.content {
		margin: -260rpx 32rpx 24rpx;
		background-color: #fff;
		border-radius: 8px 8px 0px 0px;
		overflow: hidden;
		min-height: 800rpx;

		/deep/.u-tab-bar {
			background-color: #0076FF !important;
		}

		// 消费
		.consumption,
		.deposit {
			padding: 0 36rpx;

			.total {
				line-height: 88rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				border-top: 1px solid #E6E6E6;
				font-family: 'Alibaba-PuHuiTi-Regular';
			}

			.each {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 0;
				border-top: 1px solid #E6E6E6;

				.place-date {
					.place {
						color: #101010;
						font-size: 32rpx;
						font-weight: bold;
						font-family: 'Alibaba-PuHuiTi-Regular';
					}

					.date {
						color: rgba(119, 119, 119, 1);
						margin-top: 16rpx;
					}
				}

				.number {
					color: rgba(31, 74, 153, 1);
					font-size: 48rpx;
					font-weight: bold;
				}

			}
		}
	}
</style>