leromro-mini/pages/login.vue

<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image :src="imagePath" mode="aspectFit" style="width: 100rpx;height: 100rpx;"></image>
			<text class="title">金邻助家</text>
		</view>
		<up-popup :show="show" mode="bottom" @close="close" @open="open">
			<view class="popup-content">
				<!-- 上方头像 -->
				<up-avatar :src="src" class="avatar"></up-avatar>

				<!-- 下方按钮 -->
				<up-button type="error" shape="circle" class="button" @click="handleLogin">获取微信授权登录</up-button>
			</view>
			<view class="xieyi text-center">
				<text class="text-grey1">登录即代表同意</text>
				<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
				<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted
} from 'vue';
import {
	useRouter,
	useRoute
} from 'vue-router'; // 根据实际情况选择路由库
import {
	getCodeImg,
	login
} from '@/api/login';

import store from "@/store"

const imagePath = '/static/9efd1.png';

// 获取全局配置
// const globalConfig = getApp().globalData.config;
const register = ref(false); // 用户注册开关
const loginForm = reactive({
	username: "",
	password: "",
	code: "",
	uuid: ''
});

const codeUrl = ref("");
const captchaEnabled = ref(true);


const router = useRouter();
// 创建响应式数据  
const show = ref(false);

// 定义方法  
function open() {
	// 打开逻辑，比如设置 show 为 true  
	show.value = true;
}

function close() {
	// 关闭逻辑，设置 show 为 false  
	show.value = false;
}

// 用户注册
const handleUserRegister = () => {
	router.push('/pages/register'); // 替换为实际的路由跳转逻辑
};

// 隐私协议
const handlePrivacy = () => {
	uni.navigateTo({
		url: '/pages_home/pages/login/index'
	})
};

// 用户协议
const handleUserAgrement = () => {
	uni.navigateTo({
		url: '/pages_home/pages/login/user'
	})
};

// 登录方法
const handleLogin = async () => {
	uni.showLoading({
		title: "登录中，请耐心等待..."
	}); // 使用uni-app的loading方法替代$modal.loading
	// 获取服务商信息
	uni.getProvider({
		service: "oauth",
		success: (res) => {
			console.log(res);
		}
	});

	// 获取code
	uni.login({
		provider: 'weixin',
		success: (res) => {
			if (res.code == 500) {
				uni.showLoading({
					title: "系统暂未开发，敬请期待"
				});
			} else if (res.code == 400) {
				uni.showLoading({
					title: "系统暂未开放"
				});
			}
			loginForm.code = res.code;
			// 获取用户信息
			uni.getUserInfo({
				success: (res) => {
					console.log("用户信息", res);
				}
			});

			pwdLogin();

			uni.hideLoading()
		},
	});
};

// 密码登录
const pwdLogin = async () => {
	if (!store) {
		console.error("Store is not defined");
		return;
	}
	store.dispatch('Login', loginForm).then(() => {
		// uni.hideLoading(); // 关闭加载提示
		loginSuccess();
	})
};


// 登录成功后，处理函数
const loginSuccess = () => {
	store.dispatch('GetInfo').then((res) => {

		console.log(store.state.user.userOrWorker, '>>>>99');
		if (store.state.user.userOrWorker == 0) {
			uni.reLaunch({
				url: '/pages/UserSelection'
			});
			return
		}
		uni.setStorageSync('userType', store.state.user.userOrWorker);
		uni.switchTab({
			url: '/pages/index'
		})

	});
};

// 页面加载时获取验证码
onMounted(() => {
	uni.setStorageSync('userType', 0);
	open();
});
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.normal-login-container {
	width: 100%;

	.logo-content {
		width: 100%;
		font-size: 21px;
		text-align: center;
		padding-top: 25%;

		image {
			border-radius: 4px;
		}

		.title {
			margin-left: 10px;
		}
	}

	.login-form-content {
		text-align: center;
		margin: 20px auto;
		margin-top: 15%;
		width: 80%;

		.input-item {
			margin: 20px auto;
			background-color: #f5f6f7;
			height: 45px;
			border-radius: 20px;

			.icon {
				font-size: 38rpx;
				margin-left: 10px;
				color: #999;
			}

			.input {
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
			}

		}

		.login-btn {
			margin-top: 40px;
			height: 45px;
		}

		.reg {
			margin-top: 15px;
		}

		.xieyi {
			color: #333;
			margin-top: 20px;
		}

		.login-code {
			height: 38px;
			float: right;

			.login-code-img {
				height: 38px;
				position: absolute;
				margin-left: 10px;
				width: 200rpx;
			}
		}
	}
}

/* 弹性容器：垂直方向排列 */
.popup-content {
	display: flex;
	flex-direction: column;
	/* 上下布局 */
	align-items: center;
	/* 水平居中 */
	padding: 30rpx;
	/* 元素间距 */
	gap: 30rpx;
}

/* 头像样式 */
.avatar {
	width: 120rpx;
	height: 160rpx;
}

/* 按钮样式 */
.button {
	// width: 170rpx !important;
	/* 覆盖默认宽度 */
	margin-left: 0 !important;
	/* 清除原代码中的 margin-left */
}
</style>