learn_applet/pagesHome/course/index.vue

<template>
	<view class="content">
		<view class="one"
			:class="[courseInfo.type==='0'?'one0':courseInfo.type==='1'?'one1':courseInfo.type==='2'?'one2':courseInfo.type==='3'?'one3':'']">
			<view class="left">
				<view class="one_1 textOver">{{courseInfo.name||'暂无'}}</view>
				<view class="one_2">
					{{getDict(courseInfo.type,'type')}} {{getDict(courseInfo.grade,'grade')}}
					{{getDict(courseInfo.subject,'subject')}}
				</view>
			</view>
			<view class="right">
				<up-icon v-if="courseInfo.is_follow" name="star-fill" color="#FFA500" size="30"></up-icon>
				<up-icon v-else name="star" color="#FFA500" size="30"></up-icon>
			</view>
		</view>
		<view class="two">
			<view class="two_1">
				<span> 开始时间：{{courseInfo.start_time||'暂无'}}</span>
				<span> 结束时间：{{courseInfo.end_time||'暂无'}}</span>
			</view>
			<view class="two_2">￥{{courseInfo.money||'免费'}}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { inject, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = inject('$api');
	const id = ref('');
	// 基本信息
	const config = ref({ logo: [], file: [] });
	const courseInfo = ref({});
	const teacherInfo = ref({});
	// 字典表
	const subjectList = ref([]);
	const educationList = ref([]);
	const typeList = ref([]);
	const gradeList = ref([]);
	const genderList = ref([])
	const learnStatusList = ref([])
	// user
	const user = computed(() => {
		return uni.getStorageSync('user');
	})
	onLoad(async (options) => {
		id.value = options && options.id
		await searchConfig();
		await searchOther();
		await search();
	});
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 其他查询信息
	const searchOther = async () => {
		let res;
		// 学科
		res = await $api(`dictData`, 'GET', { code: 'subject', is_use: '0' });
		if (res.errcode === 0) subjectList.value = res.data;
		// 年级
		res = await $api(`dictData`, 'GET', { code: 'grade', is_use: '0' });
		if (res.errcode === 0) gradeList.value = res.data;
		// 学历
		res = await $api(`dictData`, 'GET', { code: 'education', is_use: '0' });
		if (res.errcode === 0) educationList.value = res.data;
		// 类型
		res = await $api(`dictData`, 'GET', { code: 'courseType', is_use: '0' });
		if (res.errcode === 0) typeList.value = res.data;
		// 性别
		res = await $api(`dictData`, 'GET', { code: 'gender', is_use: '0' });
		if (res.errcode === 0) genderList.value = res.data;
		// 学业状态
		res = await $api(`dictData`, 'GET', { code: 'learnStatus', is_use: '0' });
		if (res.errcode === 0) learnStatusList.value = res.data;
	};
	// 查询
	const search = async () => {
		if (id.value) {
			const res = await $api(`course/appHomeDetail/${id.value}`, 'GET', {});
			if (res.errcode == '0') {
				courseInfo.value = res.data.courseInfo
				teacherInfo.value = res.data.teacherInfo
			}
		}
	};
	const getDict = (data, model) => {
		if (data) {
			let res
			if (model == 'education') res = educationList.value.find((f) => f.value == data)
			else if (model == 'subject') res = subjectList.value.find((f) => f.value == data)
			else if (model == 'grade') res = gradeList.value.find((f) => f.value == data)
			else if (model == 'type') res = typeList.value.find((f) => f.value == data)
			else if (model == 'gender') res = genderList.value.find((f) => f.value == data)
			else if (model == 'learnStatus') res = learnStatusList.value.find((f) => f.value == data)
			return res.label || '暂无'
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: var(--f1Color);

		.one {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 3vw;
			padding: 5vw;
			border-radius: 2vw;
			color: var(--mainColor);

			.left {
				.one_1 {
					font-size: var(--font16Size);
					font-weight: bold;
					margin: 0 0 2vw 0;
				}
			}


			.right {
				background-color: var(--mainColor);
				padding: 2vw;
				border-radius: 90px;
			}
		}

		.one0 {
			background-color: var(--d57Color);
		}

		.one1 {
			background-color: var(--1e9Color);
		}

		.one2 {
			background-color: var(--ff6Color);
		}

		.one3 {
			background-color: var(--40eColor);
		}
	}
</style>