samehome/pages/login/index.vue

<template>
	<view class="main">
		<view class="welcomeText">{{ i18n.welcomeText }}</view>
		<view class="signInText">{{ i18n.signInText }}</view>
		<u--form class="form" :model="userInfo" :rules="rules" ref="uForm" errorType="toast">
			<u-form-item class="input-item" prop="email" ref="item1">
				<u-icon class="icon"
					:name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'"
					size="48rpx" width="48rpx"></u-icon>
				<u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none"
					:placeholder="i18n.emailInputText">
				</u-input>
			</u-form-item>
			<u-form-item class="input-item" prop="password" ref="item1">
				<u-icon class="icon"
					:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
					size="48rpx" width="48rpx"></u-icon>
				<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx"
					border="none" :placeholder="i18n.passwordInputText">
				</u-input>
			</u-form-item>
		</u--form>
		<navigator class="forget" url="./forget">{{ i18n.forgotText }}</navigator>
		<u-button class="button" color="#00E8A2"  @click="login" :throttleTime="500">{{ i18n.Login }}</u-button>
		<view class="signUp">{{ i18n.notAccountText }}
			<navigator class="navigator" url="./register">{{ i18n.SignUp }}
			</navigator>
		</view>


	<u-modal :show="showLogOut" :confirmText="i18n.Versionupdate" :cancelText="i18n.Cancel" :showCancelButton="false"
		@confirm="logOut" @cancel="showLogOut=false" confirmColor="#00E8A2" cancelColor="#96959E">
		<view class="slot-content" v-html="conInfo.info">
			<rich-text></rich-text>
		</view>
	</u-modal>

	</view>
</template>

<script>
	import api from '@/utils/api'
	import md5 from 'js-md5'
	export default {
		name: 'login',
		data() {
			return {
				conInfo: {},
				showLogOut: false,
				// 邮箱号码是否正确
				isCanGetCode: false,
				userInfo: {
					name: '',
					password: '',
				},
				rules: {
					email: {
						type: 'string',
						required: true,
						message: this.$t('login').emailInputMessage,
						trigger: ['blur', 'change'],
					},
					password: {
						type: 'string',
						required: true,
						message: this.$t('login').passwordInputMessage,
						trigger: ['blur', 'change']
					},
				},
			}
		},
		watch: {
			'userInfo.email': {
				handler(newValue) {
					this.isCanGetCode = uni.$u.test.email(newValue);
				}
			},
		},
		computed: {
			i18n() {
				return this.$t('login')
			},
		},
		onLoad() {
			// console.log(this.$t('login.emailInputMessage'));
		// #ifdef APP-PLUS
		this.appVersion()
		// #endif 
			
		},
		onShow() {
		
		},
		methods: {
			
			logOut() {
				plus.runtime.openURL(this.conInfo.appUrl);
			},
			
			// 校验APP应用版本
			appVersion() {
				console.log("校验APP应用版本", uni.getSystemInfoSync().platform)
				// console.log('ss' + JSON.stringify(uni.getSystemInfoSync()))
				// const response = await this.$api.appVersion(param)
				// console.log(response)
			
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					console.log('当前版本号' + wgtinfo.versionCode)
					console.log(wgtinfo) 
					// console.log((wgtinfo.versionCode < response.versionCode))
					// console.log(wgtinfo.versionCode, response.versionCode)
					let param = {
						'appId': uni.getSystemInfoSync().platform,
						'versionCode': wgtinfo.version
					}
					console.log(param)
					this.$api.appVersion(param).then(response => {
						console.log(response)
						if (!response.isUpgrade) {
							return;
						}
						if (wgtinfo.version < response.versionCode) {
						// console.log('更新了吗')
						let that = this;
						this.conInfo = response
						this.showLogOut=true
						// uni.showModal({
						// 	title: this.$t("login").Versionupdate,
						// 	content: response.info,
						// 	showCancel: false,
						// 	success: function(res) {
						// 		if (res.confirm) {
						// 			plus.runtime.openURL(response.appUrl);
						// 		}
						// 	}
						// });
						}
			
					})
			
				});
			},
			
			// 登录
			login() {
				if (!this.isCanGetCode) {
					uni.$u.toast(this.$t("login").Emailincorrect)
					return
				}
				this.$refs.uForm.validate().then(res => {
					let userInfo={
						email:this.userInfo.email,
						password:md5(this.userInfo.password),
					}
					api.login(userInfo).then(res => {
							setTimeout(() => {
								uni.showToast({
									title: this.$t("login").loginSuccess
								})
							}, 600)
							uni.reLaunch({
								url: '/pages/home/index'
							})
							// 换取成功后 暂存这些数据 留作后续操作
							uni.setStorageSync('ticket',res)
					
					})
				}).catch(errors => {
					console.log('err')
				})

			},

		},
	}
</script>

<style lang="scss" scoped>
	
	/deep/ .u-modal__content__text {
		color: #96959E !important;
	}
	/deep/.u-popup__content {
		background: #323045;
	
		.u-modal__title {
			color: #fff;
		}
	
		.u-modal__content__text {
			text-align: center;
		}
	}
	
	page {
		height: 100%;
		background: url(../../static/public/BG.png) no-repeat fixed;
		background-size: cover;
	}

	.main {
		padding: 0 64rpx;
		overflow: hidden;

		.welcomeText {
			margin-top: 240rpx;
			font-size: 48rpx;
			font-weight: 800;
			text-align: center;
		}

		.signInText {
			font-size: 32rpx;
			text-align: center;
			color: #A2A0A8;
		}

		.form {
			font-size: 32rpx;
			margin-top: 48rpx;

			.input-item {
				height: 112rpx;
				line-height: 112rpx;
				background: #211F32;
				margin-bottom: 48rpx;
				border-radius: 32rpx;

				&:nth-child(2) {
					margin-bottom: 38rpx;
				}

				.icon {
					margin: 0 24rpx;
				}

				/deep/.u-form-item__body {
					padding: 0;
				}

				.input {
					height: 112rpx;
				}
			}
		}

		.forget {
			font-size: 32rpx;
			text-align: right;
			color: #00E8A2;
			cursor: pointer;
		}

		.button {
			margin-top: 64rpx;
			height: 112rpx;
			line-height: 112rpx;
			border-radius: 32rpx;
			font-size: 32rpx;
			color: #15141F !important;
		}

		.signUp {
			margin: 48rpx 0;
			text-align: center;
			font-size: 32rpx;

			navigator {
				display: inline;
				color: #00E8A2;
				padding: 0 10rpx;
			}
		}
	}
</style>