great_distribution/pages/login/index.vue

<template>
	<view class="login-content">
		<view class="login-content-info">
			<view class="login-bgm">
				<image class="login-logo" :src="logoUrl" mode="scaleToFill"></image>
				<text>{{ title }}</text>
			</view>
			<view class="login-info">
				<view class="login-info-box">
					<text class="login-info-title">账号密码登录</text>
					<view class="login-info-form">
						<u--form 
						labelWidth="0" 
						:borderBottom="false"
						:model="form" 
						:rules="rules" 
						ref="uForm">
							<u-form-item prop="name">
								<u--input 
								v-model="form.name" 
								placeholder="请输入账号"
								border="surround"
								shape="circle"
								clearable
								prefixIcon="account-fill"
								prefixIconStyle="font-size: 22px;color: #909399"
								></u--input>
							</u-form-item>
							<u-form-item prop="password">
								<u--input
								v-model="form.password" 
								placeholder="请输入密码"
								border="surround"
								shape="circle"
								:type="passwordType"
								clearable
								prefixIcon="lock-fill"
								prefixIconStyle="font-size: 22px;color: #909399"
								>
									<template slot="suffix">
										<u-icon @click="setPasswordType" name="eye"></u-icon>
									</template>
								</u--input>
							</u-form-item>
						</u--form>
					</view>
					<view class="login-info-submit">
						<u-button 
						class="login-info-submit-but"
						@click="submit()"
						:loading="loading"
						loadingText="登录中..."
						>登录</u-button>
					</view>
					<view class="login-info-tip">暂不支持自行注册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '《伟大转折》剧目全民分享系统',
				logoUrl: this.$commonConfig.staticUrl + "login/logo.png",
				loading: false,
				code: null,
				h5OpenId: null,
				form: {
					name: '',
					password: '',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				passwordType: 'password'
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		    this.$refs.uForm.setRules(this.rules)
		},
		onLoad(e) {
			// #ifdef H5
			if(this.distribution_user_info && this.distribution_user_info.accessToken){
				this.personsLoginCheck()
			}else {
				if(!e.code) { // 微信第三方登录失败
					this.redirectToAuth()
				}else {
					this.code = e.code
				}
			}
			// #endif
		},
		onShow() {
			this.passwordType = 'password'
		},
		methods: {
			/**
			 * 
			 * 提交登录
			 * 
			 */
			submit() {
				this.loading = true
				this.$refs.uForm.validate().then(res => {
					this.login()
				}).catch(errors => {
					this.$u.toast('校验失败')
					this.loading = false
				})
			},
			/**
			 *  登录
			 */
			async login(){
				try{
					// #ifdef H5
					const node_dev = process.env.H_NODE_ENV;
					if(node_dev && !this.h5OpenId){
						let wxinfo = await this.$u.api.wxinfoH5({code:this.code});
						this.h5OpenId = wxinfo.data.openid;
					}
					// #endif
					let res = await this.$u.api.login({
						"mobile": this.form.name,
						"password": this.form.password,
						"h5OpenId": this.h5OpenId
					})
					if(res && res.code ===200) {
						this.loading = false
						if(res.data && res.data.accessToken){
							this.$u.vuex('distribution_user_info', res.data);
							let backUrl = uni.getStorageSync('backUrlDistribution')
							console.log("backUrl===",backUrl)
							if(backUrl && backUrl != '/pages/login/index') {
								uni.reLaunch({
									url: '/'+backUrl
								})
							}else {
								uni.reLaunch({
									url: '/pages/main/index'
								})
							}
						} else {
							// 清空用户数据缓存
							uni.setStorageSync('lifeDataDistribution',{}); // 清除缓存
							this.$u.vuex('distribution_user_info', {});
							this.$set(this.form,'password','')
							if(!this.h5OpenId) {
								this.redirectToAuth()
							}
						}
					} else {
						// 清空用户数据缓存
						uni.setStorageSync('lifeDataDistribution',{}); // 清除缓存
						this.$u.vuex('distribution_user_info', {});
						this.$set(this.form,'password','')
						if(!this.h5OpenId) {
							this.redirectToAuth()
						}
					}
					
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
					this.loading = false
					uni.setStorageSync('lifeDataDistribution',{}); // 清除缓存
					this.$u.vuex('distribution_user_info', {});
					this.$set(this.form,'password','')
					if(!this.h5OpenId) {
						this.redirectToAuth()
					}
				}
			},
			/**  公众号 微信授权登录  */
			redirectToAuth() {
				const node_dev = process.env.H_NODE_ENV;
				if(node_dev){
					const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.$commonConfig.appid}&redirect_uri=${this.$commonConfig.redirectUri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
					window.location.href = authUrl;
				}
			},
			/** 检测是否已登录  */
			async personsLoginCheck() {
				try{
					let res = await this.$u.api.login({
						"noSign": 1,
						
					})
					if(res && res.code ===200) {
						if(res.data && res.data.accessToken){
							this.$u.vuex('distribution_user_info', res.data);
							let backUrl = uni.getStorageSync('backUrlDistribution')
							if(backUrl) {
								uni.reLaunch({
									url: backUrl
								})
							}else {
								uni.reLaunch({
									url: '/pages/main/index'
								})
							}
						} else {
							// 清空用户数据缓存
							uni.setStorageSync('lifeDataDistribution',{}); // 清除缓存
							this.$u.vuex('distribution_user_info', {});
							this.redirectToAuth()
						}
					} else {
						// 清空用户数据缓存
						uni.setStorageSync('lifeDataDistribution',{}); // 清除缓存
						this.$u.vuex('distribution_user_info', {});
						this.redirectToAuth()
					}
				}catch(e){
					//TODO handle the exception
					uni.setStorageSync('lifeDataDistribution',{}); // 清除缓存
					this.$u.vuex('distribution_user_info', {});
					this.redirectToAuth()
				}
				
			},
			//  设置密码类型
			setPasswordType(){
				if(this.passwordType=='password'){
					this.passwordType = 'text'
				}else {
					this.passwordType = 'password'
				}
				 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-content {
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		--bgm-height: 630rpx;
	}

	/**  背景  */
	.login-content-box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}

	.login-bgm {
		width: 100%;
		height: 630rpx;
		background-image: url("#{$image-beas-url}login/bgm.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.login-logo {
			width: 240rpx;
			height: 172rpx;
			padding: 50rpx 0;
		}

		>text {
			font-size: 32rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.login-info {
		width: 100%;
		height: calc(100% - var(--bgm-height) + 40rpx);
		background-color: #fff;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 22;
		box-sizing: border-box;
		padding: 80rpx;
		.login-info-box {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			.login-info-title {
				font-size: 32rpx;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: bold;
				color: #2D2D2D;
				padding-bottom: 40rpx;
			}
			.login-info-form {
				
			}
			.login-info-submit {
				width: 100%;
				height: 80rpx;
				padding: 40rpx 0 20rpx;
				flex-shrink: 0;
				.login-info-submit-but {
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 40rpx;
					width: 100% !important;
					height: 100% !important;
					background-color: var(--gd-bgm-color);
					color: #fff;
				}
			}
			.login-info-tip {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 400;
				color: #C2C2C2;
			}
		}
	}


	/** tabar  */
	.main-tabar {
		width: 80vw;
		height: 100rpx;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;

		.main-tabar-info {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
			border-radius: 40rpx;

			.main-tabar-item {
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;

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

				text {
					font-size: 24rpx;
				}
			}
		}
	}
</style>