<template>
<view class="zy--relative">
<view class="zy--border-box" style="padding-left: 44rpx;padding-top: 142rpx;height: 428rpx" :style="{'background': 'url('+baseUrl+'static/store/login-bg.png'+') center/cover no-repeat'}">
<view class="zy--fff zy--bold zy--font-64" style="margin-bottom: 24rpx;">
Hello!
</view>
<view class="zy--fff zy--font-40" style="line-height: 60rpx;">
欢迎来到
</view>
<view class="zy--fff zy--font-40" style="line-height: 60rpx;">
门店端
</view>
</view>
<view class="zy--bg-fff zy--radius-lg radius-top zy--p-xl zy--pt-base" style="position: relative;top: -60rpx;">
<u-tabs :list="list" lineWidth="126rpx" lineHeight="4rpx" :lineColor="main_c" :inactiveStyle="{color:'rgba(0,0,0,.85)',fontSize:'32rpx'}" :activeStyle="{color:main_c,fontSize:'32rpx',fontWeight:'bold'}" :scrollable="false" @click="changeType"></u-tabs>
<view class="zy--mt-lg" v-if="type == 0">
<view class="zy--mb-lg">
<u-input
v-model="account"
shape="circle"
maxlength="20"
placeholder="请输入用户名"
placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"
@focus="onInputFocus"
@blur="onInputBlur"
>
<view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">
<image
style="width: 28rpx; height: 28rpx; display: flex"
:src="baseUrl + 'static/store/login-username.png'"
mode="aspectFit"
></image>
</view>
</u-input>
</view>
<view class="zy--mb-lg">
<u-input
v-model="password"
shape="circle"
maxlength="32"
placeholder="请输入密码"
:password="!showPassword"
placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"
@focus="onInputFocus"
@blur="onInputBlur"
>
<view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">
<image
style="width: 28rpx; height: 28rpx; display: flex"
:src="baseUrl + 'static/store/login-password.png'"
mode="aspectFit"
></image>
</view>
<view slot="suffix" style="margin-right: 12rpx" @click="changePassword">
<u-icon v-if="showPassword" name="eye" color="rgba(0,0,0,.45)" size="40rpx"></u-icon>
<u-icon v-else name="eye-off" color="rgba(0,0,0,.45)" size="40rpx"></u-icon>
</view>
</u-input>
</view>
<view class="zy--mb-lg">
<u-input
v-model="verify_img"
shape="circle"
placeholder="请输入验证码"
maxlength="4"
placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"
@focus="onInputFocus"
@blur="onInputBlur"
>
<view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">
<image
style="width: 28rpx; height: 28rpx; display: flex"
:src="baseUrl + 'static/store/login-code.png'"
mode="aspectFit"
></image>
</view>
<view slot="suffix" style="margin-right: 12rpx">
<image
@click="getVerify"
style="height: 50rpx; border-radius: 8rpx; display: flex"
:src="img_verify"
mode="heightFix"
></image>
</view>
</u-input>
</view>
</view>
<view v-else class="zy--mt-lg">
<view class="zy--mb-lg">
<u-input
v-model="mobile"
maxlength="11"
shape="circle"
placeholder="请输入手机号"
placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"
@focus="onInputFocus"
@blur="onInputBlur"
>
<view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">
<image
style="width: 28rpx; height: 28rpx; display: flex"
:src="baseUrl + 'static/store/login-mobile.png'"
mode="aspectFit"
></image>
</view>
</u-input>
</view>
<view class="zy--mb-lg">
<u-code
:keepRunning="true"
unique-key="login"
:seconds="seconds"
startText="获取手机验证码"
@end="end"
@start="start"
ref="uCode"
@change="codeChange"
></u-code>
<u-input
shape="circle"
v-model="verify_code"
placeholder="请输入验证码"
maxlength="6"
placeholderStyle="font-size:28rpx;color:rgba(0,0,0,.45)"
@focus="onInputFocus"
@blur="onInputBlur"
>
<view slot="prefix" style="padding: 12rpx 8rpx 12rpx 12rpx">
<image
style="width: 28rpx; height: 28rpx; display: flex"
:src="baseUrl + 'static/store/login-code.png'"
mode="aspectFit"
></image>
</view>
<view slot="suffix" @tap="getCode" class="zy--font-28 zy--main" style="margin-right: 12rpx">
{{ tips }}
</view>
</u-input>
</view>
</view>
<view style="margin-top: 118rpx">
<view @click="submit" class="zy--btn-main zy--font-30 zy--w-100 zy--p-base" style="border-radius: 88rpx">登录</view>
<view class="zy--flex zy--mt-base zy--mb-base">
<u-checkbox-group @change="checkedChange">
<u-checkbox
:activeColor="main_c"
shape="circle"
label="已阅读并同意"
name="checked"
size="28rpx"
labelSize="24rpx"
labelColor="rgba(0, 0, 0, 0.45)"
></u-checkbox>
</u-checkbox-group>
<view class="zy--font-24">
<text style="color: rgba(0, 0, 0, 0.45)">“</text>
<text @click.stop="navTo('/pages/my/art_detail?id=1')" class="zy--main">用户协议</text>
<text style="color: rgba(0, 0, 0, 0.45)">”和“</text>
<text @click.stop="navTo('/pages/my/art_detail?id=2')" class="zy--main">隐私政策</text>
<text style="color: rgba(0, 0, 0, 0.45)">"</text>
</view>
</view>
</view>
<view class="z zy--fixed-b-box" v-if="system_hotline && !isKeyboard">
<view class="zy--000-45 zy--font-26" @tap="call_phone(system_hotline)">如有疑问请联系平台客服,联系电话:{{ system_hotline }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
/* 登录方式切换 */
list: [
{
name: '账户登录'
},
{
name: '手机登录'
}
],
type: 0,
/* 倒计时 */
seconds: 60,
/* 手机验证码提示文字 */
tips: '',
/* 验证码图片 */
img_verify: '',
/* 同意协议 */
checked: false,
/* 是否显示密码 */
showPassword: false,
/* 手机号 */
mobile: '',
/* 短信验证码 */
verify_code: '',
/* 账号 */
account: '',
/* 密码 */
password: '',
/* 图片验证码值 */
verify_img: '',
// 新增:键盘弹起标志
isKeyboard: false
};
},
onLoad() {
/* 获取图片验证码 */
this.getVerify();
// #ifdef H5
window.addEventListener('resize', this.onResize);
// #endif
},
onUnload() {
// #ifdef H5
window.removeEventListener('resize', this.onResize);
// #endif
},
methods: {
submit() {
if (this.type == 0) {
/* 账号密码登录 */
if (!this.account) {
this.toast('请输入账号');
return;
}
if (!this.password) {
this.toast('请输入密码');
return;
}
if (!this.verify_img) {
this.toast('请输入验证码');
return;
}
if (!this.checked) {
this.toast('请阅读并同意相关协议');
return;
}
uni.showLoading({
title: '登录中',
mask: true
});
} else {
/* 手机号登录 */
if (!this.mobile || this.mobile.length < 11) {
this.toast('无效手机号');
return;
}
if (!this.verify_code) {
this.toast('请输入验证码');
return;
}
if (!this.checked) {
this.toast('请阅读并同意相关协议');
return;
}
uni.showLoading({
title: '登录中',
mask: true
});
}
},
changeType(e) {
this.type = e.index;
},
changePassword() {
this.showPassword = !this.showPassword;
},
/* 切换同意协议 */
checkedChange(e) {
if (e.length == 1) {
this.checked = true;
} else {
this.checked = false;
}
},
/* 获取图片验证码 */
getVerify() {
this.img_verify = this.baseUrl + '/store/account/img_verify?t=' + new Date().getTime();
},
/* 倒计时文字设置 */
codeChange(text) {
this.tips = text;
},
/* 获取手机验证码 */
getCode() {
if (this.$refs.uCode.canGetCode) {
if (!this.mobile || this.mobile.length < 11) {
this.toast('无效手机号');
return;
}
uni.showLoading({
title: '正在获取验证码',
mask: true
});
send_sms({
mobile: this.mobile,
type: 'login'
}).then((res) => {
uni.hideLoading();
this.toast(res.msg);
if (res.code == 1) {
this.$refs.uCode.start();
}
});
} else {
this.toast('倒计时结束后再发送');
}
},
end() {
/* 倒计时结束 */
},
start() {
/* 倒计时开始 */
},
// 新增:监听键盘弹起/收起
onResize() {
// 兼容大部分输入法弹起时,window.innerHeight 会变小
if (document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA')) {
this.isKeyboard = true;
} else {
this.isKeyboard = false;
}
},
onInputFocus() {
this.isKeyboard = true;
},
onInputBlur() {
this.isKeyboard = false;
}
}
};
</script>
<style lang="scss">
page {
background-color: #fff;
}
::v-deep .u-input {
height: 88rpx;
box-sizing: border-box;
&.u-border {
border-color: rgba(217, 217, 217, 1) !important;
}
}
</style>

- 发布:2025-07-15 18:33
- 更新:2025-07-15 18:36
- 阅读:51
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版 22H2
HBuilderX类型: 正式
HBuilderX版本号: 4.66
手机系统: Android
手机系统版本号: Android 15
手机厂商: OPPO
手机机型: PJX110
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
进入到该页面,APP会报TypeError: Cannot read property 'activeElement' of undefined
进入到该页面,APP会报TypeError: Cannot read property 'activeElement' of undefined
预期结果:
不应该存在的bug
不应该存在的bug
实际结果:
APP会报TypeError: Cannot read property 'activeElement' of undefined
APP会报TypeError: Cannot read property 'activeElement' of undefined
bug描述:
APP进入到onResize方法,H5没有反应
m***@qq.com (作者)
传了个demo在文章里面了,你能看到吗
2025-07-15 18:43
DCloud_UNI_JBB
回复 m***@qq.com: 看到了
2025-07-15 18:44