feat(recall): 添加完善信息页并更新引导页样式

添加新的完善信息页面组件，包含表单验证和提交功能
更新引导页按钮样式以匹配设计规范

 /*
 /*
  * @Date: 2025-03-20 20:36:36
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-23 11:40:33
+ * @LastEditTime: 2025-12-23 13:45:36
  * @FilePath: /mlaj/src/router/routes.js
  * @FilePath: /mlaj/src/router/routes.js
  * @Description: 路由地址映射配置
  * @Description: 路由地址映射配置
  */
  */
@@ -115,6 +115,12 @@ export const routes = [
     meta: { title: '召回老客户-引导页' },
     meta: { title: '召回老客户-引导页' },
   },
   },
   {
   {
+    path: '/recall/complete-info',
+    name: 'CompleteInfo',
+    component: () => import('../views/recall/CompleteInfoPage.vue'),
+    meta: { title: '完善信息页' },
+  },
+  {
     path: '/checkout',
     path: '/checkout',
     name: 'CheckoutPage',
     name: 'CheckoutPage',
     component: () => import('../views/checkout/CheckoutPage.vue'),
     component: () => import('../views/checkout/CheckoutPage.vue'),

+<template>
+  <div class="complete-info-page w-full min-h-screen relative overflow-hidden flex flex-col items-center">
+    <!-- Starry Background Effect -->
+    <StarryBackground :bg-image="bgImg" />
+
+    <!-- Header Section -->
+    <div class="mt-16 flex flex-col items-center z-10 w-full px-8 text-center">
+      <h1 class="text-white text-3xl font-bold tracking-wider mb-3 drop-shadow-lg">完善信息</h1>
+      <p class="text-white/80 text-sm tracking-wide font-medium">请确认和补全您的个人信息</p>
+    </div>
+
+    <!-- Form Card -->
+    <div class="w-full px-6 mt-10 z-10">
+      <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
+        <div class="space-y-6">
+          <!-- Name Input -->
+          <div class="form-item">
+            <label class="block text-white font-bold text-base mb-2 tracking-wide">姓名</label>
+            <van-field
+              v-model="form.name"
+              placeholder="请输入姓名"
+              class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)] !p-3"
+              :border="false"
+            />
+          </div>
+
+          <!-- Phone Input -->
+          <div class="form-item">
+            <label class="block text-white font-bold text-base mb-2 tracking-wide">手机号</label>
+            <van-field
+              v-model="form.phone"
+              placeholder="请输入手机号"
+              class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)] !p-3"
+              :border="false"
+              type="tel"
+              maxlength="11"
+            />
+          </div>
+
+          <!-- ID Card Input -->
+          <div class="form-item">
+            <label class="block text-white font-bold text-base mb-2 tracking-wide">身份证号</label>
+            <van-field
+              v-model="form.idCard"
+              placeholder="请输入您的身份证号"
+              class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)] !p-3"
+              :border="false"
+            />
+          </div>
+
+          <!-- Note -->
+          <div class="flex items-start gap-2 mt-2">
+            <img :src="starImg" class="w-3 h-3 mt-0.5 shrink-0" alt="star" />
+            <p class="text-xs text-white/90 leading-relaxed tracking-wide text-justify">
+              时光机为每个身份证号找到的历史数据，只能参与一次（即一个账号的）星球币累积
+            </p>
+          </div>
+        </div>
+      </FrostedGlass>
+    </div>
+
+    <!-- Confirm Button -->
+    <div class="w-full px-6 mt-auto z-10 mb-8">
+      <van-button block
+        class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]"
+        @click="handleConfirm">
+        确认
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTitle } from '@vueuse/core'
+import { showToast } from 'vant'
+
+// Assets
+import bgImg from '@/assets/images/recall/bg01@2x.png'
+import starImg from '@/assets/images/recall/xing@2x.png'
+
+// Route
+const route = useRoute()
+const router = useRouter()
+useTitle(route.meta.title || '完善信息')
+
+// Form Data
+const form = reactive({
+  name: '张开心', // Mock initial data as per design
+  phone: '15658666022', // Mock initial data as per design
+  idCard: ''
+})
+
+// Actions
+const handleConfirm = () => {
+  if (!form.name) {
+    showToast('请输入姓名')
+    return
+  }
+  if (!form.phone) {
+    showToast('请输入手机号')
+    return
+  }
+  if (!form.idCard) {
+    showToast('请输入身份证号')
+    return
+  }
+
+  // 身份证号正则校验 (15位或18位)
+  const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
+  if (!idCardRegex.test(form.idCard)) {
+    showToast('请输入正确的身份证号')
+    return
+  }
+
+  // Validation passed
+  showToast('提交成功')
+  // Navigate to next step or handle submission logic here
+}
+</script>
+
+<style lang="less" scoped>
+.submit-btn {
+  background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+
+  &:active {
+    transform: scale(0.99);
+  }
+}
+
+:deep(.van-field__control) {
+  color: white !important;
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.5) !important;
+  }
+}
+</style>

@@ -39,7 +39,7 @@
     <!-- Action Button -->
     <!-- Action Button -->
     <div class="w-full px-6 mt-auto z-10 mb-8">
     <div class="w-full px-6 mt-auto z-10 mb-8">
       <van-button block
       <van-button block
-        class="submit-btn !rounded-lg !bg-[#3B82F6] !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]"
+        class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]"
         @click="handleNext">
         @click="handleNext">
         完善个人信息
         完善个人信息
       </van-button>
       </van-button>
@@ -68,7 +68,7 @@ const handleNext = () => {
 <style lang="less" scoped>
 <style lang="less" scoped>
 .submit-btn {
 .submit-btn {
   // Add a subtle gradient for better visual
   // Add a subtle gradient for better visual
-  background: linear-gradient(180deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%) !important;
+  background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
   backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);