xytSk-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'
  import {
    onMounted
  } from "vue"
  let checked = false
  const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
  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: {
      handleChange(formData) {
        checked = !checked
        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/xyt/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/xyt/getInfo').then(res => {
                // let avatarUrl = res.data.user.avatar ? url + res.data.user.avatar : '../../static/tabs/touxiang.png';
                let avatarUrl = res.data.user.avatar ? url + '/gunshiApp/common/1/ResPlanB/微信图片_20240420225339_1723542338744.jpg' : '../../static/tabs/touxiang.png';
                console.log("avatarUrl",avatarUrl);
                
                uni.setStorageSync('value', res.data.user)
                uni.setStorageSync('avatar', avatarUrl)
                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()
          }
        })
      }
    }
  }
</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>