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

<template>
	<view>
		<view class="loginway">
			<div class="navigation"></div>
			<image class="loginimg" mode="widthFix" src="/static/login/logo_word.png"></image>
			<view class="input_wrap">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item label="" prop="username" class="inputFormWrap">
						<u--input shape="circle" clearable prefixIcon="/static/login/icon-account.png"
							:prefixIconStyle="prefixIconStyle" v-model="form.username" placeholder="请输入账号"></u--input>
					</u-form-item>
					<u-form-item label="" prop="password" class="inputFormWrap">
						<u--input shape="circle" clearable password prefixIcon="/static/login/icon-password.png"
							:prefixIconStyle="prefixIconStyle" v-model="form.password" placeholder="请输入密码"></u--input>
					</u-form-item>
					<u-form-item label="" prop="" class="inputFormWrap">
						<u-checkbox-group v-model="checkboxs" placement="column" @change="changeRemember">
							<u-checkbox :label="'记住密码'" :name="'remember'"></u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item>
						<u-button type="primary" text="登录" shape="circle" @click="handleLogin"></u-button>
					</u-form-item>
					<!-- 			<u-form-item>
						<view class="network_configuration_box">
							<view class="netWrokSet" @click="handleToConfiguration">
								<image src="/static/login/network.png" mode=""></image>
								<text class="text">呼叫中心配置</text>
							</view>
						</view>
					</u-form-item> -->
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// systemList,
				prefixIconStyle: {
					width: "16px",
					height: "16px",
					marginRight: "4px",
					marginLeft: "10px"
				},
				form: {
					// password: "Huilong@#$999",
					password: "",
					systemCode: "system_crm",
					username: "",
					clientFlag: "2",
					// username: "huihui",
					code: "996007qa.code",
					uuid: "123"
				},
				checkboxs: [],
				rules: {
					username: {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: []
					},
					password: {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: []
					}
				},
				// mac: getMacAddress(),
			};
		},
		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();
		},
		methods: {
			changeRemember(value){
				if (value.length > 0) {
					uni.setStorageSync('username', this.form.username);
					uni.setStorageSync('password', this.form.password);
				} else {
					uni.removeStorageSync('username');
					uni.removeStorageSync('password');
				}
			},
			getUserByCache() {
				const savedUsername = uni.getStorageSync('username');
				const savedPassword = uni.getStorageSync('password');

				if (savedUsername && savedPassword) {
					this.form.username = savedUsername;
					this.form.password = savedPassword;
					this.remember = true;
				}
			},
			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((e) => {
					uni.$u.toast("服务网络不通");
				})
			},
			handleLogin() {
				this.$refs.uForm.validate().then(() => {
					if (this.remember) {
						uni.setStorageSync('username', this.form.username);
						uni.setStorageSync('password', this.form.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(() => {
						uni.$u.toast("请检查您是否有该系统权限");
					})
				})
			},
		},
	}
</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;
		}
	}

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