Identification/pages/login2/index.vue

<template>
  <view>
    <view class="tips">
      <view class="title">欢迎{{ isLogin ? '登录' : '注册' }}{{ title }}</view>
      <view class="sub-title" style="">便捷高效管理学生信息</view>
    </view>
    <u-form :model="userInfo">
      <view class="container-input">
        <u-form-item style="padding: .5rem 0">
          <input placeholder="请输入账号" v-model="userInfo.userName" placeholderStyle="color: #c0c4cc"
                 style="font-size: 1.5rem;"></input>
        </u-form-item>
      </view>
      <view class="container-input" style="margin-top: 1.2rem;">
        <u-form-item style="padding: .5rem 0">
          <input :password="pwdOpen" placeholder="请输入密码" v-model="userInfo.password"
                 placeholderStyle="color: #c0c4cc" style="font-size: 1.5rem">
          </input>
        </u-form-item>
      </view>
    </u-form>
    <view class="agree-list">
      <view :class="[radioShow ? 'agree-radio-active' : 'agree-radio']" @click="agree"></view>
      <view class="agree-title">我已阅读并同意
        <text style="font-size: 1.2rem;color: #428AF6;">《用户协议》</text>
        以及
        <text style="font-size: 1.2rem;color: #428AF6;">《隐私政策》</text>
      </view>
    </view>
    <view class="container-bth" @click="login">登录</view>
  </view>
</template>

<script>
import {login} from 'common/api/index';
import UFormItem from "../../uview-ui/components/u-form-item/u-form-item.vue";

export default {
  components: {UFormItem},
  data() {
    return {
      isLogin: true,
      radioShow: true, //默认勾上
      title: '黑马教育',
      eyeOpen: false,
      pwdOpen: true,
      userInfo: {
        userName: '',
        password: ''
      }
    }
  },
  methods: {
    // 登录
    async login() {
      if (!this.radioShow) {
        this.$tools.msg('用户协议和隐私政策未勾选')
      } else if (!this.userInfo.userName) {
        this.$tools.msg('请填写账号')
      } else if (!this.userInfo.password) {
        this.$tools.msg('请输入密码')
      } else {
        // await login(this.userInfo).then((res) => {
        //   console.log(res,'11111')
        //   let token = res.token
        //   uni.setStorageSync('token', token)
          uni.switchTab({
            url: '/pages/index/index'
          })
        // })
      }
    },
    agree() {
      this.radioShow = !this.radioShow
    },
  }
}
</script>

<style>
page {
  background: linear-gradient(270deg, #E1ECFE 0%, #DDFCFF 100%);
  overflow: hidden;
}
</style>

<style lang="scss" scoped>
.tips {
  margin: 1rem 0 .5rem 0;
  width: 100%;
  text-align: center;


  .title {
    font-size: 1.5rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    letter-spacing: 2rpx;
    color: #26344D;
  }

  .sub-title {
    font-size: 1.1rem;
    font-family: PingFang SC, PingFang SC;
    letter-spacing: 2rpx;
    color: #26344D;
    margin-top: 10rpx;
  }
}

.container-input {
  margin: 0 20%;
  background-color: #fff;
  border-radius: 16rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;

  .eye-input {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .eye-image {
      position: absolute;
      right: 0;
      width: 30rpx;
      height: 30rpx;
      margin-left: 20rpx;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.agree-list {
  margin: 16px 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  .agree-radio {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 1px solid #999;
  }

  .agree-radio-active {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 1px solid transparent;
    background-color: #428AF6;
  }

  .agree-radio-active::after {
    position: absolute;
    content: '';
    left: 50%;
    width: 4rpx;
    height: 8rpx;
    top: 50%;
    transform: translateY(-60%) translateX(-50%) rotate(38deg);
    border: 4rpx solid #fff;
    border-width: 0 3rpx 3rpx 0;
  }

  .agree-title {
    margin-left: 10rpx;
    font-size: 1.2rem;
    color: #333;
  }
}

.container-bth {
  margin: 1.5rem 30%;
  border-radius: 16rpx;
  height: 4rem;
  background-color: #5990F5;
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  line-height: 4rem;
  letter-spacing: 2rpx;
}
</style>