440 lines
9.6 KiB
Vue
440 lines
9.6 KiB
Vue
|
<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>
|