artwork-repair-h5/pages/login/login.vue

<template>
  <view class="container">
    <u-notify ref="uNotify" message="Hi uView"></u-notify>
    <u-code
      :seconds="seconds"
      ref="uCode"
      @change="codeChange"
      startText="重新发送"
      endText="重新发送"
      changeText="重新发送(X)"
    ></u-code>
    <image src="../../static/log.png" class="logo"></image>

    <view class="title"><span style="color: #000">登录</span>画作破损修复</view>
    <view class="no">使用你的手机号登录</view>
    <view
      v-show="showCode"
      style="
        margin-top: 10rpx;
        width: 100%;
        text-align: left;
        color: #888888;
        margin-bottom: 20rpx;
      "
      >已发送验证码至<span style="color: #000; margin-left: 10px">{{
        telNum
      }}</span></view
    >
    <u-code-input
      v-show="showCode"
      v-model="code"
      space="11"
      @finish="goLogin"
      :maxlength="6"
    ></u-code-input>
    <u--input
      v-show="!showCode"
      placeholder="请输入手机号"
      class="art-input"
      border="none"
      clearable
      v-model="telNum"
    >
      <u--text
        text="手机号"
        slot="prefix"
        margin="0 3px 0 19px"
        type="tips"
      ></u--text
    ></u--input>
    <u--input
      v-if="loginType === 'pwd'"
      placeholder="请输入密码"
      class="art-input"
      border="none"
      type="password"
      clearable
      v-model="password"
    >
      <u--text
        text="密码"
        slot="prefix"
        margin="0 20px 0 19px"
        type="tips"
      ></u--text
    ></u--input>
    <view
      style="display: flex; justify-content: space-between; margin-top: 20rpx"
    >
      <view @tap="getCode" style="color: #486661;">
        {{ showCode ? tips : "" }}
      </view>
      <view style="text-align: right; color: #486661" @click="changeType">{{
        loginType === "pwd" ? "验证码登录" : "密码登录"
      }}</view>
    </view>
    <u-button
      v-if="loginType === 'pwd'"
      type="primary"
      class="search"
      @click="goLogin"
      >登录</u-button
    >
    <u-button
      v-else-if="loginType === 'code' && !showCode"
      type="primary"
      class="search"
      @click="getCode"
      :disabled="!telNum"
      >获取验证码</u-button
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      telNum: "",
      password: "",
      code: "",
      loginType: "pwd",
      showCode: false,
      msg: "",
      showtips: false,
      tips: "",
      seconds: 60,
    };
  },

  methods: {
    codeChange(text) {
      this.tips = text;
    },
    // 获取信息
    async goLogin() {
      let data = {
        telNum: this.telNum,
        password: this.password,
        code: this.code,
      };
      let res = await this.$api.login.goLogin(data);
      if (res.status == 0) {
        uni.setStorageSync("repari-token", res.data.Token);
        uni.setStorageSync("repari-user-info", res.data.AccountInfo);
        uni.setStorageSync("repari-refresh-token", res.data.RefreshToken);
        this.$u.toast("登陆成功！");
        this.$router.push({
          path: "/pages/start/start",
        });
      } else {
        this.$refs.uNotify.show({
          top: 10,
          type: "error",
          message: res.msg,
          duration: 1000 * 3,
          fontSize: 20,
          safeAreaInsetTop: true,
        });
      }
    },
    // 切换登录方式
    changeType() {
      this.loginType = this.loginType === "pwd" ? "code" : "pwd";
      this.showCode = false;
      this.password = "";
      this.code = "";
    },
    // 切换为验证码登录
    async getCode() {
      this.showCode = true;
      if (this.$refs.uCode.canGetCode) {
        let data = {
          telNum: this.telNum,
        };
        let res = await this.$api.login.code(data);
        if (res.status == 0) {
          this.$refs.uCode.start();
          this.$refs.uNotify.show({
            top: 10,
            type: "success",
            message: "验证码已发送",
            duration: 1000 * 3,
            fontSize: 20,
            safeAreaInsetTop: true,
          });
        } else {
          this.$refs.uNotify.show({
            top: 10,
            type: "error",
            message: res.msg,
            duration: 1000 * 3,
            fontSize: 20,
            safeAreaInsetTop: true,
          });
        }
      } else {
        uni.$u.toast("倒计时结束后再发送");
      }
    },
  },

  created() {
    // this.getTrainInfo();
  },
};
</script>

<style lang="scss">
page {
  background-size: auto 100%;
  background-attachment: fixed;
  height: 100vh;
  background-image: url("../../static/backg.png");
}
.container {
  height: 100vh;
  background-size: auto 100%;
  padding-left: 60rpx;
  padding-right: 60rpx;
  background-attachment: fixed;
  text-align: center;
  .logo {
    width: 70rpx;
    height: 70rpx;
    left: 48%;
    position: absolute;
    bottom: 50rpx;
  }
  .title {
    font-size: 64rpx;
    font-weight: bold;
    width: 100%;
    text-align: left;
    color: #45645f;
    padding-top: 120rpx;
  }
  .no {
    font-size: 32rpx;
    text-align: left;
    margin-top: 5rpx;
    margin-bottom: 130rpx;
  }
  .art-input {
    margin-top: 20rpx;
    background: #ffffff;
    height: 100rpx;
  }
  /deep/ .u-code-input__item {
    width: 86rpx !important;
    height: 98rpx !important;
    background-color: #ffffff;
  }
  /deep/ .u-input__content__field-wrapper__field {
    font-size: 32rpx;
    color: #000000;
    padding: 0 20rpx;
  }
  /deep/ .u-text__value {
    color: #000;
  }
  /deep/ .u-button--disabled {
    background-image: none !important;
    background-color: #cecece !important;
    color: #ffffff !important;
  }
  .search {
    margin-top: 120rpx;
    width: 100%;
    border: 0;
    font-size: 34rpx;
    height: 90rpx;
    background-image: linear-gradient(to right, #698883, #45645f);
  }
}
</style>