<view style="height: 100%;">
<view class="main-page" style="display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 6%">
<!-- 新版登陆 -->
<view class="login-main" style="flex: 1;" v-show="showNewLogin">
<view class="login-header">
<view class="image">
<image mode="aspectFit" src="/static/images/logo.png" />
</view>
<view>
<text>{{i18n.login.welcome}}</text>
</view>
</view>
<view style="padding: 8% 0 2% 0; font-weight: bold; font-size: 60rpx;">
<text>{{i18n.login.header}}</text>
</view>
<view style="padding-bottom: 6%; text-align: right; color: blue;">
<i class="fa fa-refresh baseFontColor" aria-hidden="true" style="margin-right: 10px;"></i>
<text v-show="loginType === 1" @click="changeLoginType(2)">{{i18n.login.useEmail}}</text>
<text v-show="loginType === 2" @click="changeLoginType(1)">{{i18n.login.usePhone}}</text>
</view>
<view class="item">
<view class="content">
<!-- 账号 -->
<view v-show="loginType === 1" class="phonenumber">
<view @click="chooseAreaCode">
<text>{{ location }}</text>
<image src="/static/images/areaCodeSelection.png"></image>
</view>
<input v-model="phonenumber" type="number" :placeholder="i18n.login.enterPhoneNum" placeholder-style="color: #c7c7c7" @blur="autoRemoveZero"/>
</view>
<view v-show="loginType === 2" class="phonenumber">
<input v-model="phonenumber" :placeholder="i18n.login.enterEmail" placeholder-style="color: #c7c7c7" style="text-indent: 0rpx;" />
</view>
<!-- 验证码 -->
<view class="password">
<input :focus="getVcodeFocus" maxlength="6" v-model="corCode" type="number" :placeholder="i18n.forgot.enterCode" placeholder-style="color: #c7c7c7"/>
<button :disabled="corDisabled" @click="getVerificationCode" size="mini" type="primary">
<text>{{i18n.forgot.vcodeBtn}}</text>
<text v-show="showTimer">({{ timer }}s)</text>
</button>
</view>
<view class="button">
<button @click="loginByCode" type="primary">{{i18n.login.logInBtn}}</button>
<view class="other">
<text @click="changeLoginPage(false)">{{i18n.login.passwordLogin}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 老版登陆 -->
<view class="login-main" style="flex: 1;" v-show="!showNewLogin">
<view class="login-header">
<view class="image">
<image mode="aspectFit" src="/static/images/logo.png" />
</view>
<view>
<text>{{i18n.login.welcome}}</text>
</view>
</view>
<view class="item">
<view class="title" style="padding-bottom: 2%;">
<text>{{i18n.login.header}}</text>
</view>
<view style="padding-bottom: 6%; text-align: right; color: blue;">
<i class="fa fa-refresh baseFontColor" aria-hidden="true" style="margin-right: 10px;"></i>
<text v-show="loginType === 1" @click="changeLoginType(2)">{{i18n.login.useEmail}}</text>
<text v-show="loginType === 2" @click="changeLoginType(1)">{{i18n.login.usePhone}}</text>
</view>
<view class="content">
<view v-show="loginType === 1" class="phonenumber">
<view @click="chooseAreaCode">
<text>{{ location }}</text>
<image src="/static/images/areaCodeSelection.png"></image>
</view>
<input v-model="phonenumber" type="number" :placeholder="i18n.login.enterPhoneNum" placeholder-style="color: #c7c7c7" @blur="autoRemoveZero"/>
</view>
<view v-show="loginType === 2" class="phonenumber">
<input v-model="phonenumber" type="email" :placeholder="i18n.login.enterEmail" placeholder-style="color: #c7c7c7" style="text-indent: 0rpx;" />
</view>
<view class="password">
<input @confirm="loginApp" v-model="password" :password="!showPwd" :placeholder="i18n.login.enterPassword" placeholder-style="color: #c7c7c7"/>
<i @click="showPassword" v-show="!showPwd" class="fa fa-eye-slash" style="font-size: 20px;" aria-hidden="true"></i>
<i @click="hidePassword" v-show="showPwd" class="fa fa-eye" style="font-size: 20px;" aria-hidden="true"></i>
</view>
<view style="padding-top: 2%;" v-show="showMsg">
<text style="color: red;">* {{ showMsgText }}</text>
</view>
</view>
<view class="button">
<button @click="loginApp" type="primary">{{i18n.login.logInBtn}}</button>
<view class="other">
<text @click="changeLoginPage(true)">{{i18n.login.codeLogin}}</text>
<view>
<text @click="register">{{i18n.common.register}}</text>
<text style="padding: 0 2px;">|</text>
<text @click="forgotPwd">{{i18n.login.forgotPwd}}?</text>
</view>
</view>
</view>
</view>
</view>
<view style="display: flex; justify-content: center;">
<a style="border-bottom: 1px solid #c7c7c7; color: #c7c7c7; text-decoration: none; font-size: 24rpx;" href="mailto:service@roamwifi.com">{{i18n.login.contactUs}}: service@roamwifi.com</a>
</view>
</view>
<cus-popup ref="loginPopup"></cus-popup>
</view>
</template>
<script>
import cusPopup from "@/components/uni-customer/cus-popup.vue"
import {encrypto, jumpPageByUri} from "../tool/utils.js"
let myTimer = null;
export default {
name: "vLogin",
components: {
cusPopup
},
computed: {
i18n() {
return this._i18n()
}
},
methods: {
loginByCode: function() {
if(this.phonenumber.length === 0) {
let msg = this._i18n().login.enterPhoneNum
if(this.loginType === 2) msg = this._i18n().login.enterEmail
this.$refs.loginPopup.popupOpen({ct: "message", pt: "message",
options: {
type: "warn",
message: msg,
duration: 3000
}
})
} else if(this.corCode.length === 0) {
this.$refs.loginPopup.popupOpen({ct: "message", pt: "message",
options: {
type: "warn",
message: this._i18n().forgot.vcodeIsNull,
duration: 3000
}
})
} else {
uni.showLoading({title: this._i18n().common.loading});
let account = this.phonenumber
if(this.loginType === 1) account = this.location.substring(1) + this.phonenumber
this.$post("base/loginByPhoneOrEmail.do", {
"number": encrypto(account),
"vercode": this.corCode,
"type": this.loginType === 1 ? "phone" : "email",
"sign" : "1"
}).then((res) => {
uni.hideLoading();
if(res.code === 1) {
this.setCid()
uni.setStorageSync('authentication', res.data.token);
uni.reLaunch({url: "/pages/home/home"})
} else {
let msg = this._i18n().login.loginMsg.systemError
if(res.code === 400022) {
msg = this._i18n().forgot.vcodeIsInvalid
}
this.$refs.loginPopup.popupOpen({ct: "dialog", pt: "dialog",
options: {
type: "error",
content: msg,
buttons: [this._i18n().common.close, this._i18n().common.confirm]
}
})
}
}).catch((res) => {
uni.hideLoading();
console.log(res)
})
}
},
changeLoginPage: function(flag) {
this.showNewLogin = flag
this.password = ""
this.corCode = ""
},
timerCountdown: function(){
this.corDisabled = true
this.showTimer = true
let _self = this
myTimer = setInterval(function(){
_self.timer = _self.timer - 1
if(_self.timer <= 0) {
_self.timer = 60
_self.corDisabled = false
_self.showTimer = false
if(myTimer !== null) clearInterval(myTimer)
}
}, 1000)
},
getVerificationCode: function(){
if(this.phonenumber.length === 0) {
let msg = this._i18n().login.enterPhoneNum
if(this.loginType === 2) msg = this._i18n().login.enterEmail
this.$refs.loginPopup.popupOpen({ct: "message", pt: "message",
options: {type: "warn", message: this._i18n().login.enterPhoneNum, duration: 3000}
})
} else {
this.timerCountdown()
this.getVcodeFocus = true
if(this.loginType === 1) this.autoRemoveZero()
// 请求地址
let uri = "base/sendVerifyCode.do"
if(this.loginType === 2) uri = "base/sendVerifyCodeByEmail.do"
// 账号
let account = encrypto(this.location.substring(1) + this.phonenumber)
if(this.loginType === 2) account = encrypto(this.phonenumber)
// 区号
let areacode = ""
if(this.loginType === 1) areacode = this.location.substring(1)
console.log(uri, account, areacode)
this.$post(uri, {
"phone": account,
"email": account,
"areacode": areacode,
"type": "login",
"sign": "1"
}).then(res => {
if(res.code === 1) {
let msg = this._i18n().forgot.getVCodeMsg.vcodeSendToPhone
if(this.forgotType === 2) this._i18n().forgot.getVCodeMsg.vcodeSendToEmail
this.$refs.loginPopup.popupOpen({ct: "message", pt: "message",
options: {type: "warn", message: msg, duration: 3000}
})
}
}).catch(res => console.log(res))
}
},
changeLoginType: function(type) {
this.phonenumber = ""
this.password = ""
this.loginType = type
},
autoRemoveZero: function(){
let index = 0
let phones = this.phonenumber.split("")
for(var i = 0, size = phones.length; i < size; i++) {
if(phones[i] !== "0") {
index = i
break
}
}
if(index !== 0) {
this.phonenumber = this.phonenumber.substring(index)
this.$refs.loginPopup.popupOpen({ct: "message", pt: "message",
options: {type: "warn", message: this._i18n().login.autoRemoveZero, duration: 3000}
})
}
},
register: function(){
// jumpPageByUri("register")
uni.reLaunch({url: "/pages/register/register"})
},
forgotPwd: function (){uni.reLaunch({url: "/pages/forgot/forgot"})},
hidePassword: function(){this.showPwd = false},
showPassword: function(){this.showPwd = true},
chooseAreaCode: function(){uni.reLaunch({url: "/pages/locations/locations?page=login&account=" + this.phonenumber})},
setCid: function(){
// #ifdef APP-VUE
plus.push.getClientInfoAsync((info) => {
this.$post("user/setCid.htm", {
"cid": info.clientid
}).then(res => {}).catch((res) => {})
}, err => console.log(err))
// #endif
},
loginApp: function(){
if(this.phonenumber.length === 0) {
let msg = this._i18n().login.enterPhoneNum
if(this.loginType === 2) msg = this._i18n().login.enterEmail
this.$refs.loginPopup.popupOpen({ct: "message", pt: "message",
options: {
type: "warn",
message: msg,
duration: 3000
}
})
} else if(this.password.length === 0) {
this.$refs.loginPopup.popupOpen({ct: "message", pt: "message",
options: {
type: "warn",
message: this._i18n().login.enterPassword,
duration: 3000
}
})
} else {
uni.showLoading({title: this._i18n().common.loading});
let account = this.phonenumber
if(this.loginType === 1) account = this.location.substring(1) + this.phonenumber
this.$post("base/getToken.htm", {
"phone": encrypto(account),
"password": encrypto(this.password),
"sign" : "1"
}).then((res) => {
uni.hideLoading();
if(res.code === 1) {
this.setCid()
uni.setStorageSync('authentication', res.data.token);
uni.reLaunch({url: "/pages/home/home"})
} else {
let msg = this._i18n().login.loginMsg.systemError
if(res.code === 400006 || res.code === 400002) {
msg = this._i18n().login.loginMsg.phoneOrPwdIsError
} else if(res.code === 400005) {
msg = this._i18n().login.loginMsg.phoneFrozen
}
this.$refs.loginPopup.popupOpen({ct: "dialog", pt: "dialog",
options: {
type: "error",
content: msg,
buttons: [this._i18n().common.close, this._i18n().common.confirm]
}
})
}
}).catch((res) => {
uni.hideLoading();
console.log(res)
})
}
}
},
onLoad(option) {
console.log(option)
let locationTemp = "+1"
if(option.areaId !== undefined) {
locationTemp = "+" + option.areaId
} else {
const code = uni.getStorageSync("areaCode")
if(code !== undefined && code !== null && code.length > 0) locationTemp = code
}
if(option.showNewLogin != undefined) this.showNewLogin = option.showNewLogin == 0 ? false : true
if(option.type != undefined) this.loginType = Number(option.type)
this.location = locationTemp
this.phonenumber = option.account || ""
uni.setStorageSync("areaCode", this.location)
},
data() {
return {
showTimer: false,// 是否展示倒计时
timer: 60,// 倒计时时长
corDisabled: false,// 获取验证码的按钮是否可以被禁用
corCode: "",// 输入的验证码内容
getVcodeFocus: false,// 点了获取验证码按钮后将关闭自动定位到验证码输入框中
showNewLogin: true, // 是否展示新版登陆页面
loginType: 1, // 登陆类型:1=手机号登陆、2=邮箱登陆
showMsg: false,
showMsgText: "",
phonenumber: "",
password: "",
showPwd: false,
location: "+1"
}
},
onNavigationBarButtonTap(event) {
if(event.index === 0) {
uni.reLaunch({url: "/pages/language/language?redirect=login"})
}
},
}
</script>
<style lang="scss">
.login-main {
display: flex;
flex-direction: column;
height: 90%;
}
.login-header {
padding-top: 5%;
.image {
padding-bottom: 2%;
}
image {
width: 60px; height: 60px;
}
text {
font-size: 36rpx; font-weight: bold;
}
}
.item {
flex: 1;
display: flex;
flex-direction: column;
.title {
padding: 8% 0;
text {
font-weight: bold; font-size: 60rpx;
}
}
.content {
.phonenumber {
display: flex; border-bottom: 1px solid #c7c7c7; align-items: center;
image {
width: 25rpx; height: 25rpx; padding-left: 15rpx;
}
input {
height: 80rpx; flex: 1; text-indent: 30rpx;
}
}
.password {
border-bottom: 1px solid #c7c7c7; display: flex; align-items: center; padding-top: 5%;
input {
height: 80rpx; flex: 1;
}
image {
width: 50rpx; height: 20rpx; padding-right: 5%;
}
button {
background-color: #fdac1f; border-radius: 50px; font-size: 24rpx;
}
}
}
.tip {
padding-top: 3%;
text {
color: $uni-text-color-c7;
}
}
.empty-line {
flex: 1;
}
.button {
padding-top: 25%;
button {
background-color: #ff8513; border-radius: 100px;
}
.other {
display: flex; justify-content: space-between; color: #c7c7c7; padding-top: 20px; font-size: 24rpx;
}
}
}
</style>```
1***@qq.com
- 发布：2021-07-20 11:19
- 更新：2021-07-20 18:00
- 阅读：943
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Microsoft Windows [版本 10.0.18362.1016]
HBuilderX类型： 正式
HBuilderX版本号： 3.1.22
手机系统： Android
手机系统版本号： Android 11
手机厂商： 小米
手机机型： Redmi K20 Pro
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
点击登陆页面的邮箱登陆切换到邮箱账号登陆，在第一行文本框中输入邮箱地址，输入“12345678910”还没有问题，等我输入"@"就会出现"The specified value "12345678910@" cannot be parsed, or is out of range. at view.umd.min.js:6"这句话，输入完完整的邮箱地址后会出现“The specified value "12345678910@163.com" cannot be parsed, or is out of range. at view.umd.min.js:6”，如果我点击了第二行文本框的获取验证码，会出现一直打印这句话“The specified value "12345678910@163.com" cannot be parsed, or is out of range. at view.umd.min.js:6”。截图出现的onhide是应为我截屏发送图片导致的
点击登陆页面的邮箱登陆切换到邮箱账号登陆，在第一行文本框中输入邮箱地址，输入“12345678910”还没有问题，等我输入"@"就会出现"The specified value "12345678910@" cannot be parsed, or is out of range. at view.umd.min.js:6"这句话，输入完完整的邮箱地址后会出现“The specified value "12345678910@163.com" cannot be parsed, or is out of range. at view.umd.min.js:6”，如果我点击了第二行文本框的获取验证码，会出现一直打印这句话“The specified value "12345678910@163.com" cannot be parsed, or is out of range. at view.umd.min.js:6”。截图出现的onhide是应为我截屏发送图片导致的
预期结果：
控制台不应该出现“The specified value "12345678910@163.com" cannot be parsed, or is out of range. at view.umd.min.js:6”这句话
控制台不应该出现“The specified value "12345678910@163.com" cannot be parsed, or is out of range. at view.umd.min.js:6”这句话
实际结果：
频繁出现这句话“The specified value "12345678910@163.com" cannot be parsed, or is out of range. at view.umd.min.js:6”
频繁出现这句话“The specified value "12345678910@163.com" cannot be parsed, or is out of range. at view.umd.min.js:6”
bug描述：
今天在调试使用邮箱登陆时输入邮箱地址，发现hbuilderx一直在打印这句话“The specified value "12345678910@163.com" cannot be parsed, or is out of range. at view.umd.min.js:6”，其中下图的登陆页面对应的代码是新版登陆的代码
![[已删除]](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/06/73/66_avatar_mid.jpg?v=0){kind=avatar}
<input v-model="phonenumber" type="number" :placeholder="i18n.login.enterPhoneNum" placeholder-style="color: #c7c7c7" @blur="autoRemoveZero"/>
type="number"改为 type="text"
新版的邮箱输入框是因为什么原因而不再设置type为email呢？设置type为email试过吗？还有为啥两个账号要用一个变量啊？
-
1***@qq.com (作者)
设置过type=email，还是同样的效果，用一个变量是因为这两个都属于账号，用手机号登陆就不能用邮箱登陆，用邮箱登陆就不能用手机号登陆，存到一个变量里没有问题的，这个在3.1.22之前没有遇见过这个问题，自从为了解决uni-app在ios 14.6版本上键盘延迟出现的问题才升级到3.1.22的hbuilderx，升级之后才出现这额问题的
2021-07-20 17:18
-
1***@qq.com (作者)
我刚才又拿了ios 14.6、华为的android机、华为的鸿蒙机进行了测试，发现只在小米 miui 12.5.4上出现了这个问题，其他机子没有出现这个问题
2021-07-20 17:35
-
1***@qq.com (作者)
HarmonyOS2： 未出现该问题
IOS 14.6：未出现该问题
红米 miui 12.5.4：出现该问题
小米 miui 12.5.5：出现该问题
mumu模拟器 android 6.0.1：未出现该问题
1***@qq.com (作者)
新版登陆哪里，有两个input用来接收输入的账号，上边哪个带着type=“number”的input是用来接收电话号码输入的文本框，紧接着下边还有个input，没有设置任何type，输入电子邮箱地址就会出现这个问题，我重新编译后也会这样子，但是我如果运行到内置浏览器上再次测试就不会出现这个问题。
2021-07-20 14:07
1***@qq.com (作者)
这两个input我是用loginType来控制那个显示的，一个上边的input用来接收电话号码，下边那个用来接收电子邮箱，只是两个账号都放到一个变量里了
2021-07-20 14:08
[已删除]
回复 1***@qq.com: 不建议共用一个变量。
2021-07-22 10:47