|
@@ -1,239 +1,289 @@
|
|
|
-<template>
|
|
|
- <!-- 规格弹窗 -->
|
|
|
- <su-popup :show="authType !== ''" round="10" :showClose="true" @close="closeAuthModal">
|
|
|
- <view class="login-wrap">
|
|
|
- <!-- 1. 账号密码登录 accountLogin -->
|
|
|
- <account-login
|
|
|
- v-if="authType === 'accountLogin'"
|
|
|
- :agreeStatus="state.protocol"
|
|
|
- @onConfirm="onConfirm"
|
|
|
- />
|
|
|
-
|
|
|
- <!-- 2. 短信登录 smsLogin -->
|
|
|
- <sms-login v-if="authType === 'smsLogin'" :agreeStatus="state.protocol" @onConfirm="onConfirm" />
|
|
|
-
|
|
|
- <!-- 3. 忘记密码 resetPassword-->
|
|
|
- <reset-password v-if="authType === 'resetPassword'" />
|
|
|
-
|
|
|
- <!-- 4. 绑定手机号 changeMobile -->
|
|
|
- <change-mobile v-if="authType === 'changeMobile'" />
|
|
|
-
|
|
|
- <!-- 5. 修改密码 changePassword-->
|
|
|
- <changePassword v-if="authType === 'changePassword'" />
|
|
|
-
|
|
|
- <!-- 6. 微信小程序授权 -->
|
|
|
- <mp-authorization v-if="authType === 'mpAuthorization'" />
|
|
|
-
|
|
|
- <!-- 7. 第三方登录 -->
|
|
|
- <view
|
|
|
- v-if="['accountLogin', 'smsLogin'].includes(authType)"
|
|
|
- class="auto-login-box ss-flex ss-flex-col ss-row-center ss-col-center"
|
|
|
- >
|
|
|
- <!-- 7.1 微信小程序的快捷登录 -->
|
|
|
- <view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box">
|
|
|
- <view class="register-title">还没有账号?</view>
|
|
|
- <button class="ss-reset-button login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
|
|
- 快捷登录
|
|
|
- </button>
|
|
|
- <view class="circle" />
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 7.2 微信的公众号、App、小程序的登录,基于 openid + code -->
|
|
|
- <button
|
|
|
- v-if="
|
|
|
- ['WechatOfficialAccount', 'WechatMiniProgram', 'App'].includes(sheep.$platform.name) &&
|
|
|
- sheep.$platform.isWechatInstalled
|
|
|
- "
|
|
|
- @tap="thirdLogin('wechat')"
|
|
|
- class="ss-reset-button auto-login-btn"
|
|
|
- >
|
|
|
- <image
|
|
|
- class="auto-login-img"
|
|
|
- :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
|
|
|
- />
|
|
|
- </button>
|
|
|
-
|
|
|
- <!-- 7.3 iOS 登录 TODO 芋艿:等后面搞 App 再弄 -->
|
|
|
- <button
|
|
|
- v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
|
|
|
- @tap="thirdLogin('apple')"
|
|
|
- class="ss-reset-button auto-login-btn"
|
|
|
- >
|
|
|
- <image
|
|
|
- class="auto-login-img"
|
|
|
- :src="sheep.$url.static('/static/img/shop/platform/apple.png')"
|
|
|
- />
|
|
|
- </button>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 用户协议的勾选 -->
|
|
|
- <!--<view
|
|
|
- v-if="['accountLogin', 'smsLogin'].includes(authType)"
|
|
|
- class="agreement-box ss-flex ss-row-center"
|
|
|
- :class="{ shake: currentProtocol }"
|
|
|
- >
|
|
|
- <label class="radio ss-flex ss-col-center" @tap="onChange">
|
|
|
- <radio
|
|
|
- :checked="state.protocol"
|
|
|
- color="var(--ui-BG-Main)"
|
|
|
- style="transform: scale(0.8)"
|
|
|
- @tap.stop="onChange"
|
|
|
- />
|
|
|
- <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
|
|
|
- 我已阅读并遵守
|
|
|
- <view class="tcp-text" @tap.stop="onProtocol('用户协议')">
|
|
|
- 《用户协议》
|
|
|
- </view>
|
|
|
- <view class="agreement-text">与</view>
|
|
|
- <view class="tcp-text" @tap.stop="onProtocol('隐私协议')">
|
|
|
- 《隐私协议》
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </label>
|
|
|
- </view> -->
|
|
|
- <view class="safe-box"/>
|
|
|
- </view>
|
|
|
- </su-popup>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
- import { computed, reactive, ref } from 'vue';
|
|
|
- import sheep from '@/sheep';
|
|
|
- import accountLogin from './components/account-login.vue';
|
|
|
- import smsLogin from './components/sms-login.vue';
|
|
|
- import resetPassword from './components/reset-password.vue';
|
|
|
- import changeMobile from './components/change-mobile.vue';
|
|
|
- import changePassword from './components/change-password.vue';
|
|
|
- import mpAuthorization from './components/mp-authorization.vue';
|
|
|
- import { closeAuthModal, showAuthModal } from '@/sheep/hooks/useModal';
|
|
|
-
|
|
|
- const appInfo = computed(() => sheep.$store('app').info);
|
|
|
-
|
|
|
- const modalStore = sheep.$store('modal');
|
|
|
- // 授权弹窗类型
|
|
|
- const authType = computed(() => modalStore.auth);
|
|
|
-
|
|
|
- const state = reactive({
|
|
|
- protocol: false,
|
|
|
- });
|
|
|
-
|
|
|
- const currentProtocol = ref(false);
|
|
|
-
|
|
|
- // 勾选协议
|
|
|
- function onChange() {
|
|
|
- state.protocol = !state.protocol;
|
|
|
- }
|
|
|
-
|
|
|
- // 查看协议
|
|
|
- function onProtocol(title) {
|
|
|
- closeAuthModal();
|
|
|
- sheep.$router.go('/pages/public/richtext', {
|
|
|
- title,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 点击登录 / 注册事件
|
|
|
- function onConfirm(e) {
|
|
|
- currentProtocol.value = e;
|
|
|
- setTimeout(() => {
|
|
|
- currentProtocol.value = false;
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- // 第三方授权登陆(微信小程序、Apple)
|
|
|
- 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();
|
|
|
- if (loginRes) {
|
|
|
- closeAuthModal();
|
|
|
- // 触发小程序授权信息弹框
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- showAuthModal('mpAuthorization');
|
|
|
- // #endif
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 微信小程序的“手机号快速验证”:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
|
|
|
- const getPhoneNumber = async (e) => {
|
|
|
- if (e.detail.errMsg !== 'getPhoneNumber:ok') {
|
|
|
- sheep.$helper.toast('快捷登录失败');
|
|
|
- return;
|
|
|
- }
|
|
|
- let result = await sheep.$platform.useProvider().mobileLogin(e.detail);
|
|
|
- if (result) {
|
|
|
- closeAuthModal();
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<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);
|
|
|
- }
|
|
|
-
|
|
|
- .tcp-text {
|
|
|
- color: var(--ui-BG-Main);
|
|
|
- }
|
|
|
-
|
|
|
- .agreement-text {
|
|
|
- color: $dark-9;
|
|
|
- }
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <!-- 规格弹窗 -->
|
|
|
+ <su-popup :show="authType !== ''" round="10" :showClose="true" @close="closeAuthModal">
|
|
|
+
|
|
|
+ <view class="login-wrap">
|
|
|
+ <!-- 标题栏 -->
|
|
|
+ <view class="head-box ">
|
|
|
+ <view class="ss-flex ss-m-b-20">
|
|
|
+
|
|
|
+ <view
|
|
|
+ :class="[isActive=='accountLogin'?`head-title ss-m-r-40 head-title-animation`:`head-title-active ss-m-r-40`]"
|
|
|
+ @tap="isActive='accountLogin';showAuthModal('accountLogin')">
|
|
|
+ 账号登录
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ :class="[isActive=='smsLogin'?`head-title head-title-line head-title-animation`:`head-title-active head-title-line`]"
|
|
|
+ @tap="isActive='smsLogin';showAuthModal('smsLogin')">
|
|
|
+ 短信登录
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 用户协议的勾选 -->
|
|
|
+ <view v-if="['accountLogin', 'smsLogin'].includes(authType)" class="agreement-box ss-flex ss-row-center"
|
|
|
+ :class="{ shake: currentProtocol }">
|
|
|
+ <label class="radio ss-flex ss-col-center" @tap="onChange">
|
|
|
+ <radio :checked="state.protocol" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
|
|
|
+ @tap.stop="onChange" />
|
|
|
+ <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
|
|
|
+ 我已阅读并遵守
|
|
|
+ <view class="tcp-text" @tap.stop="onProtocol('用户协议')">
|
|
|
+ 《用户协议》
|
|
|
+ </view>
|
|
|
+ <view class="agreement-text">与</view>
|
|
|
+ <view class="tcp-text" @tap.stop="onProtocol('隐私协议')">
|
|
|
+ 《隐私协议》
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ <!-- 微信公众号授权登陆 -->
|
|
|
+ <view v-if="['accountLogin', 'smsLogin'].includes(authType)"
|
|
|
+ class="auto-login-box ss-flex ss-flex-col ss-row-center ss-col-center">
|
|
|
+ <view class="wx-login-btn " @tap="thirdLogin('wechat')" v-if=" ['WechatOfficialAccount', 'WechatMiniProgram', 'App'].includes(sheep.$platform.name) && sheep.$platform.isWechatInstalled
|
|
|
+ ">
|
|
|
+
|
|
|
+ <image class=" auto-login-img" :src="sheep.$url.static('/static/img/shop/platform/wechat.png')" />
|
|
|
+
|
|
|
+ <text>微信授权登录</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 1. 账号密码登录 accountLogin -->
|
|
|
+ <account-login v-if="authType === 'accountLogin'" :agreeStatus="state.protocol" @onConfirm="onConfirm" />
|
|
|
+
|
|
|
+ <!-- 2. 短信登录 smsLogin -->
|
|
|
+ <sms-login v-if="authType === 'smsLogin'" :agreeStatus="state.protocol" @onConfirm="onConfirm" />
|
|
|
+
|
|
|
+ <!-- 3. 忘记密码 resetPassword-->
|
|
|
+ <reset-password v-if="authType === 'resetPassword'" />
|
|
|
+
|
|
|
+ <!-- 4. 绑定手机号 changeMobile -->
|
|
|
+ <change-mobile v-if="authType === 'changeMobile'" />
|
|
|
+
|
|
|
+ <!-- 5. 修改密码 changePassword-->
|
|
|
+ <changePassword v-if="authType === 'changePassword'" />
|
|
|
+
|
|
|
+ <!-- 6. 微信小程序授权 -->
|
|
|
+ <mp-authorization v-if="authType === 'mpAuthorization'" />
|
|
|
+
|
|
|
+ <!-- 7. 第三方登录 -->
|
|
|
+ <view v-if="['accountLogin', 'smsLogin'].includes(authType)"
|
|
|
+ class="auto-login-box ss-flex ss-flex-col ss-row-center ss-col-center">
|
|
|
+ <!-- 7.1 微信小程序的快捷登录 -->
|
|
|
+ <view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box">
|
|
|
+ <view class="register-title">还没有账号?</view>
|
|
|
+ <button class="ss-reset-button login-btn" open-type="getPhoneNumber"
|
|
|
+ @getphonenumber="getPhoneNumber">
|
|
|
+ 快捷登录
|
|
|
+ </button>
|
|
|
+ <view class="circle" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 7.2 微信的公众号、App、小程序的登录,基于 openid + code -->
|
|
|
+ <!-- <button
|
|
|
+ v-if="
|
|
|
+ ['WechatOfficialAccount', 'WechatMiniProgram', 'App'].includes(sheep.$platform.name) &&
|
|
|
+ sheep.$platform.isWechatInstalled
|
|
|
+ "
|
|
|
+ @tap="thirdLogin('wechat')"
|
|
|
+ class="ss-reset-button auto-login-btn"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ class="auto-login-img"
|
|
|
+ :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
|
|
|
+ />
|
|
|
+ </button> -->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 7.3 iOS 登录 TODO 芋艿:等后面搞 App 再弄 -->
|
|
|
+ <button v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'" @tap="thirdLogin('apple')"
|
|
|
+ class="ss-reset-button auto-login-btn">
|
|
|
+ <image class="auto-login-img" :src="sheep.$url.static('/static/img/shop/platform/apple.png')" />
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="safe-box" />
|
|
|
+ </view>
|
|
|
+ </su-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ computed,
|
|
|
+ reactive,
|
|
|
+ ref
|
|
|
+ } from 'vue';
|
|
|
+ import sheep from '@/sheep';
|
|
|
+ import accountLogin from './components/account-login.vue';
|
|
|
+ import smsLogin from './components/sms-login.vue';
|
|
|
+ import resetPassword from './components/reset-password.vue';
|
|
|
+ import changeMobile from './components/change-mobile.vue';
|
|
|
+ import changePassword from './components/change-password.vue';
|
|
|
+ import mpAuthorization from './components/mp-authorization.vue';
|
|
|
+ import {
|
|
|
+ closeAuthModal,
|
|
|
+ showAuthModal
|
|
|
+ } from '@/sheep/hooks/useModal';
|
|
|
+
|
|
|
+ const appInfo = computed(() => sheep.$store('app').info);
|
|
|
+
|
|
|
+ const modalStore = sheep.$store('modal');
|
|
|
+ // 授权弹窗类型
|
|
|
+ const authType = computed(() => modalStore.auth);
|
|
|
+
|
|
|
+ const state = reactive({
|
|
|
+ protocol: false,
|
|
|
+ });
|
|
|
+ const isActive = ref("accountLogin")
|
|
|
+ const currentProtocol = ref(false);
|
|
|
+
|
|
|
+ // 勾选协议
|
|
|
+ function onChange() {
|
|
|
+ state.protocol = !state.protocol;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 查看协议
|
|
|
+ function onProtocol(title) {
|
|
|
+ closeAuthModal();
|
|
|
+ sheep.$router.go('/pages/public/richtext', {
|
|
|
+ title,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击登录 / 注册事件
|
|
|
+ function onConfirm(e) {
|
|
|
+ currentProtocol.value = e;
|
|
|
+ setTimeout(() => {
|
|
|
+ currentProtocol.value = false;
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 第三方授权登陆(微信小程序、Apple)
|
|
|
+ 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();
|
|
|
+ if (loginRes) {
|
|
|
+ closeAuthModal();
|
|
|
+ // 触发小程序授权信息弹框
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ showAuthModal('mpAuthorization');
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 微信小程序的“手机号快速验证”:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
|
|
|
+ const getPhoneNumber = async (e) => {
|
|
|
+ if (e.detail.errMsg !== 'getPhoneNumber:ok') {
|
|
|
+ sheep.$helper.toast('快捷登录失败');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let result = await sheep.$platform.useProvider().mobileLogin(e.detail);
|
|
|
+ if (result) {
|
|
|
+ closeAuthModal();
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<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);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tcp-text {
|
|
|
+ color: var(--ui-BG-Main);
|
|
|
+ }
|
|
|
+
|
|
|
+ .agreement-text {
|
|
|
+ color: $dark-9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wx-login-btn {
|
|
|
+ width: 100%;
|
|
|
+ border: 1rpx solid #55b774;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin: 0 0 0.625rem 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-left: 20rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .agreement-box {
|
|
|
+ margin: 40rpx;
|
|
|
+ }
|
|
|
+</style>
|