feat(login): 实现手机号登录功能

- 新增手机号登录页面组件 - 添加手机号输入和验证码获取功能 - 实现验证码输入和登录功能 - 优化页面样式和布局
refactor(app): 重构应用配置和页面组件
2025-01-10 09:56:19 +08:00 · 2025-01-09 19:57:50 +08:00 · 2025-01-09 19:37:03 +08:00 · 2025-01-09 19:02:35 +08:00 · 2025-01-08 16:21:12 +08:00 · 2025-01-08 15:48:05 +08:00
16 changed files with 209 additions and 101 deletions
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@ -1,5 +1,5 @@
 <script setup>
-import { useAppFooterRouteNames as names } from '~/config'
+import { useAppFooterRouteNames as names } from '~/config/index.js'
 import MyIcon from "~/components/icons/MyIcon.vue";
 import HomeIcon from "~/components/icons/HomeIcon.vue";
 const route = useRoute()
--- a/app/components/NationalMap/index.vue
+++ b/app/components/NationalMap/index.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
--- a/app/components/x-message/message/index.vue
+++ b/app/components/x-message/message/index.vue
@ -7,48 +7,50 @@ const props = defineProps({
  type: {
    type: String,
    default: 'success',
-    validator: (value) => ['success', 'error', 'warning'].includes(value)
+    validator: value => ['success', 'error', 'warning'].includes(value),
  },
  text: {
    type: String,
-    default: ''
-  }
+    default: '',
+  },
 })

 const typeConfig = {
  success: {
    imgSrc: success,
    borderColor: '#C5E7D5',
-    bgColor: '#EDF7F2'
+    bgColor: '#EDF7F2',
  },
  error: {
    imgSrc: error,
    borderColor: '#F3CBD3',
-    bgColor: '#FBEEF1'
+    bgColor: '#FBEEF1',
  },
  warning: {
    imgSrc: warning,
    borderColor: '#FAE0B5',
-    bgColor: '#FEF7ED'
-  }
+    bgColor: '#FEF7ED',
+  },
 }
 </script>

 <template>
-  <div 
-    class="box-border w-[343px] min-h-[46px] rounded-[4px] border flex items-center px-[15px] shadow-sm"
+  <div
+    class="box-border min-h-[46px] w-[343px] flex items-center border rounded-[4px] px-[15px] shadow-sm"
    :style="{
      borderColor: typeConfig[type].borderColor,
-      backgroundColor: typeConfig[type].bgColor
+      backgroundColor: typeConfig[type].bgColor,
    }"
  >
-    <div class="w-[20px] h-[20px] mr-[9px]">
-      <img 
-        :src="typeConfig[type].imgSrc" 
-        class="w-full h-full"
+    <div class="mr-[9px] h-[20px] w-[20px]">
+      <img
+        :src="typeConfig[type].imgSrc"
+        class="h-full w-full"
        alt=""
      >
    </div>
-    <div class="text-[14px] leading-normal text-black">{{ text }}</div>
+    <div class="text-[14px] text-black leading-normal">
+      {{ text }}
+    </div>
  </div>
 </template>
--- a/app/config/index.js
+++ b/app/config/index.js
@ -0,0 +1,2 @@
+
+export const useAppFooterRouteNames= ['home', 'profile']
--- a/app/config/index.ts
+++ b/app/config/index.ts
@ -1,6 +0,0 @@
-import type { RouteRecordName } from 'vue-router'
-
-/**
- * Use the AppFooter routing whitelist
- */
-export const useAppFooterRouteNames: RouteRecordName[] = ['index', 'profile']
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@ -1,7 +1,5 @@
 <template>
  <main class="flex flex-col min-h-svh">
-    <AppHeader class="h-[var(--van-nav-bar-height)]" />
-
    <div class="flex-1 pb-[var(--van-nav-bar-height)]">
      <slot />
    </div>
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@ -1,8 +1,9 @@
 <script setup>
+import liveBroadcast from '@/components/liveBroadcast/index.vue'
+
 const loading = ref(false)
 const finished = ref(false)
 const refreshing = ref(false)
-import liveBroadcast from '@/components/liveBroadcast/index.vue'
 const list = ref([{
  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
  title: '张天赐 | 日出而作，日落而息',
@ -18,6 +19,21 @@ const list = ref([{
  title: '张天赐 | 日出而作，日落而息',
  startingPrice: 'RMB 1,000',
  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
 }])
 const page = ref(1)

@ -54,52 +70,104 @@ function onRefresh() {
  refreshing.value = true
  loadData()
 }
+// 分列计算
+const leftColumn = computed(() => {
+  return list.value.filter((_, index) => index % 2 === 0)
+})
+
+const rightColumn = computed(() => {
+  return list.value.filter((_, index) => index % 2 === 1)
+})
 </script>

 <template>
-  <liveBroadcast></liveBroadcast>
-  <van-tabs animated>
+  <liveBroadcast />
+  <van-tabs sticky animated>
    <van-tab title="拍品列表">
      <div class="px-[16px] pt-[16px]">
-      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-        <van-list
+        <van-pull-refresh>
+          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadData"
-        >
-          <!-- 拍品列表 -->
-          <div class="grid grid-cols-2 gap-4">
-            <div v-for="(item,index) in list" :key="item.id" class="pb-[20px]">
-              <div class="relative w-[164px]">
-                <van-image width="100%" :src="item.image" fit="contain" />
-                <div class="align-center absolute left-8px top-8px h-17px w-45px flex justify-center bg-#2B53AC text-12px text-[#fff]">
-                  LOT{{index+1}}
+          >
+            <div class="w-full flex gap-[16px]">
+              <div class="flex flex-1 flex-col gap-[16px]">
+                <div
+                  v-for="(item, index) in leftColumn"
+                  :key="index"
+                  class="w-full"
+                >
+                  <div class="relative w-full">
+                    <van-image
+                      :src="item.image"
+                      :style="{ aspectRatio: item.ratio }"
+                      fit="cover"
+                      class="w-full"
+                    />
+                    <div class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
+                      LOT{{ index * 2 + 1 }}
+                    </div>
+                  </div>
+                  <div class="pt-[8px]">
+                    <div class="text-[14px] text-[#000000] leading-[20px]">
+                      {{ item.title }}
+                    </div>
+                    <div class="mt-[4px] text-[12px] text-[#575757]">
+                      起拍价：{{ item.startingPrice }}
+                    </div>
+                    <div
+                      v-if="item.transactionPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                    >
+                      成交价：{{ item.transactionPrice }}
+                    </div>
+                  </div>
                </div>
              </div>
-              <div>
-                <div class="text-[14px] text-[#000]">
-                  {{ item.title }}
-                </div>
-                <div class="text-[12px] text-[#575757]">
-                  起拍价：{{ item.startingPrice }}
-                </div>
-                <div v-if="item.transactionPrice" class="text-[12px] text-[#B58047]">
-                  成交价：¥{{ item.transactionPrice }}
+              <div class="flex flex-1 flex-col gap-[16px]">
+                <div
+                  v-for="(item, index) in rightColumn"
+                  :key="index"
+                  class="w-full"
+                >
+                  <div class="relative w-full">
+                    <van-image
+                      :src="item.image"
+                      :style="{ aspectRatio: item.ratio }"
+                      fit="cover"
+                      class="w-full"
+                    />
+                    <div class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
+                      LOT{{ index * 2 + 2 }}
+                    </div>
+                  </div>
+                  <div class="pt-[8px]">
+                    <div class="text-[14px] text-[#000000] leading-[20px]">
+                      {{ item.title }}
+                    </div>
+                    <div class="mt-[4px] text-[12px] text-[#575757]">
+                      起拍价：{{ item.startingPrice }}
+                    </div>
+                    <div
+                      v-if="item.transactionPrice"
+                      class="mt-[4px] text-[12px] text-[#b58047]"
+                    >
+                      成交价：{{ item.transactionPrice }}
+                    </div>
+                  </div>
                </div>
              </div>
            </div>
-          </div>
-        </van-list>
-      </van-pull-refresh>
+          </van-list>
+        </van-pull-refresh>
      </div>
    </van-tab>
-    <van-tab title="拍卖说明">内容 2</van-tab>
+    <van-tab title="拍卖说明">
+      内容 2
+    </van-tab>
  </van-tabs>
-
-
-
 </template>

-<style scoped>
-</style>
+
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@ -0,0 +1,7 @@
+<script setup>
+import Home from './home/index.vue'
+</script>
+
+<template>
+  <Home></Home>
+</template>
--- a/app/pages/login/index.vue
+++ b/app/pages/login/index.vue
@ -0,0 +1,70 @@
+<script setup>
+const phoneNum=ref('')
+const code=ref('')
+
+const pane=ref(0)
+</script>
+
+<template>
+  <div class="h-[100vh] w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-cover px-[31px] pt-[86px]">
+    <div class="w-full flex justify-center mb-[100px]">
+      <img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt="">
+    </div>
+    <div v-if="pane===0">
+      <div class="">
+        <div class="w-full flex justify-between">
+          <div class="text-[16px] text-[#000]">
+            中国（大陆）
+          </div>
+          <div><van-icon color="#777" name="arrow" size="14" /></div>
+        </div>
+        <div class="border-b-[1.7px] mt-[8px]">
+          <van-field v-model="phoneNum" clearable placeholder="请输入手机号">
+            <template #label>
+              <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
+                +86
+              </div>
+            </template>
+          </van-field>
+        </div>
+        <div />
+      </div>
+      <div class="mt-[55px]">
+        <van-button v-if="phoneNum" type="primary"  block style="height: 48px" >获取验证码</van-button>
+        <van-button v-else type="primary" color="#D3D3D3"  block style="height: 48px" >获取验证码</van-button>
+      </div>
+    </div>
+    <div v-else>
+      <div class="flex mb-[16px]">
+        <div class="text-[16px] text-[#BDBDBD] mr-[10px]">已发送验证码至</div>
+        <div class="text-[16px] text-[#000]">15834362333</div>
+      </div>
+      <van-password-input
+          :value="code"
+          :gutter="10"
+          focused
+      />
+      <div class="text-#2B53AC text-14px">
+        重新发送
+      </div>
+      <div class="mt-[17px]">
+        <van-button v-if="code.length === 6" type="primary"  block style="height: 48px" >登录</van-button>
+        <van-button v-else type="primary" color="#D3D3D3"  block style="height: 48px" >登录</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.van-cell.van-field){
+  padding-left: 0;
+}
+:deep(.van-password-input){
+  margin: 0;
+}
+:deep(.van-password-input__item){
+  border: 1px solid #E5E5E5;
+  width: 41px;
+  height: 41px;
+}
+</style>
--- a/app/static/images/asdfsdd.png
+++ b/app/static/images/asdfsdd.png
--- a/app/static/images/ghfggff.png
+++ b/app/static/images/ghfggff.png
--- a/commitlint.config.ts
+++ b/commitlint.config.ts
@ -1,32 +0,0 @@
-import type { UserConfig } from '@commitlint/types'
-import { RuleConfigSeverity } from '@commitlint/types'
-
-const Configuration: UserConfig = {
-  extends: ['@commitlint/config-conventional'],
-  formatter: '@commitlint/format',
-  rules: {
-    'type-enum': [
-      RuleConfigSeverity.Error,
-      'always',
-      [
-        'feat',
-        'fix',
-        'perf',
-        'style',
-        'docs',
-        'test',
-        'refactor',
-        'build',
-        'ci',
-        'chore',
-        'revert',
-        'wip',
-        'workflow',
-        'types',
-        'release',
-      ],
-    ],
-  },
-}
-
-export default Configuration
--- a/eslint.config.js
+++ b/eslint.config.js
@ -1,9 +0,0 @@
-import antfu from '@antfu/eslint-config'
-import nuxt from './.nuxt/eslint.config.mjs'
-
-export default nuxt(
-  antfu({
-    unocss: true,
-    formatters: true,
-  }),
-)
--- a/nuxt.config.js
+++ b/nuxt.config.js
@ -146,10 +146,10 @@ export default defineNuxtConfig({
  },

  // 指定 Nuxt 应用程序的兼容性日期，确保应用程序在未来的 Nuxt 版本中保持稳定性
-  compatibilityDate: '2025-01-07',
+  compatibilityDate: '2025-01-09',
  
  devServer: {
    host: '0.0.0.0',
    port: 3000,
  },
-})
+})
--- a/package.json
+++ b/package.json
@ -21,11 +21,8 @@
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "^3.12.1",
    "@iconify-json/carbon": "^1.2.5",
-    "@nuxt/eslint": "^0.7.4",
    "@pinia/nuxt": "^0.9.0",
-    "@unocss/eslint-plugin": "0.65.2",
    "@unocss/nuxt": "0.65.2",
    "@unocss/preset-rem-to-px": "0.65.2",
    "@vant/nuxt": "^1.0.6",
--- a/uno.config.js
+++ b/uno.config.js
Author	SHA1	Message	Date
xingyy	64536663d7	feat(login): 实现手机号登录功能 - 新增手机号登录页面组件 - 添加手机号输入和验证码获取功能 - 实现验证码输入和登录功能 - 优化页面样式和布局	2025-01-10 09:56:19 +08:00
xingyy	9092b59027	refactor(app): 重构应用配置和页面组件 - 更新 AppFooter 组件中的路由名称引用 - 重命名 config 文件夹下的 index.ts 为 index.js - 删除 NationalMap 组件 - 新增 login 页面组件 - 更新 home 页面组件，移除 masonry 样式 - 更新 nuxt 配置，启用 pages:extend钩子 - 移除 package.json 中的 vue-masonry-wall依赖	2025-01-09 19:57:50 +08:00
xingyy	a8e2faae0f	refactor(layouts): 优化默认布局结构 - 移除 AppHeader 组件 - 调整页面主体的样式和布局refactor(components): 优化 XMessage 组件样式 - 调整样式属性顺序 - 优化模板结构 refactor(pages):重构首页布局 - 添加新的 LiveBroadcast 组件 - 实现拍品列表的瀑布流布局 - 优化拍品卡片样式 refactor(config): 更新项目配置 - 移除 pages:extend钩子 - 更新兼容性日期	2025-01-09 19:37:03 +08:00
xingyy	530c5b1026	Merge branch 'main' into xingyy	2025-01-09 19:02:35 +08:00
xingyy	6d815b5adb	Merge branch 'main' into xingyy	2025-01-08 16:21:12 +08:00
xingyy	ef5fe41848	Merge branch 'main' into xingyy # Conflicts: # app/components/AppFooter.vue	2025-01-08 15:48:05 +08:00
xingyy	861ba5118d	Merge branch 'dev' into xingyy # Conflicts: # app/components/AppFooter.vue	2025-01-08 15:30:34 +08:00
xingyy	dd445ece41	test	2025-01-08 15:30:07 +08:00
				`@ -0,0 +1,2 @@`

				`export const useAppFooterRouteNames= ['home', 'profile']`