zhywpt-sp/subpackage/personal-center/login.vue

<!-- 密码登录 -->
<template>
	<view class="login-main as-gravity-center as-layout-vertical">
		<image :src="`${$imgUrl}login/logo.png`" class="logo"></image>
		<view class="form">
			<view class="form-input">
				<view> +86</view>
				<image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" />
				<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"></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>
</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	import {
		checkStr,
		msg,
		navTo
	} from "@/utils/utils";
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		login
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	const tools = require("../static/etcUtil/tools.js");
	import {
		setItem
	} from "@/utils/storage";


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

	onLoad(() => {

	});

	onUnload(() => {

	});


	/* 登录 */
	const doLogin = () => {
		if (!state.username) {
			msg("请输入手机号！");
			return;
		}
		if (state.loginType === "pwd" && !state.password) {
			msg("请输入密码！");
			return;
		}
		if (!checkStr(state.username, "mobile")) {
			msg("请输入正确的手机号！");
			return;
		}

		let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/;
		if (!reg.test(state.password)) {
			msg("密码长度至少为8位，由数字和字母组成");
			return;
		}
		console.log(state);

		const options = {
			type: 2,
			data: {
				mobile: state.username,
				password: tools.md5Str(state.password),
			},
			method: "POST",
			showLoading: true,
		};
		request(login, options).then((res) => {
			console.log(res);
			let result = stringToJson(res.bizcontnent)

		})
	};
</script>

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

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

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

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