uni-app input组件总是自己失去焦点 无法输入

uni-app input组件总是自己失去焦点 无法输入

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.0.4

手机系统：Android

手机系统版本号：Android 10

手机厂商：OPPO

手机机型：全部手机

页面类型：vue

打包方式：离线

---

示例代码：

<template> <view class="officePwd"> <view class="header"> <image src="../../static/office/pwd.png" mode=""></image> </view> <view class="contain" v-if="type == 0"> <text class="border"></text> <view class="title"> <text>请先设置每次进入密码</text> <text>每次进入我的收益需要输入密码</text> </view> <view class="msg"> <view class="input"> <view class="box"> <input type="password" :focus="true" class="pwd" v-model="pwd" value="" placeholder="请填写密码"/> </view> </view> <view class="input"> <view class="box"> <input type="password" class="pwd" v-model="newPwd" value="" placeholder="请再次填写密码确认"/> </view> </view> <text class="text">密码必须至少6个字符，可以为数字、字母、符号</text> </view> <view class="btn-box"> <view class="btn" [@click](/user/click)="setPwd">进入</view> </view> </view> <view class="contain" v-if="type == 1"> <text class="border"></text> <view class="title"> <text>请输入您设置的密码</text> </view> <view class="msg"> <view class="input"> <view class="box"> <input type="password" v-model="pwd" class="pwd" value="" placeholder="请填写密码"/> </view> </view> </view> <view class="btn-box"> <view class="btn" [@click](/user/click)="submit">进入</view> <view class="txt" [@click](/user/click)="forgetPwd">忘记密码？</view> </view> </view> <view class="contain" v-if="type == 2"> <text class="border"></text> <view class="title"> <text>手机验证修改密码</text> </view> <view class="title title1"> <text>{{mobile}}</text> </view> <view class="msg"> <view class="input"> <view class="box"> <input type="number" maxlength="4" class="pwd" v-model="code" value="" placeholder="请输入验证码"/> </view> <view class="yarn" v-if="countdown == 60" [@click](/user/click)="send">{{yardValue}}</view> <view class="yarn yarn1" v-if="countdown != 60">{{yardValue}}</view> </view> <view class="input"> <view class="box"> <input type="password" v-model="pwd" class="pwd" value="" placeholder="请输入新密码"/> </view> </view> </view> <view class="btn-box"> <view class="btn" [@click](/user/click)="updatePwd">进入</view> </view> </view> <view class="contain" v-if="type == 3"> <text class="border"></text> <view class="title"> <text>身份验证</text> </view> <view class="title title1"> <text>{{mobile}}</text> </view> <view class="msg"> <view class="input"> <view class="box"> <input type="number" maxlength="4" class="pwd" v-model="code" placeholder="请输入验证码"/> </view> <view class="yarn" v-if="countdown == 60" [@click](/user/click)="send">{{yardValue}}</view> <view class="yarn yarn1" v-if="countdown != 60">{{yardValue}}</view> </view> <view class="input"> <view class="box"> <input type="password" v-model="pwd" class="pwd" value="" placeholder="请输入设置的密码"/> </view> </view> </view> <view class="btn-box"> <view class="btn" [@click](/user/click)="login">进入</view> <view class="txt" [@click](/user/click)="forgetPwd">忘记密码？</view> </view> </view> </view> </template> ```

<script>
import httpRequest from "@/common/request.js"
import fileUrl from "@/common/file.js"  
import baseUrl from "@/common/url.js"  
import version from "@/common/version.js"  
import source from "@/common/source.js"  
export default {  
    data() {  
        return {  
            onceYarnPwd : false,  
            onceUpdatePwd : false,  
            oncePwd : false,  
            time:'',  
            newPwd : '',  
            pwd:'',  
            yardValue : "获取验证码",  
            countdown : 60,  
            sendYarn : true,  
            code : '',  
            httpRequest : httpRequest,  
            type :4,  
            mobile:0,  
            clientid : '',  
            codeShow : true  
        };  
    },  
    onLoad(optains) {  
        this.mobile = optains.mobile  
        this.getIsViewRevenue()  
    },  
    onHide() {  
        this.countdown = 60  
    },  
    onHide() {  

    },  
    methods:{  
        // 修改密码  
        updatePwd(){  
            var _this = this  
            if(!_this.code.trim().length){  
                uni.showToast({  
                    icon: 'none',  
                    title: '请填写验证码！',  
                    duration: 1500  
                });  
                return   
            }  
            if(!_this.pwd.trim().length){  
                uni.showToast({  
                    icon: 'none',  
                    title: '请填写密码！',  
                    duration: 1500  
                });  
                return   
            }  
            if(_this.onceUpdatePwd){  
                return;  
            }  
            _this.onceUpdatePwd = true  
            var data = {  
                newPassword : _this.pwd,  
                identification : _this.clientid,  
                code : _this.code  
            }  
            var requestUrl= '/v3/user/updatePassword'  
            _this.httpRequest(requestUrl,data,'post').then(res => {  
                _this.onceUpdatePwd = false  
                uni.redirectTo({  
                    url: "/pages/myOffice/myOffice"  
                })  
            }).catch(() => {  
                _this.onceUpdatePwd = false  
            })  
        },  
        // 进入  
        login(){  
            var _this = this  
            if(!_this.code.trim().length){  
                uni.showToast({  
                    icon: 'none',  
                    title: '请填写验证码！',  
                    duration: 1500  
                });  
                return   
            }  
            if(!_this.pwd.trim().length){  
                uni.showToast({  
                    icon: 'none',  
                    title: '请填写密码！',  
                    duration: 1500  
                });  
                return   
            }  
            if(_this.onceYarnPwd){  
                return;  
            }  
            _this.onceYarnPwd = true  
            var data = {  
                password : _this.pwd,  
                isNormalLogin :1,  
                identification : _this.clientid,  
                code : _this.code  
            }  
            var requestUrl= '/v3/user/loginViewRevenue'  
            _this.httpRequest(requestUrl,data,'post').then(res => {  
                _this.onceYarnPwd = false  
                uni.redirectTo({  
                    url: "/pages/myOffice/myOffice"  
                })  
            }).catch(() => {  
                _this.onceYarnPwd = false  
            })  
        },  
        // 再次发送短信(3我的收益验证登录/2修改我的收益密码)  
        send(){  
            var _this = this  
            let num = 3  
            if(_this.type == 2){  
                num = 2  
            }  
            if(_this.mobile.trim().length == 11){  
                if (_this.countdown != 60 || !_this.codeShow) {  
                    return;  
                }  
                _this.codeShow = false  
                var requestUrl= '/v3/platform/getSmsCode'  
                _this.httpRequest(requestUrl,{  
                        mobile: _this.mobile,  
                        type: num  
                    },'post').then(res => {  
                        _this.sendYarn = false  
                        _this.codeShow = true  
                        _this.settime()  
                })  
            }else{  
                uni.showToast({  
                    icon: 'none',  
                    title: '请输入合法手机号！'  
                });  
            }  
        },  
        // 短信倒计时  
        settime() {  
          var _this = this  
          if (_this.countdown == 0) {  
            _this.yardValue = "重新发送"  
            _this.countdown = 60  
                // clearTimeout(this.time)  
            return;  
          } else{  
                _this.yardValue ="重新发送(" + _this.countdown + ")";  
            _this.countdown--  
            _this.time = setTimeout(function(){  
              _this.settime()  
            },1000)  
          }  
        },  
        // 忘记密码  
        forgetPwd(){  
            clearTimeout(this.time)  
            this.newPwd = ''  
            this.type = 2  
            this.pwd = ''  
            this.yardValue = "获取验证码"  
            this.countdown = 60  
            this.codeShow = true  
            this.sendYarn = true  
            this.code = ''  
        },  
        getIsViewRevenue(){  
            let _this = this  
            let clientid = this.getClientId()  
            console.log(clientid,'===')  
            this.clientid = clientid  
            console.log(uni.getStorageSync('clientid'),clientid)  
            let requestUrl= '/v3/user/isViewRevenue?identification='+clientid  
            _this.httpRequest(requestUrl).then(res => {  
                console.log(res.data.data.isSame,res.data.data.isViewRevenue,clientid)  
                if(res.data.data.isViewRevenue == 0){  
                    if(res.data.data.isSame == 1){  
                        // uni.showToast({  
                        //  icon: 'none',  
                        //  title: '请验证身份!',  
                        //  duration: 1500  
                        // });  
                        _this.type = 3  
                    }else{  
                        _this.type = 1  
                    }  
                }else{  
                    _this.type = 0  
                }  
            })  
        },  
        getClientId() {  
            //获取客户端ID和版本号  
            var clientid = '';  
            // #ifdef APP-PLUS  
            //   
            plus.device.getInfo({  
                success: function(e) {  
                    clientid = e.uuid;  
                    uni.setStorageSync('clientid', clientid);  
                },  
                fail: function(e) {  
                    console.log(e);  
                }  
            });  
            //   
            plus.device.getAAID({  
                success: function(e) {  
                    clientid = e.aaid;  
                    console.log(clientid);  
                    uni.setStorageSync('clientid');  
                },  
                fail: function(e) {  
                    console.log(e);  
                }  
            });  
            //老版本、安卓模拟器  
            if (clientid == '') {  
                clientid = plus.device.uuid;  
                uni.setStorageSync('clientid', clientid);  
            }  
            // #endif  
            let uuid = ''  
            // #ifdef H5  
            uuid = this.browserUuid()  
            // #endif  
            clientid = clientid ? clientid : uuid  
            return clientid;  
        },  
        // 获取浏览器唯一标识  
        browserUuid(){  
            var canvas = document.createElement('canvas');  
            var ctx = canvas.getContext('2d');  
            var txt = 'http://security.tencent.com/';  
            ctx.textBaseline = "top";  
            ctx.font = "14px 'Arial'";  
            ctx.textBaseline = "tencent";  
            ctx.fillStyle = "#f60";  
            ctx.fillRect(125, 1, 62, 20);  
            ctx.fillStyle = "#069";  
            ctx.fillText(txt, 2, 15);  
            ctx.fillStyle = "rgba(102, 204, 0, 0.7)";  
            ctx.fillText(txt, 4, 17);  
            var b64 = canvas.toDataURL().replace("data:image/png;base64,", "");  
            var bin = atob(b64);  
            var crc = this.bin2hex(bin.slice(-16, -12));  
            return crc  
            console.log(crc,'浏览器唯一标识')  
        },  
        bin2hex(str) {  
            var result = "";  
            for (let i = 0; i < str.length; i++) {  
                result += this.int16_to_hex(str.charCodeAt(i));  
            }  
            return result;  
        },  
        int16_to_hex(i) {  
            var result = i.toString(16);  
            var j = 0;  
            while(j + result.length < 4) {  
                result = "0" + result;  
                j++;  
            }  
            return result;  
        },  
        submit(){  
            var _this = this  
            if(!_this.pwd){  
                uni.showToast({  
                    icon: 'none',  
                    title: '请填写密码！',  
                    duration: 1500  
                });  
                return   
            }  
            var data = {  
                password : _this.pwd,  
                isNormalLogin :0,  
                identification : _this.clientid  
            }  
            var requestUrl= '/v3/user/loginViewRevenue'  
            _this.httpRequest(requestUrl,data,'post').then(res => {  
                uni.redirectTo({  
                    url: "/pages/myOffice/myOffice"  
                })  
            })  
        },  
        // 第一次设置密码  
        setPwd(){  
            var _this = this  
            if(!_this.pwd.trim().length){  
                uni.showToast({  
                    icon: 'none',  
                    title: '请填写密码！',  
                    duration: 1500  
                });  
                return   
            }else if(!_this.newPwd.trim().length){  
                uni.showToast({  
                    icon: 'none',  
                    title: '请填写确认密码！',  
                    duration: 1500  
                });  
                return   
            }else if(_this.newPwd != _this.newPwd){  
                uni.showToast({  
                    icon: 'none',  
                    title: '两次密码不一致！',  
                    duration: 1500  
                });  
                return   
            }  
            if(_this.oncePwd){  
                return;  
            }  
            _this.oncePwd = true  
            var data = {  
                password : _this.pwd,  
                twoPassword :_this.newPwd,  
                identification : _this.clientid  
            }  
            var requestUrl= '/v3/user/addViewRevenue'  
            _this.httpRequest(requestUrl,data,'post').then(res => {  
                _this.oncePwd = false  
                uni.redirectTo({  
                    url: "/pages/myOffice/myOffice"  
                })  
            }).catch(() => {  
                _this.oncePwd = false  
            })  
        }  
    }  
}  
</script>

<style lang="scss" scoped>
.officePwd{
.header{
margin-top: -160upx;
image{
width: 750upx;
height: 460upx;
display: block;
}
}
.contain{
width: 100%;
padding: 50upx;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
.border{
width: 55upx;
height: 0upx;
border-top: 12upx solid #27292D;
margin-bottom: 38upx;
}
.title{
text{
display: block;
}
>text:nth-child(1){
font-size: 40upx;
font-weight: bold;
color: #232F47;
line-height: 52upx;
}
>text:nth-child(2){
font-size: 24upx;
color: #7D8697;
}
}
.title1{
text{
margin-top: 40upx;
font-size: 42upx;
}
}
.msg{
width: 100%;
margin-top: 14upx;
.input{
width: 100%;
display: flex;
align-items: center;
.box{
flex: 1;
border-bottom: 2upx solid #232F47;
padding: 50upx 0 16upx 0;
.pwd{
font-size: 28upx;
}
}
.yarn{
min-width: 180upx;
text-align: center;
// padding: 0 22upx;
font-size: 24upx;
color: #FFFFFF;
line-height: 52upx;
background: #FE751F;
border-radius: 12upx;
margin: 40upx 0 0 20upx;
}
.yarn1{
color:rgba(141,141,141,1);
background: #ebebeb;
}
}
.text{
margin-top: 16upx;
font-size: 24upx;
color: rgba(39, 41, 45, 0.64);
}
}
.btn-box{
width: 100%;
// position: fixed;
// bottom: 156upx;
// left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.btn{
width: 450upx;
text-align: center;
line-height: 94upx;
background: #FE751F;
box-shadow: 2upx 2upx 12upx rgba(254, 117, 31, 0.5);
border-radius: 48upx;
font-size: 32upx;
font-weight: bold;
color: #FFFFFF;
margin-top: 168upx;
}
.txt{
font-size: 24upx;
color: #FE751F;
margin-top: 30upx;
}
}
}
}
</style>