<template>
<view>
<image src="https://api.ccttiot.com/smartmeter/img/static/uHonx4bU0ia8krPT6kqT" class="bj" mode=""></image>
<view class="box">
<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="请输入您的手机号"/>
</view>
</view>
<view class="telsele" style="margin-top: 36rpx;margin-bottom: 26rpx;">
<view class="yzm">
<image style="width: 38rpx;height: 38rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uis37Ndv6W0JbqiYU1cc" mode=""></image>
<input style="width: 420rpx;" v-if="txt == 'password'" type="password" v-model="password" placeholder="请输入密码"/>
<input style="width: 420rpx;" v-else type="text" v-model="password" placeholder="请输入密码"/>
<image v-if="txt == 'password'" src="https://api.ccttiot.com/smartmeter/img/static/uWm6nstWoT5VIJuXvcGu" @click="btn(1)" mode=""></image>
<image v-else src="https://api.ccttiot.com/smartmeter/img/static/uyVRL3hjK3JzSxbiIzBA" @click="btn(2)" 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.yzmkg == false){
this.yzmkg = true
this.startCountdown()
this.$u.get(`appCaptcha?phone=${this.tel}&type=2`).then(res => {
this.uuid = res.uuid
})
}else{
uni.showToast({
title: '不要重复点击',
icon: 'none',
duration: 2000
})
}
}
},
// 点击进行手机号验证码登录
btnsjh(){
uni.reLaunch({
url:'/pages/login/index'
})
},
// 点击登录
btndl(){
if(this.tel == ''){
uni.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 2000
})
}else if(this.password == ''){
uni.showToast({
title: '密码不能为空',
icon: 'none',
duration: 2000
})
}else if(this.yzm == ''){
uni.showToast({
title: '验证码不能为空',
icon: 'none',
duration: 2000
})
} else{
let that = this
wx.login({
success(res) {
if (res.code) {
let data = {
username:that.tel,
code:that.yzm,
uuid:that.uuid,
password:that.password,
jsCode:res.code
}
that.$u.post(`/register`,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/login'
})
},
// 点击忘记密码
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;
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>