cytx_mp/pages/login/index.vue

<template>
	<view class="page">
		<view class="logo-area">
			<image class="logo" src="https://cdn.csybhelp.com/images/cytx/logo.png" mode="aspectFit" />
			<text class="title">肠愈同行</text>
			<text class="subtitle">患者关爱</text>
		</view>

		<view class="btn-area">
			<button class="login-btn" @tap="handleLogin" :loading="loading">
				微信一键登录
			</button>
			<view class="tip">登录即表示同意
				<text class="link" @tap="goPrivacy">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { post } from '@/utils/request.js'
import { setToken, setUserInfo } from '@/utils/cache.js'

const loading = ref(false)

const handleLogin = async () => {
	if (loading.value) return
	loading.value = true
	try {
		const code = await new Promise((resolve, reject) => {
			uni.login({
				provider: 'weixin',
				success: (res) => resolve(res.code),
				fail: () => reject({ msg: '微信登录失败' })
			})
		})
		const res = await post('/api/mp/login', { code })
		setToken(res.data.token)
		setUserInfo(res.data.userInfo)
		uni.showToast({ title: '登录成功', icon: 'success' })
		setTimeout(() => {
			const pages = getCurrentPages()
			if (pages.length > 1) {
				uni.navigateBack()
			} else {
				uni.switchTab({ url: '/pages/profile/profile' })
			}
		}, 500)
	} catch (e) {
		if (e && e.msg) uni.showToast({ title: e.msg, icon: 'none' })
	} finally {
		loading.value = false
	}
}

const goPrivacy = () => {
	uni.navigateTo({ url: '/pages/content/content?key=privacy_policy' })
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 25vh;
}

.logo-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 80rpx;

	.logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 24rpx;
		margin-bottom: 32rpx;
	}

	.title {
		font-size: 44rpx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 8rpx;
	}

	.subtitle {
		font-size: 26rpx;
		color: #b0b3b8;
		letter-spacing: 2rpx;
	}


}

.btn-area {
	width: 100%;
	padding: 0 64rpx;
	box-sizing: border-box;

	.login-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #0F78E9;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		border: none;

		&::after {
			border: none;
		}

		&:active {
			opacity: 0.85;
		}
	}

	.tip {
		text-align: center;
		font-size: 24rpx;
		color: #909399;
		margin-top: 32rpx;

		.link {
			color: #0F78E9;
		}
	}
}
</style>