mall-front-app/sheep/components/s-auth-modal/s-auth-modal.vue

<template>
	<!-- 规格弹窗 -->
	<su-popup :show="authType !== ''" round="10" :showClose="true" @close="closeAuthModal">
		<view class="login-wrap">
			<!-- 标题栏 -->
			<view class="head-box " v-if="['smsLogin', 'accountLogin','register'].includes(authType)">
				<view class="ss-flex ss-m-b-20">
					<view
						:class="[isActive=='smsLogin'?`head-title ss-m-r-40 head-title-animation`:`head-title-active ss-m-r-40`]"
						@tap="isActive='smsLogin';showAuthModal('smsLogin')">
						
						短信登录
					</view>
					<view
						:class="[isActive=='accountLogin' ?`head-title head-title-line head-title-animation ss-m-r-40`:` ss-m-r-40 head-title-active head-title-line`]"
						@tap="isActive='accountLogin';showAuthModal('accountLogin','accountLogin')">
						
						账号登录
					</view>
					<view
						:class="[isActive=='register' ?`head-title head-title-line head-title-animation`:`head-title-active head-title-line`]"
						@tap="isActive='register';showAuthModal('register','register')">
						
						注册
					</view>
				</view>
			</view>
			<!-- 用户协议的勾选 -->
			<view v-if="[ 'smsLogin','accountLogin','register'].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/images/wechat.png')" />

					<text>微信授权登录</text>
				</view>
			</view>
			<!-- 微信公众号授权登陆 在账号注册中显示 -->
			<view v-if="['register'].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/images/wechat.png')" />
			
					<text>微信授权注册</text>
				</view>
			</view>
			<!-- 1. 微信公众号授权登录 第一次登陆时弹窗绑定手机号 accountLogin -->
			<officialAccountFirstLogin v-if="authType === 'officialAccountFirstLogin'" :agreeStatus="state.protocol" @onConfirm="onConfirm" />
			
			<!-- 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" />
			
			<!-- 注册 -->
			<register v-if="authType === 'register'" :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/images/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/images/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 register from './components/register.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 officialAccountFirstLogin from './components/officialAccountFirstLogin'
	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 isActive = computed(() => modalStore.isActive)
	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;
	}

	.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>