调整解析单词显示

pages.json

@@ -146,6 +146,20 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/chanpinXuanze/index",
+			"style" : 
+			{
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/chanpinXuanze/banben",
+			"style" : 
+			{
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"tabBar": {

pages/chanpinXuanze/banben.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/chanpinXuanze/components/shuxueList.vue

@@ -0,0 +1,38 @@
+<template>
+	<view>
+		<view v-for="item in list" :key="item.chanpinId">
+			<!-- 封面 -->
+			<image :src="item.cover"></image>
+			<!-- 名称 -->
+			<view>{{item.name}}</view>
+			<!-- 简介 -->
+			<view>{{item.intro}}</view>
+			<!-- 共计 -->
+			<view>共计{{item.gongji}}节课程</view>
+			<view>
+				<view>请选择学习等级</view>
+				<view v-for="cItem in item.levelList" @click="handleSelect" :class="{active: item.active}">{{cItem.levelName}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	
+	const props = defineProps({
+		list: {
+			type: Array
+		}
+	})
+	
+	// 选择产品等级
+	function handleSelect(item) {
+		console.log('item', item)
+	}
+</script>
+
+<style scoped lang="scss">
+.active {
+	color: red
+}
+</style>

pages/chanpinXuanze/index.vue

@@ -0,0 +1,70 @@
+<template>
+	<!-- 返回区域 -->
+		<view>
+			<!-- <view @click="handleBack"></view> -->
+			<view>选课</view>
+		</view>
+		<!-- 头部区域 -->
+		<view>
+			<view v-for="item in data.list" :key="item.value" :class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin">{{item.name}}</view>
+		</view>
+		<!-- 英语列表 -->
+		<view class="list yingyu" v-if="data.chanpinActiveSelect == 1">
+			
+		</view>
+		<!-- 数学列表 -->
+		<shuxueListVue class="list shuxue" v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
+		<!-- 语文列表 -->
+		<view class="list yuwen" v-if="data.chanpinActiveSelect == 3">
+			
+		</view>
+</template>
+
+<script setup>
+	import {reactive} from "vue";
+	import shuxueListVue from "./components/shuxueList.vue";
+	import {onLoad} from "@dcloudio/uni-app"
+	import * as shuxueHttp from "@/api/chanpinShuxue.js"
+	
+	const data = reactive({
+		list: [
+			{
+				name: '英语',
+				value: 1
+			},
+			{
+				name: '数学',
+				value: 2
+			},
+			{
+				name: '语文',
+				value: 3
+			},
+		],
+		chanpinActiveSelect: 2,
+		
+		shuxueList: [],
+	})
+	
+	function handleBack() {}
+	
+	function getShuxueList() {
+		shuxueHttp.getShuxueChanpinList().then(res => {
+			data.shuxueList = res.data;
+		})
+	}
+	
+	function handleSelectChanpin(item) {
+		data.chanpinActiveSelect = item.value
+	}
+	
+	onLoad(() => {
+		getShuxueList()
+	})
+</script>
+
+<style scoped lang="scss">
+.active {
+	color: red
+}
+</style>