techtron/pages/login.vue

<template>
	<view class="normal-login-container">

		<view style="color: aliceblue;position: fixed;left: 10px;z-index: 999999;top:50px;font-size: 10px;">
			{{i18('版本')}}:{{version}}</view>
		<view style="color: aliceblue;position: fixed;right: 10px;z-index: 999999;top:50px" @click="changeLocale">
			{{ $t('login.language') }}：{{localeConfig[locale]}}<uni-icons type="gear" size="15"></uni-icons>
		</view>
		
		<view style="height: 80vh;;">
			<!-- <image style="width: 750px;height: 807px;" :src="imgUrl+'/login/backImg2.png'" mode="widthFix"/> -->
			<!-- <view class="logo-content align-center justify-center flex">
		  <text class="title" style="font-size: 25px;margin-left:-71px">{{$t('login.title') }}</text>
		</view> -->
			
			<view class="" style="    padding-top: 23vh;display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;">
				<image style="height: 3vh;width: 15vh;"
					src="../static/images/new/starts/login/backImg2.png"></image>
				<text class="welcome" style="margin-top: 20px; height: 20vh;font-size: 16px; color: #a3a3a3;">Welcome</text>
			</view>

		</view>
		<!-- 登录表单 -->
		<view class="login-form-content" style="z-index: 99;position: relative;" v-show="isLogin">
			<view class="input-item flex align-center" v-if="locale == 'en'">
				<!-- <view class="iconfont icon-user icon"></view> -->
				<uni-row>
					<uni-col :span="2">
						<uni-icons class="icon" type="email" size="20" color="#e3e3e3"></uni-icons>
					</uni-col>
					<uni-col :span="22">
						<input style="color: #000000;" v-model="loginForm.username" class="input" type="text"
							:placeholder="$t('login.mailInput')" maxlength="30" />
					</uni-col>
				</uni-row>
			</view>
			<view class="input-item flex align-center" v-if="locale == 'en'">
				<!-- <view class="iconfont icon-password icon"></view> -->
				<uni-row <uni-col :span="2">
					<uni-icons class="icon" type="locked-filled" size="20" color="#e3e3e3"></uni-icons>
					</uni-col>
					<uni-col :span="18">
						<uni-easyinput style="margin-left:-10px ;color: #000000;" :inputBorder="false"
							v-model="loginForm.password" type="password" class="input"
							:placeholder="$t('login.pwdInput')" maxlength="30" />
					</uni-col>
				</uni-row>
			</view>
			<view class="xieyi text-center" style="margin-top: -10px;" v-if="locale == 'en'">
				<text class="text-grey">{{ $t('login.noAccount') }}，</text>
				<text @click="toggleLoginMode" class="text-green">{{ $t('login.resiger') }}</text>
				<!-- <text @click="handleUserAgrement" class="text-green">立即注册</text> -->
				<!-- <text @click="handlePrivacy" class="text-blue">《隐私协议》</text> -->
			</view>

			<!-- <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> <image :src="codeUrl" @click="getCode" class="login-code-img"></image></view  >
      </view> -->
			<view class="text-green" style="margin: 5px 0;margin-top:15px;font-size: 12px;;" @click="forgetPwd">
				{{i18('忘记密码?')}}</view>
			<view class="action-btn" style="z-index: 99;position: relative;">
				<button @click="handleLogin"
					class="login-btn cu-btn block bg-blue lg round">{{ $t('login.tologin') }}</button>
			</view>
		</view>
		<view class="login-form-content" style="z-index: 9999;position: relative;" v-show="!isLogin"
			@submit.prevent="handleRegister">
			<!-- 注册表单 -->
			<view>
				<view class="input-item flex align-center">
					<uni-row>
						<uni-col :span="2">
							<uni-icons class="icon" type="email" size="20" color="#e3e3e3"></uni-icons>
						</uni-col>
						<uni-col :span="22">
							<input style="color: #000000;" v-model="register.username" class="input" type="text"
								:placeholder="$t('login.mailInput')" maxlength="30" />
						</uni-col>
					</uni-row>
				</view>
				<view>
					<view class="input-item flex align-center">
						<uni-row>
							<uni-col :span="2">
								<uni-icons class="icon" type="locked" size="20" color="#e3e3e3"></uni-icons>
							</uni-col>
							<uni-col :span="22">
								<input v-model="register.password" style="color: #000000;" class="input" type="text"
									:placeholder="$t('login.pwdInput')" maxlength="30" />
							</uni-col>
						</uni-row>
					</view>
				</view>
				<view class="xieyi text-center" style="margin-top: -10px;">
					<p class="text-grey">{{ $t('register.hasAccount') }}<a href="#" @click="toggleLoginMode"
							class="text-green">{{ $t('register.backLogin') }}</a></p>
				</view>
				<view class="action-btn" style="z-index: 9999;position: relative;">
					<button @click="handleRegister" type="submit"
						class="login-btn cu-btn block bg-blue lg round">{{ $t('register.register') }}</button>
				</view>
			</view>
		</view>
		<!-- <view v-show="isLogin">
    <view class="img">
	    <image @click="buleTeeth" style="width: 31px;" :src="imgUrl+'/login/blueTeeth.png'" mode="widthFix"/>
	</view>
	<view class="blue-text">
	    <text @click="buleTeeth">{{ $t('login.buletooth') }}</text>
	</view>
	</view> -->
		<u-picker @cancel="cancelLocale" :confirmText="i18('确认')" :cancelText="i18('取消')" :show="showLocale"
			keyName="label" :columns="localeList" @confirm="changeLanguage"></u-picker>
		<u-popup :zoom="false" :show="showStatus" :mask-close-able="false" mode="center" :closeable="false"
			border-radius="14" height="150rpx">
			<view style="margin:20rpx">
				{{i18('检测到有新版本，请点击下载')}} {{newVerson}}
			</view>
			<view v-if="!isShowProgress" style="text-align: center;text-decoration: underline;margin:10px"
				@click="downloadFile">
				{{i18('立即下载')}}
			</view>


			<view class="progress-container" v-if="isShowProgress">
				<view class="progress-box">
					<view class="text"> {{i18('文件下载中，请稍后......')}}</view>
					<progress :percent="progress" show-info stroke-width="3" />
				</view>
			</view>
		</u-popup>
		<u-popup :show="showCode" :round="10" mode="center" @close="closeCode">
			<view style="border-radius: 10px;
    width: 250px;">
				<image style="border-radius: 10px" src="/static/images/new/code.jpg" mode="widthFix" />
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		checkVersion,
		forgetPwd
	} from '@/api/login'
	import {
		getToken
	} from "@/utils/auth";
	import i18 from '@/utils/i18.js'
	export default {
		data() {
			return {
				version: "",
				newVerson: "",
				showLocale: false,
				localeList: [
					[{
						"label": "简体中文",
						"id": "zh-Hans"
					}, {
						"label": "英文",
						"id": "en"
					}]
				],
				localeConfig: {
					"zh-Hans": "简体中文",
					"en": "英文"
				},
				// currentImg: "",
				codeUrl: "",
				captchaEnabled: true,
				globalConfig: getApp().globalData.config,
				loginForm: {
					username: "",
					password: "",
					code: "",
					uuid: ''
				},
				register: {
					username: "",
					password: "",
					locale: "",
				},
				appVersionCode: "",
				showStatus: false,
				downloadUrl: "",
				iosUrl: "",
				isShowProgress: false,
				progress: 0,
				isLogin: true, // 是否为登录模式
				showCode: false,
				platom: ""
			}
		},
		// mounted() {
		//        this.addTextEvent()
		//    },
		computed: {
			imgUrl: function() {
				return getApp().globalData.config.imgUrl;
			}
		},
		created() {
			let self = this;
			uni.getSystemInfo({
				success: function(res) {
					self.platom = res.platform;
					self.checkVersion();
				}
			});
			this.setLocale()
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
			this.checkLogin();
			this.readLoginInfo()
		},
		methods: {
			readLoginInfo() {
				let loginForm = uni.getStorageSync("loginInfo");
				if (loginForm) {
					this.loginForm = loginForm;
					this.pwdLogin()
				}

			},
			saveLoginInfo() {
				if (this.loginForm.username.length > 0) {
					uni.setStorageSync("loginInfo", this.loginForm);
				}
			},
			forgetPwd() {
				let self = this;
				uni.showModal({
					editable: true,
					title: i18('请输入邮箱'),
					success: function(res) {
						if (res.confirm) {
							let mail = res.content;
							if (!mail) {
								uni.showToast({
									title: i18('邮箱不能为空'),
									icon: 'none'
								})
								return;
							}
							forgetPwd(mail, self.locale).then(res => {
								if (res.data) {
									uni.showToast({
										title: i18('请查看邮箱进行操作'),
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: msg,
										icon: 'none'
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			closeCode() {
				this.showCode = false
			},
			i18(text) {
				return i18(text)
			},
			downloadFile() {
				let self = this;

				const platform = this.platom.toLowerCase();
				if (platform == 'android') {
					let downUrl = self.downloadUrl;
					plus.runtime.openURL(downUrl);
				} else {
					const appleId = '86726R3L5K'; // 这里替换成你的 apple id
					plus.runtime.launchApplication({
							action: self.iosUrl
						},
						function(e) {
							console.log('Open system default browser failed: ' + e.message);
						}
					);
				}


				// self.isShowProgress = true;
				// const downloadTask = uni.downloadFile({
				//   url: self.downloadUrl,
				//   success: res => {
				//     if (res.statusCode === 200) {
				//       this.isShowProgress = false;
				//       console.log('下载成功');
				//     }
				//     let that = this;
				//     plus.runtime.install(res
				//             .tempFilePath, {
				//           force: false
				//         },
				//         function() {
				//           plus.runtime
				//               .restart();
				//         });
				//   }
				// })
				// console.log(downloadTask)
				// downloadTask.onProgressUpdate((res) => {
				//   if(res.progress > 0) {
				//     this.isShowProgress = true;
				//   }
				//   this.progress = res.progress;
				//   console.log('下载进度：' + res.progress);
				//   console.log('已下载长度：' + res.totalBytesWritten);
				//   console.log('文件总长度：' + res.totalBytesExpectedToWrite);
				// })
			},
			checkVersion() {
				let appBaseInfo = uni.getAppBaseInfo();
				let appVersionCode = appBaseInfo.appVersionCode;
				this.appVersionCode = appVersionCode;
				this.version = appVersionCode;
				let self = this;
				checkVersion({
					"versionCode": appVersionCode,
					"platom": this.platom
				}).then(res => {
					let cz_app_version = res.data;
					console.log(cz_app_version)
					if (cz_app_version != null) {
						let onlineVersion = cz_app_version.version;
						console.log(onlineVersion)
						let isForce = cz_app_version.isForce;
						let url = cz_app_version.down_url;
						self.downloadUrl = url;
						self.iosUrl = cz_app_version.ios_url;
						if (onlineVersion > appVersionCode) {
							self.newVerson = onlineVersion;
							self.showStatus = true;
						}
					}
				});

			},
			cancelLocale() {
				this.showLocale = false;
			},
			setLocale() {
				this.locale = uni.getLocale()
				if (this.locale == "en") {
					this.localeList = [
						[{
							"label": "Chinese",
							"id": "zh-Hans"
						}, {
							"label": "English",
							"id": "en"
						}]
					];
					this.localeConfig = {
						"zh-Hans": "Chinese",
						"en": "English"
					};
				} else if (this.locale == "zh-Hans") {
					this.localeList = [
						[{
							"label": "简体中文",
							"id": "zh-Hans"
						}, {
							"label": "英文",
							"id": "en"
						}]
					];
					this.localeConfig = {
						"zh-Hans": "简体中文",
						"en": "英文"
					};
				}
			},
			changeLanguage(e) {
				this.showLocale = false;
				console.log(e.value[0].id)
				uni.setLocale(e.value[0].id);
			},
			changeLocale() {
				this.showLocale = true;
			},
			buleTeeth() {
				this.$tab.navigateTo('/pages/bluetooth/index/index')
			},
			checkLogin() {
				let token = getToken()
				if (token) {
					this.loginSuccess()
				} else {}
			},
			// // 隐私协议
			// handlePrivacy() {
			//   let site = this.globalConfig.appInfo.agreements[0]
			//   this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			// },
			// 用户协议
			handleUserAgrement() {
				let site = this.globalConfig.appInfo.agreements[1]
				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			// // 获取图形验证码
			// getCode() {
			//   getCodeImg().then(res => {
			//     this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
			//     if (this.captchaEnabled) {
			//       this.codeUrl = 'data:image/gif;base64,' + res.img
			//       this.loginForm.uuid = res.uuid
			//     }
			//   })
			// },
			// 登录方法
			async handleLogin() {
				if (this.locale == "zh-Hans") {
					this.showCode = true;
					return;
				}
				if (this.loginForm.username === "") {
					this.$modal.msgError(this.$t('login.logintip'))
				} else if (this.loginForm.password === "") {
					this.$modal.msgError(this.$t('login.pwdtip'))
				}
				// else if (this.loginForm.code === "" && this.captchaEnabled) {
				//         this.$modal.msgError("请输入验证码")}
				else {

					this.$modal.loading(this.$t('login.logining'))

					this.pwdLogin()
				}
			},
			// 密码登录
			async pwdLogin() {
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {
					// if (this.captchaEnabled) {
					//   this.getCode()
					// }
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				//保存用户信息
				this.saveLoginInfo()
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/index')
				})
			},

			// async handleRegister() {

			//    if (this.register.newUsername === '' || this.register.newPassword === '') {
			//      // 如果用户名或密码为空，则弹出提示框
			//      uni.showToast({
			//        title: '请输入用户名和密码',
			//        icon: 'none'
			//      })
			//      return
			//    }

			//    // 发送注册请求
			//    uni.showLoading({

			//      title: '注册中...'
			//    })
			//    uni.request({
			//      url: 'http://localhost:8080/login/mailRegister',
			//      method: 'POST',
			//      data: {
			//        username: this.register.newUsername,
			//        password: this.register.newPassword
			//      },
			//      success: res => {
			//        // uni.hideLoading()
			//        if (res.data.success) {
			//          // 注册成功，弹出提示框并回到登录模式
			//          uni.showToast({
			//            title: '注册成功',
			//            success: () => {
			//              this.isLogin = true
			//              this.register.newUsername = ''
			//              this.register.newPassword = ''
			//            }
			//          })
			//        } else {
			//          // 注册失败，弹出提示框显示错误信息
			//          uni.showToast({
			//            title: res.data.message || '注册成功',
			//            icon: 'none'
			//          })
			//        }
			//      },
			//      fail: err => {
			//        uni.hideLoading()
			//        uni.showToast({
			//          title: err.errMsg || '注册失败',
			//          icon: 'none'
			//        })
			//      }
			//    })
			//  },
			// 注册方法
			async handleRegister() {
				// debugger
				if (this.register.username === "") {
					this.$modal.msgError(this.$t('register.logintip'))
				} else if (this.register.password === "") {
					this.$modal.msgError(this.$t('register.pwdtip'))
				}
				// else if (this.loginForm.code === "" && this.captchaEnabled) {
				// this.$modal.msgError("请输入验证码")}
				else {
					// debugger
					this.$modal.loading(this.$t('register.logining'))
					this.pwdRegister()
				}
			},
			// 用户注册
			async pwdRegister() {

				this.$store.dispatch("Register", this.register).then(res => {
					if (res.msg) {
						this.$modal.showToast(res.msg)
						return;
					}
					this.loginForm.username = this.register.username;
					this.loginForm.password = this.register.password;
					this.$modal.closeLoading()
					this.registerSuccess()
				});
			},
			// 注册成功后，处理函数
			registerSuccess(result) {
				// 设置用户信息
				this.toggleLoginMode();
			},

			toggleLoginMode() {
				// 切换登录/注册模式
				this.isLogin = !this.isLogin
				if (this.isLogin) {
					this.register.username = "";
					this.register.password = "";
				}
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		background-image: url('../static/images/new/starts/bg1.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 102.5vh;
		font-family: 思源黑体;
		margin-top: -20px;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			.image {
				border-radius: 4px;
			}

			.title {
				width: 244px;
				font-weight: bold;
				margin-left: -56px;
				text-align: left;
				margin-top: -425px;
				z-index: 1;
				white-space: nowrap;
				// line-height: 51px;
				text-stroke: 2px #FFFFFF;
				font-size: 34px;
				// letter-spacing: 2px;
				color: #57B03D;
				text-shadow: 0 2px white, 2px 0 white, -2px 0 white, 0 -2px white;
			}

			.welcome {
				z-index: 2;
				font-size: 15px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: aliceblue;
			}

			.welcome1 {
				margin-top: -278px;
				margin-left: 8px;
				font-family: Alibaba PuHuiTi;
				z-index: 2;
				font-size: 12px;
			}


		}

		.login-form-content {
			text-align: center;
			margin: -260px 20px 20px 40px;
			// margin-top: 15%;
			width: 80%;
			// margin-top: -200px;
			z-index: 1;

			.input-item {
				margin: 20px 0 20px 0;
				height: 45px;
				border-radius: 8px;
				background-color: #f0fdfc;
				border: 1px solid #e3e3e3;
				opacity: 0.5;
				color: #e3e3e3;
				text-indent: 1em;

				.icon {
					// margin-left: 10px;
					font-size: 38rpx;
					margin-left: 0px;
				}

				.input {
					width: 122%;
					font-size: 14px;
					line-height: 27px;
					text-align: left;
					padding-left: 15px;
					color: #d8d8d8;
					margin-left: 10;
				}

			}

			.login-btn {
				margin-top: 30px;
				height: 40px;
				border-radius: 8px;
				background-color: #57B03D;
			}

			.xieyi {
				color: #333;
				margin-top: 100px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}
		}

		.text-green {
			color: #57B03D;
		}

		.img {
			margin-top: 25px;
			text-align: center
		}

		.blue-text {
			color: #666;
			text-align: center
		}
	}
</style>