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="btn">
			<button v-if="state.checked" size="default" type="primary" class="ui-btn" open-type="getPhoneNumber"
				@getphonenumber="doLogin">一键登录</button>
			<button v-else size="default" type="primary" class="ui-btn" @click="choiceAgreement">一键登录</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-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, userBasicGetOpenId, userBasicGetPhoneNumber } from "@/utils/network/api.js";
	import { requestNew } 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: "code", //pwd-密码登录 code-验证码登录
		username: "", //用户名
		password: "", //密码
		code: "", //验证码
		back: 0,  //从app扫码看协议过来  登录了 还需要回到手机号验证页面   0 是原本的登录  1 要回去的登录(从哪来回哪去)  2运维跳转过来得中转页
		params: {}
	});

	onLoad((option) => {
		if (option.back == 1) {
			state.back = option.back
		}
		if (option.back == 2) {
			state.back = option.back
			state.params = JSON.parse(decodeURIComponent(option.params))
		}
		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 choiceAgreement = () => {
		if (!state.checked) {
			msg("请勾选我已阅读并同意《平台用户服务隐私协议》");
			return;
		}
	}
	/* 登录 */
	const doLogin = (e) => {
		console.log("e", e)
		reqLogin(userBasicGetPhoneNumber, {
			jsCode: e.detail.code,
			iv: e.detail.iv,
			encryptedData: e.detail.encryptedData,
		});
	};

	/* 执行登录 */
	const reqLogin = (code : string, data : object) => {
		console.log(code, data);
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		requestNew(code, options).then((res) => {
			const result = res;
			console.log(result);
			fetchToken(result.phoneNumber).then((data : any) => {
				console.log("登录", data);
				setItem('mobile', result.phoneNumber)
				subscribeMessages();
				msg("登录成功！");
				uni.$emit("refreshOrder");
				if (state.back == 1) {
					uni.navigateBack({
						delta: 1
					})
				} else if (state.back == 2) {
					const params = encodeURIComponent(JSON.stringify(state.params))
					uni.redirectTo({
						url: `/subpackage/after-sale/transfer-page?params=${params}`
					})
				} else {
					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;
			margin-top: 100rpx;
		}

		.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: 580rpx 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>