youxi-app/pages/user/login.uvue

<template>
	<cl-page>
		<Back />
		<img src="/static/home/1.jpg" alt="" class="w-full h-full object-cover">
		<view class="title">
			少儿物理启蒙
		</view>
		<view class="group">
			<cl-image src="/static/home/8.png" width="150px" height="150px" mode="heightFix" />
			<view class="w-[40vw]">
				<cl-tabs v-model="val" :list="list" :form="formData" @change="tabsChange"></cl-tabs>
				<cl-form v-model="formData" :pt="{ className: 'mt-1' }">
					<view v-if="val === 'quickly_login'">
						<phone :form="formData" />
					</view>
					<view v-else>
						<password :form="formData" />
					</view>
					<cl-button :pt="{ className: '!h-[45px] !rounded-full w-[200px] mx-auto' }" :loading="loading" @tap="toLogin">
						登录
					</cl-button>
				</cl-form>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import Back from '@/components/back.uvue'
import type { LoginForm } from "./components/types";
import phone from './components/phone.uvue';
import password from './components/password.uvue';
import { ref } from 'vue'
import type { ClTabsItem } from "@/uni_modules/cool-ui";
import { encryptPassword, user, router } from '@/.cool';
import { loginApi } from "@/services/user";
const val = ref('quickly_login')
const list: ClTabsItem[] = [
	{
		label: '验证码登录',
		value: 'quickly_login'
	},
	{
		label: '密码登录',
		value: 'password'
	},
]
const formData = ref<LoginForm>({
	username: 'xiongchao',
	password: '123456',
	randomStr: 0,
	grant_type: 'quickly_login',
	scope: 'server',
	loginType: 99,
	code: ''
})
const loading = ref(false)
function tabsChange() {
	if (val.value === 'quickly_login') {
		formData.value.code = ''
		formData.value.loginType = 99
		formData.value.grant_type = 'quickly_login'
		formData.value.password = ''
	} else {
		formData.value.grant_type = 'password'
		formData.value.password = ''
		formData.value.loginType = 1
		formData.value.code = ''
	}
}
function toLogin() {
	// loading.value = true
	console.log(formData.value);
	loginApi({
		...formData.value,
		password: formData.value.password && encryptPassword(formData.value.password),
	}).then(res => {
		user.setToken(res)
		uni.showToast({
			title: '登录成功',
			icon: 'success'
		})
		router.nextLogin();
	})

}
</script>

<style lang="scss" scoped>
.title {
	position: absolute;
	top: 6%;
	left: 50%;
	transform: translateX(-50%);
	//设置字间距
	letter-spacing: 0.1em;
	@apply text-white text-5xl font-bold;
}

.group {
	@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-4 py-2 rounded-xl;
	display: flex;
	align-items: center;
	flex-direction: row;
	height: 60vh;
}
</style>