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