inv-app/pages/login/login.vue

<template>
  <view class="logo-contianer">
    <view class="logo-title">
      <image src="../../static/login.png"></image>
    </view>
    <view class="box-center">
      <view class="box">
        <view class="left">手机号(+86)</view>
        <view class="right">
          <u--input
            placeholder="请输入手机号"
            border="none"
            color="#fff"
            clearable
            v-model="formData.phone"
            @blur="phoneVail"></u--input>
        </view>
      </view>
      <view class="box radius2">
        <view class="left">验证码</view>
        <view class="right">
          <u-input
            placeholder="请输入验证码"
            border="none"
            clearable
            color="#fff"
            v-model="formData.code">
            <template slot="suffix">
              <u-code
                ref="uCode"
                @change="codeChange"
                seconds="60"
                changeText="X秒重新获取"></u-code>
              <u-button
                class="code-btn"
                @tap="getCode"
                :text="tips"
                type="primary"
                size="mini"></u-button>
            </template>
          </u-input>
        </view>
      </view>
    </view>
    <view class="login-btn">
      <view class="btn">
        <u-button
          type="primary"
          :disabled="disabled"
          shape="circle"
          text="登录"
          @click="login"></u-button>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        phone: "",
        code: "",
        pass: "",
      },
      type: "code", // 'pass' 密码
      tips: "",
    };
  },
  computed: {
    disabled() {
      return !(
        this.formData.phone &&
        (this.formData.code || this.formData.pass)
      );
    },
  },
  methods: {
    phoneVail(value) {
      if (value) {
        let isPhone = uni.$u.test.mobile(value);
        if (!isPhone) return uni.$u.toast("手机号格式错误");
      }
    },
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      if (this.$refs.uCode.canGetCode) {
        let data = { telNum: this.formData.phone };
        let res = await this.$api.login.code(data);
        console.log(res);
        uni.showLoading({
          title: "正在获取验证码",
        });
        uni.$u.toast("验证码已发送");
        if (res.status == 0) {
          uni.hideLoading();
          this.$refs.uCode.start();
        } else {
          uni.hideLoading();
          uni.$u.toast(res.msg);
        }
      } else {
        uni.$u.toast("倒计时结束后再发送");
      }
    },
    checkType() {
      this.type = this.type == "code" ? "pass" : "code";
      this.formData.code = "";
      this.formData.pass = "";
    },

    async login() {
      // 调用show()方法不能用uni.$u.toast()
      let data = {
        telNum: this.formData.phone,
        code: this.formData.code,
      };
      let res = await this.$api.login.login(data);
      if (res.status == 0) {
        // 存储token
        uni.setStorageSync("token", res.data.token);
        uni.setStorageSync("userInfo", res.data.accountInfo);
        this.$refs.uToast.show({
          message: "登录成功",
          complete: () => {
            uni.navigateTo({
              url: "/pages/management/management",
            });
          },
        });
      } else {
        uni.$u.toast(res.msg);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: url("@/static/background.png") no-repeat;
  background-size: auto 100%;
  background-attachment: fixed;
  height: 100vh;
}
.logo-contianer {
  .logo-title {
    color: #626262;
    font-size: 40rpx;
    text-align: center;
    padding-top: 220rpx;
    image {
      width: 436rpx;
      height: 129rpx;
    }
  }
  .box-center {
    margin-top: 214rpx;
    padding: 30rpx;

    .check {
      color: #5c9fff;
      text-align: center;
      font-size: 22rpx;
      padding-top: 20rpx;
    }
    .radius2 {
      border-radius: 0 0 28rpx 28rpx !important;
    }
    .box {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 28rpx 28rpx 0 0;
      // margin: 0 35rpx 26rpx 35rpx;
      padding: 28rpx 40rpx;
      display: flex;
      align-items: center;

      .left {
        width: 240rpx;
        color: #fff;
        font-size: 28rpx;
        border-right: 2rpx solid #fff;
      }

      .right {
        width: 90%;

        /deep/ .uni-input-placeholder,
        /deep/ .input-placeholder {
          font-size: 20rpx;
          color: #acacac !important;
        }

        /deep/ .u-input__content__field-wrapper__field {
          height: 0 !important;
        }

        /deep/ .u-input {
          padding: 0 0 0 20rpx !important;
        }
      }
      .code-btn {
        border: none;
        background: none;
        color: #52b6ff;
        font-size: 24rpx;
      }
    }
  }
  .login-btn {
    padding: 200rpx 40rpx 90rpx;
    .check {
      display: flex;
      align-items: flex-start;
      .u-checkbox {
        margin-top: 5rpx;
      }
      .txt {
        font-size: 22rpx;
        .col {
          color: #5c9fff;
        }
      }
    }
    .btn {
      margin-top: 30rpx;
      .u-button {
        width: 344rpx;
        height: 60rpx;
      }
    }
  }
}
</style>