386 lines
8.4 KiB
Vue
386 lines
8.4 KiB
Vue
<template>
|
||
<BasicLayout>
|
||
<view class="course-detail">
|
||
<!-- 课程信息卡片 -->
|
||
<view class="info-card">
|
||
<view class="card-title">课程信息</view>
|
||
<view class="divider"></view>
|
||
|
||
<view class="course-info">
|
||
<image
|
||
class="course-image"
|
||
:src="courseDetail.xkkcImg"
|
||
mode="aspectFill"
|
||
></image>
|
||
|
||
<view class="course-content">
|
||
<view class="course-name">{{ courseDetail.title }}</view>
|
||
<view class="course-teacher"
|
||
>开课老师：{{ courseDetail.teacher }}</view
|
||
>
|
||
<view class="course-location"
|
||
>上课地点：{{ courseDetail.location }}</view
|
||
>
|
||
<view class="course-time"
|
||
>上课时间：{{ courseDetail.studyTime }}</view
|
||
>
|
||
<view class="course-price">
|
||
金额：<text class="price-value">¥{{ courseDetail.price }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 老师信息卡片 -->
|
||
<view class="info-card">
|
||
<view class="card-title">老师信息</view>
|
||
<view class="divider"></view>
|
||
|
||
<view class="teacher-info">
|
||
<!-- 教师头部信息区域 -->
|
||
<view class="teacher-header">
|
||
<image
|
||
class="teacher-avatar"
|
||
:src="teacherInfo.avatar"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="teacher-basic-info">
|
||
<view class="teacher-name">{{ teacherInfo.name }}</view>
|
||
<view class="teacher-title">课程教师</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 教师简介区域 -->
|
||
<view class="teacher-intro-section">
|
||
<view class="intro-title">教师简介</view>
|
||
<view class="teacher-intro">
|
||
<text>{{ teacherInfo.introduction }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 教学理念 -->
|
||
<view class="info-card">
|
||
<view class="card-title">教学理念</view>
|
||
<view class="divider"></view>
|
||
|
||
<view class="content-section">
|
||
<text>{{ teachingPhilosophy }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 教学计划 -->
|
||
<view class="info-card">
|
||
<view class="card-title">教学计划</view>
|
||
<view class="divider"></view>
|
||
|
||
<view class="content-section">
|
||
<template v-if="teachingPlan && teachingPlan.length > 0">
|
||
<view
|
||
v-for="(phase, index) in teachingPlan"
|
||
:key="index"
|
||
class="teaching-phase"
|
||
>
|
||
<text>{{ phase }}</text>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="empty-data">
|
||
<u-icon name="info-circle" color="#C8C9CC" size="18"></u-icon>
|
||
<text>暂无教学计划</text>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template #bottom>
|
||
<view class="white-bg-color py-5">
|
||
<view class="flex-row items-center pb-10 pt-5">
|
||
<u-button
|
||
text="返回"
|
||
class="ml-15 mr-7"
|
||
:plain="true"
|
||
@click="navigateBack"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</BasicLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, computed } from "vue";
|
||
import { navigateBack } from "@/utils/uniapp";
|
||
import { useDataStore } from "@/store/modules/data";
|
||
import { storeToRefs } from "pinia";
|
||
import { imagUrl } from "@/utils";
|
||
import { kcjhFindKcjhByKcIdApi } from "@/api/base/server";
|
||
|
||
// 定义课程数据类型
|
||
interface CourseData {
|
||
id?: string;
|
||
kcmc?: string;
|
||
jsName?: string;
|
||
kcdd?: string;
|
||
kcje?: number;
|
||
studyTime?: string;
|
||
kcjsms?: string;
|
||
jxll?: string;
|
||
remark?: string;
|
||
xkkcImg?: string;
|
||
[key: string]: any; // 允许其他字段
|
||
}
|
||
|
||
const useData = useDataStore();
|
||
const { kcData } = storeToRefs(useData);
|
||
|
||
// 教学计划 - 此处假设没有具体教学计划字段，将备注内容拆分为教学计划
|
||
const teachingPlan = ref<string[]>([]);
|
||
|
||
const courseData = kcData.value as CourseData;
|
||
if (courseData && courseData.id) {
|
||
kcjhFindKcjhByKcIdApi({
|
||
xkkcId: courseData.id,
|
||
}).then((res) => {
|
||
if (res.resultCode == 1) {
|
||
teachingPlan.value = res.result.map(
|
||
(item: any) => item.jhjd + ":" + item.jhms
|
||
);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 课程详情数据
|
||
const courseDetail = computed(() => {
|
||
const data = (kcData.value as CourseData) || {};
|
||
return {
|
||
id: data.id || "",
|
||
title: data.kcmc || "暂无课程名称",
|
||
teacher: data.jsName || "暂无教师信息",
|
||
location: data.kcdd || "暂无地点信息",
|
||
price: data.kcje || 0,
|
||
studyTime: data.studyTime || "暂无上课时间",
|
||
xkkcImg: data.xkkcImg || "/static/images/robot-course.jpg", // 默认图片
|
||
};
|
||
});
|
||
|
||
// 教师信息
|
||
const teacherInfo = computed(() => {
|
||
const data = (kcData.value as CourseData) || {};
|
||
return {
|
||
name: data.jsName || "暂无教师信息",
|
||
avatar: imagUrl(data.jstx), // 默认头像
|
||
introduction: data.kcjsms || "暂无教师介绍",
|
||
};
|
||
});
|
||
|
||
// 教学理念
|
||
const teachingPhilosophy = computed(() => {
|
||
const data = (kcData.value as CourseData) || {};
|
||
return data.jxll || "暂无教学理念信息";
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.course-detail {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 15px;
|
||
height: 44px;
|
||
background-color: #2879ff;
|
||
|
||
.nav-left {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
|
||
.nav-right {
|
||
width: 40px;
|
||
}
|
||
}
|
||
|
||
.info-card {
|
||
margin: 15px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.divider {
|
||
height: 1px;
|
||
background-color: #eee;
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
.course-info {
|
||
display: flex;
|
||
|
||
.course-image {
|
||
width: 120px;
|
||
height: 138px;
|
||
border-radius: 8px;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.course-content {
|
||
flex: 1;
|
||
|
||
.course-name {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.course-teacher,
|
||
.course-location {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.course-time {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.course-price {
|
||
font-size: 14px;
|
||
color: #666;
|
||
|
||
.price-value {
|
||
color: #ff6b00;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.teacher-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.teacher-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
|
||
.teacher-avatar {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
margin-right: 15px;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||
border: 2px solid #fff;
|
||
}
|
||
|
||
.teacher-basic-info {
|
||
.teacher-name {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.teacher-title {
|
||
font-size: 14px;
|
||
color: #666;
|
||
background-color: #f4f7fc;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.teacher-intro-section {
|
||
width: 100%;
|
||
|
||
.intro-title {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #555;
|
||
margin-bottom: 8px;
|
||
padding-left: 8px;
|
||
border-left: 3px solid #2879ff;
|
||
}
|
||
|
||
.teacher-intro {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
background-color: #f8f9fc;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-section {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
|
||
.teaching-phase {
|
||
margin-bottom: 10px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.empty-data {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px 0;
|
||
color: #909399;
|
||
font-size: 14px;
|
||
|
||
text {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-action {
|
||
padding: 15px;
|
||
margin-top: 20px;
|
||
|
||
.back-btn {
|
||
width: 100%;
|
||
height: 44px;
|
||
line-height: 44px;
|
||
background-color: #fff;
|
||
color: #333;
|
||
border-radius: 22px;
|
||
font-size: 16px;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||
}
|
||
}
|
||
</style>
|