login.uvue

<template>
	<view class="page">
		<!-- 顶部文字 -->
		<!-- <text class="title">请选择登录方式{{loginType}}--isAgree:{{pendingAgreements}}</text> -->

		<!--  应用图标 -->
		<image class="app-logo" :src="logo" mode="aspectFit"></image>

    <!-- 苹果账号 微信账号 微信账号手机号 登录 -->
    <view class="big-login-box" v-if="['apple','weixin', 'weixinMobile'].includes(loginType)">
      <text class="tip">将根据第三方账号服务平台的授权范围获取你的信息</text>
      <image v-if="loginType !== 'weixinMobile'" @click="login" :src="imgSrc" mode="widthFix" class="big-login-img">
      </image>
      <button v-else type="primary" open-type="getmobileNumber" @getmobilenumber="login"
        class="uni-btn">微信授权手机号登录</button>
      <!-- 同意隐私政策协议 -->
      <uni-id-pages-x-agreements class="agreements-box" scope="login" />
    </view>

		<!-- 密码登录 -->
		<uni-id-pages-x-loginByPwd v-if="loginType == 'username'" />

		<!-- 手机号验证码登录 -->
		<uni-id-pages-x-loginBySmsCode v-if="loginType == 'smsCode'" />

		<!-- 固定定位的快捷登录按钮 -->
		<uni-id-pages-x-fab-login :currentLoginType="loginType"
			@changeLoginType="changeLoginType"></uni-id-pages-x-fab-login>

	</view>
</template>

<script>
	import { state } from '@/uni_modules/uni-id-pages-x/store.uts';
	import config from '@/uni_modules/uni-id-pages-x/config.uts';
	export default {
		computed: {
			//大快捷登录按钮图
			imgSrc() : string {
				return this.loginType == 'weixin' ? '/uni_modules/uni-id-pages-x/static/login/weixin.png' : '/uni_modules/uni-id-pages-x/static/app/apple.png'
			},
			pendingAgreements() : boolean {
				return state.pendingAgreements
			}
		},
		data() {
			return {
				loginType: "username" as string,
				logo: "/static/logo.png"
			}
		},
		onLoad(param : Map<string, string>) {
			const type = param.get("type")
			// 如果传递了参数就按参数指定的登录方式，否则指定为 config 中配置的第一项
			if (type != null) {
				this.loginType = type
			} else {
				let loginTypes = config.getArray<string>("loginTypes");
				this.loginType = loginTypes![0];
			}
		},
		methods: {
			login() {

			},
			changeLoginType(type : string) {
				// if (["weixin", "apple", "univerify"].includes(type)) {
				// }
				this.loginType = type
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("/uni_modules/uni-id-pages-x/common/common.scss");

	.app-logo {
		width: 150rpx;
		height: 150rpx;
		margin: 30px 300rpx;
	}

	.big-login-box .agreements-box {
		justify-content: center;
	}

	.big-login-img {
		margin: 10px 25rpx;
		height: 60px;
		width: 700rpx;
	}
</style>