|
|
@@ -4,40 +4,46 @@
|
|
|
<!-- <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="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" :pt="{ className: 'mt-1' }">
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
+ <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"
|
|
|
- :pt="{ className: '!h-[45px] !rounded-full w-[200px] mx-auto' }" :loading="loading"
|
|
|
- @tap="toLogin">
|
|
|
+ :pt="{ className: '!h-[45px] !rounded-full w-[200px] mx-auto' }" :loading="loading" @tap="toLogin">
|
|
|
登录
|
|
|
</cl-button>
|
|
|
</view>
|
|
|
@@ -75,10 +81,10 @@
|
|
|
</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 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">
|
|
|
@@ -87,10 +93,10 @@
|
|
|
</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 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">
|
|
|
@@ -99,6 +105,12 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view v-if="val !== 'register'"
|
|
|
+ class="absolute bottom-12 w-full flex flex-row gap-4 items-center justify-center">
|
|
|
+ <cl-text :size="14" color="primary" @tap="tabsChange('register')">
|
|
|
+ 注册账号
|
|
|
+ </cl-text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<cl-action-sheet ref="actionSheetRef">
|
|
|
<template #prepend>
|
|
|
@@ -115,14 +127,13 @@
|
|
|
}
|
|
|
}">
|
|
|
<view class="w-[330px] relative">
|
|
|
- <image src="https://oss.xiaoxiongcode.com/static/home/6172.png" mode="widthFix"
|
|
|
- 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>
|
|
|
@@ -134,19 +145,21 @@ 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 } from "@/services/user";
|
|
|
+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: ClTabsItem[] = [
|
|
|
+const list = [
|
|
|
{
|
|
|
label: '验证码登录',
|
|
|
value: 'quickly_login'
|
|
|
@@ -159,6 +172,10 @@ const list: ClTabsItem[] = [
|
|
|
label: '微信登录',
|
|
|
value: 'weixin'
|
|
|
},
|
|
|
+ {
|
|
|
+ label: '注册账号',
|
|
|
+ value: 'register'
|
|
|
+ }
|
|
|
]
|
|
|
const formData = ref<LoginForm>({
|
|
|
username: '',
|
|
|
@@ -184,34 +201,64 @@ function tabsChange(type: string) {
|
|
|
formData.value.code = ''
|
|
|
}
|
|
|
}
|
|
|
+async function toRegister() {
|
|
|
+ validate(async (valid, errors) => {
|
|
|
+ if (valid) {
|
|
|
+ try {
|
|
|
+ await selfRegister(formData.value)
|
|
|
+ uni.showToast({
|
|
|
+ title: '注册成功',
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
+ handleSelect(formData.value.username)
|
|
|
+ } catch (error) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '注册失败',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 验证不通过，可以提示错误信息 errors
|
|
|
+ console.log(formData.value, 2);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
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.home();
|
|
|
- }).catch(err => {
|
|
|
- if (err.message == '手机号不存在' && val.value === 'quickly_login') {
|
|
|
- quicklyRegister({
|
|
|
- username: formData.value.username,
|
|
|
- password: 'ba3253876aed6bc22d4a6ff53d8406c6ad864195ed144ab5c87621b6c233b548baeae6956df346ec8c17f5ea10f35ee3cbc514797ed7ddd3145464e2a0bab413',
|
|
|
+ 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 => {
|
|
|
- handleSelect(formData.value.username)
|
|
|
+ user.setToken(res)
|
|
|
+ uni.showToast({
|
|
|
+ title: '登录成功',
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
+ router.home();
|
|
|
+ }).catch(err => {
|
|
|
+ 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 {
|
|
|
- uni.showToast({
|
|
|
- title: err.message,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
+ // 验证不通过，可以提示错误信息 errors
|
|
|
+ loading.value = false
|
|
|
+ console.log(formData.value, 2);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
function handleClosePopup() {
|
|
|
visible.value = false
|
|
|
@@ -297,17 +344,17 @@ function toPrivacy() {
|
|
|
|
|
|
|
|
|
.title {
|
|
|
- position: absolute;
|
|
|
- top: 10%;
|
|
|
//设置字间距
|
|
|
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 bg-white px-4 py-2 pb-10 rounded-xl;
|
|
|
+ @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: 80%;
|
|
|
align-items: center;
|
|
|
- flex-direction: row;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
</style>
|
