AyaoJies-boot/AyaoJies-app/house-master/house-life/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" @click="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 size="60" name="server-man" color="#999" @click="server"></u-icon></view>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginName: ''
    }
  },
  onLoad() {
    // 在页面中定义激励视频广告
    let videoAd = null
    // 在页面onLoad回调事件中创建激励视频广告实例
    if (wx.createRewardedVideoAd) {
      videoAd = wx.createRewardedVideoAd({
        adUnitId: 'adunit-8cd5789a01a51891'
      })
      videoAd.onLoad(() => {
      })
      videoAd.onError((err) => {
      })
      videoAd.onClose((res) => {
      })
    }
    // 用户触发广告后，显示激励视频广告
    if (videoAd) {
      videoAd.show().catch(() => {
        // 失败重试
        videoAd.load()
            .then(() => videoAd.show())
            .catch(err => {
              console.log('激励视频 广告显示失败')
            })
      })
    }
  },
  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
          }
        })
      } else {
        this.$mytip.toast('请输入有效的手机号码')
      }
    },
    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>