leromro-mini/pages/UserSelection.vue

<template>
	<view class="container">
		<!-- 用户部分 -->
		<view class="button-group">
			<image :src="imagePath2" mode="aspectFit" class="icon"></image>
			<up-button type="success" shape="circle" class="button" @click="handleBtn(1)">用户</up-button>
		</view>

		<!-- 志愿者部分 -->
		<view class="button-group">
			<image :src="imagePath1" mode="aspectFit" class="icon"></image>
			<up-button type="success" shape="circle" class="button" @click="handleBtn(2)">志愿者</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		userOrWorker
	} from '@/api/login';
	
	import store from "@/store"
	
	const imagePath1 = '/static/志愿者.png';
	const imagePath2 = '/static/用户.png';

	function handleBtn(userType = 0) { // 默认值 0
		const params = {
			userType: userType // 使用传入的 userType
		};
		// 把 userType 存入本地存储
		uni.setStorageSync('userType', userType);

		userOrWorker(params)
			.then(res => {
				// 重新拉取用户信息，储存本地
				store.dispatch('GetInfo').then(() => {
					uni.reLaunch({
						url: '/pages/index'
					});
				})
			})
			.catch(err => {
				console.error('设置失败:', err);
			});
	}
</script>

<style scoped>
	/* 外层容器 - 垂直排列两个按钮组 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		/* 可根据需要调整高度 */
	}

	/* 每个按钮组（图片+按钮）垂直排列 */
	.button-group {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
		/* 组与组之间的间距 */
	}

	/* 图标样式 */
	.icon {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
		/* 图片和按钮之间的间距 */
	}

	/* 按钮样式 (可根据需要调整) */
	.button {
		/* 如果uView按钮需要额外样式可以在这里添加 */
	}
</style>