xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor:小程序快捷登录重构

Browse Source
This commit is contained in:
kele
2023-08-09 14:21:23 +08:00
parent 5cdbeb65fb
commit 18cd88872c
7 changed files with 314 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sheep/components/s-auth-modal/s-auth-modal.vue
+112 -22
View File
@@ -6,41 +6,56 @@
<account-login
v-if="authType === 'accountLogin'"
:agreeStatus="state.protocol"
></account-login>
@onConfirm="onConfirm"
/>
<!-- 2.短信登录 smsLogin -->
<sms-login v-if="authType === 'smsLogin'" :agreeStatus="state.protocol"></sms-login>
<sms-login v-if="authType === 'smsLogin'" :agreeStatus="state.protocol" @onConfirm="onConfirm" />
<!-- 3.短信注册 smsRegister-->
<sms-register v-if="authType === 'smsRegister'" :agreeStatus="state.protocol"></sms-register>
<sms-register
v-if="authType === 'smsRegister'"
:agreeStatus="state.protocol"
@onConfirm="onConfirm"
/>
<!-- 4.忘记密码 resetPassword-->
<reset-password v-if="authType === 'resetPassword'"></reset-password>
<reset-password v-if="authType === 'resetPassword'" />
<!-- 5.绑定手机号 changeMobile -->
<change-mobile v-if="authType === 'changeMobile'"></change-mobile>
<change-mobile v-if="authType === 'changeMobile'" />
<!-- 6.修改密码 changePassword-->
<change-passwrod v-if="authType === 'changePassword'"></change-passwrod>
<change-passwrod v-if="authType === 'changePassword'" />
<!-- 7.修改用户名 changeUsername-->
<change-username v-if="authType === 'changeUsername'"></change-username>
<change-username v-if="authType === 'changeUsername'" />
<!-- 第三方登录 -->
<!-- 8.微信小程序授权 changeUsername-->
<mp-authorization v-if="authType === 'mpAuthorization'" />
<!-- 第三方登录+注册 -->
<view
v-if="['accountLogin', 'smsLogin'].includes(authType)"
class="auto-login-box ss-flex ss-row-center ss-col-center"
class="auto-login-box ss-flex ss-flex-col ss-row-center ss-col-center"
>
<!-- 微信小程序登录 -->
<!-- 立即注册&快捷登录 TextButton -->
<view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box">
<view class="register-title">还没有账号?</view>
<button class="ss-reset-button register-btn" @tap="showAuthModal('smsRegister')"
>立即注册</button
>
<view class="or-title">或</view>
<button class="ss-reset-button login-btn" @tap="thirdLogin('wechat')">快捷登录</button>
<view class="circle"></view>
</view>
<button
v-if="sheep.$platform.name === 'WechatMiniProgram'"
open-type="getPhoneNumber"
@getphonenumber="thirdLogin('wechat', $event)"
class="ss-reset-button auto-login-btn"
v-if="sheep.$platform.name !== 'WechatMiniProgram'"
class="ss-reset-button type-btn"
@tap="showAuthModal('smsRegister')"
>
<image
class="auto-login-img"
:src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
></image>
立即注册
</button>
<!-- 公众号|App微信登录 -->
@@ -74,6 +89,7 @@
<view
v-if="['accountLogin', 'smsLogin', 'smsRegister'].includes(authType)"
class="agreement-box ss-flex ss-row-center"
:class="{ shake: currentProtocol }"
>
<label class="radio ss-flex ss-col-center" @tap="onChange">
<radio
@@ -106,7 +122,7 @@
</template>
<script setup>
import { computed, reactive } from 'vue';
import { computed, reactive, ref } from 'vue';
import sheep from '@/sheep';
import accountLogin from './components/account-login.vue';
import smsLogin from './components/sms-login.vue';
@@ -115,7 +131,8 @@
import changeMobile from './components/change-mobile.vue';
import changePasswrod from './components/change-password.vue';
import changeUsername from './components/change-username.vue';
import { closeAuthModal } from '@/sheep/hooks/useModal';
import mpAuthorization from './components/mp-authorization.vue';
import { closeAuthModal, showAuthModal } from '@/sheep/hooks/useModal';
const appInfo = computed(() => sheep.$store('app').info);
@@ -127,6 +144,8 @@
protocol: false,
});
const currentProtocol = ref(false);
//勾选协议
function onChange() {
state.protocol = !state.protocol;
@@ -141,16 +160,39 @@
});
}
// 点击登录/注册事件
function onConfirm(e) {
currentProtocol.value = e;
setTimeout(() => {
currentProtocol.value = false;
}, 1000);
}
// 第三方授权登陆
const thirdLogin = async (provider, event = null) => {
const thirdLogin = async (provider) => {
if (!state.protocol) {
currentProtocol.value = true;
setTimeout(() => {
currentProtocol.value = false;
}, 1000);
sheep.$helper.toast('请勾选同意');
return;
}
const loginRes = await sheep.$platform.useProvider(provider).login(event?.detail || null);
const loginRes = await sheep.$platform.useProvider(provider).login();
if (loginRes) {
closeAuthModal();
const userInfo = await sheep.$store('user').getInfo();
// 触发小程序授权信息弹框
// #ifdef MP-WEIXIN
if (userInfo.third_oauth.length > 0) {
const mpThirdOauthInfo = userInfo.third_oauth.find(
(item) => item.platform === 'miniProgram',
);
if (mpThirdOauthInfo && !mpThirdOauthInfo.nickname) {
showAuthModal('mpAuthorization');
}
}
// #endif
}
};
</script>
@@ -158,6 +200,54 @@
<style lang="scss" scoped>
@import './index.scss';
.shake {
animation: shake 0.05s linear 4 alternate;
}
@keyframes shake {
from {
transform: translateX(-10rpx);
}
to {
transform: translateX(10rpx);
}
}
.register-box {
position: relative;
justify-content: center;
.register-btn {
color: #999999;
font-size: 30rpx;
font-weight: 500;
}
.register-title {
color: #999999;
font-size: 30rpx;
font-weight: 400;
margin-right: 24rpx;
}
.or-title {
margin: 0 16rpx;
color: #999999;
font-size: 30rpx;
font-weight: 400;
}
.login-btn {
color: var(--ui-BG-Main);
font-size: 30rpx;
font-weight: 500;
}
.circle {
position: absolute;
right: 0rpx;
top: 18rpx;
width: 8rpx;
height: 8rpx;
border-radius: 8rpx;
background: var(--ui-BG-Main);
}
}
.safe-box {
height: calc(constant(safe-area-inset-bottom) / 5 * 3);
height: calc(env(safe-area-inset-bottom) / 5 * 3);