feat：ai伴学普通区分调整
This commit is contained in:
小张
parent
2aac753e3a
commit
5f199931ca
@ -45,40 +45,70 @@
|
|||||||
<div class="video-player unregistered">
|
<div class="video-player unregistered">
|
||||||
<div class="video-background" style="background-image: url('/images/aiCompanion/背景色@2x.png');">
|
<div class="video-background" style="background-image: url('/images/aiCompanion/背景色@2x.png');">
|
||||||
<div class="video-content">
|
<div class="video-content">
|
||||||
<!-- 锁定图标 -->
|
<!-- AI伴学模式 -->
|
||||||
<div class="lock-icon">
|
<template v-if="(course as any)?.izAi === 1">
|
||||||
<img src="/images/aiCompanion/lock.png" alt="">
|
<!-- 锁定图标 -->
|
||||||
</div>
|
<div class="lock-icon">
|
||||||
|
<img src="/images/aiCompanion/lock.png" alt="">
|
||||||
<!-- 主要信息 -->
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 兑换按钮 -->
|
<!-- 主要信息 -->
|
||||||
<div class="exchange-button-container">
|
<div class="wisdom-points-info">
|
||||||
<button class="exchange-button" @click="handleExchangeCourse">
|
<h2 class="main-message">完整课程内容，需使用智点兑换</h2>
|
||||||
消耗29智点 | 立即兑换
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 用户智点信息 -->
|
<!-- 课程统计信息 -->
|
||||||
<div class="user-points-info">
|
<div class="course-stats-info">
|
||||||
<div class="points-display">您的智点：101.5</div>
|
<span class="stats-item">
|
||||||
<div class="get-more-points">获取更多智点 >></div>
|
<span class="icon-chapters"></span>
|
||||||
</div>
|
共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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1172,6 +1202,7 @@ const loadCourseDetail = async () => {
|
|||||||
if (response.code === 0 || response.code === 200) {
|
if (response.code === 0 || response.code === 200) {
|
||||||
course.value = response.data
|
course.value = response.data
|
||||||
console.log('课程数据设置成功:', course.value)
|
console.log('课程数据设置成功:', course.value)
|
||||||
|
console.log('课程AI模式:', (course.value as any)?.izAi)
|
||||||
|
|
||||||
// 确保讲师和时长信息正确显示
|
// 确保讲师和时长信息正确显示
|
||||||
if (course.value) {
|
if (course.value) {
|
||||||
@ -1595,6 +1626,19 @@ const handleExchangeCourse = () => {
|
|||||||
enrollConfirmVisible.value = true
|
enrollConfirmVisible.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 处理普通模式课程报名
|
||||||
|
const handleEnrollCourse = () => {
|
||||||
|
if (!userStore.isLoggedIn) {
|
||||||
|
// 未登录，显示登录弹窗
|
||||||
|
showLoginModal()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示报名确认弹窗
|
||||||
|
console.log('用户点击报名课程')
|
||||||
|
enrollConfirmVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
// 测试直接API调用
|
// 测试直接API调用
|
||||||
// const testDirectApiCall = async () => {
|
// const testDirectApiCall = async () => {
|
||||||
// console.log('=== 开始测试直接API调用 ===')
|
// console.log('=== 开始测试直接API调用 ===')
|
||||||
@ -4674,4 +4718,61 @@ onMounted(() => {
|
|||||||
.no-comments {
|
.no-comments {
|
||||||
color: #999;
|
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>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user