zhxy-jzd/src/pages/base/course-selection/detail.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.image || '/static/images/course-default.jpg'"
            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-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">
          <image
            class="teacher-avatar"
            :src="teacherInfo.avatar || '/static/images/teacher-avatar.jpg'"
            mode="aspectFill"
          ></image>

          <view class="teacher-intro">
            <text>{{ teacherInfo.introduction }}</text>
          </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">
          <view
            v-for="(phase, index) in teachingPlan"
            :key="index"
            class="teaching-phase"
          >
            <text>{{ phase }}</text>
          </view>
        </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 } from "vue";
import { navigateBack } from "@/utils/uniapp";
// 课程详情数据
const courseDetail = ref({
  id: 2,
  title: "机器人创客",
  teacher: "叶老师",
  location: "第一教学楼302",
  price: 142,
  image: "/static/images/robot-course.jpg",
});

// 教师信息
const teacherInfo = ref({
  name: "叶老师",
  avatar: "/static/images/teacher-avatar.jpg",
  introduction:
    "叶老师，男，出生于1997年7月10日，青少年机器人创客指导教师，指导祥富小学-晟航水木年华获得2022年青少年机器人竞赛小学组三等奖。",
});

// 教学理念
const teachingPhilosophy = ref(
  '"做中学、玩中学"的教育理念，机器人课程最大的优势就是能够让孩子在"玩"中去探索，去体验属于他们自己的世界，很多孩子刚开始接触的时候都是出于兴趣。培养孩子更进一步的能力，提高孩子的学习效果也的确需要从兴趣开始。但真正激发孩子能力，形成学习动力的是对目标的追求。我就通过机器人赛事帮助孩子把"兴趣"变成学习的目标，继而助力孩子未来成长的道路。'
);

// 教学计划
const teachingPlan = ref([
  "第一阶段：了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。",
  "第二阶段：在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。",
  "第三阶段：学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。",
  "第四阶段：组织幼儿参加创客机器人比赛。",
]);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 页面加载时获取课程详情
onMounted(() => {
  // 实际应用中从URL参数获取课程ID，然后请求详情
  const courseId = uni.getStorageSync("currentCourseId") || 2;
  // fetchCourseDetail(courseId);
});
</script>

<style lang="scss" scoped>
.course-detail {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 80px;
}

.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: 120px;
    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-price {
      font-size: 14px;
      color: #666;

      .price-value {
        color: #ff6b00;
        font-weight: bold;
      }
    }
  }
}

.teacher-info {
  display: flex;

  .teacher-avatar {
    width: 80px;
    height: 100px;
    border-radius: 4px;
    margin-right: 15px;
  }

  .teacher-intro {
    flex: 1;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
  }
}

.content-section {
  font-size: 14px;
  color: #666;
  line-height: 1.6;

  .teaching-phase {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.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>