五 login/bindPhone.vue

103 阅读1分钟
	<view>
		<input type="text" placeholder="请输入手机号" v-model='info.mobile'>
		<view>
			<input type="text" v-model='info.captcha' placeholder="请输入验证码">
			<button @click='sendCode' :disabled="info.disabled">{{ info.codeText }}</button>
		</view>
		
		<view>
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
			<button @click='userBindPhone'>绑定</button>
		</view>
	</view>
</template>

<script>
import { wechatPhone , loginByWechat , updateMobile  , sendMessage } from '@/utils/api/login.js'
import { Encrypt } from '@/utils/aes.js'
import { mapActions } from 'vuex'
export default{
	data () {
		return {
			
			info:{
				mobile:'',
				codeText:"获取验证码",
				captcha:'',
				disabled:false
			}
		}
	},
	methods:{
		...mapActions(['getUserInfo']),
		//绑定手机号
		async userBindPhone(){
			let { mobile  , captcha } = this.info;
			let res = await updateMobile({
				mobile:Encrypt(mobile),
				captcha
			})
			if( res.code == '200' ){
				this.getUserInfo();
				//不能写死
				return uni.switchTab({
					url:'/pages/tabbar/my'
				})
			}
		},
		//发送验证码
		async sendCode(){
			let that = this;
			that.info.disabled = true;
			let { mobile } = this.info;
			
			let reg = /^1[23456789]\d{9}$/;
			if( !reg.test( mobile) ) {
				uni.showToast({
					title:'手机号不合法'
				})
			}
		
			let res = await sendMessage({
				key:'MODIFY_MOBILE',
				mobile:Encrypt(mobile)
			})
			
			console.log( '发送验证码' , res );
			
			if( res.code !='200' ){
				return uni.showToast({
					title:'发送短信验证码失败'
				})
			}
			
			let time = 10;
			let timer = setInterval(function () {
				// 判断剩余秒数
				if (time == 0) {
					// 清除定时器和复原按钮
					clearInterval(timer);
					that.info.codeText = '重新获取验证码'
					that.info.disabled = false;
				}else{
					that.info.codeText = '还剩下' + time + '秒',
					time--;
				}
			}, 1000);
			
		},
		//获取用户手机号列表
		async getPhoneNumber(  e  ){
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {    
				console.log('用户拒绝提供手机号');  
			} else { 
				// let params =  JSON.parse(uni.getStorageSync('userIv'));
				// let res = await wechatPhone(params);
				// console.log( res );
			}  
		}
	}
}
</script>

<style>
</style>