Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8481e074 1 parent b7d01235

feat(recall): 添加老客户召回引导页及相关资源 

- 新增引导页路由配置和页面组件
- 更新登录页背景图和标题图引用方式
- 添加引导页所需的图片资源
Inline Side-by-side
Showing 5 changed files with 98 additions and 13 deletions
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-20 17:37:47
* @LastEditTime: 2025-12-23 11:40:33
* @FilePath: /mlaj/src/router/routes.js
* @Description: 路由地址映射配置
*/
......@@ -109,6 +109,12 @@ export const routes = [
meta: { title: '召回老客户-登录页' },
},
{
path: '/recall/boot',
name: 'RecallBoot',
component: () => import('../views/recall/boot.vue'),
meta: { title: '召回老客户-引导页' },
},
{
path: '/checkout',
name: 'CheckoutPage',
component: () => import('../views/checkout/CheckoutPage.vue'),
......
<template>
<div class="recall-boot w-full min-h-screen relative overflow-hidden flex flex-col items-center">
<!-- Starry Background Effect -->
<StarryBackground :bg-image="bgImg" />
<!-- Title Section -->
<div class="mt-16 flex flex-col items-center z-10 w-full px-8">
<img :src="titleImg" class="w-full max-w-[300px] mb-8 object-contain" alt="title" />
</div>
<!-- Content Card -->
<div class="w-full px-6 mt-4 z-10">
<FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
<div class="space-y-4 py-2">
<!-- Item 1 -->
<div class="flex items-start">
<img :src="starImg" class="w-5 h-5 mt-1 mr-3 flex-shrink-0" alt="star" />
<div class="flex-1">
<h3 class="text-white text-xl font-bold mb-2 tracking-wide">星球新纪元已开启</h3>
<p class="text-white/90 text-sm font-medium">定制成长线 + 学习社区 + 星球币福利体系</p>
</div>
</div>
<!-- Item 2 -->
<div class="flex items-center !mt-10">
<img :src="starImg" class="w-5 h-5 mr-3 flex-shrink-0" alt="star" />
<p class="text-white font-bold text-base tracking-wide">老玩家一键迁档，荣耀延续；</p>
</div>
<!-- Item 3 -->
<div class="flex items-center">
<img :src="starImg" class="w-5 h-5 mr-3 flex-shrink-0" alt="star" />
<p class="text-white font-bold text-base tracking-wide">新玩家注册即领星光启航礼！</p>
</div>
</div>
</FrostedGlass>
</div>
<!-- Action Button -->
<div class="w-full px-6 mt-auto z-10 mb-8">
<van-button block
class="submit-btn !rounded-lg !bg-[#3B82F6] !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]"
@click="handleNext">
完善个人信息
</van-button>
<p class="text-white text-center text-xs mt-4 tracking-wide">您的历史数据将自动同步至新星球</p>
</div>
</div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router'
import { useTitle } from '@vueuse/core'
import titleImg from '@/assets/images/recall/title02@2x.png'
import bgImg from '@/assets/images/recall/bg01@2x.png'
import starImg from '@/assets/images/recall/xing@2x.png'
const router = useRouter()
const route = useRoute()
useTitle(route.meta.title)
const handleNext = () => {
router.push({ name: 'RecallLogin' })
}
</script>
<style lang="less" scoped>
.submit-btn {
// 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;
backdrop-filter: blur(4px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
&:active {
transform: scale(0.99);
}
}
</style>
<template>
<div class="recall-login w-full min-h-screen relative overflow-hidden flex flex-col items-center">
<!-- Starry Background Effect -->
<StarryBackground bg-image="https://cdn.ipadbiz.cn/mlaj/images/test-bgg03.jpg" />
<!-- <StarryBackground bg-image="https://cdn.ipadbiz.cn/mlaj/images/test-bgg03.jpg" /> -->
<StarryBackground :bg-image="bgImg" />
<!-- Title Section -->
<div class="mt-10 flex flex-col items-center z-10 w-full px-8">
<img src="@/assets/images/recall/title01@2x.png" class="w-full max-w-[300px] mb-8 object-contain" alt="title" />
<img :src="titleImg" class="w-full max-w-[300px] mb-8 object-contain" alt="title" />
<div class="text-white text-center space-y-3 tracking-wider text-shadow-md">
<p class="text-sm">请验证身份</p>
......@@ -78,19 +79,18 @@
</template>
<script setup>
/**
* @description 召回老客户-登录页
* @author hookehuyr
* @date 2025-12-23
*/
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
// FrostedGlass is auto-imported by unplugin-vue-components?
// If not, explicit import might be needed but based on components.d.ts it should be available.
// Just in case, if it fails, I'll add import. For now, assuming auto-import works as per components.d.ts.
import { useTitle } from '@vueuse/core'
import titleImg from '@/assets/images/recall/title01@2x.png'
import bgImg from '@/assets/images/recall/bg01@2x.png'
const router = useRouter()
// 路由相关
const $route = useRoute()
const $router = useRouter()
useTitle($route.meta.title)
// Form Data
const phone = ref('')
......@@ -146,7 +146,7 @@ const handleLogin = () => {
showToast('登录成功')
// Navigate to next page (Index or whatever is next flow)
router.push('/recall')
$router.push('/recall')
}
// Agreement Content
......