anKeYuan-vendingMachine/pages/home.vue

<!-- 首页 -->
<template>
	<view class="home">
		<view class="user-card">
			<view class="avatar">
				<text>{{ userData.userName ? userData.userName.charAt(0) : '?' }}</text>
			</view>
			<view class="user-detail">
				<view class="user-name">{{ userData.userName || '未登录' }}</view>
				<view class="user-phone">{{ userData.phone || '---' }}</view>
			</view>
			<view class="points-section">
				<text class="points-label">当前积分</text>
				<text class="points-value">{{ userData.points ?? 0 }}</text>
			</view>
		</view>
		<view class="flex-null-1"></view>
		<view class="scan-btn-wrapper">
			<view class="scanCodeButton" @click="scanCode()">
				<text class="btn-icon"></text>
				<text class="btn-text">积分兑换</text>
			</view>
		</view>
		<view class="flex-null-2"></view>
	</view>
</template>

<script>
	import { getUserInfo } from '@/api/index';
	import { browserDetection } from '@/utils/auth';
	export default {
		data() {
			return {
				userData: {
					userName: '',
					phone: '',
					points: '',
				},
			}
		},
		onShow() {
			this.getUserInfo();
			browserDetection();
		},
		methods: {
			async getUserInfo() {
				let obj = {
					token: uni.getStorageSync('token'),
					phone: uni.getStorageSync('phone'),
				}
				const {
					data
				} = await getUserInfo(obj)
				if (data.code == 200) {
					this.$set(this, 'userData', data.data);
					uni.setStorageSync('points',data.data.points)
				}
			},
			scanCode() {
				uni.navigateTo({
					url: "/pages/scanCodePage",
				});
				// let result = 'http://192.168.166.11/api/exam/points/record/exchangeMachineService?mid=2603220061&sid=6&pid=6&pri=100.00';
				// uni.navigateTo({
				// 	url: '/pages/commodityInfo?q=' +
				// 		encodeURIComponent(JSON.stringify(result))
				// });
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.home {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #f5f7fa;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
		align-items: center;
		background: url(../static/back2.png);
		background-size: 100% 100%;

		.user-card {
			width: 500rpx;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 48rpx 40rpx;
			box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.06);
			display: flex;
			align-items: center;
			gap: 30rpx;
			margin-bottom: 80rpx;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #0183FA, #00BFFF);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}

			.avatar text {
				font-size: 44rpx;
				color: #fff;
				font-weight: bold;
			}

			.user-detail {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 12rpx;

				.user-name {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
					line-height: 1.4;
				}

				.user-phone {
					font-size: 28rpx;
					color: #999;
					line-height: 1.4;
				}
			}


			.points-section {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				gap: 8rpx;
				flex-shrink: 0;

				.points-label {
					font-size: 24rpx;
					color: #999;
				}

				.points-value {
					font-size: 48rpx;
					font-weight: 700;
					color: #ff9800;
					line-height: 1.2;
				}
			}
		}

		.scan-btn-wrapper {
			width: 100%;
			display: flex;
			justify-content: center;

			.scanCodeButton {
				width: 480rpx;
				height: 100rpx;
				background: linear-gradient(135deg, #0183FA, #00a8ff);
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12rpx;
				box-shadow: 0 10rpx 24rpx rgba(1, 131, 250, 0.35);
				transition: all 0.2s ease;

				.btn-icon {
					font-size: 36rpx;
				}

				.btn-text {
					font-size: 34rpx;
					color: #fff;
					font-weight: 600;
					letter-spacing: 2rpx;
				}
			}

			.scanCodeButton:active {
				transform: scale(0.96);
				box-shadow: 0 4rpx 12rpx rgba(1, 131, 250, 0.25);

			}
		}

		.flex-null-1 {
			flex: 8;
		}
		.flex-null-2 {
			flex: 1;
		}
	}
</style>