zhishifufei_uniapp/pages/my/save_phone.vue

<template>
  
  <BaseContainer class="replace-phone">
    <NavBar :title="title" />
    <view class="list">
      <view class="item">
        <input type="text" :placeholder="place_msg" v-model="phone" />
      </view>
      <view class="item itemCode acea-row row-between-wrapper">
        <input type="tel" v-model="code_num" maxlength="11" placeholder="请输入验证码" />
        <view
          class="code flex flex-center"
          :class="active == true ? 'on' : ''"
          @click="code"
        >
          {{ timetext }}
        </view>
      </view>
    </view>
    <view class="bnt" @click="goNext">{{ but_name }}</view>
  </BaseContainer>
</template>

<script>
import userInfoMixin from "@/mixins/userInfo";
import { getAuthCode, validateCode, bindUserPhone } from "@/api/user";

export default {
  mixins: [userInfoMixin],
  data() {
    return {
      phone: "",
      code_num: "",
      active: false,
      timetext: "获取验证码",
      run: null,
      type: 0,
      step: 0,
    };
  },
  computed: {
    but_name() {
      return this.phone ? "下一步" : "确认绑定";
    },
    place_msg() {
      return this.phone ? "请输入原的手机号" : "请输入新手机号码";
    },
    title() {
      return this.step === 0 ? "更换手机号码" : "绑定手机号码";
    },
  },
  onLoad({ step }) {
    this.phone = this.userInfo.phone ?? '';
    this.step = step ?? 0
  },
  methods: {
    async goNext() {
      if (this.step === 0) {
        uni.showLoading({
          mask: true,
        });
        try {
          const { data } = await validateCode(this.phone, this.code_num);
          uni.hideLoading();
          this.phone = "";
          this.code_num = "";
          this.active = false;
          this.type = 1;
          this.step = 1;
          if (this.run) clearInterval(this.run);
          this.timetext = "获取验证码";
        } catch (err) {
          console.log(err);
          uni.hideLoading();
          this.$util.showMsg(err.msg);
        }
      } else {
        uni.showLoading({
          mask: true,
        });
        try {
          const { msg } = await bindUserPhone(this.phone, this.code_num, this.type);
          uni.hideLoading();
          this.$util.showMsg(msg);
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/mine/index",
            });
          }, 600);
        } catch (err) {
          uni.hideLoading();
          this.$util.showMsg(err.msg);
        }
      }
    },
    code() {
      if (this.active) return;
      if (!this.phone) return this.$util.showMsg("请输入手机号码");
      if (!this.$reg.isPhone(this.phone))
        return this.$util.showMsg("请输入正确的手机号码");
      this.SendOutCode();
    },
    async SendOutCode() {
      this.active = true;
      let n = 60;

      try {
        const { data } = await getAuthCode(this.phone);

        if (data.Message == "OK" || data.Code == "OK") {
          this.run = setInterval(() => {
            n--;
            if (n < 0) {
              clearInterval(this.run);
              this.run = null;
            }
            this.timetext = "剩余 " + n + "s";
            if (this.timetext < "剩余 " + 0 + "s") {
              this.active = false;
              this.timetext = "重发";
            }
          }, 1000);
        } else {
          this.$util.showMsg(data.Message);
          this.active = false;
        }
      } catch (err) {
        console.log(err);
        this.$util.showMsg(err.message);
        this.active = false;
      }
    },
  },
};
</script>

<style >
page {
  background-color: #f2f2f2;
}
</style>