jje_uniapp/myPages/setting/setting-telphone.vue

<template>
  <view class="container">
    <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>
          <view style="font-size: 26rpx">
            请输入您在娇骄儿的会员手机号，如需要找回账号请点击
            <navigator url="/loginPages/login/retrieve-account">
              <text style="color: #007aff">找回账号</text>
              。
            </navigator>

          </view>

        </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,
      errShow: false,
      userInfo: {
        auth: true,
        phonenumber: '',
        phone: '',
        smsCode: '',
        openId: '',
        password: "",
        transactionPassword: "",
        reference: "",
        type: '' // 实名认证创建新账号
      },
      tips2: '',
      rules: {
        phonenumber: [
          {
            required: true,
            min: 10,
            max: 12,
            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) {
  },
  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.switchTab({
            url: '/pages/my/index',
          });
        }, 2000); // 延迟2秒执行
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      });
    },
    // 去绑定账号密码页面
    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.phoneIsExist(this.userInfo).then((res) => {
        if (res.phoneIsExist) { // 存在
          that.errTipShow = true;
          setTimeout(() => {
            that.errTipShow = false;
            // 在这里编写延迟执行的代码
            that.userInfo.phonenumber = null;
          }, 3000);
        } else {
          that.getPhoneCode();
        }
      }).catch(() => {
        uni.showToast({
          title: "操作失败",
          duration: 3000
        })
      });


    },
    // 获取验证码
    getPhoneCode() {
      let that = this;
      // 模拟向后端请求验证码
      uni.showLoading({
        title: '正在获取验证码'
      })
      this.$api.getSmsCode({phonenumber: this.userInfo.phonenumber, auth: true}).then((res) => {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        uni.$u.toast('验证码已发送');
        // 通知验证码组件内部开始倒计时
        that.$refs.uCode3.start();
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      });
    },
  }
}
</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;
    }
  }
}
</style>