yoe_mall_mini/src/app/pages/auth/login.vue

<template>
	<view class="w-screen h-screen flex flex-col" :style="themeColor()">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{ height: headerHeight }">
			<top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header" />
		</view>
		<!-- #endif -->
		<view class="mx-[60rpx]">
			<view class="pt-[140rpx] text-[44rpx] font-500 text-[#333]">账号密码登录</view>
			<view class="text-[26rpx] text-[#333] leading-[34rpx] mt-[24rpx] mb-[90rpx]"
				@click="redirect({ url: '/app/pages/auth/register', param: { type } })">
				<text>还没有账号,</text>
				<text class="text-primary">去注册</text>
			</view>
			<u-form labelPosition="left" :model="formData" errorType="toast" :rules="rules" ref="formRef">
				<template v-if="type == 'username'">
					<view class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6]">
						<u-form-item label="" prop="username" :border-bottom="false">
							<u-input v-model="formData.username" border="none" maxlength="40" placeholder="请输入账号"
								autocomplete="off" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx"
								placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]" />
						</u-form-item>
					</view>
					<view
						class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6] mt-[40rpx]">
						<u-form-item label="" prop="password" :border-bottom="false">
							<u-input v-model="formData.password" border="none" :password="isPassword" maxlength="40"
								placeholder="请输入密码" autocomplete="new-password" class="!bg-transparent"
								:disabled="real_name_input" fontSize="26rpx"
								placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]">
								<template #suffix>
									<view @click="changePassword" v-if="formData.password">
										<u-icon :name="isPassword ? 'eye-off' : 'eye-fill'" color="#b9b9b9"
											size="20"></u-icon>
									</view>
								</template>
							</u-input>
						</u-form-item>
					</view>
				</template>
				<!-- #ifdef MP-WEIXIN -->
				<template v-if="type == 'wx'">
					<button
						class="w-full h-[80rpx] !bg-[var(--primary-color)] text-[26rpx] rounded-[40rpx] leading-[80rpx] font-500 !text-[#fff] !mx-[0]"
						open-type="getPhoneNumber" @getphonenumber="getphonenumber">
						授权手机号登录
					</button>
				</template>
				<!-- #endif -->
				<template v-if="type == 'mobile'">
					<view class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6]">
						<u-form-item label="" prop="mobile" :border-bottom="false">
							<u-input v-model="formData.username" type="number" maxlength="11" border="none"
								placeholder="请输入手机号" autocomplete="off" class="!bg-transparent"
								:disabled="real_name_input" fontSize="26rpx"
								placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]" />
						</u-form-item>
					</view>
					<view
						class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6] mt-[40rpx]">
						<u-form-item label="" prop="mobile_code" :border-bottom="false">
							<u-input v-model="formData.code" type="number" maxlength="4" border="none"
								class="!bg-transparent" fontSize="26rpx" :disabled="real_name_input"
								placeholder="请输入手机验证码" placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]">
								<template #suffix>
									<sms-code v-if="configStore.login.agreement_show" :mobile="formData.username"
										type="login" v-model="formData.mobile_key" :isAgree="isAgree"></sms-code>
									<sms-code v-else :mobile="formData.username" type="login"
										v-model="formData.mobile_key"></sms-code>
								</template>
							</u-input>
						</u-form-item>
					</view>
				</template>
			</u-form>
			<template v-if="type != 'wx'">
				<view
					class="h-[34rpx] text-right text-[24rpx] text-[var(--text-color-light6)] leading-[34rpx] mt-[20rpx]"
					@click="toResetpwd">忘记密码</view>
				<view class="mt-[106rpx]">
					<button
						class="w-full h-[80rpx] !bg-[var(--primary-color)] text-[26rpx] rounded-[40rpx] leading-[80rpx] font-500 !text-[#fff] !mx-[0]"
						loadingText="登录中" @click="handleLogin">
						登录
					</button>
				</view>
			</template>
		</view>
		<view class="footer w-full">
			<view class="text-[26rpx] leading-[36rpx] text-[#666] text-center mb-[30rpx] font-400" @click="setType">
				{{ type == "wx" ? "短信登录" : "其他登录方式" }}
			</view>
			<view class="flex justify-center gap-[40rpx]"> </view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue";
import { usernameLogin, mobileLogin, clientLogin } from "@/app/api/auth";
import useMemberStore from "@/stores/member";
import useConfigStore from "@/stores/config";
import { useLogin } from "@/hooks/useLogin";
import { t } from "@/locale";
import { redirect, getToken, pxToRpx, isWeixinBrowser } from "@/utils/common";
import { onLoad } from "@dcloudio/uni-app";
import { topTabar } from "@/utils/topTabbar";
import useSystemStore from "@/stores/system";

const systemStore = useSystemStore();
/********* 自定义头部 - start ***********/
const topTabarObj = topTabar();
const param = topTabarObj.setTopTabbarParam({
	title: "",
	topStatusBar: { bgColor: "#fff", textColor: "#333" },
});
/********* 自定义头部 - end ***********/
const headerHeight = computed(() => {
	return Object.keys(systemStore.menuButtonInfo).length
		? pxToRpx(Number(systemStore.menuButtonInfo.height)) +
		pxToRpx(systemStore.menuButtonInfo.top) +
		pxToRpx(8) +
		"rpx"
		: "auto";
});
const real_name_input = ref(true);
const memberStore = useMemberStore();
const configStore = useConfigStore();
const type = ref("");
const isAgree = ref(false);
const isShowQuickLogin = ref(false); // 是否显示快捷登录
const popupRef = ref();
const isPassword = ref(true);

const changePassword = () => {
	isPassword.value = !isPassword.value;
};

const dialogClose = () => {
	popupRef.value.close();
};

const dialogConfirm = () => {
	isAgree.value = true;
	popupRef.value.close();
	handleLogin();
};

onLoad(async (option: any) => {
	// #ifdef H5
	uni.getStorageSync("openid") &&
		Object.assign(formData, { wx_openid: uni.getStorageSync("openid") });
	// #endif

	// #ifdef MP-WEIXIN
	uni.getStorageSync("openid") &&
		Object.assign(formData, { weapp_openid: uni.getStorageSync("openid") });
	// #endif

	type.value = option.type ? option.type : "username";

	// if (option.type) {
	// 	if (option.type == 'mobile') {
	// 		if (configStore.login.is_mobile) {
	// 			type.value = option.type
	// 			uni.getStorageSync('pid') && (Object.assign(formData, { pid: uni.getStorageSync('pid') }))
	// 		}
	// 	} else if (option.type == 'username' && configStore.login.is_username) {
	// 		type.value = option.type
	// 	}
	// } else {
	// 	if (configStore.login.is_username) {
	// 		type.value = 'username'
	// 	} else if (configStore.login.is_mobile) {
	// 		type.value = 'mobile'
	// 	}

	// }

	// // 如果只开启了账号密码登录，那么就不需要跳转到登录中间页了

	// // #ifdef MP-WEIXIN
	// if (!configStore.login.is_auth_register) {
	// 	isShowQuickLogin.value = false;
	// } else {
	// 	isShowQuickLogin.value = true;
	// }
	// // #endif

	// // #ifdef H5
	// if (isWeixinBrowser()) {
	// 	// 微信浏览器
	// 	if (!configStore.login.is_auth_register) {
	// 		isShowQuickLogin.value = false;
	// 	} else {
	// 		isShowQuickLogin.value = true;
	// 	}
	// } else {
	// 	// 普通浏览器
	// 	isShowQuickLogin.value = false;
	// }
	// // #endif
});

const formData = reactive({
	username: "",
	password: "",
	code: "",
	mobile_key: "",
});

const getphonenumber = async (res: any) => {
	console.log(res, "?????????????");
};

onMounted(() => {
	// 防止浏览器自动填充
	setTimeout(() => {
		real_name_input.value = false;
	}, 800);
});

const agreeChange = () => {
	isAgree.value = !isAgree.value;
};

const setType = () => {
	if (type.value == "username") {
		// #ifndef MP-WEIXIN
		type.value = "mobile";
		// #endif

		// #ifdef MP-WEIXIN
		type.value = "wx";
		// #endif
	} else if ((type.value == "wx")) {
		type.value = "mobile";
	} else {
		type.value = "username";
	}
};

const loading = ref(false);

const rules = computed(() => {
	return {
		username: [
			{
				type: "string",
				required: true,
				message: "请输入账号",
				trigger: ["blur", "change"],
			},
			{
				validator(rule: any, value: any) {
					return uni.$u.test.mobile(value);
				},
				message: "请输入正确的手机号",
				trigger: ["change", "blur"],
			},
		],
		password: {
			type: "string",
			required: true,
			message: "请输入密码",
			trigger: ["blur", "change"],
		},
	};
});

const formRef: any = ref(null);

const handleLogin = () => {
	formRef.value.validate().then(() => {
		if (loading.value) return;
		let datas: any = {}
		if (type.value == "username") {
			datas.username = formData.username
			datas.password = formData.password
		}
		loading.value = true;
		clientLogin(datas)
			.then((res: any) => {
				memberStore.setToken(res.data.access_token);
				useLogin().handleLoginBack();
			})
			.catch(() => {
				loading.value = false;
			});
	});
};

const toLink = () => {
	const pages = getCurrentPages(); // 获取页面栈
	if (pages.length > 1) {
		const currentPage = pages[pages.length - 2].route;
		if (currentPage == "app/pages/auth/index") {
			// 返回上一页
			uni.navigateBack({
				delta: 1, // 默认值是1，表示返回的页面层数
			});
		} else {
			redirect({ url: "/app/pages/auth/index", mode: "redirectTo" });
		}
	} else {
		redirect({ url: "/app/pages/auth/index", mode: "redirectTo" });
	}
};

const toResetpwd = () => {
	uni.showToast({ title: "请联系管理员重置密码", icon: "none" });
};
</script>
<style lang="scss" scoped>
:deep(.u-input) {
	background-color: transparent !important;
}

:deep(.u-checkbox) {
	margin: 0 !important;
}

:deep(.u-form-item) {
	flex: 1;

	.u-line {
		display: none;
	}
}

.footer {
	// position: absolute;
	// position: fixed;
	margin-top: 200rpx;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: calc(151rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(151rpx + env(safe-area-inset-bottom));
}
</style>