You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
zhishifufei_uniapp/pages/my/save_phone.vue

142 lines
3.6 KiB

9 months ago
<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/my/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>