H5_module/topic/bind/index.vue

<template>
	<view class="content">
		<view class="title">
			<view>绑定手机号</view>
		</view>
		<view class="form"><input v-model="mobile" type="number" maxlength="11" placeholder="请输入手机号码" placeholder-class="placeholder" class="ipt" /></view>
		<view class="form dflex">
			<input v-model="code" type="number" maxlength="6" placeholder="请输入短信验证码" placeholder-class="placeholder" class="ipt flex" />
			<view class="yzm" @click="getCode()" v-text="sendMsg"></view>
		</view>
		<view class="btn" @click="submitBind">绑定</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			mobile: '', //手机号
			code: '', //code
			sendMsg: '获取验证码',
			isGetCodeDisabled: false,
			typeRole: '',
			userInfo: {}
		};
	},
	onLoad() {},
	methods: {
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},

		getCode() {
			if (this.isGetCodeDisabled == true) return false;
			if (!this.mobile) {
				req.msg('请输入手机号');
				return;
			}
			if (!util.isMobile(this.mobile)) {
				req.msg('请输入11位的有效手机号');
				return;
			}
			req.postRequest(
				api.sms_bind_mobile,
				{
					mobile: this.mobile
				},
				data => {
					req.msg('验证码获取成功');
					let time = 60;
					let interval = setInterval(() => {
						time--;
						if (time == 0) {
							this.isGetCodeDisabled = false;
							this.sendMsg = '获取验证码';
							clearInterval(interval);
						} else {
							this.isGetCodeDisabled = true;
							this.sendMsg = time + '秒后再获取';
						}
					}, 1000);
				},
				true
			);
		},
		submitBind: function() {
			if (!this.mobile) {
				req.msg('请输入手机号');
				return;
			}
			if (!this.code) {
				req.msg('请输入验证码');
				return;
			}
			var dataP = {
				mobile: this.mobile,
				code: this.code
			};
			req.postRequest(
				api.mobile_bind_mobile,
				dataP,
				data => {
					this.userInfo = data;
					req.setStorage('AUTH_TOKEN', data.token);
					req.setStorage('userInfo', data);
					uni.navigateBack();
				},
				true
			);
		}
	}
};
</script>

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