AyaoJies-boot/AyaoJies-app/source-mall-master/source-mall/pages/login/account.vue

<template>
  <view class="wrap">
    <view class="content">
      <view class="title">欢迎登录</view>
      <input v-model="loginName" class="u-border-bottom" placeholder="请输入手机号" type="number"/>
      <view class="tips">未注册的手机号验证后自动创建账号</view>
      <u-button :style="[inputStyle]" class="getCaptcha" @tap="submit">获取短信验证码</u-button>
      <view class="alternative">
        <view class="account" @click="accountLogin">密码登录</view>
        <view class="issue" @click="problem">遇到问题</view>
      </view>
    </view>
    <view class="buttom">
      <view class="loginType">
        <view class="wechat item">
          <view class="icon">
            <u-icon color="#999" name="server-man" size="60" @click="server"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginName: ''
    }
  },
  computed: {
    inputStyle() {
      let style = {};
      if (this.loginName && this.$u.test.mobile(this.loginName)) {
        style.color = "#fff";
        style.backgroundColor = this.$u.color['primary'];
      }
      return style;
    }
  },
  methods: {
    submit() {
      if (this.$u.test.mobile(this.loginName)) {
        this.$u.route({
          url: 'pages/login/code',
          params: {
            loginName: this.loginName
          }
        })
      }
    },
    accountLogin() {
      this.$u.route({
        url: 'pages/login/login'
      })
    },
    problem() {
      this.$u.route({
        url: 'pages/login/problem'
      })
    },
    server() {
      window.open('https://sourcebyte.cn')
    }
  }
};
</script>

<style>
page {
  overflow: hidden;
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.wrap {
  font-size: 28 rpx;

  .content {
    width: 600 rpx;
    margin: 80 rpx auto 0;

    .title {
      text-align: left;
      font-size: 60 rpx;
      font-weight: 500;
      margin-bottom: 100 rpx;
    }

    input {
      text-align: left;
      margin-bottom: 10 rpx;
      padding-bottom: 6 rpx;
    }

    .tips {
      color: $u-type-info;
      margin-bottom: 60 rpx;
      margin-top: 8 rpx;
    }

    .getCaptcha {
      background-color: rgba(0, 0, 0, .1);
      color: $u-tips-color;
      border: none;
      font-size: 30 rpx;
      padding: 12 rpx 0;

      &::after {
        border: none;
      }
    }

    .alternative {
      color: $u-tips-color;
      display: flex;
      justify-content: space-between;
      margin-top: 30 rpx;

      .account {
        &:active {
          background-color: #ededed;
        }
      }
    }
  }

  .buttom {
    .loginType {
      font-size: 14px;
      position: fixed;
      right: 50 rpx;
      bottom: 50 rpx;
      width: 60px;
      height: 60px;
      padding: 4px;
      cursor: pointer;
      background: #FFF;
      text-align: center;
      line-height: 60px;
      border-radius: 100%;
      -webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>