From 07fe12483a19bb80ff9fa76dd086562dbde9a9f6 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 25 Nov 2021 09:58:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=99=BB=E9=99=86=E7=95=8C?=
=?UTF-8?q?=E9=9D=A2=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=89=8B=E6=9C=BA=E5=AF=86?=
=?UTF-8?q?=E7=A0=81=E7=9A=84=E7=99=BB=E9=99=86=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
yudao-vue-ui/pages/auth/login.vue | 223 ++++++++++---------
yudao-vue-ui/pages/auth/mixin/login-apple.js | 83 -------
2 files changed, 117 insertions(+), 189 deletions(-)
delete mode 100644 yudao-vue-ui/pages/auth/mixin/login-apple.js
diff --git a/yudao-vue-ui/pages/auth/login.vue b/yudao-vue-ui/pages/auth/login.vue
index 8667c0da1..f7dc0902f 100644
--- a/yudao-vue-ui/pages/auth/login.vue
+++ b/yudao-vue-ui/pages/auth/login.vue
@@ -1,52 +1,58 @@
<template>
<view class="app">
+ <!-- 左下角的环 -->
<view class="left-bottom-sign"></view>
- <view class="back-btn mix-icon icon-guanbi" @click="navBack"></view>
+ <!-- 右上角的折角 -->
<view class="right-top-sign"></view>
+ <!-- 左上角的 x 关闭 -->
+ <view class="back-btn mix-icon icon-guanbi" @click="navBack"></view>
+ <!-- 用户协议 -->
<view class="agreement center">
<text class="mix-icon icon-xuanzhong" :class="{active: agreement}" @click="checkAgreement"></text>
<text @click="checkAgreement">请认真阅读并同意</text>
- <text class="tit" @click="navToAgreementDetail(1)">《用户服务协议》</text>
- <text class="tit" @click="navToAgreementDetail(2)">《隐私权政策》</text>
+ <text class="title" @click="navToAgreementDetail(1)">《用户服务协议》</text>
+ <text class="title" @click="navToAgreementDetail(2)">《隐私权政策》</text>
</view>
+ <!-- 登录表单 -->
<view class="wrapper">
<view class="left-top-sign">LOGIN</view>
- <view class="welcome">
- 欢迎回来！
- </view>
+ <view class="welcome">手机登录/注册</view>
+ <!-- 手机验证码登录 -->
<view class="input-content">
<view class="input-item">
- <text class="tit">手机号码</text>
+ <text class="title">手机号码</text>
<view class="row">
- <input
- v-model="username"
- type="number"
- maxlength="11"
- placeholder="请输入手机号码"
- placeholder-style="color: #909399"
- />
+ <input v-model="mobile" type="number" maxlength="11"
+ placeholder="请输入手机号码" placeholder-style="color: #909399"/>
</view>
</view>
- <view class="input-item">
- <text class="tit">验证码</text>
+ <!-- 判断使用验证码还是密码 -->
+ <view class="input-item" v-if="loginType == 'code'">
+ <text class="title">验证码</text>
<view class="row">
- <input
- v-model="code"
- type="number"
- maxlength="6"
- placeholder="请输入手机验证码"
- placeholder-style="color: #909399"
- />
- <mix-code :mobile="username" templateCode="SMS_194050994"></mix-code>
+ <input v-model="code" type="number" maxlength="6"
+ placeholder="请输入手机验证码" placeholder-style="color: #909399">
+ <mix-code :mobile="mobile" templateCode="SMS_194050994"></mix-code>
+ </view>
+ </view>
+ <view class="input-item" v-else>
+ <text class="title">密码</text>
+ <view class="row">
+ <input v-model="password" type="password" maxlength="16"
+ placeholder="请输入密码" placeholder-style="color: #909399"/>
</view>
</view>
+ <mix-button ref="confirmBtn" text="立即登录" marginTop="60rpx" @onConfirm="login"></mix-button>
+ <!-- 切换登陆 -->
+ <view class="login-type" v-if="loginType == 'code'" @click="setLoginType('password')">账号密码登录</view>
+ <view class="login-type" v-else @click="setLoginType('code')">免密登录</view>
</view>
- <mix-button ref="confirmBtn" text="登录" marginTop="60rpx" @onConfirm="login"></mix-button>
+ <!-- 快捷登录 -->
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
<view class="other-wrapper">
<view class="line center">
- <text class="tit">快捷登录</text>
+ <text class="title">快捷登录</text>
</view>
<view class="list row">
<!-- #ifdef MP-WEIXIN -->
@@ -56,10 +62,6 @@
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
- <view v-if="canUseAppleLogin && false" class="item column center" style="width: 180rpx;" @click="loginByApple">
- <image class="icon" src="/static/icon/apple.png"></image>
- <text>Apple登录</text>
- </view>
<view class="item column center" style="width: 180rpx;" @click="loginByWxApp">
<image class="icon" src="/static/icon/login-wx.png"></image>
<text>微信登录</text>
@@ -70,6 +72,7 @@
<!-- #endif -->
</view>
+ <!-- Loading 框 -->
<mix-loading v-if="isLoading"></mix-loading>
</view>
</template>
@@ -78,58 +81,63 @@
import {checkStr} from '@/common/js/util'
import loginMpWx from './mixin/login-mp-wx.js'
import loginAppWx from './mixin/login-app-wx.js'
- import loginApple from './mixin/login-apple.js'
export default{
- mixins: [loginMpWx, loginAppWx, loginApple],
+ mixins: [loginMpWx, loginAppWx],
data(){
return {
- canUseAppleLogin: false,
- agreement: true,
- username: '',
+ loginType: 'code', // 登录方式，code 验证码；password 密码
+ mobile: '',
code: '',
+ password: '',
+ agreement: true,
}
},
onLoad() {
- console.log(1);
},
methods: {
loginSuccessCallBack(data){
- this.$util.msg('登陆成功');
+ this.$util.msg('登录成功');
this.$store.commit('setToken', data);
setTimeout(()=>{
uni.navigateBack();
}, 1000)
},
- //手机号登录
+ // 手机号登录
async login(){
- if(!this.agreement){
+ // 参数校验
+ if (!this.agreement){
this.$util.msg('请阅读并同意用户服务及隐私协议');
this.$refs.confirmBtn.stop();
return;
}
- const {username, code} = this;
- if(!checkStr(username, 'mobile')){
+ const {mobile, code, password} = this;
+ if (!checkStr(mobile, 'mobile')){
this.$util.msg('请输入正确的手机号码');
this.$refs.confirmBtn.stop();
return;
}
- if(!checkStr(code, 'mobileCode')){
+ if (!checkStr(code, 'mobileCode')) {
this.$util.msg('验证码错误');
this.$refs.confirmBtn.stop();
return;
}
- const res = await this.$request('user', 'login', {username,code});
+
+ // 执行登陆
+ const res = await this.$request('user', 'login', {mobile,code});
this.$refs.confirmBtn.stop();
- if(res.status === 1){
+ if (res.status === 1){
this.loginSuccessCallBack(res.data);
- }else{
+ } else{
this.$util.msg(res.msg);
}
},
navBack(){
uni.navigateBack();
},
+ setLoginType(loginType) {
+ this.loginType = loginType;
+ },
//同意协议
checkAgreement(){
this.agreement = !this.agreement;
@@ -154,7 +162,7 @@
}
</style>
<style scoped lang='scss'>
- .app{
+ .app {
padding-top: 15vh;
position:relative;
width: 100vw;
@@ -162,12 +170,20 @@
overflow: hidden;
background: #fff;
}
- .wrapper{
+ .wrapper {
position:relative;
z-index: 90;
padding-bottom: 40rpx;
+ .welcome {
+ position:relative;
+ left: 50rpx;
+ top: -90rpx;
+ font-size: 46rpx;
+ color: #555;
+ text-shadow: 1px 0px 1px rgba(0,0,0,.3);
+ }
}
- .back-btn{
+ .back-btn {
position:absolute;
left: 20rpx;
top: calc(var(--status-bar-height) + 20rpx);
@@ -176,18 +192,25 @@
font-size: 32rpx;
color: #606266;
}
- .left-top-sign{
+ .left-top-sign {
font-size: 120rpx;
color: #f8f8f8;
position:relative;
left: -12rpx;
}
- .right-top-sign{
+ .left-bottom-sign {
+ position: absolute;
+ left: -270rpx;
+ bottom: -320rpx;
+ border: 100rpx solid #d0d1fd;
+ border-radius: 50%;
+ padding: 180rpx;
+ }
+ .right-top-sign {
position:absolute;
top: 80rpx;
right: -30rpx;
z-index: 95;
-
&:before, &:after{
display:block;
content:"";
@@ -207,56 +230,49 @@
border-top-left-radius: 50px;
}
}
- .left-bottom-sign{
- position:absolute;
- left: -270rpx;
- bottom: -320rpx;
- border: 100rpx solid #d0d1fd;
- border-radius: 50%;
- padding: 180rpx;
- }
- .welcome{
- position:relative;
- left: 50rpx;
- top: -90rpx;
- font-size: 46rpx;
- color: #555;
- text-shadow: 1px 0px 1px rgba(0,0,0,.3);
- }
- .input-content{
+
+ /** 手机登录部分 */
+ .input-content {
padding: 0 60rpx;
+ .input-item {
+ display:flex;
+ flex-direction: column;
+ align-items:flex-start;
+ justify-content: center;
+ padding: 0 30rpx;
+ background: #f8f6fc;
+ height: 120rpx;
+ border-radius: 4px;
+ margin-bottom: 50rpx;
+ &:last-child{
+ margin-bottom: 0;
+ }
+ .row{
+ width: 100%;
+ }
+ .title{
+ height: 50rpx;
+ line-height: 56rpx;
+ font-size: 26rpx;
+ color: #606266;
+ }
+ input {
+ flex: 1;
+ height: 60rpx;
+ font-size: 30rpx;
+ color: #303133;
+ width: 100%;
+ }
+ }
+ .login-type {
+ display: flex;
+ justify-content: flex-end;
+ font-size: 13px;
+ color: #40a2ff;
+ margin-top: 20rpx;
+ }
}
- .input-item{
- display:flex;
- flex-direction: column;
- align-items:flex-start;
- justify-content: center;
- padding: 0 30rpx;
- background: #f8f6fc;
- height: 120rpx;
- border-radius: 4px;
- margin-bottom: 50rpx;
-
- &:last-child{
- margin-bottom: 0;
- }
- .row{
- width: 100%;
- }
- .tit{
- height: 50rpx;
- line-height: 56rpx;
- font-size: 26rpx;
- color: #606266;
- }
- input{
- flex: 1;
- height: 60rpx;
- font-size: 30rpx;
- color: #303133;
- width: 100%;
- }
- }
+
/* 其他登录方式 */
.other-wrapper{
display: flex;
@@ -264,11 +280,9 @@
align-items: center;
padding-top: 20rpx;
margin-top: 80rpx;
-
.line{
margin-bottom: 40rpx;
-
- .tit{
+ .title {
margin: 0 32rpx;
font-size: 24rpx;
color: #606266;
@@ -285,7 +299,6 @@
color: #606266;
background-color: #fff;
border: 0;
-
&:after{
border: 0;
}
@@ -305,18 +318,16 @@
height: 90rpx;
font-size: 24rpx;
color: #999;
-
.mix-icon{
font-size: 36rpx;
color: #ccc;
margin-right: 8rpx;
margin-top: 1px;
-
&.active{
color: $base-color;
}
}
- .tit{
+ .title {
color: #40a2ff;
}
}
diff --git a/yudao-vue-ui/pages/auth/mixin/login-apple.js b/yudao-vue-ui/pages/auth/mixin/login-apple.js
deleted file mode 100644
index c0c98d345..000000000
--- a/yudao-vue-ui/pages/auth/mixin/login-apple.js
+++ /dev/null
@@ -1,83 +0,0 @@
-export default{
- onLoad() {
- if(this.systemInfo.platform !== 'ios'){
- return;
- }
- const systemVersion = +this.systemInfo.system.split('.')[0];
- if(systemVersion >= 13){
- this.canUseAppleLogin = true;
- }
- },
- methods: {
- //苹果登录
- async loginByApple(){
- /* if(!this.canUseAppleLogin){
- this.$util.msg('系统版本过低，无法使用苹果登录');
- return;
- } */
- if(!this.agreement){
- this.$util.msg('请阅读并同意用户服务及隐私协议');
- this.$refs.confirmBtn.stop();
- return;
- }
- uni.login({
- provider: 'apple',
- success: loginRes=> {
- // 登录成功
- uni.getUserInfo({
- provider: 'apple',
- success: async userRes=> {
- console.log(userRes);
- const response = await this.$request('user', 'loginByApple', {
- authorizationCode: userRes.userInfo.authorizationCode,
- identityToken: userRes.userInfo.identityToken
- }, {
- showLoading: true
- });
- console.log(response);
- //注销苹果登录
- this.appleLogout();
- console.log(response);
- if(response.status === 0){
- this.$util.msg(response.msg);
- return;
- }
- if(response.hasBindMobile && response.data.token){
- this.loginSuccessCallBack({
- token: response.data.token,
- tokenExpired: response.data.tokenExpired
- });
- }else{
- this.navTo('/pages/auth/bindMobile?type=apple&data='+JSON.stringify(response.data))
- }
- }
- })
- },
- fail: err=> {
- console.log(err);
- this.$util.msg('登录失败');
- this.appleLogout();
- }
- })
- },
- appleLogout(){
- plus.oauth.getServices(oauthRes=>{
- const oIndex = oauthRes.findIndex(oItem=> oItem.id === 'apple');
- oauthRes[oIndex].logout(loRes => {
- console.log('appleLogout success=> ', loRes);
- }, loErr => {
- console.log('appleLogout error=> ', loErr);
- })
- })
- }
- }
-}
-
-
-
-
-
-
-
-
-