You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
392 lines
10 KiB
392 lines
10 KiB
<template> |
|
<view id="page"> |
|
<view class="Width100 Box" :style="bgUrl1"> |
|
<image class="pic" :src="$.imgSrc + '/scimg/login_bg_bottom.png'" mode="aspectFit"></image> |
|
<view class="Content MarginAuto"> |
|
<image :src="$.imgSrc + '/scimg/jinghui.png'" mode="aspectFit" class="Block Logo"></image> |
|
<view class="NavBox Width100 MarginT_20rpx"> |
|
<view class="logo-title"> |
|
道路交通安全隐患 |
|
</view> |
|
<view class="logo-title"> |
|
排查助手 |
|
</view> |
|
</view> |
|
<!-- <view class="TypeBox MarginT_60rpx" v-if="currNav == 1"> |
|
<view class="Unit FloatL" v-for="(item,index) in typeList" @click="chooseType(item.type)"> |
|
<view class="Point FloatL" v-show="currType == item.type"> |
|
<image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image> |
|
</view> |
|
<view class="Point Border FloatL BorderR_50 InsideB" v-show="currType != item.type"></view> |
|
<text class="Block MarginL_20rpx FontS_32rpx FloatL">{{item.label}}</text> |
|
<view class="ClearB"></view> |
|
</view> |
|
<view class="ClearB"></view> |
|
</view> --> |
|
<view class="InputBox" :class="currNav == 1 ? 'MarginT_40rpx' : 'MarginT_80rpx'"> |
|
<view class="Input"> |
|
<!-- <view class="Num FloatL TextLeft MarginL_60rpx">--> |
|
<!-- <text class="InlineBlock FontS_34rpx Color_1A1F39 FontBold">+86</text>--> |
|
<!-- </view>--> |
|
<view class="img-box"> |
|
<image :src="$.imgSrc + '/scimg/login_user.png'" mode="aspectFit" class="input_left_icon input_icon"></image> |
|
</view> |
|
<input type="text" placeholder="请输入用户名" v-model="logInData.phone" |
|
class="Height100 Input1 FloatL FontS_32rpx" /> |
|
<view class="img-box"></view> |
|
<view class="ClearB"></view> |
|
</view> |
|
<view class="Input" v-if="currNav == 1"> |
|
<input type="text" v-model="logInData.validateCode" placeholder="请输入验证码" |
|
class="Height100 Input1 FloatL MarginL_60rpx FontS_32rpx" /> |
|
<view class="CodeBox FloatR MarginR_60rpx" @click="getCode"> |
|
<text class="Block FontS_28rpx" |
|
:class="isCodeDisabled ? 'Color_B4BAC9':'Color_0064FF'">{{ btnText }}</text> |
|
</view> |
|
<view class="ClearB"></view> |
|
</view> |
|
<view class="Input"> |
|
<view class="img-box"> |
|
<image :src="$.imgSrc + '/scimg/login_password.png'" mode="aspectFit" class="input_left_icon input_icon"></image> |
|
</view> |
|
<input v-show="!showPassword" type="password" v-model="logInData.password" placeholder="请输入您的密码" |
|
class="Height100 Input1 FloatL FontS_32rpx" /> |
|
<input v-show="showPassword" type="text" v-model="logInData.password" placeholder="请输入您的密码" |
|
class="Height100 Input1 FloatL FontS_32rpx" /> |
|
<view class="img-box"> |
|
<image :src="$.imgSrc + (!showPassword ? '/scimg/login_no.png' : '/scimg/login_yes.png')" mode="aspectFit" class="input_left_icon input_icon" @click="clickPasswordBtn"></image> |
|
</view> |
|
<view class="ClearB"></view> |
|
</view> |
|
</view> |
|
<!-- <view class="Agree Width100 MarginT_60rpx" @click="chooseAgree"> |
|
<view class="Point FloatL" v-if="isAgree"> |
|
<image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image> |
|
</view> |
|
<view class="Point Border FloatL BorderR_50 InsideB" v-else></view> |
|
<text class="Block FloatL MarginL_20rpx Color_605F72 FontS_26rpx">本人已同意</text> |
|
<text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(2)">《用户协议》</text> |
|
<text class="Block FloatL Color_605F72 FontS_26rpx">与</text> |
|
<text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(3)">《隐私协议》</text> |
|
<view class="ClearB"></view> |
|
</view> --> |
|
<button type="button" :disabled="isDisabled" |
|
class="Btn Block Width100 Color_FFFFFF FontS_36rpx FontBold" |
|
@click="confirmSub">立即{{ currNav == 1 ? '注册':'登录' }}</button> |
|
<!-- <text @click="findPsw" class="Block MarginT_40rpx TextCenter FontS_26rpx Color_0064FF" |
|
v-if="currNav == 2">找回密码？</text> --> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
// 组件 |
|
components: {}, |
|
data() { |
|
return { |
|
// 公用的js |
|
$: this.$, |
|
bgUrl1: '', // 登录信息背景图 |
|
bgUrl2: '', // 登录信息背景图 |
|
isAgree: false, |
|
navList: [ |
|
// {type:1,label:'注册'}, |
|
{ |
|
type: 2, |
|
label: '登录' |
|
}, |
|
], |
|
currNav: 2, |
|
currType: 1, |
|
isDisabled: false, |
|
logInData: { |
|
phone: '', // |
|
validateCode: '', // |
|
password: '', // |
|
}, // |
|
btnText: '获取验证码', |
|
times: null, |
|
seconds: 60, |
|
isCodeDisabled: false, |
|
showPassword: false, |
|
} |
|
}, |
|
// 页面加载 |
|
onLoad(e) { |
|
if (typeof(e.type) != 'undefined') { |
|
this.currNav = e.type |
|
} |
|
}, |
|
// 页面显示 |
|
onShow() { |
|
// 顶部背景图 |
|
this.bgUrl1 = "background-image:url('" + this.$.imgSrc + |
|
"/scimg/login_bg_top.png');background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 100vh; min-width: 100vw;" |
|
}, |
|
// 计算属性 |
|
computed: {}, |
|
// 方法 |
|
methods: { |
|
clickPasswordBtn() { |
|
this.showPassword = !this.showPassword |
|
}, |
|
checkAgree(type) { |
|
let urlKey = 'portalTextType' |
|
this.$.open('/pages/logIn/agree?type=' + type) |
|
}, |
|
getCode() { |
|
if (!this.$.isEmpty(this.logInData.phone)) { |
|
this.$.toast('请输入手机号') |
|
return |
|
} |
|
let datas = { |
|
phone: this.logInData.phone, |
|
type: 2 |
|
} |
|
this.isCodeDisabled = true |
|
this.$request.globalRequest('/hyjg-admin/mapi/account/sendSmsCode', datas, 'POST').then(res => { |
|
if (res.code == 0) { |
|
this.timeDown() |
|
} else { |
|
this.$.toast(res.msg) |
|
this.isCodeDisabled = false |
|
} |
|
}) |
|
}, |
|
timeDown() { |
|
this.times = setInterval(() => { |
|
if (this.seconds > 0) { |
|
this.seconds-- |
|
this.btnText = this.seconds + 'S' |
|
} else { |
|
this.seconds = 60 |
|
this.isCodeDisabled = false |
|
this.btnText = '获取验证码' |
|
clearInterval(this.times) |
|
} |
|
}, 1000) |
|
}, |
|
// 提交 |
|
confirmSub() { |
|
// this.$.setData('token','1') |
|
// this.$.openTab('/pages/index/index') |
|
// return |
|
// this.$.open('/pages/logIn/userInfo') |
|
let url = '/hyjg-admin/mapi/account/register' |
|
if (!this.$.isEmpty(this.logInData.phone)) { |
|
this.$.toast('请填写用户名') |
|
return |
|
} |
|
if (!this.$.isEmpty(this.logInData.password)) { |
|
this.$.toast('请填写密码') |
|
return |
|
} |
|
// if(!this.isAgree){ |
|
// this.$.toast('请勾选用户协议和隐私协议') |
|
// return |
|
// } |
|
let datas = { |
|
nuserid: this.logInData.phone, |
|
cuserpwd: this.logInData.password, |
|
} |
|
url = '/hiddenDanger/auth/login' |
|
this.$.showLoading('登录中...') |
|
this.isDisabled = true |
|
this.$request.globalRequest(url, datas, 'POST').then(res => { |
|
if (res.code === 200) { |
|
this.$.toast('登录成功') |
|
this.$.setData('token', res.result.nuserid) |
|
this.$.setData('userInfo', { |
|
username: res.result.nuserid, |
|
role: res.result.role |
|
}) |
|
setTimeout(() => { |
|
this.$.hideLoading('登录中...') |
|
this.isDisabled = false |
|
this.$.openTab('/pages/index/index') |
|
}, 1500) |
|
} else { |
|
this.$.toast(res.message) |
|
this.isDisabled = false |
|
} |
|
}).catch(() => { |
|
this.isDisabled = false |
|
this.$.toast('连接服务器失败') |
|
}) |
|
}, |
|
// 找回密码 |
|
findPsw() { |
|
this.$.open('/pages/logIn/findPsw') |
|
}, |
|
chooseAgree() { |
|
this.isAgree = !this.isAgree |
|
}, |
|
chooseNav(type) { |
|
this.currNav = type |
|
}, |
|
chooseType(type) { |
|
this.currType = type |
|
}, |
|
// 跳转页面 |
|
skipPage(even) { |
|
this.$.open(even) |
|
}, |
|
}, |
|
onReady() {}, |
|
// 页面卸载 |
|
onUnload() { |
|
|
|
}, |
|
// 触发下拉刷新 |
|
onPullDownRefresh() { |
|
// 延迟关闭刷新动画 |
|
setTimeout(() => { |
|
uni.stopPullDownRefresh(); |
|
}, 1500); |
|
}, |
|
// 页面上拉触底事件的处理函数 |
|
onReachBottom() {}, |
|
} |
|
</script> |
|
|
|
<style> |
|
page { |
|
background: #FFFFFF; |
|
} |
|
</style> |
|
<style lang="scss" scoped> |
|
.Box { |
|
padding-top: var(--status-bar-height); |
|
|
|
.Content { |
|
width: calc(100% - 176rpx); |
|
padding: 112rpx 0rpx 180rpx 0rpx; |
|
|
|
.Logo { |
|
width: 150rpx; |
|
height: 150rpx; |
|
margin: auto; |
|
} |
|
|
|
.NavBox { |
|
.logo-title{ |
|
font-family: 'MFLiHei_Noncommercial-Regular'; |
|
font-size: 70rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: white; |
|
} |
|
.Unit { |
|
margin-right: 110rpx; |
|
|
|
.Line { |
|
left: 50%; |
|
transform: translateX(-50%); |
|
bottom: -26rpx; |
|
width: 74rpx; |
|
height: 10rpx; |
|
border-radius: 6rpx; |
|
} |
|
} |
|
} |
|
|
|
.TypeBox { |
|
.Unit { |
|
margin-right: 108rpx; |
|
|
|
.Point { |
|
width: 46rpx; |
|
height: 46rpx; |
|
} |
|
|
|
.Border { |
|
width: 46rpx; |
|
height: 46rpx; |
|
border: 4rpx solid #B3BACB; |
|
} |
|
} |
|
} |
|
|
|
.InputBox { |
|
.Input { |
|
height: 110rpx; |
|
border-radius: 8rpx; |
|
margin-bottom: 48rpx; |
|
background-color: rgba(225, 225, 225, 0.8); |
|
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.1); |
|
position: relative; |
|
display: flex; |
|
.img-box{ |
|
height: 110rpx; |
|
width: 110rpx; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
.input_icon{ |
|
width: 54rpx; |
|
height: 54rpx; |
|
} |
|
.input_left_icon{ |
|
position: absolute; |
|
} |
|
} |
|
.input-placeholder{ |
|
color: rgba(0, 0, 0, 0.4) !important; |
|
} |
|
.CodeBox { |
|
text { |
|
line-height: 110rpx; |
|
} |
|
} |
|
|
|
.Num { |
|
width: 110rpx; |
|
border-right: 4rpx solid #DADADA; |
|
margin-top: 34rpx; |
|
} |
|
|
|
.Input1 { |
|
// padding-left: 20rpx; |
|
// width: calc(100% - 260rpx); |
|
flex: 1; |
|
} |
|
|
|
.Input2 { |
|
width: calc(100% - 120rpx); |
|
} |
|
} |
|
} |
|
|
|
.Agree { |
|
.Point { |
|
width: 34rpx; |
|
height: 34rpx; |
|
} |
|
|
|
.Border { |
|
width: 34rpx; |
|
height: 34rpx; |
|
border: 2rpx solid #B3BACB; |
|
} |
|
} |
|
|
|
.Btn { |
|
font-family: 'SOURCEHANSANSCN-MEDIUM'; |
|
margin-top: 96rpx; |
|
height: 108rpx; |
|
background: linear-gradient(0deg, #0064FF 0%, #2D99FD 100%); |
|
box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.1); |
|
border-radius: 8rpx; |
|
line-height: 108rpx; |
|
} |
|
} |
|
} |
|
.pic{ |
|
position: absolute; |
|
bottom: 0; |
|
width: 100%; |
|
} |
|
</style> |