jje_spread_uniapp/pages/login/login.vue

<template>
  <view class="page" :style="{height:height}">
    <view class="logTitle">
      <view class="welcome flex-row justify-center">
        <text>欢迎登录娇骄儿生活圈</text>
      </view>
      <view class="flex-row justify-center">
        <image src="../../static/logo.png" class="log"></image>
      </view>
    </view>

    <view class="form">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="uForm">
        <view class="formItem">
          <u-form-item label="账号" prop="username" borderBottom ref="item1">
            <u--input v-model="form.username" placeholder="请输入账号" border="none" type="number"></u--input>
          </u-form-item>
        </view>

        <view class="formItem">
          <u-form-item label="密码" prop="password" borderBottom ref="item1">
            <u--input v-model="form.password" placeholder="请输入密码" border="none" type="password"></u--input>
          </u-form-item>
        </view>

        <view class="forgetPassword flex-row justify-between ">
          <view>
            <checkbox-group @change="checkboxChange">
              <checkbox :checked="savePassword" color="#FFCC33" :style="{'transform':'scale(0.8)'}"/>
              <text>记住账号密码</text>
            </checkbox-group>
          </view>
          <view>
            <text @click="forgetPassword">忘记密码?</text>
          </view>
        </view>

        <view class="loginButton" @click="debounce(login,500)">
          <text>登录</text>
        </view>
        <view class="versionName" style="transform: translateY(20rpx);text-align: center">
          版本号:V{{ versionName }}
        </view>

      </u-form>

    </view>
<!--    		<view class="flex-row justify-center  register">-->
<!--    			<text>无账号？</text>-->
<!--    			<text @click="goRegister" :style="{color:'#FFE05C'}">切换注册</text>-->
<!--    		</view>-->
  </view>
</template>

<script>

export default {
  data() {
    return {
      versionName: null,
      versionNumber:null,
      timer: null, //定时任务
      requestStatus: false,
      height: '',
      savePassword: true,
      form: {
        username: '',
        password: ''
      },
      rules: {
        'username': {
          type: 'string',
          required: true,
          min: 11,
          max: 11,
          pattern: this.$phonePattern,
          message: '请输入正确的电话号码',
          trigger: ['blur', 'change']
        },
        'password': {
          type: 'string',
          required: true,
          min: 6,
          max: 18,
          message: '请输入6-18位密码',
          trigger: ['blur', 'change']
        }
      }

    }
  },
  onShow() {

    let sysInfo = uni.getSystemInfoSync()
    this.height = sysInfo.windowHeight + 'px'
    this.versionName = sysInfo.appVersion
    this.versionNumber = sysInfo.appVersionCode
    this.form.username = uni.getStorageSync('username')
    this.form.password = uni.getStorageSync('password')
    let isLogOut = uni.getStorageSync('isLogOut')
    if (uni.getStorageSync('savePassword')) {
      this.savePassword = uni.getStorageSync('savePassword')
    }
    if (this.form.username && this.form.password && isLogOut !== true) {
      setTimeout(() => {
        this.login()
      }, 100)
    }

  },
  onLoad(e) {
    console.log('重定向获取到的参数', e)
    console.log('重定向的url', location.href)
    let code = this.getUrlCode('code')
    if (code) {
      uni.showToast({
        icon: 'success',
        duration: 5000,
        title: '获取到的code：' + code
      });
    }

  },
  //
  // onPullDownRefresh() {
  // 	console.log('refresh');
  // 	setTimeout(()=>{
  // 		location.reload()
  // 	},1000)
  // },
  methods: {
    getUrlCode(name) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
    },

    goRegister() {
      uni.redirectTo({
        url: '/pages/register/register'
      })
    },

    forgetPassword() {
      uni.navigateTo({
        url: '/pages/forgetPassword/forgetPassword'
      })
    },
    checkboxChange(e) {
      this.savePassword = !this.savePassword
      console.log(this.savePassword)
    },

    login() {
      uni.removeStorageSync('isLogOut');
      console.log('savePassword', this.savePassword)

      if (this.requestStatus) {
        return
      }
      this.requestStatus = true
      this.$refs.uForm.validate().then(res => {
        if (this.savePassword) {
          uni.setStorageSync('savePassword', this.savePassword)
          uni.setStorageSync('username', this.form.username)
          uni.setStorageSync('password', this.form.password)
        } else {
          uni.setStorageSync('savePassword', this.savePassword)
          uni.removeStorageSync('username');
          uni.removeStorageSync('password');
        }

        uni.showLoading({
          title: '登录中...'
        });
        this.form.versionNumber = this.versionNumber
        this.$api.login.expandLogin(this.form).then(res => {
          uni.hideLoading();
          uni.setStorageSync('accessToken', res.data.data.access_token)
          this.$api.user.getUserInfo().then(res => {
            console.log('获取到的用户信息：', res.data.data, '获取到的用户头像', res.data.data.img)
            this.userInfo = res.data.data
            uni.setStorageSync('spreadUserInfo', this.userInfo)
            uni.showToast({
              icon: 'success',
              duration: 1000,
              title: '登陆成功'
            });
            setTimeout(() => {
              this.requestStatus = false
              uni.switchTab({
                url: "/pages/index/index"
              })
            }, 1000)
          })
        }).catch(err => {
          this.requestStatus = false
        })
      }).catch(err => {
        this.requestStatus = false
      })
    },

    debounce(fn, delay) {
      console.log(delay)
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        fn.apply();
      }, delay);
    }

  }
}
</script>

<style lang="scss" scoped>
@import './index.rpx.css';
</style>