youxi-app/pages/user/login.uvue

<template>
	<cl-page>
		<Back />
		<img src="https://oss.xiaoxiongcode.com/static/home/1.jpg" alt="" class="w-full h-full object-cover">
		<view class="title">
			少儿物理启蒙
		</view>
		<view class="group">
			<cl-image src="https://oss.xiaoxiongcode.com/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>
					<view class="flex flex-row items-center justify-center gap-4">
						<cl-button :pt="{ className: '!h-[45px] !rounded-full w-[140px] mx-auto' }" :loading="loading"
							@tap="toLogin">
							登录
						</cl-button>
						<cl-button type="success" :pt="{ className: '!h-[45px] !rounded-full w-[140px] mx-auto ' }"
							:loading="loading" @tap="toWechatLogin">
							<view class="flex flex-row items-center justify-center gap-2">
								<cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" mode="heightFix" height="20px"
									width="auto"></cl-image> 登录
							</view>
						</cl-button>
					</view>
				</cl-form>
			</view>
		</view>
		<cl-action-sheet ref="actionSheetRef">
			<template #prepend>
				<view class=" mb-3 font-bold text-center">
					<cl-text :size="20" color="#666">
						选择登录账号
					</cl-text>
				</view>
			</template>
		</cl-action-sheet>
	</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, wechatLogin } from "@/services/user";
import type { ClActionSheetOptions } from "@/uni_modules/cool-ui";

const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);

const val = ref('quickly_login')
const list: ClTabsItem[] = [
	{
		label: '验证码登录',
		value: 'quickly_login'
	},
	{
		label: '密码登录',
		value: 'password'
	},
]
const formData = ref<LoginForm>({
	username: '',
	password: '',
	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();
	})

}
function toWechatLogin() {
	uni.login({
		provider: 'weixin',
		success(res) {
			wechatLogin({
				code: res.code,
			}).then(res => {
				console.log(res);
				const list = res.map(item => ({
					label: item,
					icon: "user-line",
					callback() {
						handleSelect(item)
					}
				}))
				actionSheetRef.value!.open({
					list: list
				} as ClActionSheetOptions);
			})
		}
	})
}
function handleSelect(item: string) {
	formData.value.username = item
	formData.value.password = 'quickly_login'
	formData.value.grant_type = 'quickly_login'
	formData.value.loginType = 88
	loginApi({
		...formData.value,
	}).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>