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="group">
				<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="w-[80vw]">
					<!-- <cl-tabs v-model="val" :list="list" fill :form="formData" @change="tabsChange"></cl-tabs> -->
					<cl-form v-model="formData" ref="formRef" :pt="{ className: 'mt-1' }">
						<view v-if="val === 'quickly_login'">
							<phone :form="formData" />
						</view>
						<view v-else-if="val === 'password'">
							<password :form="formData" />
						</view>
						<view v-else-if="val === 'register'">
							<register :form="formData" />
						</view>

						<view class="flex flex-row items-center justify-center mb-5">
							<cl-button v-if="val === 'weixin'"
								:pt="{ className: '!h-[45px] !rounded-full w-[200px] mx-auto' }" type="success"
								@tap="toWechatLogin">
								<view class="flex flex-row items-center justify-center">
									<cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" mode="heightFix"
										height="20px" width="auto"></cl-image>
									<view class="ml-2">
										微信快捷登录
									</view>
								</view>
							</cl-button>
							<cl-button v-else-if="val === 'register'" :disabled="!agree || !agree2"
								:pt="{ className: '!h-[45px] !rounded-full w-[200px] mx-auto' }" :loading="loading"
								@tap="toRegister">
								注册并登录
							</cl-button>
							<cl-button v-else
								:disabled="!agree || !agree2 || (formData.grant_type == 'quickly_login' && formData.code == '')"
								:pt="{ className: '!h-[45px] !rounded-full w-[200px] mx-auto' }" :loading="loading"
								@tap="toLogin">
								登录
							</cl-button>
						</view>
						<cl-checkbox v-model="agree" v-if="val !== 'weixin'">
							<view class="flex flex-row items-center w-full text-[12px]">
								同意并阅读
								<cl-text :size="12" color="primary" @tap.stop="toAgreement">
									《用户服务协议》
								</cl-text>

							</view>
						</cl-checkbox>
						<cl-checkbox v-model="agree2" v-if="val !== 'weixin'">
							<view class="flex flex-row items-center w-full text-[12px]">
								同意并阅读
								<cl-text :size="12" color="primary" @tap.stop="toPrivacy">
									《隐私政策》
								</cl-text>
							</view>
						</cl-checkbox>
					</cl-form>
				</view>
				<view>
					<view class=" w-full flex flex-row  gap-4 items-center justify-center mb-4">
						<view v-if="val !== 'weixin'">
							<cl-button type="success"
								:pt="{ className: '!h-[40px] !rounded-full w-[40px] mx-auto !p-1' }" :loading="loading"
								@tap="tabsChange('weixin')">
								<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 !== 'quickly_login'">
							<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-if="val !== 'password'">
							<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 v-if="val !== 'register'" class="  w-full flex flex-row  gap-4 items-center justify-center">
						<cl-text :size="14" color="primary" @tap="tabsChange('register')">
							注册账号
						</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-popup v-model="visible" showClose :show-header="false" direction="center" :pt="{
			inner: {
				className: '!bg-transparent'
			}
		}">
			<view class="w-[330px]  relative">
				<image src="https://oss.xiaoxiongcode.com/static/home/6172.png" mode="widthFix"
					class="w-[330px]  relative ">
				</image>
				<view class=" wz-1  ">
					当前微信账号，<br />尚未绑定，<br />无法快捷登录
				</view>
				<view class="wz-2  " @tap="handleClosePopup">
					立即登录
				</view>
			</view>
		</cl-popup>
	</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 register from './components/register.uvue';
import { ref } from 'vue'
import type { ClTabsItem } from "@/uni_modules/cool-ui";
import { encryptPassword, user, router } from '@/.cool';
import { loginApi, wechatLogin, quicklyRegister, selfRegister } from "@/services/user";
import type { ClActionSheetOptions } from "@/uni_modules/cool-ui";
import { type ClFormRule, useForm } from "@/uni_modules/cool-ui";

const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);
const visible = ref(false)
const { formRef, validate, clearValidate } = useForm();
const val = ref('weixin')
const agree = ref(false)
const agree2 = ref(false)
const list = [
	{
		label: '验证码登录',
		value: 'quickly_login'
	},
	{
		label: '密码登录',
		value: 'password'
	},
	{
		label: '微信登录',
		value: 'weixin'
	},
	{
		label: '注册账号',
		value: 'register'
	}
]
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 = ''
	}
}
async function toRegister() {
	validate(async (valid, errors) => {
		if (valid) {
			loading.value = true
			try {
				await selfRegister({
					...formData.value,
					password: formData.value.password && encryptPassword(formData.value.password),
				})
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				handleSelect(formData.value.username)
				loading.value = false
			} catch (error) {
				loading.value = false
			}
		} else {
			// 验证不通过，可以提示错误信息 errors
			console.log(formData.value, 2);
		}
	});
}
function toLogin() {
	loading.value = true
	validate((valid, errors) => {
		if (valid) {
			console.log(formData.value);
			loginApi({
				...formData.value,
				password: formData.value.password && encryptPassword(formData.value.password),
			}).then(res => {
				user.setToken(res)
				loading.value = false
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				router.home();
			}).catch(err => {
				loading.value = false
				if (err.message == '手机号不存在' && val.value === 'quickly_login') {
					quicklyRegister({
						username: formData.value.username,
						password: 'ba3253876aed6bc22d4a6ff53d8406c6ad864195ed144ab5c87621b6c233b548baeae6956df346ec8c17f5ea10f35ee3cbc514797ed7ddd3145464e2a0bab413',
					}).then(res => {
						handleSelect(formData.value.username)
					})
				} else {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				}
			})
		} else {
			// 验证不通过，可以提示错误信息 errors
			loading.value = false
			console.log(formData.value, 2);
		}
	});
}
function handleClosePopup() {
	visible.value = false
	tabsChange('quickly_login')
}
function toWechatLogin() {
	uni.login({
		provider: 'weixin',
		success(res) {
			wechatLogin({
				code: res.code,
			}).then(res => {
				console.log(res);
				if (res.length === 0) {
					visible.value = true
					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.home();
	})

}
function toAgreement() {
	router.push({
		path: '/pages/user/agreement'
	})
}
function toPrivacy() {
	router.push({
		path: '/pages/user/privacy'
	})
}
</script>

<style lang="scss" scoped>
.content {
	@apply w-full h-full;
	// 渐变背景
	background: linear-gradient(180deg, #169deb5e 0%, #fff 20%);
}

.wz-1 {
	@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-black text-3xl font-bold w-[300px] text-center;
	line-height: 40px;
}

.wz-2 {
	@apply absolute bottom-[12px] text-black text-2xl font-bold text-center;
	line-height: 40px;
	left: 50%;
	transform: translateX(-50%);
}



.title {
	//设置字间距
	letter-spacing: 0.1em;
	margin-bottom: 20px;
	@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 px-4 py-2 pb-10 rounded-xl;
	display: flex;
	height: 100%;
	align-items: center;
	flex-direction: column;
	justify-content: space-around;
}
</style>