Переглянути джерело

feat(课程详情): 添加课程上下架功能并修复视图字段

重构handleTakeOffCourse方法以支持上下架操作
添加课程封面图片的样式修复
将views字段重命名为viewCount以保持一致性
tanshanming 7 місяців тому
батько
коміт
3ec30eeb7c
1 змінених файлів з 20 додано та 12 видалено
  1. 20 12
      src/views/courseDetails/index.vue

+ 20 - 12
src/views/courseDetails/index.vue

@@ -9,14 +9,17 @@
 				<div class="info-box">
 					<div class="title">{{ course.courseName }}</div>
 					<div class="meta">
-						<p><EyeOutlined class="mr-0" /> {{ course.views }}</p>
+						<p><EyeOutlined class="mr-0" /> {{ course.viewCount }}</p>
 						<p><ClockCircleOutlined class="mr-0" /> {{ course.publishTime }}</p>
 					</div>
 				</div>
 				<div class="action-box">
 					<div class="btn-group">
 						<a-button @click="editVisible = true"> <EditOutlined /> 编辑课程</a-button>
-						<a-button @click="handleTakeOffCourse"> <DownOutlined /> 下架课程</a-button>
+						<a-button v-if="course.putawayStatus == '1'" @click="handleTakeOffCourse(0)">
+							<DownOutlined /> 下架课程
+						</a-button>
+						<a-button v-else @click="handleTakeOffCourse(1)"> <UpOutlined /> 上架课程 </a-button>
 						<a-button @click="handleDeleteCourse"> <DeleteOutlined /> 删除课程</a-button>
 					</div>
 					<div class="extra-box">
@@ -183,30 +186,30 @@
 	}
 
 	// 处理下架课程
-	function handleTakeOffCourse() {
+	function handleTakeOffCourse(type) {
 		Modal.confirm({
-			title: '确认下架课程',
-			content: `确定要下架课程"${course.value.courseName}"吗?下架后学员将无法访问该课程。`,
-			okText: '确认下架',
+			title: type === 0 ? '确认下架课程' : '确认上架课程',
+			content: `确定要${type === 0 ? '下架' : '上架'}课程"${course.value.courseName}"吗?`,
+			okText: '确认',
 			cancelText: '取消',
 			onOk: async () => {
 				try {
 					const params = {
 						courseId: course.value.courseId,
-						putawayStatus: '0' // 假设0表示下架状态
+						putawayStatus: type
 					}
 					const res = await updateCourseStatus(params)
 					if (res.code === 200) {
-						message.success('课程下架成功')
+						message.success(`${type === 0 ? '下架' : '上架'}成功`)
 						// 更新课程状态
-						course.value.putawayStatus = '0'
-						course.value.putawayStatusName = '已下架'
+						course.value.putawayStatus = type
+						course.value.putawayStatusName = `${type === 0 ? '已下架' : '已上架'}`
 					} else {
 						message.error(res.msg || '操作失败')
 					}
 				} catch (error) {
-					console.error('下架课程失败:', error)
-					message.error('下架课程失败,请稍后重试')
+					console.error(`${type === 0 ? '下架' : '上架'}课程失败:`, error)
+					message.error(`${type === 0 ? '下架' : '上架'}课程失败,请稍后重试`)
 				}
 			}
 		})
@@ -273,6 +276,11 @@
 						background: #e6e9ef;
 						font-size: 48px;
 					}
+					:deep(.ant-image),
+					:deep(.ant-image-img) {
+						width: 100%;
+						height: 100%;
+					}
 				}
 				.info-box {
 					flex: 1;