youxi-app/pages/user/login.uvue

<template>
	<cl-page>
		<Back />
		<!-- <cl-image src="https://oss.xiaoxiongcode.com/static/home/1.jpg" mode="heightFix" class="w-full h-full object-cover"
			height="100%" width="100%" /> -->
		<view class="content">
			<view class="title">
				<cl-image src="https://oss.xiaoxiongcode.com/static/home/logo.png" width="120px" height="120px"
					mode="heightFix" />

				<cl-text :size="20" color="#666">
					少儿物理启蒙
				</cl-text>
			</view>
			<view class="group">

				<view class="w-[80vw]">
					<!-- <cl-tabs v-model="val" :list="list" fill :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 mb-5">
							<cl-button :pt="{ className: '!h-[45px] !rounded-full w-[200px] mx-auto' }" :loading="loading"
								@tap="toLogin">
								登录
							</cl-button>
						</view>

					</cl-form>
				</view>
			</view>
			<view class="absolute bottom-20 w-full flex flex-row  gap-4 items-center justify-center">
				<view>
					<cl-button type="success" :pt="{ className: '!h-[40px] !rounded-full w-[40px] mx-auto !p-1' }"
						:loading="loading" @tap="toWechatLogin">
						<cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" mode="heightFix" height="20px"
							width="auto"></cl-image>
					</cl-button>
					<view class="mt-1">
						<cl-text :size="14" color="#666">
							微信登录
						</cl-text>
					</view>
				</view>
				<view v-if="val === 'password'">
					<cl-button type="info" :pt="{ className: '!h-[40px] !rounded-full w-[40px] mx-auto !p-1' }" :loading="loading"
						@tap="tabsChange('quickly_login')">
						<cl-image src="https://oss.xiaoxiongcode.com/static/home/phone.svg" mode="heightFix" height="20px"
							width="auto"></cl-image>
					</cl-button>
					<view class="mt-1">
						<cl-text :size="14" color="#666">
							验证码登录
						</cl-text>
					</view>
				</view>
				<view v-else>
					<cl-button type="info" :pt="{ className: '!h-[40px] !rounded-full w-[40px] mx-auto !p-1' }" :loading="loading"
						@tap="tabsChange('password')">
						<cl-image src="https://oss.xiaoxiongcode.com/static/home/password.svg" mode="heightFix" height="20px"
							width="auto"></cl-image>
					</cl-button>
					<view class="mt-1">
						<cl-text :size="14" color="#666">
							密码登录
						</cl-text>
					</view>
				</view>
			</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(type: string) {
	val.value = type
	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);
				if (res.length === 0) {
					uni.showToast({
						title: '请先绑定账号',
						icon: 'none'
					})
					return
				} else if (res.length === 1) {
					handleSelect(res[0])
					return
				}
				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>
.content {
	@apply w-full h-full;
	// 渐变背景
	background: linear-gradient(180deg, #169deb5e 0%, #fff 20%);
}

.title {
	position: absolute;
	top: 10%;
	//设置字间距
	letter-spacing: 0.1em;
	@apply flex flex-col w-full items-center justify-center;
}

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