zh_order_food_xcx/pages-my/my-balance.vue

<template>
	<view class="flex-common-css iPhone-bottom  box-border-box seckill-box">
		<Nav title="我的余额" bgckgroundBox='transparent' leftColor='#fff' titleColor='#fff'></Nav>
		<view class="p-24 box-border-box">
			<view class="zzc-box b-rad-20 bgc-f flex-direction align-items-center flex-justify-center">
				<view class="fs-28 fc-9 mb-8">
					总资产(元)
				</view>
				<view class="fs-52 fc-3 fw-b">
					<text class="fs-40 fw-600">￥</text>{{Number(moneyNum).toFixed(2)}}
				</view>
			</view>
		</view>
		<view class="plr-24 box-border-box mb-24">
			<view class="b-rad-200 bgc-f box-border-box">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="title-box b-rad-200 box-border-box text-align-center" v-for="(item,index) in titleData"
						@click="titleBut(item)" :class="item.water_key === titleId?'bgc-4FB3EF fc-f':''">
						{{item.water_name}}
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="plr-24 box-border-box">
			<view class="p-24 box-border-box bgc-f sx-box">
				<picker mode="date" fields="month" :value="tiem" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="align-items-center">
						<view class=" fs-28 fc-0 fw-400 align-items-center mr-8">
							{{tiem}}
						</view>
						<image class="right" src="@/static/img/toRight.png" mode=""></image>
					</view>
				</picker>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll-view-css plr-24 box-border-box" @scrolltolower="scrolltolower">
			<view class="bgc-f plr-32 box-border-box">
				<view v-if="listData.length == 0" class="scroll-view-css">
					<EnBlank :customSrc='true'>
						<template v-slot:blankImg>
							<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
						</template>
					</EnBlank>
				</view>
				<view class="ptb-24 item-box" v-for="(item,index) in listData" :key="index">
					<view class="align-items-center flex-justify-space mb-4">
						<view class="fs-32 fc-3">
							{{item.mark}}
						</view>
						<view class="fs-32 fw-600" :class="item.add_reduce === 0?'fc-3':'fc-FE9E11'">
							{{item.price}}
						</view>
					</view>
					<view class="align-items-center flex-justify-space">
						<view class="fs-24 fc-9">
							{{item.created_at}}
						</view>
						<view class="fs-24 fc-9">
							当前余额{{Number(item.remainder).toFixed(2)}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		moneyStatus,
		moneyList
	} from "@/api/money.js"
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	export default {
		components: {
			EnBlank
		},
		data() {
			// const currentDate = this.getDate({
			// 	format: true
			// })
			return {
				titleId: "0",
				titleData: [],
				listData: [],
				tiem: '',
				page: 1,
				total: 0,
				moneyNum: ''
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(data) {
			if (data) {
				this.moneyNum = data.money
			}
		},
		mounted() {
			this.moneyStatus()
			this.moneyList()
			this.getTime()
		},
		methods: {
			getTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
				this.tiem = `${year}-${month < 10 ? "0" + month : month}`; // 格式化为 YYYY-MM
			},
			moneyList() {
				moneyList({
					status: this.titleId,
					monthDate: this.tiem,
					page: this.page
				}).then((res) => {
					if (res.code === 1) {
						this.listData.push(...res.data.list)
						this.total = res.data.total
					}
				})
			},
			bindDateChange(e) {
				this.tiem = e.detail.value
				this.page = 1;
				this.listData = [];
				this.moneyList();
			},
			titleBut(item) {
				if (item.water_key === this.titleId) {
					return
				}
				this.titleId = item.water_key
				this.page = 1;
				this.listData = [];
				this.moneyList();
			},
			moneyStatus() {
				moneyStatus().then((res) => {
					if (res.code === 1) {
						this.titleData = res.data
					}
				})
			},
			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}`;
			},
			scrolltolower() {
				if (this.listData.length < this.total) {
					++this.page
					this.moneyList()
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item-box {
		border-bottom: 1rpx solid #EEEEEE;
	}

	.item-box:last-child {
		border: none;
	}

	.right {
		width: 32rpx;
		height: 32rpx;
	}

	.sx-box {
		border-radius: 20rpx 20rpx 0 0;
	}

	.seckill-box {
		background: linear-gradient(to bottom, #4FB3EF, #F5F5F5, #F5F5F5);
	}

	.zzc-box {
		width: 100%;
		height: 268rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.title-box {
		min-width: 28.3%;
		display: inline-block;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 50rpx;
	}
</style>