<template> <view> <image src="https://api.ccttiot.com/smartmeter/img/static/uHonx4bU0ia8krPT6kqT" class="bj" mode=""></image> <view class="box"> <view class="dlfangshi"> <image src="https://api.ccttiot.com/smartmeter/img/static/u1TYsAg3u3QD1qcZwpiU" mode=""></image> <image @click="btnzhangh" src="https://api.ccttiot.com/smartmeter/img/static/ufIyxfYuqDgmuAUKKYFj" mode=""></image> </view> <view class="telsele"> <view class="" style="display: flex;align-items: center;"> <image style="width: 38rpx;height: 38rpx;margin-right: 24rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u00Q1EDv9cmwvv2jgnTA" mode=""></image> <input type="text" v-model="tel" placeholder="请输入您的手机号"/> <!-- <image v-if="tel" @click="btnqk" style="width: 32rpx;height: 32rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uE9WtCydr2ISGWek6EkS" mode=""></image> --> </view> </view> <view class="telsele" style="margin-top: 36rpx;"> <view class="yzm"> <image style="width: 38rpx;height: 38rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uxLWtaQiVIwiyOAaIfgq" mode=""></image> <input type="text" v-model="yzm" placeholder="请输入验证码"/> <view v-if="countdown == 60" class="huoqu" @click="btnhuoqu"> 获取验证码 </view> <view v-else class="huoqus"> {{countdown}}秒后重发 </view> </view> </view> <view class="zcbdl" @click="btndl"> 立即登录 </view> <view class="you"> 没有账户? <text @click="btnljdl">去注册</text> </view> <view class="wxlogo"> —————— 其他登录方式 —————— </view> <button class="lofo" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> <image src="https://api.ccttiot.com/smartmeter/img/static/uxWMldLMb888YHm0qOgN" mode=""></image> </button> </view> </view> </template> <script> export default { data() { return { txt:'password', password:'', tel:'', jsCode:'', mobileCode:'', yzm:'', countdown:60, yzmkg:false } }, // 分享到好友(会话) onShareAppMessage: function() { return { title: '共享时光屋', path: '/pages/nearbystores/index' } }, // 分享到朋友圈 onShareTimeline: function() { return { title: '共享时光屋', query: '', path: '/pages/nearbystores/index' } }, onLoad() { }, onUnload() { // 页面卸载时清除定时器,防止内存泄漏 clearInterval(this.timer) }, methods:{ // 验证码倒计时 startCountdown() { this.timer = setInterval(() => { if (this.countdown > 0) { this.countdown-- } else { clearInterval(this.timer) // 倒计时结束,清除定时器 this.countdown = 60 this.yzmkg = false } }, 1000); // 每秒更新一次 }, // 如果需要在其他地方停止倒计时,可以添加这个方法 stopCountdown() { clearInterval(this.timer) this.countdown = 0 // 可选:将倒计时重置为0 }, // 点击获取验证码 btnhuoqu(){ if(this.tel == ''){ uni.showToast({ title: '手机号不能为空', icon: 'none', duration: 2000 }) }else if(this.tel.length < 11 || this.tel.length > 11){ uni.showToast({ title: '手机号码格式有误', icon: 'none', duration: 2000 }) }else{ if(this.yzmkg == false){ this.yzmkg = true this.startCountdown() this.$u.get(`appCaptcha?phone=${this.tel}&type=1`).then(res => { this.uuid = res.uuid }) }else{ uni.showToast({ title: '不要重复点击', icon: 'none', duration: 2000 }) } } }, // 点击进行账号密码登录 btnzhangh(){ uni.reLaunch({ url:'/pages/login/login' }) }, // 点击登录 btndl(){ if(this.tel == ''){ uni.showToast({ title: '手机号不能为空', icon: 'none', duration: 2000 }) }else if(this.yzm == ''){ uni.showToast({ title: '密码不能为空', icon: 'none', duration: 2000 }) }else if(this.tel.length < 11 || this.tel.length > 11){ uni.showToast({ title: '手机号码格式有误', icon: 'none', duration: 2000 }) } else{ let that = this wx.login({ success(res) { if (res.code) { let data = { phone:that.tel, phoneCode:that.yzm, uuid:that.uuid, jsCode:res.code } that.$u.post(`/appCodeLogin`,data).then((res) => { if (res.code == 200) { wx.setStorageSync('token', res.token) uni.reLaunch({ url:'/pages/nearbystores/index' }) }else{ uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }) } else { reject(res.errMsg) } }, fail(err) { reject(err) } }) } }, // 点击微信一键登录 getPhoneNumber(e) { this.jsCode = e.detail.code let that = this; const wxLoginAsync = () => { return new Promise((resolve, reject) => { wx.login({ success(res) { if (res.code) { that.mobileCode = res.code let data = { jsCode: e.detail.code, mobileCode: res.code, } resolve(data); } else { reject(res.errMsg) } }, fail(err) { reject(err) } }) }) } wxLoginAsync().then(async (data) => { this.$u.post(`/wxlogin?mobileCode=${this.jsCode}&jsCode=${this.mobileCode}`, data).then((res) => { if (res.code == 200) { wx.setStorageSync('token', res.token) uni.reLaunch({ url:'/pages/nearbystores/index' }) } }) }).catch((err) => { console.error(err) }) }, // 显示密码可见可不见 btn(num){ if(num == 1){ this.txt = 'txt' }else if(num == 2){ this.txt = 'password' } }, // 点击清空手机号 btnqk(){ this.tel = '' }, // 点击跳转到立即登录页 btnljdl(){ uni.reLaunch({ url:'/pages/login/zhuce' }) }, // 点击忘记密码 btnwjmm(){ uni.navigateTo({ url:'/pages/login/wjpassword' }) } } } </script> <style lang="less"> /deep/ .u-checkbox__icon-wrap{ border: 1px solid #666666; } .box{ width: 750rpx; height: 1198rpx; background: #FFFFFF; position: fixed; bottom: 0; left: 0; border-radius: 50rpx 50rpx 0 0; padding: 100rpx 68rpx; box-sizing: border-box; .dlfangshi{ display: flex; align-items: center; image{ width: 319rpx; height: 108rpx; } } } page{ padding: 0 56rpx; box-sizing: border-box; } .wjmm{ font-size: 28rpx; color: #48893B; width: 100%; text-align: right; } .lofo{ width: 64rpx; height: 64rpx; margin: auto; margin-top: 30rpx; border-radius: 50%; position: relative; image{ width: 64rpx; height: 64rpx; position: absolute; top: 0; left: 0; } } .wxlogo{ font-size: 32rpx; color: #808080; margin-top: 134rpx; width: 100%; text-align: center; } .you{ font-size: 28rpx; color: #50565A; margin: auto; margin-top: 52rpx; text-align: center; text{ color: #48893B; border-bottom: 1px solid #48893B; } } .zcbdl{ width: 620rpx; height: 92rpx; background: #48893B; border-radius: 46rpx 46rpx 46rpx 46rpx; font-size: 40rpx; color: #FFFFFF; margin: auto; margin-top: 44rpx; text-align: center; line-height: 92rpx; } .xieyi{ font-size: 28rpx; color: #3D3D3D; text{ color: #48893B; } } .telsele{ .yzm{ display: flex; justify-content: space-between; width: 100%; align-items: center; margin-top: 38rpx; position: relative; z-index: 1; input{ margin-top: 0; } image{ width: 38rpx; height: 38rpx; } .huoqu{ width: 158rpx; height: 58rpx; background: #48893B; border-radius: 30rpx 30rpx 30rpx 30rpx; font-size: 24rpx; color: #FFFFFF; text-align: center; line-height: 58rpx; } .huoqus{ width: 158rpx; height: 58rpx; background: #979797; border-radius: 30rpx 30rpx 30rpx 30rpx; font-size: 24rpx; color: #FFFFFF; text-align: center; line-height: 58rpx; } } padding-right: 38rpx; width: 614rpx; height: 108rpx; line-height: 108rpx; background: #EFEFEF; border-radius: 54rpx 54rpx 54rpx 54rpx; margin-top: 98rpx; padding-bottom: 22rpx; box-sizing: border-box; padding-left: 38rpx; input{ height: 108rpx; line-height: 108rpx; padding-left: 10rpx; box-sizing: border-box; } .tel{ font-size: 32rpx; color: #48893B; font-weight: 600; display: flex; align-items: center; margin-bottom: 32rpx; image{ width: 62rpx; height: 62rpx; margin-right: 16rpx; } } } .name{ font-size: 72rpx; color: #3D3D3D; font-weight: 600; margin-top: 178rpx; position: relative; z-index: 1; text{ width: 148rpx; height: 32rpx; background: #90B389; border-radius: 0rpx 0rpx 0rpx 0rpx; display: inline-block; position: absolute; top: 62rpx; left: 0; z-index: -1; } } .bj{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; } </style>