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

- 新增手机号登录页面组件
- 添加手机号输入和验证码获取功能
- 实现验证码输入和登录功能
- 优化页面样式和布局

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()

app/components/NationalMap/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

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"
+    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]">
+    <div class="mr-[9px] h-[20px] w-[20px]">
       <img
         :src="typeConfig[type].imgSrc"
-        class="w-full h-full"
+        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>

app/config/index.js

@@ -0,0 +1,2 @@
+
+export const useAppFooterRouteNames= ['home', 'profile']

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']

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>

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

app/pages/index.vue

@@ -0,0 +1,7 @@
+<script setup>
+import Home from './home/index.vue'
+</script>
+
+<template>
+  <Home></Home>
+</template>

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>

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

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,
-  }),
-)

nuxt.config.js

@@ -146,7 +146,7 @@ export default defineNuxtConfig({
   },
 
   // 指定 Nuxt 应用程序的兼容性日期，确保应用程序在未来的 Nuxt 版本中保持稳定性
-  compatibilityDate: '2025-01-07',
+  compatibilityDate: '2025-01-09',
   
   devServer: {
     host: '0.0.0.0',

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",