zhywpt-sp/login/login.vue

<!-- 密码登录 -->
<template>
	<view class="login-main as-gravity-center as-layout-vertical">
		<image :src="`${$imgUrl}login/logo.png`" class="logo" mode="aspectFill"></image>
		<view class="title">九州ETC</view>
		<view class="form">
			<view class="form-input">
				<view> +86</view>
				<image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" mode="aspectFill" />
				<input class="input" v-model="state.username" focus placeholder="请输入手机号"
					placeholder-class="form-placeholder" type="number" maxlength="11" />
			</view>
			<view class="form-input" v-if="state.loginType === 'pwd'">
				<input class="input" v-model="state.password" type="text" placeholder="请输入密码"
					placeholder-class="form-placeholder" :password="state.isPwdType ? true : false" />
				<image :src="`${$imgUrl}login/${
            state.isPwdType ? 'icon_eye_close' : 'icon_eye_open'
          }.png`" class="eye" @click="state.isPwdType = !state.isPwdType" mode="aspectFill"></image>
			</view>
			<view class="form-input" v-if="state.loginType === 'code'">
				<input class="input" v-model="state.code" placeholder="请输入验证码" placeholder-class="form-placeholder"
					maxlength="6" type="number" />
				<verification-code :bg="false" :mobile="state.username"></verification-code>
			</view>
		</view>

		<view class="btn">
			<submit-button title="登录" @submit="doLogin" ></submit-button>
		</view>

		<view class="agreement">
			<checkbox-group @change="checkboxChange" class="group">
				<checkbox :checked="state.checked" color="#00B38B" size="30" icon-size="30" label-size="24"
					style="transform:scale(0.85)">
				</checkbox>
				<label>我已阅读并同意</label>
			</checkbox-group>
			<!-- <view class="txt-grey">我已阅读并同意</view> -->
			<view class="txt-green" @click="toRead">《平台用户服务隐私协议》</view>
		</view>

		<view class="btns as-layout-horizontal">
			<view class="as-layout-vertical as-gravity-center" @click="navTo('/login/register-step1')">
				<view class="bg blue as-gravity-center">
					<image :src="`${$imgUrl}login/icon_register.png`" class="img" mode="aspectFill" />
				</view>
				<view class="label">注册账号</view>
			</view>

			<view class="as-layout-vertical as-gravity-center" @click="
          state.loginType === 'pwd'
            ? (state.loginType = 'code')
            : (state.loginType = 'pwd')
        ">
				<view class="bg orange as-gravity-center">
					<image :src="`${$imgUrl}login/icon_code.png`" class="img" mode="aspectFill" />
				</view>
				<view class="label">{{
          state.loginType === "pwd" ? "验证码登录" : "密码登录"
        }}</view>
			</view>

			<view class="as-layout-vertical as-gravity-center" @click="navTo('/login/forget-pwd-step1')">
				<view class="bg purple as-gravity-center">
					<image :src="`${$imgUrl}login/icon_pwd.png`" class="img" mode="aspectFill" />
				</view>
				<view class="label">忘记密码</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { checkStr, msg, navTo, subscribeMessages } from "@/utils/utils";
	import { onLoad, onUnload } from "@dcloudio/uni-app";
	import { login, loginCode, loginTime, wechatAppID } from "@/utils/network/api.js";
	import { request } from "@/utils/network/request.js";
	import { stringToJson } from "@/utils/network/encryption";
	import { useUserStore } from "@/stores/user";
	import { setItem } from "@/utils/storage";
	const userStore = useUserStore();
	const { fetchToken } = userStore;

	const state = reactive({
		checked: false, //是否勾选协议
		isPwdType: true, //是不是密码类型
		loginType: "pwd", //pwd-密码登录 code-验证码登录
		username: "", //用户名
		password: "", //密码
		code: "", //验证码
	});

	onLoad(() => {
		uni.$on("login", (data) => {
			state.username = data.phone;
		});
	});

	onUnload(() => {
		uni.$off("login");
	});
	const checkboxChange = (e) => {
		console.log(e);
		state.checked = !state.checked;
	};

	// 去协议页面 
	const toRead = () => {
		navTo("/login/agreement")
	}


	/* 登录 */
	const doLogin = () => {
		if (!state.username) {
			msg("请输入手机号！");
			return;
		}
		if (state.loginType === "pwd" && !state.password) {
			msg("请输入密码！");
			return;
		}
		if (state.loginType === "code" && !state.code) {
			msg("请输入验证码！");
			return;
		}
		if (!checkStr(state.username, "mobile")) {
			msg("请输入正确的手机号！");
			return;
		}
		if (!state.checked) {
			msg("请勾选我已阅读并同意《平台用户服务隐私协议》");
			return;
		}

		//判断是验证码登录，还是账号密码登录
		if (state.loginType === "code") {
			reqLogin(loginCode, {
				mobile: state.username,
				code: state.code,
				loginTime: loginTime,
			});
		} else {
			reqLogin(login, {
				mobile: state.username,
				password: state.password,
				loginTime: loginTime,
			});
		}
	};

	/* 执行登录 */
	const reqLogin = (code : string, data : object) => {
		console.log(code, data);
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		request(code, options).then((res) => {
			const result = stringToJson(res.bizContent);
			console.log(result);
			console.log(typeof (result));
			fetchToken(result.code).then((data : any) => {
				console.log("登录", data);
				setItem('mobile', state.username)
				subscribeMessages();
				msg("登录成功！");
				uni.$emit("refreshOrder");
				// uni.navigateBack();
				uni.switchTab({
					url: '/pages/index/index'
				})
			});
		});
	};
</script>

<style lang="scss" scoped>
	.login-main {
		border-top: 1rpx solid #dcdcdc;
		padding: 22rpx 30rpx 140rpx;

		.logo {
			width: 260rpx;
			height: 160rpx;
		}

		.group {
			display: flex;
			align-items: center;
		}

		.title {
			font-size: 46rpx;
			color: #333333;
			margin-top: 30rpx;
			font-weight: 600;
		}

		.form {
			width: 100%;
			margin-top: 100rpx;

			.form-input {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 90rpx;
				border-bottom: 1rpx solid #dcdcdc;
				padding: 0rpx 12rpx;
				color: #333333;

				&:last-child {
					margin-top: 50rpx;
				}

				.input {
					flex: 1;
					padding-right: 48rpx;
					font-size: 28rpx;
					font-family: Microsoft YaHei;
					background-color: transparent;
				}

				.arror {
					width: 28rpx;
					height: 25rpx;
					margin-left: 16rpx;
					margin-right: 40rpx;
				}

				.eye {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.form-placeholder {
				color: #999999;
			}
		}

		.btn {
			width: 100%;
			margin: 120rpx 40rpx 50rpx;
		}

		.agreement {
			font-size: 24rpx;
			display: flex;
			align-items: center;

			.txt-grey {
				color: #666666;
			}

			.txt-green {
				color: #00b38b;
			}

			:deep(.u-checkbox) {
				margin-right: -20rpx;
			}
		}

		.btns {
			width: 100%;
			margin-top: 125rpx;
			justify-content: space-around;
			padding: 0px 8rpx;

			.bg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;

				.img {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.blue {
				background-color: #1d9cff;
			}

			.orange {
				background-color: #feb654;
			}

			.purple {
				background-color: #8060ff;
			}

			.label {
				font-size: 26rpx;
				color: #333333;
				margin-top: 30rpx;
			}
		}
	}
</style>