Small_goose_Vue3/pages/course/detail.vue

<template>
  <view class="course-detail-container">
    <!-- 顶部轮播图 -->
    <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(image, index) in parsedImages" :key="index">
        <image :src="image.imageUrl" class="swiper-image" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 商品信息 -->
    <view class="header">
      <view class="title">{{ course.name }}</view>
      <view class="subtitle">{{ course.subtitle }}</view>
      <view class="price-row">
        <text class="price">￥{{ course.price?.toFixed(2) }}</text>
        <text class="original-price">￥{{ course.originalPrice?.toFixed(2) }}</text>
      </view>
      <view class="stock">库存: {{ course.stock }}</view>
    </view>

    <!-- 评价区 -->
    <view class="section">
      <view class="section-title">评价 ({{ comments.length }})</view>
      <view v-if="comments.length === 0" class="empty-comment">暂无评价</view>
      <view v-else class="comment-list">
        <view class="comment-item" v-for="item in comments" :key="item.id">
          <image :src="item.avatar || defaultAvatar" class="comment-avatar" />
          <view class="comment-main">
            <view class="comment-user">{{ item.user }}</view>
            <view class="comment-stars">
              <text v-for="n in 5" :key="n" class="star" :class="{active: n <= item.star}">★</text>
            </view>
            <view class="comment-content">{{ item.content || '此用户没有填写评价' }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- tab切换 -->
    <view class="tabs">
      <view :class="['tab', tabIndex===0?'active':'']" @click="tabIndex=0">详情</view>
      <view :class="['tab', tabIndex===1?'active':'']" @click="tabIndex=1">目录</view>
      <view :class="['tab', tabIndex===2?'active':'']" @click="tabIndex=2">课堂互动</view>
    </view>

    <view v-if="tabIndex===0" class="tab-content">
      <view class="detail-section">
        <view class="section-title">课程介绍</view>
        <view class="detail-content">
          <view v-for="(image, index) in parsedImages" :key="index" class="detail-item">
            <image :src="image.imageUrl" class="detail-image" mode="widthFix" />
            <view class="detail-info">
              <view class="detail-title">{{ image.courseTitle }}</view>
              <view class="detail-desc">{{ image.courseDesc }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-else-if="tabIndex===1" class="tab-content">
      <view v-for="item in catalog" :key="item.id" class="catalog-item">
        <image :src="item.icon || lockIcon" class="catalog-icon" />
        <view class="catalog-main">
          <view class="catalog-title">{{ item.title }}</view>
          <view class="catalog-meta">{{ item.type }} {{ item.date }} | {{ item.count }}次学习</view>
        </view>
        <view v-if="item.trial" class="trial">试学</view>
      </view>
    </view>

    <view v-else class="tab-content">
      <view class="empty-interact">
        <image src="/static/empty-box.png" class="empty-img" />
        <view class="empty-tip">该课程暂无互动内容</view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="service-btn">客服</button>
      <button class="order-btn">立即购买</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      course: {},
      comments: [],
      catalog: [],
      tabIndex: 0,
      defaultCover: '/static/default-course.png',
      defaultAvatar: '/static/1.jpg',
      lockIcon: '/static/lock.png'
    }
  },
  computed: {
    parsedImages() {
      try {
        if (this.course.images) {
          return JSON.parse(this.course.images)
        }
        return []
      } catch (e) {
        console.error('解析图片数据失败:', e)
        return []
      }
    }
  },
  onLoad(options) {
    this.fetchDetail(options.id)
  },
  methods: {
    async fetchDetail(id) {
      try {
        const res = await uni.request({
          url: `http://localhost:9527/product/findOne?productId=${id}`,
          method: 'GET'
        })
        
        if (res.statusCode === 200) {
          this.course = res.data.data
          this.comments = res.data.data.comments || []
          this.catalog = res.data.data.catalog || []
        } else {
          throw new Error(res.data.message || '获取数据失败')
        }
      } catch (err) {
        uni.showToast({ 
          title: err.message || '加载失败', 
          icon: 'none' 
        })
      }
    }
  }
}
</script>

<style scoped>
.course-detail-container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 120rpx;
}

.swiper {
  width: 100%;
  height: 500rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.header {
  background: #fff;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.price-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 12rpx;
}

.price {
  color: #ff6600;
  font-size: 40rpx;
  font-weight: bold;
  margin-right: 16rpx;
}

.original-price {
  color: #999;
  font-size: 28rpx;
  text-decoration: line-through;
}

.stock {
  font-size: 26rpx;
  color: #666;
}

.section {
  background: #fff;
  border-radius: 20rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.empty-comment {
  color: #bbb;
  text-align: center;
  font-size: 26rpx;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.comment-item {
  display: flex;
  align-items: flex-start;
}

.comment-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.comment-main {
  flex: 1;
}

.comment-user {
  font-size: 26rpx;
  color: #333;
  font-weight: 600;
}

.comment-stars {
  color: #ffb400;
  font-size: 24rpx;
  margin: 4rpx 0 8rpx 0;
}

.star.active {
  color: #ffb400;
}

.star {
  color: #eee;
}

.comment-content {
  font-size: 24rpx;
  color: #666;
}

.tabs {
  display: flex;
  background: #fff;
  padding: 0 24rpx;
  border-bottom: 1rpx solid #eee;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 30rpx;
  color: #666;
  position: relative;
}

.tab.active {
  color: #ff6600;
  font-weight: bold;
}

.tab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: #ff6600;
  border-radius: 3rpx;
}

.tab-content {
  background: #fff;
  padding: 24rpx;
}

.detail-section {
  margin-bottom: 24rpx;
}

.detail-item {
  margin-bottom: 30rpx;
}

.detail-image {
  width: 100%;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}

.detail-info {
  padding: 0 12rpx;
}

.detail-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.detail-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.catalog-item {
  display: flex;
  align-items: center;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.catalog-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 16rpx;
}

.catalog-main {
  flex: 1;
}

.catalog-title {
  font-size: 26rpx;
  color: #222;
  font-weight: 600;
}

.catalog-meta {
  font-size: 22rpx;
  color: #888;
  margin-top: 4rpx;
}

.trial {
  color: #ff6600;
  font-size: 22rpx;
  border: 1rpx solid #ff6600;
  border-radius: 8rpx;
  padding: 2rpx 12rpx;
  margin-left: 8rpx;
}

.empty-interact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200rpx;
}

.empty-img {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 16rpx;
  opacity: 0.7;
}

.empty-tip {
  color: #bbb;
  font-size: 26rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 16rpx 24rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.service-btn, .order-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.service-btn {
  background: #f5f5f5;
  color: #666;
  margin-right: 20rpx;
}

.order-btn {
  background: #ff6600;
  color: #fff;
}
</style>