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,41 +288,45 @@ onMounted(async () => {
if (cartItems.value && cartItems.value.length > 0) {
const itemWithForm = cartItems.value.find(item => item.form_url)
if (itemWithForm && itemWithForm.form_url) {
// 检查用户是否已经录入过个人信息
const infoEntryKey = `info_entry_completed_${itemWithForm.id}`
currentInfoEntryKey = infoEntryKey // 保存键名用于清理
const savedInfoData = localStorage.getItem(infoEntryKey)
console.log('检查个人信息录入状态:', {
courseId: itemWithForm.id,
hasSavedData: !!savedInfoData
})
// 如果没有找到包含form_url的项目,或者form_url为空,则跳过个人信息录入
if (!itemWithForm || !itemWithForm.form_url) {
console.log('未找到form_url或form_url为空,跳过个人信息录入')
return
}
if (!savedInfoData) {
// 只有未录入过信息时才弹出弹窗
// 检查用户是否已经录入过个人信息
const infoEntryKey = `info_entry_completed_${itemWithForm.id}`
currentInfoEntryKey = infoEntryKey // 保存键名用于清理
const savedInfoData = localStorage.getItem(infoEntryKey)
console.log('检查个人信息录入状态:', {
courseId: itemWithForm.id,
hasSavedData: !!savedInfoData
})
if (!savedInfoData) {
// 只有未录入过信息时才弹出弹窗
showInfoEntry.value = true
// 设置弹窗标题
iframeTitle.value = '个人信息录入'
iframeSrc.value = itemWithForm.form_url
iframeType.value = 'add'
console.log('首次录入,显示个人信息录入弹窗')
} else {
// 已录入过信息,从缓存中恢复数据并显示预览
try {
const infoData = JSON.parse(savedInfoData)
formData.value.customize_id = infoData.customize_id
iframeInfoSrc.value = infoData.form_url + '&page_type=info' + '&data_id=' + infoData.customize_id
console.log('从缓存恢复个人信息数据:', infoData)
// 不再需要动态调整iframe高度
} catch (error) {
console.error('解析缓存数据失败:', error)
// 如果解析失败,重新录入
showInfoEntry.value = true
// 设置弹窗标题
iframeTitle.value = '个人信息录入'
iframeSrc.value = itemWithForm.form_url
iframeType.value = 'add'
console.log('首次录入,显示个人信息录入弹窗')
} else {
// 已录入过信息,从缓存中恢复数据并显示预览
try {
const infoData = JSON.parse(savedInfoData)
formData.value.customize_id = infoData.customize_id
iframeInfoSrc.value = infoData.form_url + '&page_type=info' + '&data_id=' + infoData.customize_id
console.log('从缓存恢复个人信息数据:', infoData)
// 不再需要动态调整iframe高度
} catch (error) {
console.error('解析缓存数据失败:', error)
// 如果解析失败,重新录入
showInfoEntry.value = true
iframeSrc.value = itemWithForm.form_url
iframeType.value = 'add'
}
}
}
}
......@@ -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的数据
......