techtron/pages/login.vue

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

	<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="">微天地充电平台</text>
		</view>
		<view class="logo-content justify-center flex">
		  <text class="welcome" style="">欢迎登录</text>
		</view>
		<view class="logo-content justify-center flex">
		  <text class="welcome1" style="">Welcome</text>
		</view>
	</view>
	<!-- 登录表单 -->
    <view class="login-form-content" style="z-index: 9999;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="请输入账号" 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="请输入密码" maxlength="30" />
		</uni-col>
		</uni-row>
      </view>
	  <view class="xieyi text-center" style="margin-top: -10px;">
		  <text class="text-grey">暂无账号，</text>
		  <text @click="toggleLoginMode" class="text-green">立即注册</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: 9999;position: relative;">
        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">立即登录</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="请输入新账号" 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="请输入新密码" maxlength="30" />
		   </uni-col>
		   </uni-row>
		  </view>
		  </view>
		  <view class="xieyi text-center" style="margin-top: -10px;">
		  <p class="text-grey">已有账号？<a href="#" @click="toggleLoginMode" class="text-green">返回登录</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">注册</button>
		  </view>
     </view>
  </view>
    <view v-show="isLogin">
    <view class="img">
	    <image style="width: 31px;" :src="imgUrl+'/login/blueTeeth.png'" mode="widthFix"/>
	</view>
	<view class="blue-text">
	    <text>蓝牙连接</text>
	</view>
	</view>
  </view>
</template>

<script>
  import getCodeImg from '@/api/login'
  import {getToken} from "@/utils/auth";
  export default {
    data() {
      return {
		// currentImg: "",
        codeUrl: "",
        captchaEnabled: true,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "admin",
          password: "admin123",
          code: "",
          uuid: ''
        },
		register:{
		username: "",
		password: "",
		},
		isLogin: true, // 是否为登录模式
       }
    },
	 // mounted() {
	 //        this.addTextEvent()
	 //    },
	computed: {
	  imgUrl: function () {
	    return getApp().globalData.config.imgUrl;
	  }
	},
    created() {
      this.checkLogin();
    },
    methods: {
      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("请输入您的账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        }
		// else if (this.loginForm.code === "" && this.captchaEnabled) {
  //         this.$modal.msgError("请输入验证码")}
		  else {

          this.$modal.loading("登录中，请耐心等待...")

          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("请输入您的注册账号")
	        } else if (this.register.password === "") {
	          this.$modal.msgError("请输入您的注册密码")
	        }
	  		// else if (this.loginForm.code === "" && this.captchaEnabled) {
	        // this.$modal.msgError("请输入验证码")}
	  		  else {
				 // debugger
	          this.$modal.loading("注册中，请耐心等待...")
	          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>