CarRental/pages_store/marchantHome.vue

<template>
	<view class="page">
		<view class="header">
			<view class="header-left">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/u3giTY4VkWYpnGWRuFHF" class="avatar" />
				<view class="userinfo">
					<view class="username">
						{{ formatName(AccountInfo.realName) }}
					</view>
					<view class="userphone">
						{{ AccountInfo.phonenumber }}
					</view>
				</view>
			</view>
			<view class="header-right" @click="topage(9)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uyb0iFo50FJ0MZg3RKkV" class="code" />
			</view>
		</view>
		<view class="balance_card">
			<view class="card_title">
				账户余额（元）
			</view>
			<view class="balance">
				{{ formatAmount(AccountInfo.balance) }}
			</view>
			<view class="bot_box">
				<view class="bot_left">
					累计提现：{{ formatAmount(AccountInfo.totalWithdrawAmount) }}
				</view>
				<view class="bot_right" @click="topage(0)">
					立即提现
				</view>
			</view>
		</view>
		<view class="tip_block" @click="topage(8)" v-if="BalanceList.length > 0">
			<view class="tip_title">
				账单
			</view>
			<view class="tip_content" v-if="BalanceList.length > 0">
				{{ typeReturn(BalanceList[0].type) }} <span v-if="BalanceList[0].type == 1">+{{ BalanceList[0].amount
					}}</span>
				<span v-if="BalanceList[0].type == 2">-{{ formatAmount(BalanceList[0].amount) }}</span> · {{
					formatTime(BalanceList[0].createTime) }}
			</view>
			<view class="tip_icon">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uIqshtvxHetRGxr1nni1" />
			</view>
		</view>
		<view class="tit">
			管理与服务
		</view>
		<view class="content">
			<view class="item" @click="topage(1)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uVEbrRDbZXvELwK73KAi" />
				订单管理
			</view>
			<view class="item" @click="topage(2)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uVfPnj9gecPjuCQeDny8" />
				车型管理
			</view>
			<view class="item" @click="topage(3)">
				<image src="	https://lxnapi.ccttiot.com/bike/img/static/uL5oGXIh24XK3RTTkQ9E" />
				收费模版
			</view>
			<view class="item" @click="topage(4)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uO1ju1OpuA5jjMR7bLYh" />
				帮助和客服
			</view>
			<view class="item" @click="topage(5)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uHNMNwTRw89NhtgZUNXK" />
				意见和反馈
			</view>
			<view class="item" v-if="AccountInfo.isAuthentication == false">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/unrltNyYYRXUutaqtuJY" />
				实名认证
			</view>
			<view class="item" @click="topage(6)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uuWE5y9qXyXTrjyZWkfr" />
				设备录入
			</view>
			<!-- <view class="item">
				<image	src="https://lxnapi.ccttiot.com/bike/img/static/u1SsqJYSQ8jTK9PkhFtF"/>
				设置
			</view> -->
			<view class="item" @click="topage(7)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/u1SsqJYSQ8jTK9PkhFtF" />
				用户端
			</view>
		</view>
		<view class="" style="margin-left: -32rpx;">
			<tab-bar :indexs='2'></tab-bar>
		</view>

	</view>
	</view>
</template>

<script>
import TabBar from '@/pages_store/components/tab-bar/tab-bar.vue';

export default {
	components: {
		TabBar
	},
	data() {
		return {
			background: {
				backgroundColor: " ",
			},
			BalanceList: [],
			AccountInfo: {}
		}
	},
	onShow() {
		this.getChangeBlance()
		this.getAconutInfo()
	},
	methods: {
		formatAmount(amount) {
			return Number(amount).toFixed(2);
		},
		formatName(name) {
			if (!name) return '';
			// 只返回第一个字符，后面用*代替
			return name.charAt(0) + '*'.repeat(name.length - 1);
		},
		formatTime(timestamp) {
			const now = new Date().getTime();
			const diff = now - new Date(timestamp).getTime();

			// 转换为天数
			const days = Math.floor(diff / (1000 * 60 * 60 * 24));

			if (days === 0) {
				return '今天';
			} else if (days === 1) {
				return '昨天';
			} else if (days < 30) {
				return `${days}天前`;
			} else {
				const date = new Date(timestamp);
				return `${date.getMonth() + 1}月${date.getDate()}日`;
			}
		},
		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 '未知类型';
			}
		},
		getAconutInfo() {
			this.$u.get(`/appVerify/myAccountInfo`,).then((res) => {
				if (res.code == 200) {
					this.AccountInfo = res.data

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

		},
		getChangeBlance() {

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

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		topage(num) {
			if (num == 0) {
				uni.navigateTo({
					url: '/pages_store/withdraw'
				});
			} else if (num == 1) {
				uni.navigateTo({
					url: '/pages_store/ordder/ordderList'
				})
			} else if (num == 2) {
				uni.navigateTo({
					url: '/pages_store/Operator/CarModel'
				})
			} else if (num == 3) {
				uni.navigateTo({
					url: '/pages_store/Operator/RuleList'
				})
			} else if (num == 4) {
				console.log('5555555');

				uni.navigateTo({
					url: '/page_user/HelpCenter'
				})
			} else if (num == 7) {

				uni.redirectTo({
					url: '/pages/index/index'
				})
			} else if (num == 8) {

				uni.redirectTo({
					url: '/pages_store/Operator/ChangeBalance'
				})
			} else if (num == 6) {

				uni.redirectTo({
					url: '/pages_bind/bind_sn'
				})
			} else if (num == 9) {

				uni.navigateTo({
					url: '/pages_store/Operator/SnBind'
				})
			} else if (num == 5) {

				uni.navigateTo({
					url: '/page_user/feedback'
				})
			}
		}
	}
}
</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-top: 200rpx;
	padding-left: 32rpx;
	padding-right: 32rpx;
	padding-bottom: 200rpx;

	.tip_block {
		padding: 20rpx 38rpx;
		display: flex;
		flex-direction: row;

		align-items: center;
		margin-top: 20rpx;
		width: 658rpx;
		height: 82rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.tip_icon {
			margin-top: 10rpx;
			margin-left: auto;

			image {
				width: 34rpx;
				height: 34rpx;
			}
		}

		.tip_title {
			font-weight: 700;
			font-size: 32rpx;
			color: #3D3D3D;
		}

		.tip_content {
			margin-left: 20rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #3D3D3D;
		}
	}

	.balance_card {
		padding: 34rpx 38rpx;
		margin-top: 34rpx;
		width: 658rpx;
		height: 334rpx;


		background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uABwK9dONs2ZZN14gJB5');
		background-size: cover;
		/* 背景图片等比缩放以覆盖整个容器 */
		background-position: center;
		/* 背景图片居中显示 */
		background-repeat: no-repeat;

		/* 防止背景图片重复 */
		.card_title {
			font-weight: 700;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.balance {
			margin-top: 24rpx;
			width: 100%;
			font-weight: 700;
			font-size: 72rpx;
			color: #FFFFFF;
		}

		.bot_box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 56rpx;

			.bot_left {
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.bot_right {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 182rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 35rpx 35rpx 35rpx 35rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #5CA8FA;
			}
		}

	}

	.content {
		margin-top: 24rpx;
		width: 688rpx;
		padding: 0 42rpx;
		// height: 456rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;

		.item:last-child {
			border-bottom: 0rpx solid #D8D8D8;
		}

		.item {
			width: 100%;
			padding: 34rpx 0;
			display: flex;
			border-bottom: 1rpx solid #D8D8D8;
			font-weight: 400;
			font-size: 32rpx;
			color: #3D3D3D;

			image {
				margin-top: 4rpx;
				margin-right: 34rpx;
				width: 38rpx;
				height: 38rpx;
			}

		}
	}

	.tit {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 36rpx;
		color: #3D3D3D;
	}

	.header {

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

		.header-left {
			display: flex;
			flex-direction: row;
			align-items: center;

			.avatar {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
			}

			.userinfo {
				margin-left: 40rpx;

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

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

		.header-right {
			display: flex;
			flex-direction: row;
			align-items: center;

			.code {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
</style>