wanzai_school_app/pages/login2/login2.vue

<template>
	<view class="container">
		<!-- 图片区域 -->
		<img class="img" src="@/static/images/1.png" />
		<!-- 文字区域 -->
		<view class="title">在校生活、高效管理</view>
		<view class="text">辅助老师进行教务工作，家长全面了解在校活动，保障孩子在校安全</view>

		<!-- 按钮区域 -->
		<button class="btn fast" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">快捷登录</button>

		<view class="btn other" @click="handleOther">其他登录</view>
	</view>
</template>

<script setup>
import { myRequest } from '@/utils/api.js'
import { decryptDes } from '@/utils/des.js'

// 点击快捷登录按钮回调
const getPhoneNumber = (e) => {
	// console.log(e)
	if (e.detail.code) {
		getPhone(e.detail.code)
	} else {
		uni.showToast({
			title: '授权失败，请选择其他方式登录',
			icon: 'none'
		})
	}
}

// 获取用户手机号码
const getPhone = async (code) => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/getWechatPhone',
		data: {
			code
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	let phone = JSON.parse(result).phone
	// console.log(phone)

	handleLogin(phone)
}

// 登录按钮回调
const handleLogin = (phone) => {
	uni.login({
		success: (res) => {
			// console.log(res)
			getBind(res.code, phone)
		}
	})
}

const getBind = async (wxcode, phone) => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/vertifyMessage',
		data: {
			phone,
			wxcode,
			loginType: 2
		}
	})
	// console.log(res)
	const msg = JSON.parse(decryptDes(res.data))
	// console.log(msg)

	uni.setStorageSync('allData', msg)

	if (msg.user.length > 1) {
		let info = encodeURIComponent(JSON.stringify(msg))
		uni.reLaunch({
			url: `/pages/switch/switch?info=${info}`
		})
	} else {
		// 1 代表家长  2 代表学生  3 代表老师
		uni.setStorageSync('token', msg.token)
		uni.setStorageSync('userhead', msg.user[0].userhead)
		uni.setStorageSync('userInfo', msg.user[0])

		uni.reLaunch({
			url: '/pages/home/home'
		})
	}
}

// 点击其他登录按钮回调
const handleOther = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	})
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	background-color: #f8f8fa;

	.img {
		margin-top: 44rpx;
		width: 515rpx;
		height: 515rpx;
	}

	.title {
		width: 515rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}

	.text {
		margin-top: 20rpx;
		width: 515rpx;
		font-size: 28rpx;
		color: #808080;
		text-align: center;
		line-height: 40rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 670rpx;
		height: 100rpx;
		font-size: 32rpx;
		border-radius: 8rpx;
	}

	.fast {
		margin-top: 80rpx;
		color: #fff;
		background-color: #0061ff;
	}

	.other {
		margin-top: 50rpx;
		border: 2rpx solid #000;
	}
}
</style>