uni-Identify-quality/pages/register/register.vue

<template>
  <view class="main">
    <view class="logo">
      <image src="@/static/image/logo2.png" mode="scaleToFill" class="img" />
    </view>
    <view class="container">
      <view>
        <view class="title">注册手机号</view>
        <view class="info">
          <view class="item">
            <view class="name">手机号</view>
            <u--input
              placeholder="请输入手机号"
              border="none"
              v-model="phone"
              @change="changePhone"
              clearable
              type="number"
              @blur="checkPhone"
              @confirm="checkPhone"
            ></u--input>
          </view>
          <view class="item">
            <view class="name">确定手机号</view>
            <u--input
              placeholder="请输入手机号"
              border="none"
              v-model="determinePhone"
              @change="changeDeterminePhone"
              clearable
              type="number"
              @blur="checkPhone"
              @confirm="checkPhone"
            ></u--input>
            <view class="right" v-show="isRight" :style="{background: !isTrue?'#76c458':'#FF0000'}">
              <u-icon name="checkmark-circle" color="#fff" v-if="!isTrue"></u-icon>
              <u-icon name="close-circle" color="#fff" v-else></u-icon>
            </view>
          </view>
        </view>
      </view>
      <u-button text="下一步" color="#76C458" shape="circle" style="width: 284rpx;" @click="next"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      determinePhone: "",
      isTrue: false,
      isRight: false
    };
  },
  methods: {
    changePhone(value) {
      this.phone = value;
    },
    changeDeterminePhone(value) {
      this.isRight = true;
      this.determinePhone = value;
      if (this.phone !== value) {
        this.isTrue = true;
      } else {
        this.isTrue = false;
      }
    },
    checkPhone(event) {
      if (event) {
        this.$common.vefTel(event);
      }
    },
    next() {
      uni.navigateTo({
        url: "/pages/realName/realName"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  box-sizing: border-box;
}
.main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .logo {
    height: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img {
      width: 124rpx;
      height: 72rpx;
    }
  }
  .container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    height: calc(100vh - 200upx);
    width: 100%;
    background: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 62rpx 32rpx;
    .title {
      color: #626262;
      font-size: 40rpx;
      margin-left: 36rpx;
    }
    .info {
      margin-top: 90rpx;
      .item {
        box-sizing: border-box;
        background: #f8f8f8;
        border-radius: 20rpx;
        width: 100%;
        height: 92rpx;
        display: flex;
        align-items: center;
        padding-left: 24rpx;
        margin-bottom: 20rpx;
        .name {
          width: 200rpx;
          height: 72rpx;
          line-height: 72rpx;
          border-right: 1rpx solid #d1d1d1;
        }
        /deep/ .u-input {
          margin-left: 40rpx;
        }
        .right {
          position: relative;
          width: 70rpx;
          height: 100%;

          /deep/ .u-icon {
            position: absolute;
            transform: translateX(-50%);
            left: 50%;
            top: 35%;
          }
        }
      }
    }
  }
}
</style>