登录和绑定手机
This commit is contained in:
parent
eb468e35a3
commit
7f1410eba2
@ -50,7 +50,7 @@ export function getCodeImg() {
|
||||
// 获取验证码
|
||||
export function loginApp(data) {
|
||||
return request({
|
||||
'url': '/rescue/loginApp',
|
||||
'url': '/rescue/loginQx',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
|
||||
@ -144,6 +144,13 @@
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/login/bindPhoe",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
217
pages/login/bindPhoe.vue
Normal file
217
pages/login/bindPhoe.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="title">绑定手机号</view>
|
||||
<view class="phone formItem">
|
||||
<image style="width: 28rpx;height: 28rpx;" src="../../static/icons/order-icon2.png" mode="aspectFit">
|
||||
</image>
|
||||
<input v-model="phone" placeholder="请输入手机号" class="formItemInput" type="text" />
|
||||
</view>
|
||||
<view class="validaCode formItem">
|
||||
<uni-icons type="locked"></uni-icons>
|
||||
<input v-model="validaCode" class="formItemInput" placeholder="请输入验证码" type="text" />
|
||||
<view :class="{ 'disabled': isButtonDisabled }" class="validaCodeBtn" @click="sendVerificationCode">{{buttonText}}</view>
|
||||
</view>
|
||||
|
||||
<view class="submit" @click="bindPhone">
|
||||
绑定
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setToken } from '../../utils/auth';
|
||||
import request from '../../utils/request';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: '15254781016',
|
||||
validaCode: '',
|
||||
countdownTime: 60,
|
||||
isButtonDisabled: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
buttonText() {
|
||||
if (this.isButtonDisabled) {
|
||||
return `${this.countdownTime}s 后重新发送`;
|
||||
} else {
|
||||
return "获取验证码";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sendVerificationCode() {
|
||||
if (this.isButtonDisabled) {
|
||||
return
|
||||
}
|
||||
let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
|
||||
if (!reg.test(this.phone)) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入正确的11位手机号'
|
||||
})
|
||||
this.phone = '';
|
||||
return false;
|
||||
}
|
||||
if (this.isButtonDisabled) {
|
||||
return; // 如果按钮已禁用，则直接返回
|
||||
}
|
||||
const data = {
|
||||
phone: this.phone,
|
||||
}
|
||||
request({
|
||||
url: '/rescue/sendSmsQx',
|
||||
method: 'get',
|
||||
params: data,
|
||||
headers: {
|
||||
isToken: false,
|
||||
},
|
||||
header: {
|
||||
Authorization: 'Bearer ' + uni.getStorageSync('validaCodeToken')
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log('验证码', res);
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: '验证码已发送 请注意查收',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '网络不佳请稍后再试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
this.disableButton(); // 禁用按钮
|
||||
this.startCountdown(); // 启动倒计时
|
||||
},
|
||||
disableButton() {
|
||||
this.isButtonDisabled = true;
|
||||
},
|
||||
enableButton() {
|
||||
this.isButtonDisabled = false;
|
||||
},
|
||||
startCountdown() {
|
||||
let countdown = setInterval(() => {
|
||||
this.countdownTime--;
|
||||
if (this.countdownTime === 0) {
|
||||
clearInterval(countdown);
|
||||
this.enableButton(); // 启用按钮
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
bindPhone() {
|
||||
let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
|
||||
if (!reg.test(this.phone)) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入正确的11位手机号'
|
||||
})
|
||||
this.phone = '';
|
||||
return false;
|
||||
}
|
||||
if (!this.validaCode) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入验证码'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
|
||||
request({
|
||||
url: '/rescue/updateUserQx',
|
||||
method: 'post',
|
||||
data: {
|
||||
phone: this.phone,
|
||||
code: this.validaCode
|
||||
},
|
||||
headers: {
|
||||
isToken: false,
|
||||
},
|
||||
header: {
|
||||
Authorization: 'Bearer ' + uni.getStorageSync('validaCodeToken')
|
||||
}
|
||||
}).then(res => {
|
||||
console.log('updateUserQx: ',res);
|
||||
if (res.code == 200) {
|
||||
setToken(uni.getStorageSync('validaCodeToken'))
|
||||
uni.reLaunch({
|
||||
url: '/pages/home/home'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
row-gap: 40rpx;
|
||||
background-color: #F5F5F5;
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.formItem {
|
||||
box-sizing: border-box;
|
||||
width: 680rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 30rpx;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 16rpx;
|
||||
|
||||
.formItemInput {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.validaCodeBtn {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.disabled {
|
||||
background-color: #1890ff99;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
width: 600rpx;
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,52 +1,76 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="top">
|
||||
<view class="inputs" >
|
||||
<view class="touxiang">
|
||||
<image src="../../static/xinlogo.png" mode=""></image>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<input type="text" v-model="userName" placeholder="请输入用户名">
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<input type="password" v-model="wrod" placeholder="请输入密码">
|
||||
</view>
|
||||
<view class="wjworb" @click="goforgot()">
|
||||
<view class="">忘记密码</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="dl" @click="getlogin()">
|
||||
<text>登 录</text>
|
||||
</view>
|
||||
<!-- <view class="hging">
|
||||
<text>没有账号？</text>
|
||||
<text style="color: #0078FF;" @click="goregister()">立即注册</text>
|
||||
</view> -->
|
||||
<view class="dbottom">
|
||||
<view class="quanzi" v-if="qindex == false " @click="qindex =! qindex"></view>
|
||||
<view class="lanquanzi" v-if="qindex == true" @click="qindex =! qindex">
|
||||
<uni-icons type="checkmarkempty" color="#ffffff" size="14"></uni-icons>
|
||||
</view>
|
||||
<text>请仔细阅读</text>
|
||||
<text class="lan">《用户协议》</text>
|
||||
<text>和</text>
|
||||
<text class="lan">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '../../utils/request';
|
||||
import {setToken, setTenantId} from '../../utils/auth.js'
|
||||
import {
|
||||
import request from '../../utils/request';
|
||||
import {
|
||||
loginApp
|
||||
} from '@/api/login.js';
|
||||
import {
|
||||
setToken,
|
||||
setTenantId
|
||||
} from '@/utils/auth.js'
|
||||
import {
|
||||
login,
|
||||
getInfo,
|
||||
getTenantIdByWebsite
|
||||
} from '@/api/login.js'
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
} from '@/api/login.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phoneNumber: "",
|
||||
baseUrl: this.$baseUrl,
|
||||
isButtonDisabled: false,
|
||||
countdownTime: 60,
|
||||
qh:[
|
||||
{text:'密码登录'},
|
||||
{text:'验证码登录'}
|
||||
],
|
||||
userName:'',
|
||||
yzm:'',
|
||||
wrod:'',
|
||||
activeid:0,
|
||||
qindex: false,
|
||||
sfindex: 'user',
|
||||
userName: '',
|
||||
yzm: '',
|
||||
wrod: '',
|
||||
activeid: 0,
|
||||
tenantCode: 'lanan'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// getTenantIdByWebsite(this.tenantCode).then(res => {
|
||||
// const tenantId = res.data;
|
||||
// if (tenantId && tenantId >= 0) {
|
||||
// setTenantId(tenantId)
|
||||
// }
|
||||
// })
|
||||
},
|
||||
computed: {
|
||||
groupChange(n) {
|
||||
console.log('groupChange', n);
|
||||
},
|
||||
radioChange(n) {
|
||||
console.log('radioChange', n);
|
||||
},
|
||||
buttonText() {
|
||||
if (this.isButtonDisabled) {
|
||||
return `${this.countdownTime}s 后重新发送`;
|
||||
@ -55,76 +79,197 @@ export default{
|
||||
}
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
setidentity(text) {
|
||||
this.sfindex = text
|
||||
|
||||
},
|
||||
//登录请求
|
||||
getlogin(){
|
||||
if(this.userName == ''){
|
||||
getlogin() {
|
||||
if (this.qindex != true) {
|
||||
uni.showToast({
|
||||
title:'输入框不能为空！',
|
||||
icon:'none'
|
||||
icon: "none",
|
||||
title: "请阅读并勾选用户协议",
|
||||
duration: 2000
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (this.userName == '') {
|
||||
uni.showToast({
|
||||
title: '输入框不能为空！',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
let data ={
|
||||
username:this.userName,
|
||||
password:this.wrod,
|
||||
type:0
|
||||
}
|
||||
console.log('密码请求',data);
|
||||
request({
|
||||
url: '/rescue/loginQx',
|
||||
method: 'post',
|
||||
data: data
|
||||
}).then((res)=>{
|
||||
console.log('密码请求',res);
|
||||
if(res.code == 200){
|
||||
setToken(res.data.accessToken)
|
||||
uni.setStorageSync('identity', this.sfindex);
|
||||
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
const loginFun = () => {
|
||||
const data = {
|
||||
username: this.userName,
|
||||
password: this.wrod,
|
||||
type: 0
|
||||
}
|
||||
loginApp(data).then(res => {
|
||||
if (res.data.needMobile === "1") {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/bindPhoe'
|
||||
})
|
||||
uni.setStorageSync('validaCodeToken', res.data.accessToken)
|
||||
} else {
|
||||
setToken(res.data.accessToken)
|
||||
uni.reLaunch({
|
||||
url: '/pages/home/home'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getTenantIdByWebsite(this.tenantCode).then(res => {
|
||||
if (res.code === 200 && res.data && res.data.length > 0) {
|
||||
uni.showActionSheet({
|
||||
itemList: res.data.map(m => m.name),
|
||||
success: ({
|
||||
tapIndex
|
||||
}) => {
|
||||
setTenantId(res.data[tapIndex].id)
|
||||
loginFun()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
setTenantId('')
|
||||
loginFun()
|
||||
}
|
||||
})
|
||||
},
|
||||
getxz(index) {
|
||||
this.activeid = index
|
||||
},
|
||||
goregister() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/register'
|
||||
})
|
||||
},
|
||||
goforgot() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/forgot'
|
||||
})
|
||||
},
|
||||
goselect() {
|
||||
console.log('执行去救援', this.sfindex);
|
||||
// pages/rescue/trafficPolice
|
||||
if (this.sfindex == 'police') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/rescue/trafficPolice'
|
||||
})
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: '/pages/rescue/rescue'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// 验证码方法
|
||||
sendVerificationCode() {
|
||||
let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
|
||||
if (!reg.test(this.userName)) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入正确的11位手机号'
|
||||
})
|
||||
this.userName = '';
|
||||
return false;
|
||||
}
|
||||
if (this.isButtonDisabled) {
|
||||
return; // 如果按钮已禁用，则直接返回
|
||||
}
|
||||
const data = {
|
||||
phone: this.userName,
|
||||
}
|
||||
request({
|
||||
url: '/loginSmsCode',
|
||||
method: 'post',
|
||||
params: data
|
||||
}).then((res) => {
|
||||
console.log('验证码', res);
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: '验证码已发送 请注意查收',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '网络不佳请稍后再试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
this.disableButton(); // 禁用按钮
|
||||
this.startCountdown(); // 启动倒计时
|
||||
|
||||
},
|
||||
disableButton() {
|
||||
this.isButtonDisabled = true;
|
||||
},
|
||||
enableButton() {
|
||||
this.isButtonDisabled = false;
|
||||
},
|
||||
startCountdown() {
|
||||
let countdown = setInterval(() => {
|
||||
this.countdownTime--;
|
||||
if (this.countdownTime === 0) {
|
||||
clearInterval(countdown);
|
||||
this.enableButton(); // 启用按钮
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.jsq{
|
||||
.jsq {
|
||||
border: none !important;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #0078FF;
|
||||
}
|
||||
button {
|
||||
}
|
||||
|
||||
button {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
margin: 0px;
|
||||
display: block;
|
||||
}
|
||||
button:focus {
|
||||
}
|
||||
|
||||
button:focus {
|
||||
color: #0078FF;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.content{
|
||||
}
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.top{
|
||||
}
|
||||
|
||||
.top {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 27px;
|
||||
padding-top: 100px;
|
||||
background-image: url('../../static/loginbj.png');
|
||||
// background-color:lightseagreen;
|
||||
//background-image: url('../../static/loginbj.png');
|
||||
// background-image: url('../../static/loginbj.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
// height: 385px;
|
||||
}
|
||||
.touxiang{
|
||||
}
|
||||
|
||||
.touxiang {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 10px;
|
||||
@ -132,36 +277,42 @@ button:focus {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 40px;
|
||||
overflow: hidden;
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.twotap{
|
||||
}
|
||||
|
||||
.twotap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
view{
|
||||
|
||||
view {
|
||||
font-size: 15px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-right: 38.5px;
|
||||
}
|
||||
}
|
||||
.blck{
|
||||
}
|
||||
|
||||
.blck {
|
||||
color: #333333 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.inputs{
|
||||
}
|
||||
|
||||
.inputs {
|
||||
box-sizing: border-box;
|
||||
padding: 16px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid #E8E8E8 ;
|
||||
border-bottom: 2px solid #E8E8E8;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.wjworb{
|
||||
}
|
||||
|
||||
.wjworb {
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -170,8 +321,9 @@ button:focus {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.dl{
|
||||
}
|
||||
|
||||
.dl {
|
||||
width: 90%;
|
||||
height: 44px;
|
||||
background: linear-gradient(-46deg, #0853C4 0%, #4282D8 80%);
|
||||
@ -183,35 +335,40 @@ button:focus {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.hging{
|
||||
}
|
||||
|
||||
.hging {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #636363;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.wx{
|
||||
}
|
||||
|
||||
.wx {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
margin: 0px auto;
|
||||
margin-top: 20px;
|
||||
image{
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.hui{
|
||||
}
|
||||
|
||||
.hui {
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
.dbottom{
|
||||
}
|
||||
|
||||
.dbottom {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
@ -219,8 +376,74 @@ button:focus {
|
||||
margin-top: 40px;
|
||||
position: fixed;
|
||||
bottom: 25px;
|
||||
}
|
||||
.lan{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quanzi {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #666666;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.lanquanzi {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #0078FF;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
background: #0078FF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.lan {
|
||||
color: #0078FF;
|
||||
}
|
||||
}
|
||||
|
||||
.jiuzhong {
|
||||
width: 90%;
|
||||
margin: 10px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dist {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.d-zi {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.d-qian {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #666666;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.d-qian-lan {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0078FF;
|
||||
border: 1px solid #0078FF;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
BIN
static/loginbj.png
Normal file
BIN
static/loginbj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
static/xinlogo.png
Normal file
BIN
static/xinlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Loading…
Reference in New Issue
Block a user