tra-app/src/pages/courseDetail/index.vue

<template>
	<view class="max_page detail-main">
		<image src="/src/static/images/courseDetail/mipmap-xhdpi/bg.png" mode="widthFix" class="back-image"></image>
		<view class="detail-body">
			<view class="head-title font_pf">
				<view class="title-text">{{ form.crsName }}</view>
				<view class="title-num">
					<view class="num-item">
						<image class="title-icon" src="/src/static/images/courseDetail/mipmap-xhdpi/zhishidian.png" mode="widthFix"></image>
						<view class="mr-10">知识点</view>
						<view class="c-000">{{ form.pgrphNum }}</view>
					</view>
					<view class="num-item">
						<image class="title-icon" src="/src/static/images/courseDetail/mipmap-xhdpi/yixue.png" mode="widthFix"></image>
						<view class="mr-10">已学</view>
						<view class="c-000">{{ form.styParaGraphNum }}</view>
					</view>
				</view>
			</view>
			<view class="body-box">
				<view class="body-tab">
					<uv-tabs
						class="font_pf"
						:list="tabList"
						@change="tabSwitch"
						:scrollable="false"
						line-color="#0066FF"
						:active-style="{ color: '#323E57', 'font-weight': 600, 'font-size': '30rpx' }"
						:inactive-style="{ color: '#666666', 'font-size': '30rpx' }"
					></uv-tabs>
				</view>
				<view class="course-info" v-if="tabAct == 0">
					<introduceVue v-model="form"></introduceVue>
				</view>
				<view class="point" v-if="tabAct == 1">
					<knowledge v-model="form"></knowledge>
				</view>
				<view class="evaluate" v-if="tabAct == 2">
					<comment :crsNum="crsNum"></comment>
				</view>
			</view>
		</view>
		<view class="btn-box font_pf">
			<template v-if="[0,1].includes(tabAct)">
				<uv-button type="primary">去学习</uv-button>
				<uv-button type="primary">去练习</uv-button>
				<uv-button type="primary">去考试</uv-button>
			</template>
			<template v-if="tabAct == 2">
				<uv-button type="primary" class="send_evaluate">发布评价</uv-button>
			</template>
			
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getCourseDetailApi } from '@/api/courseDetail.js';
// import {formatDate2} from '@/common/common.js'
import common from '@/common/common';
import introduceVue from './introduce.vue';
import knowledge from './knowledge.vue';
import comment from './comment.vue';

// tab栏
const tabList = ref([{ name: '课程介绍' }, { name: '知识点' }, { name: '评价' }]);
const form = ref({});
const crsNum = ref('');
const tabAct = ref(0);
const tabSwitch = (item) => {
	tabAct.value = item.index;
};
const getData = async () => {
	const { body } = await getCourseDetailApi({ crsNum: crsNum.value });
	form.value = body;
};
onLoad((params) => {
	crsNum.value = params.crsNum;
	getData();
});
</script>

<style lang="scss" scoped>
.detail-main {
	background-color: #f5f5f5;
	position: relative;
}
.detail-body {
	box-sizing: border-box;
	min-height: calc(100vh - 256rpx);
	position: absolute;
	top: 256rpx;
	border-radius: 23rpx 23rpx 0rpx 0rpx;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.body-head {
	height: 460rpx;
	background-color: red;
}
.back-image {
	position: absolute;
	width: 100%;
}
.head-title {
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	height: 162rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	padding-top: 36rpx;
	padding-left: 42rpx;
	padding-bottom: 24rpx;
}
.title-text {
	font-size: 34rpx;
	color: #333333;
	font-weight: 600;
	margin-bottom: 20rpx;
}
.title-icon {
	width: 22rpx;
	height: 30rpx;
	margin-right: 10rpx;
}
.title-num {
	display: flex;
}
.body-box {
	background-color: #f5f5f5;
	flex: 1;
	padding-left: 16rpx;
	padding-right: 16rpx;
	padding-top: 20rpx;
	padding-bottom: 245rpx;
}
.body-tab {
	background-color: #ffffff;
	border-radius: 22rpx;
	height: 92rpx;
	// padding-top: 22rpx;
	padding-bottom: 22rpx;
	margin-bottom: 24rpx;
	// :deep(.uv-tabs__wrapper__nav__line) {
	// 	bottom: 10rpx;
	// }
}


.btn-box {
	position: fixed;
	bottom: 0;
	height: 187rpx;
	width: 100%;
	display: flex;
	padding-top: 37rpx;
	justify-content: space-around;
	background-color: #ffffff;
	// background-color: red;
	
	:deep(.uv-button-wrapper) {
		flex: 1;
		&.send_evaluate{
			margin: 0 60rpx;
		}
		&:not(.send_evaluate){
			margin: 0 30rpx;
		}
		.uv-button {
			border-radius: 14rpx;
			width: 100%;
			height: 92rpx;
		}
	}
	
}
.num-item {
	display: flex;
	align-items: center;
	font-size: 30rpx;
	margin-right: 30rpx;
	color: #666666;
}
.point {
	width: 100%;
}

.learn {
	color: #1dd17a;
}
.unlearn {
	color: #666666;
}

.c-000 {
	font-weight: 600;
	color: #000000;
}
</style>