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
    };
  },
  watch: {
    phone(newValue) {
      if (this.determinePhone !== newValue) {
        this.isTrue = true;
      } else {
        this.isTrue = 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() {
      if (this.phone !== this.determinePhone)
        return this.$common.msgToast("两次输入不一致");
      console.log(this.$common.vefTel(this.phone));
      if (this.$common.vefTel(this.phone)) {
        uni.navigateTo({
          url: "/pages/realName/realName"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  box-sizing: border-box;
}

.main {
  background: url("@/static/image/login-bg.png") no-repeat;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow-y: auto;


  .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;
    overflow-y: auto;

    .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>