|
@@ -1,14 +1,23 @@
|
|
|
<script>
|
|
<script>
|
|
|
-import {bindPhone} from '@/api/index.js'
|
|
|
|
|
|
|
+import { clientLogin,sendMsg } from '@/api/newLogin.js'
|
|
|
export default {
|
|
export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
phone: '',
|
|
phone: '',
|
|
|
|
|
+ password: '',
|
|
|
code: '',
|
|
code: '',
|
|
|
countdown: 60,
|
|
countdown: 60,
|
|
|
timer: null,
|
|
timer: null,
|
|
|
isSendingCode: false,
|
|
isSendingCode: false,
|
|
|
- isBinding: false
|
|
|
|
|
|
|
+ isBinding: false,
|
|
|
|
|
+ isPwdHide: true,
|
|
|
|
|
+ isPasswordLogin:true,
|
|
|
|
|
+ useCodeLogin:false,
|
|
|
|
|
+
|
|
|
|
|
+ showCaptcha:false, // 弹窗显隐
|
|
|
|
|
+ imgCode:'', // 用户填写的图形验证码
|
|
|
|
|
+ captchaImg:'', // 图形验证码图片地址
|
|
|
|
|
+ captchaKey:'' // 后端返回验证码标识
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -18,16 +27,18 @@ export default {
|
|
|
canBind() {
|
|
canBind() {
|
|
|
return this.phone && this.validatePhone(this.phone) && this.code && this.code.length === 6 && !this.isBinding
|
|
return this.phone && this.validatePhone(this.phone) && this.code && this.code.length === 6 && !this.isBinding
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ onShow() {
|
|
|
|
|
+ this.password = ''
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
validatePhone(phone) {
|
|
validatePhone(phone) {
|
|
|
const reg = /^1[3-9]\d{9}$/
|
|
const reg = /^1[3-9]\d{9}$/
|
|
|
return reg.test(phone)
|
|
return reg.test(phone)
|
|
|
},
|
|
},
|
|
|
- getCode() {
|
|
|
|
|
- if (this.isSendingCode || this.countdown < 60) return
|
|
|
|
|
-
|
|
|
|
|
- if (!this.phone) {
|
|
|
|
|
|
|
+ nextStep(){
|
|
|
|
|
+ if (!this.phone) {
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
|
title: '请输入手机号',
|
|
title: '请输入手机号',
|
|
|
icon: 'none'
|
|
icon: 'none'
|
|
@@ -42,29 +53,13 @@ export default {
|
|
|
})
|
|
})
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
+ if(!this.isPasswordLogin){
|
|
|
|
|
+ this.showCaptcha=true
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- this.isSendingCode = true
|
|
|
|
|
-
|
|
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '验证码已发送',
|
|
|
|
|
- icon: 'success'
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- this.startCountdown()
|
|
|
|
|
- this.isSendingCode = false
|
|
|
|
|
- },
|
|
|
|
|
- startCountdown() {
|
|
|
|
|
- this.countdown = 60
|
|
|
|
|
- this.timer = setInterval(() => {
|
|
|
|
|
- this.countdown--
|
|
|
|
|
- if (this.countdown <= 0) {
|
|
|
|
|
- clearInterval(this.timer)
|
|
|
|
|
- this.countdown = 60
|
|
|
|
|
- this.timer = null
|
|
|
|
|
- }
|
|
|
|
|
- }, 1000)
|
|
|
|
|
},
|
|
},
|
|
|
- bindPhone() {
|
|
|
|
|
|
|
+ //登录
|
|
|
|
|
+ loginPhoneFun() {
|
|
|
var _this = this;
|
|
var _this = this;
|
|
|
if (this.isBinding) return
|
|
if (this.isBinding) return
|
|
|
|
|
|
|
@@ -84,31 +79,91 @@ export default {
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- if (!this.code || this.code.length !== 6) {
|
|
|
|
|
|
|
+ if (!this.password && this.isPasswordLogin) {
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
|
- title: '请输入6位验证码',
|
|
|
|
|
|
|
+ title: '请输入密码',
|
|
|
icon: 'none'
|
|
icon: 'none'
|
|
|
})
|
|
})
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
this.isBinding = true
|
|
this.isBinding = true
|
|
|
- bindPhone({
|
|
|
|
|
- openId:uni.getStorageSync('wx_copenid'),
|
|
|
|
|
- phone:_this.phone,
|
|
|
|
|
- code:_this.code
|
|
|
|
|
- }).then(res =>{
|
|
|
|
|
|
|
+ clientLogin({
|
|
|
|
|
+ //openId: uni.getStorageSync('wx_copenid'),
|
|
|
|
|
+ userType:'2',
|
|
|
|
|
+ phone: _this.phone,
|
|
|
|
|
+ codeSwitch:'false',//是否开启验证码登录 true-是 false-否
|
|
|
|
|
+ passWord: this.passWord
|
|
|
|
|
+ }).then(res => {
|
|
|
if (res.data.code == 200) {
|
|
if (res.data.code == 200) {
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
|
- title: '绑定成功',
|
|
|
|
|
|
|
+ title: '登录成功',
|
|
|
icon: 'success'
|
|
icon: 'success'
|
|
|
})
|
|
})
|
|
|
uni.setStorageSync('wx_phone', _this.phone)
|
|
uni.setStorageSync('wx_phone', _this.phone)
|
|
|
- uni.navigateBack()
|
|
|
|
|
_this.isBinding = false;
|
|
_this.isBinding = false;
|
|
|
|
|
+ _this.back();
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
+ },
|
|
|
|
|
+ back() {
|
|
|
|
|
+ let pages = getCurrentPages();
|
|
|
|
|
+ if (pages.length >= 2) {
|
|
|
|
|
+ let prevPage = pages[pages.length - 2];
|
|
|
|
|
+ let prevRoute = prevPage.route;
|
|
|
|
|
+ if (prevRoute && prevRoute !== 'pages/index/index') {
|
|
|
|
|
+ if (prevRoute.startsWith('pages/')) {
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: '/' + prevRoute
|
|
|
|
|
+ })
|
|
|
|
|
+ } else {
|
|
|
|
|
+ uni.navigateBack({
|
|
|
|
|
+ delta: 1,
|
|
|
|
|
+ fail: () => {
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: '/pages/index/index'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: '/pages/index/index'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: '/pages/index/index'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ //图形验证码提交
|
|
|
|
|
+ submitImgCode(){
|
|
|
|
|
+ if(!this.imgCode){
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '请输入验证码',
|
|
|
|
|
+ icon: 'none'
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ sendMsg({phone :this.phone }).then(res=>{
|
|
|
|
|
+ console.log(res)
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: `/setting/myNew/useCodeLogin?phone=`+this.phone
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ //忘记密码
|
|
|
|
|
+ forgetPassword(){
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: `/setting/myNew/forgetPassword?phone=`+this.phone
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
},
|
|
},
|
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
|
if (this.timer) {
|
|
if (this.timer) {
|
|
@@ -121,50 +176,107 @@ export default {
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<view class="sett-box">
|
|
<view class="sett-box">
|
|
|
- <view class="input-box">
|
|
|
|
|
- <u-input
|
|
|
|
|
- v-model="phone"
|
|
|
|
|
- type="number"
|
|
|
|
|
- border="none"
|
|
|
|
|
- maxlength="11"
|
|
|
|
|
- placeholder="请输入手机号"
|
|
|
|
|
- placeholder-style="color: #999"
|
|
|
|
|
- class="input-item"
|
|
|
|
|
- ></u-input>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <!-- 放在页面最顶部,拦截自动填充核心代码 -->
|
|
|
|
|
+ <input type="text" name="username" style="position:absolute;opacity:0;width:0;height:0;z-index:-99;" />
|
|
|
|
|
+ <input type="password" name="password" style="position:absolute;opacity:0;width:0;height:0;z-index:-99;" />
|
|
|
|
|
|
|
|
- <view class="input-box code-box">
|
|
|
|
|
- <u-input
|
|
|
|
|
- v-model="code"
|
|
|
|
|
- type="number"
|
|
|
|
|
- border="none"
|
|
|
|
|
- maxlength="6"
|
|
|
|
|
- placeholder="请输入手机验证码"
|
|
|
|
|
- placeholder-style="color: #999"
|
|
|
|
|
- class="input-item code-input"
|
|
|
|
|
- ></u-input>
|
|
|
|
|
- <view class="code-btn" :class="{ disabled: !canGetCode }" @click="getCode">
|
|
|
|
|
- <text v-if="countdown === 60">获取验证码</text>
|
|
|
|
|
- <text v-else>{{ countdown }}s 后重新获取</text>
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <view class="greeting-area">
|
|
|
|
|
+ <view class="bubble-box">
|
|
|
|
|
+ <view class="bubble-text">您好,欢迎使用广誉源!</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view class="input-box" style="margin-top: 180rpx;">
|
|
|
|
|
+ <u-input v-model="phone" type="number" border="none" maxlength="11" placeholder="请输入手机号"
|
|
|
|
|
+ placeholder-style="color: #999" class="input-item">
|
|
|
|
|
+ <template slot="prefix">
|
|
|
|
|
+ <view class="label">
|
|
|
|
|
+ <text>+86</text>
|
|
|
|
|
+ <u-line length="38rpx" color="#ccc" margin="0 12rpx 0 20rpx" direction="col"></u-line>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </u-input>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="input-box" v-if="isPasswordLogin">
|
|
|
|
|
+ <u-input v-model="password" autocomplete="off" border="none" :password="isPwdHide" maxlength="20"
|
|
|
|
|
+ placeholder="请输入密码" placeholder-style="color: #999" class="input-item">
|
|
|
|
|
+ <template #suffix>
|
|
|
|
|
+ <u-icon :name="isPwdHide ? 'eye-off' : 'eye'" @click="isPwdHide = !isPwdHide" size="32rpx" color="#999" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </u-input>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
|
|
|
<view class="bind-btn">
|
|
<view class="bind-btn">
|
|
|
- <u-button
|
|
|
|
|
- :disabled="!canBind"
|
|
|
|
|
- :loading="isBinding"
|
|
|
|
|
- type="primary"
|
|
|
|
|
- @click="bindPhone">绑定</u-button>
|
|
|
|
|
|
|
+ <u-button v-if="isPasswordLogin || useCodeLogin" :loading="isBinding" type="primary" @click="loginPhoneFun">登录</u-button>
|
|
|
|
|
+ <u-button v-if="!isPasswordLogin" :loading="isBinding" type="primary" @click="nextStep">下一步</u-button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view style="display: flex;justify-content: space-between;margin-top: 30rpx;font-size: 28rpx;">
|
|
|
|
|
+ <view v-if="isPasswordLogin" @click="isPasswordLogin=false">验证码登录</view>
|
|
|
|
|
+ <view v-if="!isPasswordLogin" @click="isPasswordLogin=true">密码登录</view>
|
|
|
|
|
+ <view v-if="isPasswordLogin" @click="forgetPassword">忘记密码</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <!-- //myNew/forgetPassword -->
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 图形验证码弹窗 -->
|
|
|
|
|
+ <u-popup :show="showCaptcha" mode="center" border-radius="12">
|
|
|
|
|
+ <view class="captcha-box">
|
|
|
|
|
+ <view class="captcha-title">
|
|
|
|
|
+ <text>请输入下方图形验证码</text>
|
|
|
|
|
+ <u-icon name="close" @click="showCaptcha=false"></u-icon>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 图形验证码图片,点击刷新 -->
|
|
|
|
|
+ <image :src="captchaImg" @click="refreshCaptcha" class="captcha-img"></image>
|
|
|
|
|
+ <!-- 验证码输入框,唤起全字符键盘 -->
|
|
|
|
|
+ <u-input
|
|
|
|
|
+ v-model="imgCode"
|
|
|
|
|
+ placeholder="请输入图形验证码"
|
|
|
|
|
+ :focus="showCaptcha"
|
|
|
|
|
+ type="text"
|
|
|
|
|
+ maxlength="4"
|
|
|
|
|
+ border="none"
|
|
|
|
|
+ ></u-input>
|
|
|
|
|
+ <u-button @click="submitImgCode" block custom-style="margin-top:20rpx;">确定</u-button>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ </u-popup>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
-.sett-box{
|
|
|
|
|
|
|
+
|
|
|
|
|
+.captcha-box{
|
|
|
|
|
+ width:600rpx;
|
|
|
|
|
+ padding:30rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.captcha-title{
|
|
|
|
|
+ display:flex;
|
|
|
|
|
+ justify-content:space-between;
|
|
|
|
|
+ align-items:center;
|
|
|
|
|
+ font-size:32rpx;
|
|
|
|
|
+ margin-bottom:30rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.captcha-img{
|
|
|
|
|
+ width:100%;
|
|
|
|
|
+ height:120rpx;
|
|
|
|
|
+ margin-bottom:20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.sett-box {
|
|
|
width: 750rpx;
|
|
width: 750rpx;
|
|
|
height: 100vh;
|
|
height: 100vh;
|
|
|
background: #F5F8F8;
|
|
background: #F5F8F8;
|
|
|
- padding:36rpx 40rpx;
|
|
|
|
|
|
|
+ padding: 36rpx 40rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.input-box {
|
|
.input-box {
|
|
@@ -177,6 +289,10 @@ export default {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
padding: 0 30rpx;
|
|
padding: 0 30rpx;
|
|
|
|
|
|
|
|
|
|
+ .label {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.input-item {
|
|
.input-item {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
}
|
|
}
|
|
@@ -201,7 +317,6 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.bind-btn {
|
|
.bind-btn {
|
|
|
- margin-top: 120rpx;
|
|
|
|
|
|
|
|
|
|
::v-deep .u-button {
|
|
::v-deep .u-button {
|
|
|
width: 678rpx;
|
|
width: 678rpx;
|