leromro-mini/pages/UserSelection.vue

<template>
	<view class="container">
		<view class="select-title">欢迎使用</view>
		<view class="select-text">请选择您的身份开始使用</view>
		<view class="select-box">
			<view v-for="item in list" :key="item.key" class="select-item" :style="{ background: item.bgcColor }" @click="handleBtn(item.key)">
				<view class="select-img">
					<img :src="item.icon" alt="" style="width: 48px;height: 48px;">
				</view>
				<view class="select-text-box">
					<view class="select-lable">{{ item.label }}</view>
					<view class="select-box-text">{{ item.text }}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
import {
	userOrWorker
} from '@/api/login';

import store from "@/store"

const list = [
	{
		label: '我是用户',
		text: '寻找并预约服务',
		icon: '/static/img/user.png',
		key: 1,
		bgcColor: 'linear-gradient(135deg, rgba(45, 58, 78, 1) 0%, rgba(61, 74, 94, 1) 100%), rgba(0, 0, 0, 0)'
	},
	{
		label: '我是志愿者',
		text: '提供专业服务',
		icon: '/static/img/admin.png',
		key: 2,
		bgcColor: 'linear-gradient(135deg, rgba(16, 185, 129, 1) 0%, rgba(32, 201, 145, 1) 100%), rgba(0, 0, 0, 0)'
	}
]

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 lang="scss">
.container {
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.select-title {
		font-size: 30px;
		font-weight: 400;
		line-height: 36px;
		color: rgba(45, 58, 78, 1);
		margin-bottom: 14px;
	}

	.select-text {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		color: rgba(75, 85, 99, 1);
		margin-bottom: 50px;
	}

	.select-box {
		width: 100%;

		.select-item {
			padding: 24px;
			display: flex;
			align-items: center;
			border-radius: 16px;
			margin-bottom: 24px;
			.select-img {
				margin-right: 24px;

			}

			.select-text-box {
				.select-lable {
					font-size: 20px;
					font-weight: 400;
					line-height: 28px;
					color: #fff;
					margin-bottom: 8px;
				}

				.select-box-text {
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					color: #fff;
				}
			}
		}
	}
}
</style>