match_applet/pages/login/index.vue

<template>
	<view class="content">
		<view class="wx">
			<view class="wx_1">
				<text class="iconfont icon-weixin"></text>
			</view>
			<view class="wx_2">
				<button size="mini" @tap="otherLogin('wx')">微信信任登录</button>
			</view>
			<view class="wx_3">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox :checked="agree" />
						<text @tap.stop="toAgree()">我已阅读并同意“用户协议”和“隐私政策”</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import moment from 'moment';
	import { getCurrentInstance, computed, ref } from 'vue';
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// openid
	const openid = computed(() => {
		return uni.getStorageSync('openid');
	})
	// 用户协议
	const agree = ref(false);
	// 其他登录方式
	const otherLogin = () => {
		if (agree.value) {
			if (openid.value) {
				uni.getUserProfile({
					desc: '用于展示',
					success: async function (res) {
						let parmas = {
							openid: openid.value,
							icon: res.userInfo.avatarUrl,
							nickname: res.userInfo.nickName + moment().valueOf()
						}
						const arr = await that.$api(`matchUser`, 'POST', parmas);
						if (arr.code === 200) {
							uni.setStorage({
								key: 'user',
								data: arr.data,
								success: function () {
									uni.navigateBack({
										delta: 1
									})
								}
							});
						} else {
							uni.showToast({
								title: arr.msg,
								icon: 'error'
							});
						}
					},
					fail: function (err) {
						console.log(err);
					}
				})
			} else {
				uni.showToast({
					title: '系统更新中，请稍后再试!',
					icon: 'none'
				})
			}
		} else {
			uni.showToast({
				title: '请阅读并同意用户协议和隐私政策',
				icon: 'none'
			})
		}
	};
	// 查看隐私协议
	const toAgree = () => {
		uni.navigateTo({
			url: `/pagesHome/agree/index`
		})
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;

		.wx {
			text-align: center;
			margin: 25vw 0 0 0;

			.wx_1 {
				margin: 0 0 5vw 0;

				text {
					font-size: 50px;
					color: var(--f35BColor);
				}
			}

			.wx_2 {
				button {
					background: var(--f35BColor);
					color: var(--fffColor);
					font-size: var(--font16Size);
				}
			}

			.wx_3 {
				position: absolute;
				bottom: 10vw;
				width: 100vw;
				text-align: center;
				font-size: 12px;
			}

		}
	}
</style>