hookehuyr

fix(购物车): 修复表单URL处理逻辑并添加购物车数据过期检查

修复课程详情页中表单URL的空值检查问题
为购物车数据添加时间戳和过期检查逻辑
优化结账页面个人信息录入的条件渲染
......@@ -21,7 +21,32 @@ export function provideCart(mode = CartMode.MULTIPLE) {
try {
const storedCart = localStorage.getItem('cart')
if (storedCart) {
cartItems.value = JSON.parse(storedCart)
const cartData = JSON.parse(storedCart)
// 检查是否为新格式(包含时间戳)
if (cartData && typeof cartData === 'object' && cartData.timestamp) {
const currentTime = Date.now()
const oneDay = 24 * 60 * 60 * 1000 // 一天的毫秒数
// 检查缓存是否过期(超过一天)
if (currentTime - cartData.timestamp > oneDay) {
// 购物车缓存已过期,清空购物车
localStorage.removeItem('cart')
cartItems.value = []
} else {
// 缓存未过期,加载购物车数据
cartItems.value = cartData.items || []
}
} else {
// 兼容旧格式(直接是数组)
if (Array.isArray(cartData)) {
cartItems.value = cartData
} else {
// 格式不正确,清空缓存
localStorage.removeItem('cart')
cartItems.value = []
}
}
}
} catch (error) {
console.error('Failed to parse cart from localStorage:', error)
......@@ -30,7 +55,11 @@ export function provideCart(mode = CartMode.MULTIPLE) {
// 监听购物车变化并保存到localStorage
watchEffect(() => {
localStorage.setItem('cart', JSON.stringify(cartItems.value))
const cartData = {
items: cartItems.value,
timestamp: Date.now() // 添加时间戳
}
localStorage.setItem('cart', JSON.stringify(cartData))
})
// 添加商品到购物车
......
......@@ -79,7 +79,7 @@
<!-- Checkout Form -->
<div class="px-4 pt-4">
<form @submit.prevent="handleSubmit">
<FrostedGlass class="rounded-xl p-4 mb-4">
<FrostedGlass v-if="shouldShowInfoEntry" class="rounded-xl p-4 mb-4">
<!-- 预览个人信息iframe -->
<iframe
v-if="!showInfoEntry"
......@@ -288,7 +288,12 @@ onMounted(async () => {
if (cartItems.value && cartItems.value.length > 0) {
const itemWithForm = cartItems.value.find(item => item.form_url)
if (itemWithForm && itemWithForm.form_url) {
// 如果没有找到包含form_url的项目,或者form_url为空,则跳过个人信息录入
if (!itemWithForm || !itemWithForm.form_url) {
console.log('未找到form_url或form_url为空,跳过个人信息录入')
return
}
// 检查用户是否已经录入过个人信息
const infoEntryKey = `info_entry_completed_${itemWithForm.id}`
currentInfoEntryKey = infoEntryKey // 保存键名用于清理
......@@ -325,7 +330,6 @@ onMounted(async () => {
}
}
}
}
})
// 页面离开时清理localStorage中的录入状态标记
......@@ -357,6 +361,15 @@ const iframeInfoSrc = ref(null)
const infoEntryIframe = ref(null)
/**
* 检查是否需要显示个人信息录入UI
*/
const shouldShowInfoEntry = computed(() => {
if (!cartItems.value || cartItems.value.length === 0) return false
const itemWithForm = cartItems.value.find(item => item.form_url)
return itemWithForm && itemWithForm.form_url
})
/**
* 监听个人信息录入弹窗状态,动态修改页面标题
*/
watch(showInfoEntry, (newVal) => {
......
......@@ -466,8 +466,11 @@ const handlePurchase = () => {
price: course.value.price,
imageUrl: course.value.imageUrl,
form: course.value.form, // 报名关联的表单
// 需要把当前页面域名拼写进去
form_url: window.location.origin + course.value.form_url, // 课程关联的表单的 URL
}
// 只有当form_url存在且不为空时才添加该字段
if (course.value.form_url && course.value.form_url.trim() !== '') {
cartItem.form_url = window.location.origin + course.value.form_url // 课程关联的表单的 URL
}
// 调试日志:检查传递给addToCart的数据
......