298 lines
6.8 KiB
Vue
298 lines
6.8 KiB
Vue
<template>
|
||
<view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/urqUoIyCCEBykZ2oG8eO" class="bj" mode=""></image>
|
||
<view class="name">
|
||
注册
|
||
<text></text>
|
||
</view>
|
||
|
||
<view class="telsele">
|
||
<view class="tel">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ucosihVOuRDfyaNn5VzX" mode=""></image> 手机号
|
||
</view>
|
||
<view class="" style="display: flex;justify-content: space-between;align-items: center;">
|
||
<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="tel">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ufLneWKv1lgtwpap9AIY" mode=""></image> 验证码
|
||
</view>
|
||
<view class="yzm">
|
||
<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="telsele" style="margin-top: 36rpx;margin-bottom: 26rpx;">
|
||
<view class="tel">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uFiLt1SC4cHdZrIDRxeO" mode=""></image> 密码
|
||
</view>
|
||
<view class="yzm">
|
||
<input :type="txt" 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>
|
||
|
||
<u-checkbox-group>
|
||
<u-checkbox v-model="checked" shape="circle" active-color="#90B389"><text class="xieyi">我已阅读并同意 <text @click="btnyh(1)">用户协议</text> 和 <text @click="btnyh(2)">隐私政策</text></text></u-checkbox>
|
||
</u-checkbox-group>
|
||
<view class="zcbdl">
|
||
注册并登录
|
||
</view>
|
||
<view class="you">
|
||
已有账户？ <text @click="btnljdl">立即登录</text>
|
||
</view>
|
||
<view class="wxlogo">
|
||
—————— 其他登录方式 ——————
|
||
</view>
|
||
<view class="lofo">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uxWMldLMb888YHm0qOgN" mode=""></image>
|
||
</view>
|
||
<!-- <button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="margin-left: -10rpx;">
|
||
授权登录
|
||
</button> -->
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
txt:'password',
|
||
checked:false,
|
||
password:'',
|
||
tel:'',
|
||
yzm:'',
|
||
countdown: 60,
|
||
timer: null
|
||
}
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '绿小能',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '绿小能',
|
||
query: '',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onUnload() {
|
||
// 页面卸载时清除定时器，防止内存泄漏
|
||
clearInterval(this.timer);
|
||
},
|
||
methods:{
|
||
btn(num){
|
||
if(num == 1){
|
||
this.txt = 'txt'
|
||
}else if(num == 2){
|
||
this.txt = 'password'
|
||
}
|
||
},
|
||
// 点击清空手机号
|
||
btnqk(){
|
||
this.tel = ''
|
||
},
|
||
// 验证码倒计时
|
||
startCountdown() {
|
||
this.timer = setInterval(() => {
|
||
if (this.countdown > 0) {
|
||
this.countdown--
|
||
} else {
|
||
clearInterval(this.timer); // 倒计时结束，清除定时器
|
||
this.countdown = 60
|
||
}
|
||
}, 1000); // 每秒更新一次
|
||
},
|
||
// 如果需要在其他地方停止倒计时，可以添加这个方法
|
||
stopCountdown() {
|
||
clearInterval(this.timer);
|
||
this.countdown = 0; // 可选：将倒计时重置为0
|
||
},
|
||
|
||
// 点击获取验证码
|
||
btnhuoqu(){
|
||
this.startCountdown()
|
||
},
|
||
// 点击跳转到立即登录页
|
||
btnljdl(){
|
||
uni.reLaunch({
|
||
url:'/pages/login/denglu'
|
||
})
|
||
},
|
||
// 跳转用户协议及隐私用户
|
||
btnyh(num){
|
||
if(num == 1){
|
||
uni.navigateTo({
|
||
url:'/page_user/yinsixq?tit=' + '用户协议'
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:'/page_user/yinsixq?tit=' + '隐私政策'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
/deep/ .u-checkbox__icon-wrap{
|
||
border: 1px solid #666666;
|
||
}
|
||
page{
|
||
padding: 0 56rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.lofo{
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
.wxlogo{
|
||
font-size: 32rpx;
|
||
color: #808080;
|
||
margin-top: 98rpx;
|
||
}
|
||
.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;
|
||
font-weight: 600;
|
||
margin: auto;
|
||
margin-top: 98rpx;
|
||
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;
|
||
}
|
||
}
|
||
margin-top: 98rpx;
|
||
border-bottom: 1px solid #50565A;
|
||
padding-bottom: 22rpx;
|
||
box-sizing: border-box;
|
||
input{
|
||
// margin-top: 32rpx;
|
||
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> |