|
@@ -9,46 +9,156 @@
|
|
|
<u-form :model="form" ref="uForm">
|
|
|
<view class="jpLogin-input" style="margin-top:60px;">
|
|
|
<u-icon custom-prefix="custom-icon" name="cellphone-fill" class="jpLogin-icon"></u-icon>
|
|
|
- <u-form-item><u-input v-model="form.name" placeholder="请填写手机号" /></u-form-item>
|
|
|
+ <u-form-item><u-input v-model="form.oldPhone" placeholder="请填写手机号" /></u-form-item>
|
|
|
</view>
|
|
|
<view class="jpLogin-input">
|
|
|
<u-icon custom-prefix="custom-icon" name="message-3-fill" class="jpLogin-icon"></u-icon>
|
|
|
- <u-form-item><u-input v-model="form.name" placeholder="请输入验证码" /></u-form-item>
|
|
|
+ <u-form-item><u-input v-model="form.verifyCode" placeholder="请输入验证码" /></u-form-item>
|
|
|
</view>
|
|
|
<view class="jpLogin-link">
|
|
|
<view class="jpLogin-link-l">
|
|
|
</view>
|
|
|
- <span>获取验证码</span>
|
|
|
+ <span @click="getCode">获取验证码</span>
|
|
|
</view>
|
|
|
<view class="jpLogin-input" style="margin-top:40px;">
|
|
|
<u-icon custom-prefix="custom-icon" name="cellphone-fill" class="jpLogin-icon"></u-icon>
|
|
|
- <u-form-item><u-input v-model="form.name" placeholder="请填写新手机号" /></u-form-item>
|
|
|
+ <u-form-item><u-input v-model="form.newPhone" placeholder="请填写新手机号" /></u-form-item>
|
|
|
</view>
|
|
|
</u-form>
|
|
|
</view>
|
|
|
<view style="margin-top: 60px;">
|
|
|
- <u-button type="error" shape="circle" :custom-style="customStyle">完成绑定</u-button>
|
|
|
+ <u-button type="error" shape="circle" :custom-style="customStyle" @click="finish">完成绑定</u-button>
|
|
|
</view>
|
|
|
+ <u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start">
|
|
|
+ </u-verification-code>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import * as loginApi from '@/apis/login.js'
|
|
|
+ import {
|
|
|
+ checkPhone
|
|
|
+ } from '@/utils'
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
form: {
|
|
|
- name: '',
|
|
|
+ oldPhone: '',
|
|
|
+ verifyCode: '',
|
|
|
+ newPhone: '',
|
|
|
},
|
|
|
value:'0',
|
|
|
customStyle:{
|
|
|
background: '#FF5E5E'
|
|
|
- }
|
|
|
- }
|
|
|
- methods: {
|
|
|
-
|
|
|
+ },
|
|
|
+ isSendMsgIng: false,
|
|
|
+ sendMsgSecond: 60 * 2,
|
|
|
}
|
|
|
-
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ codeChange(text) {
|
|
|
+ this.codeTips = text;
|
|
|
+ },
|
|
|
+ start() {
|
|
|
+ if (!this.isSendMsgIng) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ loginApi.getVerifyCode(this.form.oldPhone).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.carhelp.set("getvcodetime", new Date().getTime());
|
|
|
+
|
|
|
+ if (!"") {
|
|
|
+ //倒计时
|
|
|
+ uni.showToast({
|
|
|
+ title: "发送成功"
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: "您的验证码已经发送[5分钟有效],请勿重复点击"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //倒计时
|
|
|
+ end() {
|
|
|
+ this.sendMsgSecond = 2 * 60;
|
|
|
+ this.isSendMsgIng = false;
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ getCode() {
|
|
|
+ if (this.$refs.uCode.canGetCode) {} else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '倒计时结束后再发送',
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ var checkPhoneResult = checkPhone(this.form.oldPhone);
|
|
|
+
|
|
|
+ if (false && checkPhoneResult !== true) {
|
|
|
+ uni.showToast({
|
|
|
+ title: checkPhoneResult,
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$refs.uCode.start();
|
|
|
+ },
|
|
|
+ finish() {
|
|
|
+ if (!this.carhelp.getOpenId()) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请使用“微信”访问本系统登录"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.form.oldPhone) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请输入原手机号"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.form.verifyCode) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请输入验证码"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.form.newPhone) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请输入新手机号"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ loginApi.changePhone({
|
|
|
+ oldPhone: this.form.oldPhone,
|
|
|
+ verifyCode: this.form.verifyCode,
|
|
|
+ newPhone: this.form.newPhone
|
|
|
+ }).then((response) => {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/login/index'
|
|
|
+ });
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|