tsg-app/pages/login/login.vue

<template>
  <view class="container">
    <div class="img">
      <image style="width: 100%; height: 100%" src="../../static/images/bg_img.png" mode="scaleToFill"></image>
    </div>
    <view class="user-title">
      <text class="sub">用户登录</text>
      <text class="line"></text>
    </view>
    <uni-forms :modelValue="formData" class="form">
      <uni-forms-item>
        <uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
      </uni-forms-item>
      <uni-forms-item>
        <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
      </uni-forms-item>
      <uni-forms-item>
        <checkbox :checked="formData.checked" @click="handleChange(formData)" /><text>记住用户名和密码</text>
      </uni-forms-item>
      <button type="primary" class="button" @click="login(formData)">
        登录
      </button>
    </uni-forms>
  </view>
</template>

<script>
  import CryptoJS from 'crypto-js'
  export default {
    data() {
      return {
        formData: {
          username: '',
          password: '',
          checked: false
        }
      }
    },
    mounted() {
      if (uni.getStorageSync('loginChecked') === true) {
        this.formData = {
          username: uni.getStorageSync('username'),
          password: uni.getStorageSync('password'),
          checked: true,
        }
      }
    },
    methods: {
      // 更新版本
      init() {
        this.checkVersion();
      },
      // 检查版本更新情况
      async checkVersion() {
        try {
          const {
            data
          } = await uni.$http.get("/gunshiApp/tsg/appVersionRecord/latest");
          if (data.code == 200) {
            const selfVersionCode = uni.getSystemInfoSync().appWgtVersion //当前App版本号
            const newVersionCode = data.data.version; //线上最新版本号 
            if (selfVersionCode != newVersionCode) {
              let platform = uni.getSystemInfoSync().platform //手机平台
              //安卓手机弹窗升级
              if (platform === 'android') {
                uni.navigateTo({
                  url: `/pages/upgrade/index?info=${encodeURIComponent(JSON.stringify(data.data))}`
                })
              }
              //IOS无法在线升级提示到商店下载
              else {
                uni.showModal({
                  title: '发现新版本 ' + 'V' + newVersionCode,
                  content: '请到App store进行升级',
                  showCancel: false
                })
              }
            }
          }
        } catch (error) {
          // uni.$showMsg()
        }
      },

      handleChange(formData) {
        formData.checked = !formData.checked
      },
      login(formData) {
        //loading
        uni.showLoading({
          title: '努力登录中...',
          mask: true
        });

        //MD5加密
        const encryptData = data => {
          const encryptedData = CryptoJS.MD5(data).toString()
          return encryptedData
        }

        //创建提交表单
        let postForm = {
          username: formData.username,
          password: formData.password
        }

        //记住密码功能
        if (formData.checked === true) {
          uni.setStorageSync('loginChecked', true)
          uni.setStorageSync('username', postForm.username)
          uni.setStorageSync('password', formData.password)
          uni.setStorageSync('secretKey', postForm.secretKey)
        } else {
          uni.setStorageSync('loginChecked', false)
          uni.removeStorageSync('username')
          uni.removeStorageSync('secretKey')
          uni.removeStorageSync('password')
          this.formData.username = ''
          this.formData.password = ''
        }

        //提交表单
        uni.$http.post('/gunshiApp/tsg/login', postForm).then(res => {
          uni.showLoading({
            title: '努力登录中...',
            mask: true
          })
          if (res.data.code === 200) {
            //localStorage保存token

            if (res.data.token) {
              uni.setStorageSync('Gs-Token', res.data.token)
              uni.$http.get('/gunshiApp/tsg/getInfo').then(res => {
                this.getImgFlow(res.data.user.avatar)
                uni.setStorageSync('value', res.data.user)
                setTimeout(function () {
                  uni.hideLoading()
                  uni.reLaunch({
                    url: '/pages/homeIndex/index'
                  })
                }, 1000)
              })
            }
          } else {
            setTimeout(function () {
              uni.hideLoading()
              uni.showToast({
                title: res.data.description,
                icon: 'none',
                duration: 2000
              })
            }, 1000)
            clearTimeout()
          }
        })
      },
      getImgFlow(imgUrl) {
        if (imgUrl) {
          uni.request({
            url: uni.$http.baseUrl +
              `/gunshiApp/tsg/common/download/resource?resource=${imgUrl}`,
            responseType: 'arraybuffer',
            success: (res) => {
              // 将arraybuffer转换为Base64编码
              let base64 = uni.arrayBufferToBase64(res.data);
              const p = 'data:image/png;base64,' + base64;
              uni.setStorageSync("avatar", p)
            }
          })
        } else {
          uni.setStorageSync('avatar', "../../static/tabs/touxiang.png")
        }

      },
    },
    onLoad() {
      this.init();
    }
  }
</script>

<style lang="scss">
  .container {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    align-items: center;
    background-color: #f3f5f8;
  }

  .img {

    width: 100vw;
    height: 40vh;
    margin-top: 0vh;
    /* background-color: red; */
  }

  .form {
    margin-top: 10vh;
    width: 80%;
    height: 8vh;
    align-items: center;
    justify-content: center;
  }

  .user-title {
    position: relative;
    padding: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;

    .sub {
      font-size: 28px;
      color: #000;
    }

    .line {
      position: absolute;
      width: 80px;
      height: 5px;
      left: 20px;
      bottom: -10px;
      background-color: #00a8ff;
      border-radius: 15%;
    }
  }
</style>