zx_flk_app/pages/modifyPhone/modifyPhone.vue

<template>
	<view class="container">
		<form @submit="bindModifyPhone">
			<view class="form-container">
				<view class="form-item">
					<input type="number" name="phone" @input="inputPhone" :placeholder="$t('请输入绑定的新手机号')" />
				</view>
				<view class="form-item flex-row flex-between">
					<input type="number" name="verify_code" :placeholder="$t('请输入验证码')" @input="inputVerifyCode" />
					<view class="send-code">
						<form @submit="bindGetVerifyCode">
							<button class="def-btn-verify" form-type="submit">
								<text v-if="codeGetting"> {{curTime}}{{ $t('秒后再次获取') }}</text>
								<text v-else>{{ $t('获取验证码') }}</text>
							</button>
						</form>
					</view>
				</view>
				<view class="form-btn">
					<button class="login-btn" form-type="submit">{{ $t('绑定新手机号') }}</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	var config = require('../../common/config.js');
	var common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	var user = require('../../common/user.js');
	export default {
		data() {
			return {
				codeGetting: false,
				curTime: 60,
				phone: '',
				verify_code: '',
				timer: null
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		methods: {
			inputPhone: function(e) {
				const phone = e.detail.value
				this.phone = phone
			},

			bindGetVerifyCode: function(e) {
				if (this.codeGetting)
					return
				if (!this.phone) {
					common.alert(this.$t('提示'), this.$t('请输入手机号码'));
					return;
				}
				if (!common.isPhone(this.phone)) {
					common.alert(this.$t('提示'), this.$t('请检测您的手机号码是否正确'));
					return;
				}

				this.setData({
					codeGetting: true
				})
				const me = this
				me.timer = setInterval(function() {
					let curTime = me.curTime - 1
					if (curTime === 0) {
						clearTimeout(me.timer);
						me.setData({
							codeGetting: false,
							curTime: 60
						})
					} else {
						me.setData({
							curTime: curTime
						})
					}
				}, 1000)
				const accountInfo = uni.getAccountInfoSync()
				http.getApi(config.API_USER_VERIFY_CODE, {
					appid: accountInfo.miniProgram.appId,
					phone: this.phone
				}, function(response) {
					if (response.data.code === 200) {

					} else {
						common.alert(this.$t('提示'), response.data.msg);
					}
				})
			},
			
			inputVerifyCode: function(e) {
				this.verify_code = e.detail.value
			},

			bindModifyPhone() {
				//#ifdef MP-ALIPAY
				const _source = 'ali'
				//#endif
				//#ifdef MP-WEIXIN
				const _source = 'wx'
				//#endif
				const pData = {
					phone: this.phone,
					verify_code: this.verify_code,
					source: _source
				}
				http.postApi(config.API_MODIFY_PHONE, pData, function(resp) {
					if (resp.data.code === 200) {
						common.simpleToast(this.$t('修改成功'))
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/index/index',
							})
						}, 2000)
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			},
		}
	};
</script>

<style>
	@import './modifyPhone.css';
</style>