uni-aiyangniu/pages/login/login.vue

<template>
	<view>
		<view class="bg" :style="{backgroundImage: 'url('+imageURL+')'}">
      <view class="avatar_class">
        <u-avatar size="80" :src="src"></u-avatar>
      </view>
      <view class="alert_class">欢迎登录</view>
			<view class="loginBox">
        <view style="margin-top: 200rpx;">
          <view style="margin-bottom:60rpx;"> 
            <u--input class="input_class" v-model="form.username" shape="circle" height='40' prefixIcon='account-fill' label=" " placeholder="请输入用户名" :showAction="false"></u--input>
            <!--  #ifdef MP-WEIXIN -->
            <view style="height:20rpx"></view>
            <!--  #endif -->

            <u--input class="input_class" v-model="form.password" shape="circle" height='40' prefixIcon='lock' type="password" label=" " placeholder="请输入密码" :showAction="false"></u--input>
          </view>
          <u-button size="medium" shape='true' :loading="isLoading" type="primary" @tap="login">登录</u-button>
        </view>
			</view>
		</view>
	</view>
</template>

<script>
  import * as API_item from '@/api/login.js';
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
        imageURL:'/static/login/登录bg.jpg',
        src: '/static/login/1.jpg',
				isLoading: false,
			}
		},
		methods: {
		 async login() {
				const _this = this;
				_this.isLoading = true;
        if(!this.form.username){
          _this.isLoading = false;
            uni.showToast({		// 提示错误信息
              title: '请输入用户名',
              icon:'error',
              duration: 3000
            })
        }if(!this.form.password){
          _this.isLoading = false;
            uni.showToast({		// 提示错误信息
              title: '请输入密码',
              icon:'error',
              duration: 3000
            })
        }else{
          API_item.GetUserToken(this.form).then(res=>{
          	if(res.code == 101){
              _this.isLoading = false;
              uni.setStorageSync('token', res.data);
              uni.showToast({		// 提示错误信息
                title: '登录成功',
                icon:'success',
                duration: 3000
              })
              API_item.GetUserInfo().then(e=>{
                  if(e.code == 101){
                     uni.setStorageSync('userInfo', e.data);
                     let url = uni.getStorageSync("URL")
                     // if(url){
                     //   uni.navigateTo({								// 跳转到首页
                     //     url: url
                     //   })
                     // }else{
                       uni.switchTab({								// 跳转到首页
                         url: '/pages/home/home'
                       })
                     // }
                  }else{
                     uni.showToast({		// 提示错误信息
                       title: e.message,
                       icon:'error',
                       duration: 3000
                     })
                  }
              })
            }else{
              _this.isLoading = false;
              uni.showToast({		// 提示错误信息
                title: res.message,
                icon:'error',
                duration: 3000
              })
            }
          })
        }
      }
    },
    getUserInfo(){
      API_item.GetUserInfo().then(res=>{
        if(uni.getStorage('token')){
          if(res.code == 101){
         // uni.switchTab({								// 跳转到首页
         //   url: '/pages/home/home'
         // })
          }else{
           
          }
        }
      })
    }
  }
</script>

/*scoped 仅对当前页面生效*/
<style lang="scss">
	.bg {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

    .avatar_class{
      position: absolute;
      top:300rpx;
      z-index: 9;
    }
    .alert_class{
      position: absolute;
      top:460rpx;
      z-index: 9;
      color: rgba(40, 39, 39, 0.7);
    }
    .loginBox {
    	width: 500rpx;
    	height: 600rpx;
      position: relative;
    	background-color: rgba(255, 255, 255, 0.7);
    	margin: auto;
    	border-radius: 30rpx;
    	padding: 30rpx;
    	margin-top: 350rpx;
    .input_class{
         margin-top: 30rpx !important;
      }
    }
	}

</style>