leromro-mini/pages/UserSelection.vue

<template>
	<view class="container">
		<img src="/static/serverImg/home/logo.png" alt="" class="logo">
		<view class="select-title">欢迎使用<text class="logo-title">金邻助家</text> </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 class="logo-text">技术支持:重庆金树林科技有限公司</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: 'rgba(221, 94, 69, 1)'
	},
	{
		label: '我是志愿者',
		text: '提供专业服务',
		icon: '/static/img/admin.png',
		key: 2,
		bgcColor: ' rgba(233, 91, 93, 1)'
	}
]
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: 20px;
	}

	.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;
				}
			}
		}
	}
}

.logo {
	width: 232rpx;
	height: 232rpx;
}

.logo-title {
	font-size: 32px;
	color: rgba(221, 94, 69, 1);
	font-weight: bold;

}

.logo-text {
	font-size: 28rpx;
	font-weight: 400;
	line-height: 40rpx;
	color: rgba(107, 114, 128, 1);
	margin-top: 36rpx;
}
</style>