jje_spread_uniapp/pages/setPhone/setPhone.vue

<template>
  <view class="container">

    <!-- #ifdef H5-->
    <uni-nav-bar v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"
                 title="注册手机号"/>
    <!-- #endif -->

    <view class="login-wrap">
      <view class="login-form">
        <u--form
            labelPosition="left"
            :model="userInfo"
            :rules="rules"
            ref="form1"
        >
          <u-form-item
              label="手机号"
              prop="phonenumber"
              labelWidth="auto"
              labelAlign="right"
          >
            <u--input
                v-model="userInfo.phonenumber"
                placeholder="请输入手机号"
                border="bottom"
                type="number"
                maxlength="11"
            ></u--input>
          </u-form-item>
          <u-form-item
              labelWidth="auto"
              labelAlign="right"
              label="验证码"
              prop="smsCode"
              width="120"
          >
            <u--input
                v-model="userInfo.smsCode"
                disabledColor="#ffffff"
                placeholder="请输入验证码"
                border="bottom"
                maxlength="4"
            ></u--input>
            <template #right>
              <view class="identifying-code">
                <u-code
                    ref="uCode3"
                    @change="codeChange2"
                    keep-running
                    start-text="获取验证码"
                ></u-code>
                <text
                    @tap="getCode2"
                    :text="tips2"
                    class="u-page__code-text"
                >{{ tips2 }}
                </text>
              </view>
            </template>

          </u-form-item>

        </u--form>
      </view>
    </view>

    <view v-if="errTipShow" class="h-err">
      <text>你输入的手机号码已存在，请换一个</text>
    </view>

    <view @click="setPhone()" class="op-btn-wrap">
      <view class="h-btn">
        <text>跳转到小程序</text>
      </view>
    </view>


  </view>
</template>
<script>

export default {
  data() {
    return {
      errTipShow: false,
      userInfo: {
        phonenumber: '',
        smsCode: '',
      },
      tips2: '',
      storageUserInfo:{},
      rules: {
        phonenumber: [
          {
            required: true,
            min: 11,
            max: 11,
            message: '请输入11位电话号码',
            trigger: ['blur', 'change'],
          },
          {
            // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
            validator: (rule, value, callback) => {
              // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
              return !this.$isDataEmpty(value);
            },
            message: "请认真填写电话号码",
            trigger: ['blur', 'change'],
          }
        ],
        smsCode: {
          required: true,
          min: 4,
          max: 6,
          message: '请输入4位验证码',
          trigger: ['blur', 'change'],
        },
      },
    }
  },
  onLoad(option) {
    this.storageUserInfo = uni.getStorageSync('userInfo')
  },
  onReady() {
    this.$refs.form1.setRules(this.rules)
  },
  methods: {

    getUserInfo() {
      this.$api.getUserInfo().then(res => {
        uni.setStorageSync('userInfo', res.data.data)
      })

    },
    // 验证电话号码是否存在
    saveSetPhoneData() {
      let that = this;
      // 验证电话号码是否存在
      this.$api.setPhone(this.userInfo).then((res) => {
        uni.showToast({
          title: '绑定成功'
        })
        this.getUserInfo()
        setTimeout(function () {
          // 绑定成功，返回上一页
          uni.navigateBack({
            delta: 1,
          });
        }, 2000); // 延迟2秒执行
      })
    },
    // 去绑定账号密码页面
    setPhone() {
      let that = this;
      this.$refs.form1.validate().then(res => {
        that.saveSetPhoneData();
      }).catch(errors => {
        uni.$u.toast('校验失败,请认真填写')
      })
    },
    codeChange2(text) {
      this.tips2 = text;
    },
    getCode2() {
      let that = this;
      if (this.$refs.uCode3.canGetCode) {
        that.getSmsCode();
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    // 获取手机验证码
    getSmsCode() {
      let that = this;
      if (!this.userInfo.phonenumber) {
        uni.$u.toast('请认真填写手机号');
        return;
      }


      // 验证电话号码是否存在
      this.$api.service.phoneIsExist(this.userInfo).then((res) => {
        console.log(res.data.data.phoneIsExist)
        if (res.data.data.phoneIsExist) { // 存在
          that.errTipShow = true;
          setTimeout(() => {
            that.errTipShow = false;
            // 在这里编写延迟执行的代码
            that.userInfo.phonenumber = null;
          }, 3000);
        } else {

          that.getPhoneCode();
        }
      })
    },


    // 获取验证码
    getPhoneCode() {
      let that = this;

      // 模拟向后端请求验证码
      uni.showLoading({
        title: '正在获取验证码'
      })
      this.$api.service.getSmsCodeByType({phonenumber: this.userInfo.phonenumber, auth: true, type: 0}).then((res) => {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        uni.$u.toast('验证码已发送');
        // 通知验证码组件内部开始倒计时
        that.$refs.uCode3.start();
      })
    },
  }
}
</script>
<style lang="scss">

page, body {
  background: #fff;
}

.h-err {
  color: red;
  text-align: center;
  font-size: 14px;
}

.h-popo-content {
  height: 170px;
  padding: 12px;
  width: 300px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;

  .h-img {
    display: flex;
    justify-content: center;
  }

  .h-text {
    margin-top: 12px;
    font-weight: 400;
    color: #666666;
  }

  .text {
    margin-top: 6px;
    font-weight: 400;
    color: #666666;
  }

  .h-btn-wrap {
    display: flex;
    justify-content: space-between;
    color: #333333;
    text-align: center;
    margin-top: 14px;

    .h-left-btn {
      height: 32px;
      line-height: 30px;
      background: #EEEEEE;
      width: 100px;
      text-align: center;
      border-radius: 16px;
      margin: 0 auto;
    }

    .h-right-btn {
      height: 32px;
      line-height: 30px;
      background: #FFE05C;
      width: 100px;
      border-radius: 16px;
      margin: 0 auto;

    }
  }
}

.container {
  background: #fff;
  height: 300px;

  .login-wrap {
    display: flex;
    justify-content: center;

    .login-form {
      width: 90%;
    }

    .account {
      display: flex;
    }

    .identifying-code {
    }
  }

  .op-btn-wrap {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    .h-btn {
      text-align: center;
      width: 343px;
      height: 42px;
      background: #FFE05C;
      border-radius: 27px;
      line-height: 42px;
    }
  }
}

.popup-content {
  width: 622rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;

  .popupItem {
    width: 558rpx;
    height: 100rpx;
    background-color: #FAFAFA;
    border-radius: 16rpx;
    margin:24rpx ;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .popupItemSelect {
    width: 558rpx;
    height: 100rpx;
    background-color: #FAFAFA;
    border-radius: 16rpx;
    border: 4rpx solid #FFE05C;
    margin:24rpx ;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
  }
  .popupItemSelect::after {
    content: '√';
    color: #fff;
    z-index: 1000;
    display: inline-block;
    width: 32rpx;
    height: 32rpx;
    transform: rotate(20deg);
    position: absolute;
    top: 0;
    right: 0;
  }

}

.button-popup {
  height: 60px;
  display: flex;
  justify-content: space-between;
  background: #fff;

  .h-btn {
    margin: 0 auto;
    margin-top: 8px;
    width: 240rpx;
    height: 84rpx;
    border-radius: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }
}
</style>