新版本官网优化完成

pages/passport/login.vue

@@ -3,24 +3,21 @@
     <div class="flash">
 
     </div>
-    <el-card class="m-5 w-screen-sm sm:w-[430px] sm:h-[520px] flex justify-around relative border-0" style="border: 0;">
-      <div class="login-bar absolute top-0 right-0 cursor-pointer" @click="onLoginBar">
+    <el-card class="m-5 w-screen-sm sm:w-[420px] sm:h-[450px] flex justify-around relative border-0" style="border: 0;">
+      <div class="login-bar absolute top-0 right-0 cursor-pointer">
         <div class="go-to-register cursor-pointer">
-          <img src="https://img.alicdn.com/imgextra/i3/O1CN01yz6fEl1MwaRtkJyvf_!!6000000001499-55-tps-70-70.svg" alt=""/>
+          <img src="/assets/images/O1CN01yz6fEl1MwaRtkJyvf_!!6000000001499-55-tps-70-70.svg" alt=""/>
         </div>
-        <span class="absolute top-3 right-1.5 text-sm text-white font-bold cursor-pointer">{{ loginBar ? '注册' : '登录' }}</span>
+        <span class="absolute top-3.5 right-2 text-sm text-white font-bold cursor-pointer"><el-icon size="20"><FullScreen /></el-icon></span>
       </div>
       <!-- 登录界面 -->
-      <el-space class="tabs pt-5 text-xl flex justify-center" v-if="loginBar">
-        <el-tabs v-model="activeName" class="demo-tabs ">
-          <el-tab-pane label="账号登录" name="account">
+      <el-space class="tabs pt-3 text-xl flex justify-center" v-if="loginBar">
+        <el-tabs v-model="activeName" class="">
+          <el-tab-pane label="密码登录" name="account">
             <div class="custom-style my-4">
               <el-form :model="form" label-width="auto" class="w-[330px]">
-<!--                <el-form-item>-->
-<!--                  <el-input class="w-full" size="large" placeholder="租户ID" :prefix-icon="Shop" v-model="form.tenantId" />-->
-<!--                </el-form-item>-->
                 <el-form-item>
-                  <el-input class="w-full" size="large" placeholder="登录账号" :prefix-icon="Avatar" v-model="form.username" />
+                  <el-input class="w-full" size="large" placeholder="登录账号" maxlength="20" :prefix-icon="Avatar" v-model="form.username" />
                 </el-form-item>
                 <el-form-item>
                   <el-input type="password" size="large" maxlength="100" placeholder="登录密码" :prefix-icon="Briefcase" v-model="form.password" />
@@ -67,20 +64,15 @@
         </el-tabs>
       </el-space>
       <!-- 快捷登录 --->
-      <template v-if="loginBar && activeName == 'account'">
-<!--        <div class="clearfix flex justify-center">-->
-<!--          <el-divider>-->
-<!--            <span class="text-gray-400">其他登录方式</span>-->
-<!--          </el-divider>-->
-<!--        </div>-->
-<!--        <div class="clearfix flex justify-center">-->
-<!--          <el-button circle :icon="ElIconUserFilled"></el-button>-->
-<!--        </div>-->
+      <template v-if="loginBar">
+        <div class="clearfix flex justify-center">
+          <nuxt-link to="/passport/login?type=register"><span class="text-sm text-blue-400">免费注册</span></nuxt-link>
+        </div>
       </template>
       <!-- 注册界面 -->
-      <el-space class="tabs pt-5 text-xl flex justify-center" v-if="!loginBar">
-        <el-tabs v-model="activeName" class="demo-tabs ">
-          <el-tab-pane label="手机号注册" name="sms">
+      <el-space class="tabs pt-3 text-xl flex justify-center" v-if="!loginBar">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="手机号注册" name="account">
             <span class="text-sm text-gray-400">
               未注册手机号验证通过后将自动注册
             </span>
@@ -104,46 +96,13 @@
                   <el-checkbox v-model="form.isAgree">我已阅读并同意</el-checkbox>
                   <a href="#" class="text-gray-700">《用户协议》</a>
                   <a href="#" class="text-gray-700">《隐私政策》</a>
-                  <a href="#" class="text-gray-700">《产品服务协议》</a>
-                </el-form-item>
-                <el-form-item>
-                  <el-button type="primary" size="large" class="w-full" :disabled="!form.isAgree" @click="onRegister">注册</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="账号密码注册" name="account">
-            <div class="custom-style my-4">
-              <el-form :model="form" label-width="auto" class="w-[330px]">
-                <el-form-item>
-                  <el-input class="w-full" size="large" maxlength="30" placeholder="登录账号" v-model="form.username" />
-                </el-form-item>
-                <el-form-item>
-                  <el-input type="password" size="large" maxlength="30" placeholder="登录密码" v-model="form.password" />
-                </el-form-item>
-                <el-form-item>
-                  <el-input class="w-full" size="large" maxlength="11" placeholder="请输入手机号码" v-model="form.phone">
-                    <template #prepend>+86</template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item>
-                  <el-space class="flex justify-between w-full">
-                    <el-input size="large" placeholder="短信验证码" maxlength="6" class="w-full" v-model="form.code" @keyup.enter.prevent="onSubmitBySms" />
-                    <el-button size="large" class="w-full" :disabled="!!countdownTime" @click="checkUser">
-                      <span v-if="!countdownTime">发送验证码</span>
-                      <span v-else>已发送 {{ countdownTime }} s</span>
-                    </el-button>
-                  </el-space>
-                </el-form-item>
-                <el-form-item>
-                  <el-checkbox v-model="form.isAgree">我已阅读并同意</el-checkbox>
-                  <a href="#" class="text-gray-700">《用户协议》</a>
-                  <a href="#" class="text-gray-700">《隐私政策》</a>
-                  <a href="#" class="text-gray-700">《产品服务协议》</a>
                 </el-form-item>
                 <el-form-item>
                   <el-button type="primary" size="large" class="w-full" :disabled="!form.isAgree" @click="onRegister">注册</el-button>
                 </el-form-item>
+                <div class="clearfix flex justify-center">
+                  <nuxt-link to="/passport/login"><span class="text-sm text-blue-400">已有账号，立即登录</span></nuxt-link>
+                </div>
               </el-form>
             </div>
           </el-tab-pane>
@@ -157,14 +116,15 @@ import {useConfigInfo, useToken, useUser, useWebsite} from "~/composables/config
 import useFormData from '@/utils/use-form-data';
 import type { User } from '@/api/system/user/model';
 import { ref } from 'vue'
-import { Shop, Key, Avatar, Briefcase } from '@element-plus/icons-vue'
+import { Shop, Key, Avatar, Briefcase, FullScreen } from '@element-plus/icons-vue'
 import {useServerRequest} from "~/composables/useServerRequest";
 import type {ApiResult} from "~/api";
 import type {CaptchaResult, LoginResult} from "~/api/passport/login/model";
-import {getCaptcha, sendSmsCaptcha} from "~/api/passport/login";
+import {getCaptcha, loginBySms, register, sendSmsCaptcha} from "~/api/passport/login";
 
 // 配置信息
 const runtimeConfig = useRuntimeConfig();
+const route = useRoute();
 const website = useWebsite();
 const config = useConfigInfo();
 const token = useToken();
@@ -295,20 +255,17 @@ const onSubmit = async () => {
  * 短信验证码登录
  */
 const onSubmitBySms = async () => {
-  const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/loginBySms',{baseURL: runtimeConfig.public.apiServer,method: "post",body: {
-      phone: form.phone,
-      code: form.code,
-      isSuperAdmin: true
-    }})
-  // 登录成功
-  if(response.value?.code == 0){
-    ElMessage.success(response.value?.message)
-    await doLogin(response.value.data)
-  }
-  if(response.value?.code != 0){
-    ElMessage.error(response.value?.message)
-    await changeCaptcha()
-  }
+  loginBySms({
+    phone: form.phone,
+    code: form.code,
+    isSuperAdmin: true
+  }).then(response => {
+    ElMessage.success('登录成功')
+    doLogin(response)
+  }).catch(() => {
+    ElMessage.error('验证码错误')
+    changeCaptcha()
+  })
 }
 
 /**
@@ -319,31 +276,47 @@ const onRegister = async () => {
     lock: true,
     text: 'Loading'
   })
-  await useClientRequest<ApiResult<LoginResult>>('/register',{method: "post",body: {
-      companyName: '应用名称',
-      username: form.phone,
-      phone: form.phone,
-      password: form.password,
-      code: form.code,
-      email: form.email,
-      isSuperAdmin: true
-    }}).then(response => {
-    // 登录成功
-    if(response?.code == 0){
+
+  register({
+    companyName: '应用名称',
+    username: form.phone,
+    phone: form.phone,
+    password: form.password,
+    code: form.code,
+    email: form.email,
+    isSuperAdmin: true
+  }).then(response => {
       loading.close();
-      ElMessage.success(response?.message)
-      doLogin(response.data)
-    }
-    if(response?.code != 0){
-      loading.close;
-      ElMessage.error(response?.message)
-      changeCaptcha()
-    }
+      ElMessage.success('注册成功')
+      doLogin(response)
   }).catch(() => {
     loading.close();
-  }).finally(() => {
-    loading.close();
   })
+  // await useClientRequest<ApiResult<LoginResult>>('/register',{method: "post",body: {
+  //     companyName: '应用名称',
+  //     username: form.phone,
+  //     phone: form.phone,
+  //     password: form.password,
+  //     code: form.code,
+  //     email: form.email,
+  //     isSuperAdmin: true
+  //   }}).then(response => {
+  //   // 登录成功
+  //   if(response?.code == 0){
+  //     loading.close();
+  //     ElMessage.success(response?.message)
+  //     doLogin(response.data)
+  //   }
+  //   if(response?.code != 0){
+  //     loading.close;
+  //     ElMessage.error(response?.message)
+  //     changeCaptcha()
+  //   }
+  // }).catch(() => {
+  //   loading.close();
+  // }).finally(() => {
+  //   loading.close();
+  // })
 
 }
 
@@ -366,14 +339,26 @@ const doLogin = async (data: any) => {
     localStorage.setItem('UserId',data.user.userId);
     localStorage.setItem('Avatar',data.user.avatar);
     localStorage.setItem('TID_ADMIN',data.user.tenantId);
+    // localStorage.setItem('TenantId',data.user.tenantId);
   }
   setTimeout(() => {
     navigateTo('/')
-    return;
   },500)
 }
 
 changeCaptcha();
+
+watch(
+    () => route.query.type,
+    (type) => {
+      loginBar.value = true
+      activeName.value = 'account'
+      if(type == 'register'){
+        loginBar.value = false
+      }
+    },
+    { immediate: true }
+);
 </script>
 <style lang="less">
 .login{

pages/passport/register.vue

@@ -1,36 +1,39 @@
 <template>
-  <PageBanner title="入驻" desc="Register Account"/>
-  <div class="login-layout m-auto sm:w-screen-xl w-full">
-    <div class="m-auto flex sm:flex-row flex-col sm:px-0 px-3 ">
-      <div class="flash bg-white rounded-lg px-8 py-4 w-full">
-        <Auth @done="reload"/>
-      </div>
-    </div>
+  <!-- 主体部分 -->
+  <div class="xl:w-screen-xl m-auto py-4 mt-20">
+    <el-page-header :icon="ArrowLeft" @back="goBack">
+      <template #content>
+        <span class="text-large font-600 mr-3"> 注册 </span>
+      </template>
+    </el-page-header>
+    <el-card shadow="hover" class=" my-5 px-2">
+      <Auth @done="reload"/>
+    </el-card>
   </div>
 </template>
 <script setup lang="ts">
+import {ArrowLeft, View, Search} from '@element-plus/icons-vue'
 import {useConfigInfo, useWebsite} from "~/composables/configState";
-import {ref} from 'vue'
+import { ref } from 'vue'
 import {useServerRequest} from "~/composables/useServerRequest";
 import type {ApiResult} from "~/api";
 import Auth from './components/Auth.vue';
-import type {ShopMerchantApply} from "~/api/shop/shopMerchantApply/model";
-import Base from "~/pages/user/components/Base.vue";
 
 // 配置信息
 const runtimeConfig = useRuntimeConfig();
 const route = useRoute();
+const router = useRouter();
 const activeIndex = ref('');
 const website = useWebsite()
 const config = useConfigInfo();
-const merchantApply = ref<ShopMerchantApply>();
+const merchantApply = ref<any>();
 
 const reload = async () => {
-  const {data: response} = await useServerRequest<ApiResult<ShopMerchantApply>>('/shop/shop-merchant-apply/getByUserId', {baseURL: runtimeConfig.public.apiServer})
+  const {data: response} = await useServerRequest<ApiResult<any>>('/shop/shop-merchant-apply/getByUserId', {baseURL: runtimeConfig.public.apiServer})
   if (response.value?.data) {
     merchantApply.value = response.value.data;
   }
-  if(config.value){
+  if (config.value) {
     useHead({
       title: `实名认证 - ${config.value?.siteName}`,
       meta: [{name: website.value.keywords, content: website.value.comments}]
@@ -38,11 +41,15 @@ const reload = async () => {
   }
 }
 
+const goBack = () => {
+  router.back(); // 返回上一页
+}
+
 watch(
     () => route.path,
     (path) => {
       activeIndex.value = path;
-      reload();
+      // reload();
     },
     {immediate: true}
 );