feat: 登录注册

.env.development

 NODE_ENV=development
 VITE_BASE_URL=http://test.api.liyeyun.com
+VITE_BASE_USER_URL=/userAPI

auto-imports.d.ts

@@ -5,5 +5,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
 }

components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     CommonHeader: typeof import('./src/components/common/CommonHeader.vue')['default']
     CommonImage: typeof import('./src/components/common/CommonImage.vue')['default']
+    CommonTitle: typeof import('./src/components/common/CommonTitle.vue')['default']
     DetailInfo: typeof import('./src/components/detail/DetailInfo.vue')['default']
     DetailInfoCell: typeof import('./src/components/detail/DetailInfoCell.vue')['default']
     DetailInfoTab: typeof import('./src/components/detail/DetailInfoTab.vue')['default']
@@ -32,6 +33,8 @@ declare module 'vue' {
     ListInfo: typeof import('./src/components/list/ListInfo.vue')['default']
     ListLandItem: typeof import('./src/components/list/list-land-item.vue')['default']
     ListPagination: typeof import('./src/components/list/ListPagination.vue')['default']
+    Login: typeof import('./src/components/login/login.vue')['default']
+    LoginView: typeof import('./src/components/login/LoginView.vue')['default']
     MiniListItem: typeof import('./src/components/detail/MiniListItem.vue')['default']
     ParkItem: typeof import('./src/components/list/ParkItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/assets/styles/reset.scss

@@ -11,7 +11,7 @@ body {
     WenQuanYi Micro Hei,
     sans-serif;
 }
-#app {
+#app,.login-panel{
   .el-checkbox {
     margin-right: 20px;
     &:hover .el-checkbox__inner{
@@ -22,11 +22,10 @@ body {
     background-color: #c0322b;
     border-color: #c0322b;
   }
-  .el-checkbox__input.is-checked + .el-checkbox__label {
+  .el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input.is-checked+.el-checkbox__label {
     color: rgba(0, 0, 0, 0.65);
   }
   .el-checkbox__label {
-    font-size: 12px;
     font-weight: 400;
     color: rgba(0, 0, 0, 0.45);
   }

src/components/common/CommonHeader.vue

@@ -29,7 +29,7 @@
       </ElMenu>
     </div>
     <div class="flex items-center">
-      <span>登录/注册</span>
+      <span @click="handleLogin">登录/注册</span>
       <div class="flex items-center">
         <img src="@/assets/images/icon-phone_call.png" />
         <span>400-900-1786</span>
@@ -39,6 +39,9 @@
 </template>
 <script lang="ts" setup>
 import type { HeaderMenuItem } from '@/types/common';
+import { useLoginModal } from '@/components/login/login.ts';
+// import { h } from 'vue';
+// import { ElMessageBox } from 'element-plus';
 
 const props = withDefaults(
   defineProps<{
@@ -55,6 +58,12 @@ const getParentName = (menu: HeaderMenuItem) => {
   return current?.name || menu.name;
 };
 
+const handleLogin = () => {
+  console.log('xxx');
+  const { open } = useLoginModal();
+  open();
+};
+
 const handleMenuChange = () => {};
 </script>
 <style scoped>

src/components/filter/filter-view.vue

 <template>
   <div class="filter-view">
-    <div class="h-[108px] mb-1 overflow-hidden" :class="{ 'spread-view': isSpread }">
+    <div class="mb-1 h-[108px] overflow-hidden" :class="{ 'spread-view': isSpread }">
       <div v-if="selected.length" class="flex text-xs text-black/[.65]">
         <span class="w-[100px] shrink-0 leading-9 text-black/[.65]">已选条件</span>
         <div class="flex w-[701px] flex-wrap pt-1.5">
@@ -72,7 +72,7 @@
                 >
                   <div v-for="(item, idx) in filter.list" :key="idx">
                     <div
-                      class="cursor-pointer px-2 py-1 text-black/[.45] filter-item"
+                      class="filter-item cursor-pointer px-2 py-1 text-black/[.45]"
                       :class="{ selected: filter.value === item.dictValue }"
                       @click="handleFilterClick(item, filter)"
                     >
@@ -83,11 +83,11 @@
                   </div>
                 </div>
                 <div
-                  class="flex items-center ml-2.5 text-black/[.65] h-6 cursor-pointer"
                   v-if="filter.isAddress && !filter.showAll"
+                  class="ml-2.5 flex h-6 cursor-pointer items-center text-black/[.65]"
                   @click="filter.showAll = true"
                 >
-                  <img class="w-3 h-3 mr-0.5" src="@/assets/images/icon-plus.png" alt="" />
+                  <img class="mr-0.5 h-3 w-3" src="@/assets/images/icon-plus.png" alt="" />
                   <span>展开</span>
                 </div>
                 <div v-if="filter.plugins" class="ml-2 flex items-center">
@@ -111,10 +111,10 @@
                 </div>
               </div>
             </div>
-            <div v-else>
+            <div v-else class="text-xs">
               <ElCheckboxGroup v-model="filter.value">
                 <ElCheckbox v-for="(item, idx) in filter.list" :key="idx" :label="item.dictLabel">
-                  {{ item.dictLabel }}
+                  <span class="text-xs">{{ item.dictLabel }}</span>
                 </ElCheckbox>
               </ElCheckboxGroup>
             </div>
@@ -123,13 +123,13 @@
       </template>
     </div>
     <div
-      class="flex items-center cursor-pointer justify-center text-xs text-[#4d4d4d] leading-9"
+      class="flex cursor-pointer items-center justify-center text-xs leading-9 text-[#4d4d4d]"
       @click="changeIsSpread"
     >
       <span>{{ isSpread ? '收起全部' : '展开全部' }}</span>
       <img
         :class="{ 'rotate-180': !isSpread }"
-        class="w-2 h-[5px] ml-1"
+        class="ml-1 h-[5px] w-2"
         src="@/assets/images/icon-arrow_top.png"
         alt=""
       />

src/components/login/login.ts

+import { h } from 'vue';
+import Login from './LoginView.vue';
+
+export function useLoginModal() {
+  const open = () => {
+    console.log('open');
+    ElMessageBox({
+      message: h(Login, {
+        onClose: () => {
+          console.log('close');
+        },
+      }),
+      showClose: true,
+      showCancelButton: false,
+      showConfirmButton: false,
+      center: true,
+    });
+  };
+  return {
+    open,
+  };
+}

src/stores/filterEnum.ts

@@ -20,8 +20,10 @@ export const filterStore = defineStore('filterEnum', () => {
             'Content-Type': 'application/x-www-form-urlencoded',
           },
         });
-        const data = await getFilterList({ code: queryStr });
-        filterEnum.value = data;
+        const { data, success } = await getFilterList({ code: queryStr });
+        if (success) {
+          filterEnum.value = data;
+        }
         return filterEnum.value;
       } catch (error: any) {
         return new Error(error);

src/types/api.ts

@@ -21,4 +21,14 @@ export enum RequestUrl {
   carrierDetail = '/lyy/api/carrier/v1.0/detail',
   /** 筛选项查询 */
   getFiltersList = '/lyy/api/sysDictData/listByCodes',
+  /** 发送短信 */
+  sendMessage = '/user/pc/v1.0/sendMsg',
+  /** 注册 */
+  sign = '/user/pc/v1.0/sign',
+  /** 手机号登录 */
+  loginByPhone = '/user/pc/v1.0/phoneLogin',
+  /** 账号密码登录 */
+  loginByAccount = '/user/pc/v1.0/login',
+  /** 修改密码 */
+  forget = '/user/pc/v1.0/forget',
 }

vite.config.mts

@@ -33,4 +33,14 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  server: {
+    proxy: {
+      '/userAPI': {
+        target: 'http://test.user.liyeyun.com',
+        changeOrigin: true,
+        secure: false,
+        rewrite: (path) => path.replace(/^\/userAPI/, ''),
+      },
+    },
+  },
 });