feat：ai伴学普通区分调整
This commit is contained in:
小张
parent
2aac753e3a
commit
5f199931ca
@ -45,40 +45,70 @@
|
||||
<div class="video-player unregistered">
|
||||
<div class="video-background" style="background-image: url('/images/aiCompanion/背景色@2x.png');">
|
||||
<div class="video-content">
|
||||
<!-- 锁定图标 -->
|
||||
<div class="lock-icon">
|
||||
<img src="/images/aiCompanion/lock.png" alt="">
|
||||
</div>
|
||||
|
||||
<!-- 主要信息 -->
|
||||
<div class="wisdom-points-info">
|
||||
<h2 class="main-message">完整课程内容，需使用智点兑换</h2>
|
||||
|
||||
<!-- 课程统计信息 -->
|
||||
<div class="course-stats-info">
|
||||
<span class="stats-item">
|
||||
<span class="icon-chapters"></span>
|
||||
共9章54节
|
||||
</span>
|
||||
<span class="stats-item">
|
||||
<span class="icon-duration"></span>
|
||||
12小时43分钟
|
||||
</span>
|
||||
<!-- AI伴学模式 -->
|
||||
<template v-if="(course as any)?.izAi === 1">
|
||||
<!-- 锁定图标 -->
|
||||
<div class="lock-icon">
|
||||
<img src="/images/aiCompanion/lock.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 兑换按钮 -->
|
||||
<div class="exchange-button-container">
|
||||
<button class="exchange-button" @click="handleExchangeCourse">
|
||||
消耗29智点 | 立即兑换
|
||||
</button>
|
||||
</div>
|
||||
<!-- 主要信息 -->
|
||||
<div class="wisdom-points-info">
|
||||
<h2 class="main-message">完整课程内容，需使用智点兑换</h2>
|
||||
|
||||
<!-- 用户智点信息 -->
|
||||
<div class="user-points-info">
|
||||
<div class="points-display">您的智点：101.5</div>
|
||||
<div class="get-more-points">获取更多智点 >></div>
|
||||
</div>
|
||||
<!-- 课程统计信息 -->
|
||||
<div class="course-stats-info">
|
||||
<span class="stats-item">
|
||||
<span class="icon-chapters"></span>
|
||||
共9章54节
|
||||
</span>
|
||||
<span class="stats-item">
|
||||
<span class="icon-duration"></span>
|
||||
12小时43分钟
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 兑换按钮 -->
|
||||
<div class="exchange-button-container">
|
||||
<button class="exchange-button" @click="handleExchangeCourse">
|
||||
消耗29智点 | 立即兑换
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 用户智点信息 -->
|
||||
<div class="user-points-info">
|
||||
<div class="points-display">您的智点：101.5</div>
|
||||
<div class="get-more-points">获取更多智点 >></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 普通模式 -->
|
||||
<template v-else>
|
||||
<!-- 课程信息 -->
|
||||
<div class="normal-course-info">
|
||||
<h2 class="normal-main-message">{{ (course as any)?.name || course?.title || '课程名称' }}</h2>
|
||||
|
||||
<!-- 课程统计信息 -->
|
||||
<div class="course-stats-info">
|
||||
<span class="stats-item">
|
||||
<span class="icon-chapters"></span>
|
||||
共9章54节
|
||||
</span>
|
||||
<span class="stats-item">
|
||||
<span class="icon-duration"></span>
|
||||
12小时43分钟
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 立即报名按钮 -->
|
||||
<div class="enroll-button-container">
|
||||
<button class="enroll-button" @click="handleEnrollCourse">
|
||||
<span>立即报名</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1172,6 +1202,7 @@ const loadCourseDetail = async () => {
|
||||
if (response.code === 0 || response.code === 200) {
|
||||
course.value = response.data
|
||||
console.log('课程数据设置成功:', course.value)
|
||||
console.log('课程AI模式:', (course.value as any)?.izAi)
|
||||
|
||||
// 确保讲师和时长信息正确显示
|
||||
if (course.value) {
|
||||
@ -1595,6 +1626,19 @@ const handleExchangeCourse = () => {
|
||||
enrollConfirmVisible.value = true
|
||||
}
|
||||
|
||||
// 处理普通模式课程报名
|
||||
const handleEnrollCourse = () => {
|
||||
if (!userStore.isLoggedIn) {
|
||||
// 未登录，显示登录弹窗
|
||||
showLoginModal()
|
||||
return
|
||||
}
|
||||
|
||||
// 显示报名确认弹窗
|
||||
console.log('用户点击报名课程')
|
||||
enrollConfirmVisible.value = true
|
||||
}
|
||||
|
||||
// 测试直接API调用
|
||||
// const testDirectApiCall = async () => {
|
||||
// console.log('=== 开始测试直接API调用 ===')
|
||||
@ -4674,4 +4718,61 @@ onMounted(() => {
|
||||
.no-comments {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 普通模式样式 */
|
||||
.normal-course-info {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.normal-main-message {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.enroll-button-container {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.enroll-button {
|
||||
width: 112px;
|
||||
height: 42px;
|
||||
background: #0088D1;
|
||||
border: 1px solid #0088D1;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.enroll-button span {
|
||||
width: 64px;
|
||||
height: 22px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.enroll-button:hover {
|
||||
background: #0077B8;
|
||||
border-color: #0077B8;
|
||||
}
|
||||
|
||||
.enroll-button:active {
|
||||
background: #006BA1;
|
||||
border-color: #006BA1;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user