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.
308 lines
9.2 KiB
308 lines
9.2 KiB
11 months ago
|
<template>
|
||
|
|
<view id="page">
|
||
|
|
<view class="Width100 Box" :style="bgUrl1">
|
||
|
|
<view class="Content MarginAuto">
|
||
|
|
<image :src="$.imgSrc + '/scimg/logo1.png'" mode="aspectFit" class="Block Logo"></image>
|
||
|
|
<view class="NavBox Width100 MarginT_60rpx">
|
||
|
|
<view class="Unit FloatL PositionR" v-for="(item,index) in navList" @click="chooseNav(item.type)">
|
||
|
|
<text class="Block" :class="currNav == item.type ? 'FontS_46rpx Color_1A1F39 FontBold':'FontS_42rpx Color_B4BAC9'">
|
||
|
|
{{ item.label }}</text>
|
||
|
|
<view class="Line BG_0064FF PositionA" v-show="currNav == item.type"></view>
|
||
|
|
</view>
|
||
|
|
<view class="ClearB"></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 MarginT_40rpx BG_F6F7FB">
|
||
|
|
<!-- <view class="Num FloatL TextLeft MarginL_60rpx">-->
|
||
|
|
<!-- <text class="InlineBlock FontS_34rpx Color_1A1F39 FontBold">+86</text>-->
|
||
|
|
<!-- </view>-->
|
||
|
|
<input type="text" placeholder="请输入手机号" v-model="logInData.phone" class="Height100 Input1 FloatL MarginL_60rpx FontS_32rpx">
|
||
|
|
<view class="ClearB"></view>
|
||
|
|
</view>
|
||
|
|
<view class="Input MarginT_40rpx BG_F6F7FB" 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 MarginT_40rpx BG_F6F7FB">
|
||
|
|
<input type="password" v-model="logInData.password" placeholder="请输入您的密码" class="Height100 Input2 FloatL MarginL_60rpx FontS_32rpx">
|
||
|
|
<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:'', // 登录信息背景图
|
||
|
|
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,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 页面加载
|
||
|
|
onLoad(e) {
|
||
|
|
if(typeof(e.type) != 'undefined'){
|
||
|
|
this.currNav = e.type
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 页面显示
|
||
|
|
onShow() {
|
||
|
|
// 顶部背景图
|
||
|
|
this.bgUrl1 = "background-image:url('" + this.$.imgSrc + "/scimg/bg1.png');background-repeat: no-repeat;background-position: center top;background-size:100% 472rpx;"
|
||
|
|
},
|
||
|
|
// 计算属性
|
||
|
|
computed: {},
|
||
|
|
// 方法
|
||
|
|
methods: {
|
||
|
|
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)
|
||
|
|
this.$.setData('userInfo', { username: res.result })
|
||
|
|
setTimeout(() => {
|
||
|
|
this.$.hideLoading('登录中...')
|
||
|
|
this.isDisabled = false
|
||
|
|
this.$.openTab('/pages/index/index')
|
||
|
|
},1500)
|
||
|
|
}else{
|
||
|
|
this.$.toast(res.message)
|
||
|
|
this.isDisabled = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 找回密码
|
||
|
|
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: 132rpx 0rpx 180rpx 0rpx;
|
||
|
|
.Logo{
|
||
|
|
width: 150rpx;
|
||
|
|
height: 150rpx;
|
||
|
|
}
|
||
|
|
.NavBox{
|
||
|
|
.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: 56rpx;
|
||
|
|
.CodeBox{
|
||
|
|
text{
|
||
|
|
line-height: 110rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.Num{
|
||
|
|
width: 110rpx;
|
||
|
|
border-right: 4rpx solid #DADADA;
|
||
|
|
margin-top: 34rpx;
|
||
|
|
}
|
||
|
|
.Input1{
|
||
|
|
width: calc(100% - 260rpx);
|
||
|
|
}
|
||
|
|
.Input2{
|
||
|
|
width: calc(100% - 120rpx);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.Agree{
|
||
|
|
.Point{
|
||
|
|
width: 34rpx;
|
||
|
|
height: 34rpx;
|
||
|
|
}
|
||
|
|
.Border{
|
||
|
|
width: 34rpx;
|
||
|
|
height: 34rpx;
|
||
|
|
border: 2rpx solid #B3BACB;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.Btn{
|
||
|
|
margin-top: 196rpx;
|
||
|
|
height: 108rpx;
|
||
|
|
background: linear-gradient(90deg, #0064FF 0%, #2D99FD 100%);
|
||
|
|
box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(194,218,255,1);
|
||
|
|
border-radius: 54rpx;
|
||
|
|
line-height: 108rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|