materialAppletApp/pages/Login/Login.vue

<template>
	<view class="content">
		<image class="logo" src="/static/icons/logo.png"></image>
		<view class="title">
			{{$t('login.title')}}
		</view>
		<form @submit="loginSubmit">
			<view class="section">
				<input class="input-account" name="userName" :placeholder="$t('login.username')" />
			</view>
			<view class="section">
				<input class="input-pwd" password name="password" :placeholder="$t('login.password')" />
			</view>
			<view class="btn-area">
				<button type="primary" formType="submit" :loading="isLoading">{{loginBtnLabel}}</button>
			</view>
		</form>
		<!-- 第三方登录H5不支持，所以隐藏掉 -->
		<!-- #ifndef H5 -->
		<view class="third-wapper">

			<view class="third-line">
				<view class="single-line">
					<view class="line"></view>
				</view>

				<view class="third-words">绑定微信一键登录</view>

				<view class="single-line">
					<view class="line"></view>
				</view>
			</view>

			<view class="third-icos-wapper">
				<!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type='getUserInfo' @getuserinfo="wxLogin" class="third-btn-ico">
				</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- #endif -->
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				parm: {
					avatarUrl: "",
					nickName: "",
					openId: ""
				}
			};
		},
		computed: {
			...mapState(['isLoading']),
			loginBtnLabel() {
				return this.isLoading ? '' : this.$t('login.login');
			}
		},
		methods: {
			loginSubmit(event) {
				uni.hideKeyboard();
				const {
					value: loginForm
				} = event.detail;
				this.$store.dispatch('login', loginForm)
					.then(_ => {
						//标记刚登录跳转
						uni.setStorageSync('test', '1');
						uni.reLaunch({
							url: '../select/select',
						});
					});
			},

			// 实现在微信小程序端的微信登录
			async wxLogin(e) {
				var serverUrl = this.serverurl;
				// 通过微信开发能力，获得微信用户的基本信息
				var userInfo = e.detail.userInfo;
				var parm1 = '';
				// 实现微信登录
				await uni.login({
					provider: "weixin",
					success:(loginResult)=> {
						// 获得微信登录的code：授权码
						var code = loginResult.code;
						var openid = "";
						uni.request({
							url: serverUrl+"/TUserWeixin/getOpenid?code="+code,
							mothod: "GET",
							success: (userResult) => {
								openid = userResult.data.data;
								var parm = {
									avatarUrl: "",
									nickName: "",
									openId: ""
								};
								parm['avatarUrl'] = userInfo.avatarUrl;
								parm['nickName'] = userInfo.nickName;
								parm['openId'] = openid;
								uni.setStorageSync("newparm", parm);
								this.loginweixin();
							}
						});

					}
				});

			},
			loginweixin() {
				var parm = uni.getStorageSync("newparm");
				if (parm.openId != null) {
					this.$store.dispatch('loginWX', parm)
						.then(data => {
							var result = data.message;
							var userInfo = data.data;
							if (result == "off") {
								uni.setStorageSync("weixinInfo", userInfo);
								//没有绑定，跳转到微信绑定页面
								uni.reLaunch({
									url: "loginWeixin",
								});
							};
							if (result == "SUCCESS") {
								// uni.setStorageSync("weixinInfo", weixinInfo);
								uni.setStorageSync('test', '1');
								uni.reLaunch({
									url: '../select/select',
								});
								uni.setStorageSync("globalUser", userInfo);
								uni.setStorageSync("level", userInfo.level);
							}
						});
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding: 200upx 0 0 0;
		background-image: url('~@/static/backgrounds/login_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.content {
			padding: 0 20upx;
			display: flex;
			flex-flow: column nowrap;
			align-items: center;

			.logo {
				width: 401upx;
				height: 125upx;
				text-align: center;
				margin: 50upx;
			}

			form {
				width: calc(100% - 100upx);
				padding: 50upx;

				.section {
					margin: 50upx 0;
				}
				
				.input-account, .input-pwd {
				  border: 1px outset #1aad19; /* 设置边框颜色为绿色，边框宽度为2px */
				  border-radius: 4px; /* 添加圆角 */
				  box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
				  // box-shadow: 0 0 0 0.1rem #1aad19;
				}

				.btn-area {
					margin-top: 100upx;

					button {
						background-color: $uni-color-primary;
					}
				}
			}
		}
	}

	/* 第三方登录 start */
	.third-wapper {
		width: 100%;
		/* 固定底部 */
		/* bottom: 0;
		position: fixed; */

		margin-top: 60upx;

	}

	.third-line {
		display: flex;
		flex-direction: row;
		justify-content: center
	}

	.third-words {
		color: #A9A9A9;
		font-size: 13px;

		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.single-line {
		padding: 15upx 20upx;
		width: 25%;
		align-items: center;
	}

	.third-icos-wapper {
		margin-top: 30upx;

		display: flex;
		flex-direction: row;
		justify-content: center
	}

	.third-ico {
		width: 60upx;
		height: 60upx;
	}

	.third-btn-ico {
		// background-image:url(http://122.152.205.72:88/group1/M00/00/05/CpoxxFxFO-yAOjTaAAATCIZEzRU503.png);
		background-image: url('~@/static/backgrounds/weixin.png');
		width: 120upx;
		height: 120upx;
		background-color: white;
		background-size: 120upx 120upx;
		// background-repeat:no-repeat;
		border: none;
		padding: 0;
	}

	button::after {
		border: none;
	}

	/* 第三方登录 end */
</style>