renshou/mine/bindNumber/bindNumber.vue

<template>
	<view style="padding-top: 300rpx;">
		<view v-if="userInfo&&userInfo.mobile" class="phone">{{userInfo.mobile.substring(0,3)}}****{{userInfo.mobile.substring(userInfo.mobile.length-4,3)}}</view>
		<view v-else class="phone">绑定工号</view>
		
		<view class="input-box" style="margin-bottom: 30rpx;">
			<input v-model="saleNo" placeholder-class="input-placeholder" placeholder="请输入工号"/>
		</view>
		
		<view class="input-box dflex" style="margin-top: 40rpx;">
			<input v-model="code" type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="input-placeholder"
				class="flex" />
			<view class="yzm" @click="getCode()" v-text="sendMsg"></view>
		</view>
		
		<view class="btn" @click="submit">确认绑定</view>
	</view>
</template>

<script>
import { setTimeout } from "timers";
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				userInfo:{},
				systems: {},
				isTop:0,
				saleNo:'',
				code: '', //code
				sendMsg: '获取验证码',
				isGetCodeDisabled: false,
			}
		},
		onLoad(options) {
			this.userInfo = req.getStorage('userInfo')
		},
		onShow() {
			
		},
		methods: {
			submit(){
				if(!this.saleNo) return req.msg("请输入工号")
				if(!this.code) return req.msg("请输入验证码")
				req.postRequest('/api/user/bindSaleNo',{saleNo:this.saleNo,yzlCode:this.code},res=>{
					req.msg("绑定成功")
					req.getRequest('/api/user/info', {}, suc => {
						req.setStorage('userInfo', suc);
					});
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			getCode() {
				if (this.isGetCodeDisabled == true) return false;
				if (!this.saleNo) {
					req.msg('请输入工号');
					return;
				}
				req.postRequest(
					'/api/user/getYzlCode', {
						saleNo: this.saleNo,
					},
					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
				);
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./bindNumber.css";
</style>