techtron/pages/login.vue

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

   <view style="position: fixed;right: 10px;z-index: 999999;top:30px" @click="changeLocale">
     {{ $t('login.language') }}：{{localeConfig[locale]}}<uni-icons type="gear" size="15"></uni-icons>
   </view>
	<view>
		<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="logo-content justify-center flex">
		  <text class="welcome" style="">Welcome</text>
		</view>
		<view class="logo-content justify-center flex">
		  <text class="welcome1" style=""></text>
		</view>
	</view>
	<!-- 登录表单 -->
    <view class="login-form-content" style="z-index: 99;position: relative;"  v-show="isLogin">
      <view class="input-item flex align-center">
        <!-- <view class="iconfont icon-user icon"></view> -->
	   <uni-row>
	   <uni-col :span="2">
		<uni-icons class="icon" type="email" size="20" color="#0E9F9B"></uni-icons>
       </uni-col>
	   <uni-col :span="22">
	    <input 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">
        <!-- <view class="iconfont icon-password icon"></view> -->
		<uni-row>
		<uni-col :span="2">
		<uni-icons class="icon" type="locked" size="20" color="#0E9F9B"></uni-icons>
		</uni-col>
		<uni-col :span="22">
        <uni-easyinput style="margin-left:-10px ;" :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;">
		  <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="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="#0E9F9B"></uni-icons>
		   </uni-col>
		   <uni-col :span="22">
		    <input 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="#0E9F9B"></uni-icons>
		   </uni-col>
		   <uni-col :span="22">
		    <input v-model="register.password" 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" :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">
        检测到有新版本，请点击下载
      </view>
      <view style="text-align: center;text-decoration: underline;margin:10px" @click="downloadFile">
        立即下载

      </view>


      <view class="progress-container" v-if="isShowProgress">
        <view class="progress-box">
          <view class="text">文件下载中，请稍后......</view>
          <progress :percent="progress" show-info stroke-width="3" />
        </view>
      </view>
    </u-popup>
  </view>

</template>

<script>
  import {checkVersion} from '@/api/login'
  import {getToken} from "@/utils/auth";
  export default {
    data() {
      return {
        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:"",
        isShowProgress:false,
        progress:0,
		isLogin: true, // 是否为登录模式
       }
    },
	 // mounted() {
	 //        this.addTextEvent()
	 //    },
	computed: {
	  imgUrl: function () {
	    return getApp().globalData.config.imgUrl;
	  }
	},
    created() {
     this.setLocale()
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
			}
		});
      this.checkVersion();
      this.checkLogin();
    },
    methods: {
      downloadFile(){
        let self = this;
        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();
                });
          }
        })

        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;
        let self = this;
        checkVersion({"versionCode":appVersionCode}).then(res=>{
          let cz_app_version =res.data;
          if(cz_app_version != null){
            let onlineVersion = cz_app_version.version;
            let isForce = cz_app_version.isForce;
            let url = cz_app_version.downUrl;
            self.downloadUrl = url;
            if(onlineVersion>appVersionCode){
              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.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.$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 {
    width: 100%;
    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: #0E9F9B;
		text-shadow: 0 2px white, 2px 0 white, -2px 0 white, 0 -2px white;
      }

	  .welcome {
		  margin-top: -245px;
		  margin-left: -178px;
		  z-index: 2;
		  font-size: 31px;
		  font-family: Source Han Sans CN;
		  font-weight: 400;
	  }

	  .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 #0E9F9B;
		opacity: 0.5;
		color: #0E9F9B;
		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: #0E9F9B;
		  margin-left: 10;
        }

      }

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

      .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: #0E9F9B;
		}
	.img {
		margin-top: 25px;
		text-align:center
	}
	.blue-text {
		color: #666;
		text-align:center
	}
  }

</style>