CarRental/pages_store/Operator/ChangeBalance.vue

<template>
	<view class="page">
		<u-navbar title="帐变记录" :custom-back='back' :border-bottom="false" :background="background" title-color='#2E4975'
			title-size='36' height='45'></u-navbar>
		<view class="tit">帐变明细</view>
		<view class="tablist">
			<view class="tabitem" @click="changeTab(0)">
				<view class="tabitem_tit">
					全部
				</view>
				<view class="tabLine" v-if="tabIndex == 0"></view>
			</view>
			<view class="tabitem" @click="changeTab(1)">
				<view class="tabitem_tit">
					收入
				</view>
				<view class="tabLine" v-if="tabIndex == 1"></view>
			</view>
			<view class="tabitem" @click="changeTab(2)">
				<view class="tabitem_tit">
					提现
				</view>
				<view class="tabLine" v-if="tabIndex == 2"></view>
			</view>
		</view>
		<view class="listCont">
			<view class="listItem" v-for="(item, index) in BalanceList" :key="index">
				<view class="listItem_li">
					<view class="listType">
						{{ typeReturn(item.busType) }}
					</view>
					<view class="listMoney" v-if="item.type == 1">
						+{{ formatAmount(item.amount) }}


					</view>
					<view class="listMoney" v-if="item.type == 2" style="color:#F76D6D;">

						-{{ formatAmount(item.amount) }}
					</view>

				</view>
				<view class="listItem_li">
					<view class="listDate">
						{{ item.createTime }}
					</view>
					<view class="listBalance">
						余额: {{ formatAmount(item.afterBalance) }}
					</view>
				</view>
				<view class="listItem_li">
					<view class="listOrderNo">
						订单号：{{ item.orderNo }}
					</view>
					<!-- <view class="listDetail" @click="goDetail(item.id)">
						查看详情
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: " ",
			},
			tabIndex: 0,
			BalanceList: [],
		}
	},
	onShow() {
		this.changeTab(this.tabIndex)
	},
	methods: {
		formatAmount(amount) {
			return Number(amount).toFixed(2);
		},
		back() {
			uni.redirectTo({
				url: '/pages_store/marchantHome'
			})
		},
		typeReturn(type) {
			switch (type.toString()) {
				case '1':
					return '租赁订单';
				case '2':
					return '续租订单';
				case '3':
					return '订单退款';
				case '4':
					return '押金退款';
				case '5':
					return '提现';
				case '6':
					return '提现失败';
				case '7':
					return '车损收入';
				case '8':
					return '逾期收入';
				case '9':
					return '配送费';
				case '10':
					return '调度费';
				default:
					return '未知类型';
			}
		},
		changeTab(index) {
			this.tabIndex = index
			if (index == 0) {
				let data = {

				}
				this.getChangeBlance(data)
			} else if (index == 1) {
				let data = {
					type: 1
				}
				this.getChangeBlance(data)
			} else if (index == 2) {
				let data = {
					type: 2
				}
				this.getChangeBlance(data)
			}
		},
		getChangeBlance(data) {

			this.$u.get(`/appVerify/myChangeBalanceList`, data).then((res) => {
				if (res.code == 200) {
					this.BalanceList = res.data

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
	}
}
</script>

<style lang="scss">
page {
	overflow-y: auto;
	background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
	background-size: cover;
	/* 背景图片等比缩放以覆盖整个容器 */
	background-position: center;
	/* 背景图片居中显示 */
	background-repeat: no-repeat;
	/* 防止背景图片重复 */
	min-height: 100vh;
	/* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */

}

.page {
	padding-left: 42rpx;
	padding-bottom: 100rpx;

	.listCont {
		margin-top: 30rpx;
		width: 658rpx;
		padding: 28rpx 38rpx;
		width: 658rpx;

		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.listItem {
			padding-bottom: 26rpx;
			border-bottom: 1rpx solid #D8D8D8;

			.listItem_li {
				margin-top: 10rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;

				.listType {
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.listMoney {
					font-weight: 500;
					font-size: 32rpx;
					color: #5CA8FA;
				}

				.listDate {
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.listOrderNo {
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.listBalance {
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.listDetail {
					font-weight: 400;
					font-size: 28rpx;
					color: #5CA8FA;
				}
			}
		}
	}

	.tablist {
		margin-top: 22rpx;
		margin-left: 28rpx;
		width: 658rpx;

		display: flex;
		flex-wrap: nowrap;

		.tabitem {
			margin-right: 60rpx;

			.tabitem_tit {
				font-weight: 700;
				font-size: 36rpx;
				color: #3D3D3D;
			}

			.tabLine {
				margin-top: 8rpx;
				width: 58rpx;
				height: 8rpx;
				background: #5CA8FA;
				border-radius: 5rpx 5rpx 5rpx 5rpx;
			}
		}
	}

	.tit {
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 40rpx;
		color: #3D3D3D;
	}
}
</style>