crm-app-vue3/pages/login/index.vue

<template>
	<view>
		<view class="loginway">
			<view class="navigation"></view>
			<image class="loginimg" mode="widthFix" src="/static/login/logo_word.png" />
			<view class="input_wrap">
				<!-- 使用原生 input 保证 Vue3 下 v-model 可靠 -->
				<view class="input_row">
					<image class="input_icon" src="/static/login/icon-account.png" mode="aspectFit" />
					<input
						class="input_field"
						v-model="username"
						type="text"
						placeholder="请输入账号"
						placeholder-class="input_placeholder"
					/>
				</view>
				<view class="input_row">
					<image class="input_icon" src="/static/login/icon-password.png" mode="aspectFit" />
					<input
						class="input_field"
						v-model="password"
						type="text"
						password
						placeholder="请输入密码"
						placeholder-class="input_placeholder"
					/>
				</view>
				<view class="input_row row_remember">
					<u-checkbox-group v-model="checkboxs" placement="column" @change="changeRemember">
						<u-checkbox label="记住密码" name="remember" />
					</u-checkbox-group>
				</view>
				<view class="input_row agree_form_item">
					<view class="agree_row">
						<u-checkbox-group v-model="agreePrivacyList" placement="row" @change="onAgreeChange">
							<u-checkbox name="agree" />
						</u-checkbox-group>
						<text class="agree_text">我已阅读并同意</text>
						<text class="agree_link" @click="toPrivacy">《隐私政策》</text>
					</view>
				</view>
				<view class="input_row btn_row">
					<u-button type="primary" text="登录" shape="circle" @click="handleLogin" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstLoginState: "",
				username: "",
				password: "",
				form: {
					username: "",
					password: "",
					systemCode: "system_crm",
					clientFlag: "2",
					code: "996007qa.code",
					uuid: "123",
					agreePrivacy: false
				},
				checkboxs: [],
				agreePrivacyList: []
			};
		},
		computed: {
			systemList() {
				return this.$store.state.user.systemList;
			},
			remember: {
				get() {
					return this.checkboxs.length > 0;
				},
				set(value) {
					this.checkboxs = value ? ["remember"] : [];
				}
			}
		},
		mounted() {
			this.systemChange(this.form.systemCode);
			this.getUserByCache();
		},
		onLoad(option) {
			const { shiYuWxLogin } = option || {};
			this.firstLoginState = shiYuWxLogin;
		},
		methods: {
			onAgreeChange(list) {
				this.form.agreePrivacy = (list || []).includes("agree");
			},
			toPrivacy() {
				uni.navigateTo({ url: "/pages/privacy/index" });
			},
			changeRemember(value) {
				if ((value || []).length > 0) {
					uni.setStorageSync("username", this.username);
					uni.setStorageSync("password", this.password);
				} else {
					uni.removeStorageSync("username");
					uni.removeStorageSync("password");
				}
			},
			getUserByCache() {
				const savedUsername = uni.getStorageSync("username");
				const savedPassword = uni.getStorageSync("password");

				if (savedUsername && savedPassword) {
					this.username = savedUsername;
					this.password = savedPassword;
					this.form.username = savedUsername;
					this.form.password = savedPassword;
					this.checkboxs = ["remember"];
				}
			},
			handleToConfiguration() {
				uni.navigateTo({
					url: "/pages/configuration/index"
				});
			},
			systemChange(e) {
				if (!e) return;
				uni.$u.api
					.getAppSystemList()
					.then((res) => {
						const systemCodeList = res.data;
						this.$store.dispatch("user/setSystemlist", systemCodeList);
						const system = this.systemList.find((v) => v.value === e);
						this.$store.commit("user/SET_SYSTEM", system);
					})
					.catch(() => {
						uni.$u.toast("服务网络不通");
					});
			},
			handleLogin() {
				const name = (this.username || "").trim();
				const pwd = this.password || "";

				if (!name) {
					uni.$u.toast("请输入账号");
					return;
				}
				if (!pwd) {
					uni.$u.toast("请输入密码");
					return;
				}
				if (!this.form.agreePrivacy) {
					uni.$u.toast("请阅读并同意《隐私政策》");
					return;
				}

				// 同步到 form，供接口使用
				this.form.username = name;
				this.form.password = pwd;

				if (this.remember) {
					uni.setStorageSync("username", this.username);
					uni.setStorageSync("password", this.password);
				} else {
					uni.removeStorageSync("username");
					uni.removeStorageSync("password");
				}

				this.$store
					.dispatch("user/login", this.form)
					.then(() => {
						uni.switchTab({
							url: "/pages/person/index",
							success: () => {
								this.$store.dispatch("app/register");
								uni.$u.toast("登录成功");
							}
						});
					})
					.catch((res) => {
						const msg =
							(res && (res.message || res.msg)) ||
							(typeof res === "string" ? res : "登录失败");
						uni.$u.toast(msg);
					});
			}
		}
	};
</script>

<style lang="scss">
	.network_configuration_box {
		margin: auto;

		.netWrokSet {
			display: flex;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.text {
				margin-left: 10rpx;
				font-size: 26rpx;
			}
		}
	}

	.systemLabel_wrap {
		display: flex;
		align-items: center;

		.label {
			margin-left: 10rpx;
		}
	}

	.systemCode_wrap {
		position: relative;

		::v-deep .uni-select {
			border-radius: 100px;
			border: 1px solid #dadbde;
			height: 40px;
			padding: 0px 10px 0px 46px;

			&:before {
				content: "";
				display: block;
				width: 16px;
				height: 16px;
				background-image: url("../../static/login/icon-system.png");
				background-size: 16px 16px;
				position: absolute;
				left: 20px;
				top: 50%;
				transform: translate(0%, -50%);
			}

			.uni-select__input-placeholder {
				font-size: 14px;
				color: rgb(192, 196, 204);
			}
		}

		.system_debt {
			::v-deep .uni-select {
				&:before {
					background-image: url("../../static/outbound/icon-zycs.png");
				}
			}
		}

		.system_debt_ccb {
			::v-deep .uni-select {
				&:before {
					background-image: url("../../static/outbound/icon-zycs.png");
				}
			}
		}

		.system_debt_spdb {
			::v-deep .uni-select {
				&:before {
					background-image: url("../../static/outbound/icon-zycs.png");
				}
			}
		}

		.system_debt_public {
			::v-deep .uni-select {
				&:before {
					background-image: url("../../static/outbound/icon-zycs.png");
				}
			}
		}

		.system_debt_dfkl {
			::v-deep .uni-select {
				&:before {
					background-image: url("../../static/outbound/icon-zycs.png");
				}
			}
		}

		.system_debt_cib {
			::v-deep .uni-select {
				&:before {
					background-image: url("../../static/outbound/icon-zycs.png");
				}
			}
		}

		.system_debt_icbc_h {
			::v-deep .uni-select {
				&:before {
					background-image: url("../../static/outbound/icon-zycs.png");
				}
			}
		}

		.system_debt_tjxt {
			::v-deep .uni-select {
				&:before {
					background-image: url("../../static/outbound/icon-zycs.png");
				}
			}
		}

		// .systemIcon{
		// 	width: 16px;
		// 	height: 16px;
		// 	position: absolute;
		// 	left: 20px;
		// 	top: 50%;
		// 	transform: translate(0%, -50%);
		// 	display: none;
		// }
	}

	.inputFormWrap {
		::v-deep .u-border {
			border: 1px solid #dadbde !important;
		}
	}

	.agree_form_item {
		::v-deep .u-form-item__body__right {
			flex: 1;
		}
	}
	.agree_row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.agree_text {
		font-size: 26rpx;
		color: #606266;
		margin-left: 8rpx;
	}
	.agree_link {
		font-size: 26rpx;
		color: #108cff;
		margin-left: 4rpx;
	}

	.max {
		width: 500rpx;
		height: 500rpx;
	}

	page {
		background: #fff;
	}

	.loginway {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.navigation {
			background-color: #108cff;
			width: 100%;
			height: 120rpx;
		}

		.loginimg {
			display: block;
			width: 100%;
			height: 100%;
		}

	.input_wrap {
		padding: 20rpx 30rpx;
	}

	.input_row {
		display: flex;
		align-items: center;
		border: 1px solid #dadbde;
		border-radius: 100px;
		padding: 0 20rpx 0 36rpx;
		margin-bottom: 24rpx;
		background: #fff;
		box-sizing: border-box;
	}
	.input_icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
	}
	.input_field {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #303133;
	}
	.input_placeholder {
		color: #c0c4cc;
	}
	.row_remember,
	.agree_form_item {
		border: none;
		padding: 0;
		margin-bottom: 16rpx;
		background: transparent;
	}
	.btn_row {
		border: none;
		padding: 24rpx 0 0;
		margin-bottom: 0;
		background: transparent;
	}
	}
</style>