453530270@qq.com
2 years ago
6 changed files with 367 additions and 31 deletions
@ -0,0 +1,322 @@ |
|||
<template> |
|||
<view class="container"> |
|||
|
|||
<!-- 页面头部 --> |
|||
<view class="header"> |
|||
<view class="title"> |
|||
<text>登录</text> |
|||
</view> |
|||
</view> |
|||
<!-- 表单 --> |
|||
<view class="login-form"> |
|||
<!-- 手机号 --> |
|||
<view class="form-item"> |
|||
<input class="form-item--input" type="number" v-model="mobile" maxlength="11" autocomplete="off" placeholder="请输入手机号码" /> |
|||
</view> |
|||
<!-- 密码 --> |
|||
<view class="form-item"> |
|||
<input class="form-item--input" type="password" v-model="vpass" autocomplete="off" placeholder="请输入密码" /> |
|||
</view> |
|||
<!-- 选择机构、个人 --> |
|||
<radio-group @change="radioChange"> |
|||
<view class="form-item"> |
|||
<radio class="radio" color="#4399ff" value="企业" :checked="utchk1"/> 机构 |
|||
|
|||
</view> |
|||
<view class="form-item"> |
|||
<radio class="radio" color="#4399ff" value="个人" :checked="utchk2"/> 个人 |
|||
</view> |
|||
</radio-group> |
|||
|
|||
<!-- 登录按钮 --> |
|||
<view class="login-button" @click="handleLogin"> |
|||
<text>登录</text> |
|||
</view> |
|||
</view> |
|||
<!-- 找回密码 注册 --> |
|||
<view class="fdreg"> |
|||
<text class="findpass">找回密码</text> |
|||
<text class="regnow">立即注册</text> |
|||
</view> |
|||
<!-- 隐私政策等 --> |
|||
<div class="privacy"> |
|||
<label> |
|||
<checkbox :checked="isTick" color="#4399ff" class="ckbox" @click="readpri"></checkbox> |
|||
我已阅读并同意网站的 《隐私政策》和 《用户注册协议》 |
|||
</label> |
|||
</div> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import store from '@/store' |
|||
import * as LoginApi from '@/api/login' |
|||
import * as Verify from '@/utils/verify' |
|||
|
|||
export default { |
|||
components: { |
|||
// nothing |
|||
}, |
|||
|
|||
props: { |
|||
// 是否存在第三方用户信息 |
|||
isParty: { |
|||
type: Boolean, |
|||
default: () => false |
|||
}, |
|||
// 第三方用户信息数据 |
|||
partyData: { |
|||
type: Object |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
// 正在加载 |
|||
isLoading: false, |
|||
// 手机号 |
|||
mobile: '', |
|||
// 密码 |
|||
vpass:"", |
|||
// 阅读标志 |
|||
isTick:false, |
|||
// user type |
|||
userType:"", |
|||
// 用户类型选择 |
|||
utchk1:true, |
|||
utchk2:false, |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
created() { |
|||
console.log('main created') |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
// 账户类型 |
|||
radioChange(evt) { |
|||
this.userType = evt.detail.value |
|||
if(this.userType=="企业"){ |
|||
this.utchk2=false |
|||
this.utchk1=true; |
|||
}else{ |
|||
this.utchk2=true |
|||
this.utchk1=false; |
|||
} |
|||
let bb = this.$md5("123456") |
|||
}, |
|||
// 判断是否阅读了政策协议 |
|||
readpri(e){ |
|||
this.isTick=!this.isTick |
|||
}, |
|||
|
|||
// 表单验证 |
|||
formValidation() { |
|||
const app = this |
|||
// 验证提交登录 |
|||
if (!app.validteMobile(app.mobile) ||!app.validtePass(app.vpass)) { |
|||
return false |
|||
} |
|||
// 处理用户类型 |
|||
if(app.utchk1){ |
|||
this.userType="企业" |
|||
} |
|||
if(app.utchk2){ |
|||
this.userType ="个人" |
|||
} |
|||
// 检查是否阅读了协议 |
|||
if(!app.isTick){ |
|||
this.$toast("请勾选《隐私保护政策》和《用户注册协议》") |
|||
return false |
|||
} |
|||
return true |
|||
}, |
|||
|
|||
// 验证密码 |
|||
validtePass(str){ |
|||
if (Verify.isEmpty(str)) { |
|||
this.$toast('请先输入登录密码') |
|||
return false |
|||
} |
|||
return true; |
|||
}, |
|||
|
|||
// 验证手机号 |
|||
validteMobile(str) { |
|||
if (Verify.isEmpty(str)) { |
|||
this.$toast('请先输入手机号') |
|||
return false |
|||
} |
|||
if (!Verify.isMobile(str)) { |
|||
this.$toast('请输入正确格式的手机号') |
|||
return false |
|||
} |
|||
return true |
|||
}, |
|||
|
|||
// 点击登录 |
|||
handleLogin() { |
|||
const app = this |
|||
if (!app.isLoading && app.formValidation()) { |
|||
app.submitLogin() |
|||
} |
|||
}, |
|||
|
|||
// 确认登录 |
|||
submitLogin() { |
|||
const app = this |
|||
app.isLoading = true |
|||
|
|||
store.dispatch('Login', { |
|||
loginName: app.mobile, |
|||
loginType: "0", |
|||
password: this.$md5(app.vpass).toUpperCase(), // 转成大写 |
|||
userType: app.userType |
|||
}) |
|||
.then(result => { |
|||
// 显示登录成功 |
|||
app.$toast(result.message) |
|||
// 相应全局事件订阅: 刷新上级页面数据 |
|||
uni.$emit('syncRefresh', true) |
|||
// 跳转回原页面 |
|||
setTimeout(() => app.onNavigateBack(1), 2000) |
|||
}) |
|||
.catch(err => { |
|||
console.log("err",err) |
|||
// 跳转回原页面 |
|||
if (err.result.data.isBack) { |
|||
setTimeout(() => app.onNavigateBack(1), 2000) |
|||
} |
|||
}) |
|||
.finally(() => app.isLoading = false) |
|||
}, |
|||
|
|||
/** |
|||
* 登录成功-跳转回原页面 |
|||
*/ |
|||
onNavigateBack(delta = 1) { |
|||
const pages = getCurrentPages() |
|||
if (pages.length > 1) { |
|||
uni.navigateBack({ |
|||
delta: Number(delta || 1) |
|||
}) |
|||
} else { |
|||
this.$navTo('pages/index/index') |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
padding: 100rpx 60rpx; |
|||
min-height: 100vh; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
// 页面头部 |
|||
.header { |
|||
margin-bottom: 60rpx; |
|||
|
|||
.title { |
|||
color: #191919; |
|||
font-size: 54rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
// 输入框元素 |
|||
.form-item { |
|||
display: flex; |
|||
padding: 18rpx; |
|||
border-bottom: 1rpx solid #f3f1f2; |
|||
margin-bottom: 30rpx; |
|||
height: 96rpx; |
|||
|
|||
&--input { |
|||
font-size: 28rpx; |
|||
letter-spacing: 1rpx; |
|||
flex: 1; |
|||
height: 100%; |
|||
} |
|||
|
|||
&--parts { |
|||
min-width: 100rpx; |
|||
height: 100%; |
|||
} |
|||
|
|||
&--radgrp{ |
|||
display: flex; |
|||
flex:1; |
|||
height: 100%; |
|||
} |
|||
|
|||
|
|||
|
|||
// 短信验证码 |
|||
.captcha-sms { |
|||
font-size: 28rpx; |
|||
line-height: 50rpx; |
|||
padding-right: 20rpx; |
|||
|
|||
.activate { |
|||
color: #cea26a; |
|||
} |
|||
|
|||
.un-activate { |
|||
color: #9e9e9e; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
// 登录按钮 |
|||
.login-button { |
|||
width: 100%; |
|||
height: 86rpx; |
|||
margin-top: 80rpx; |
|||
background: linear-gradient(to right, #242e4b, #242e4b); |
|||
color: #fff; |
|||
// border-radius: 80rpx; |
|||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1); |
|||
letter-spacing: 5rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
// 找回密码和 立即注册 |
|||
.fdreg{ |
|||
display: flex; |
|||
margin-top: 26rpx; |
|||
line-height: 1.4; |
|||
color:#ff0000; |
|||
padding-left: 32rpx; |
|||
padding-right: 32rpx; |
|||
|
|||
text{ |
|||
display: block; |
|||
float: left; |
|||
width: 46%; |
|||
} |
|||
|
|||
.findpass{ |
|||
text-align: left; |
|||
} |
|||
.regnow{ |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
.privacy{ |
|||
display: flex; |
|||
margin-top: 10rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue