uniProject/pages/selectGradesTerms/index.vue

<template>
	<view class="grades-terms-page">
		<view class="icon-title-navBar-box">
			<!-- 返回按钮↓ -->
			<view class="nav-bar-icon"  @click="handleBack"></view>
		</view>
		<view class="grades-body">
			<view class="grades-change-title"></view>
			<text class="grades-title-desc">我们会根据您选择，为您匹配对应的学习内容</text>
			<view class="grades-terms-title terms-title-img"></view>
      <view class="grade-item-box">
        <view :key="xueke.id" @click="handleSelectXueke(xueke)" v-for="xueke in xuekeData"
              :class="['grade-item',{active: xueke.id == activeXueke}]">{{xueke.lable}}</view>
      </view>
      <view class="grades-terms-title grades-title-img"></view>
      <view class="grade-item-box">
        <!-- 产品 -->
        <view v-for="item in xuekeList" :key="item.id" @click="handleSelectGrade(item)"
              :class="['grade-item', {active: item.id == activeProduct}]">{{item.lable}}</view>
      </view>
      <view class="grade-line"></view>
			<button class="grade-confirm-btn" @click="handleConfirm"></button>
		</view>
	</view>
</template>

<script setup>

	import {
		reactive,
		toRefs,
    computed
	} from "vue";
  import * as httpApi from "@/api/selectGradesTerms.js";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {getUserIdentity,findRootNode,findTreeNode} from "@/utils/common.js"
	import cacheManager from "@/utils/cacheManager.js"
  import {getCommonTree, getIndexTree} from "../../api/selectGradesTerms";

	function useSelectGrade() {
		const userCode = getUserIdentity();

		const data = reactive({
			activeProduct: null, // 当前年级
			activeXueke: null, // 当前学期
			activeTipFlag: null, // 当前学期
      xuekeData: [], // 学科总数据
		});

		onLoad(({productId,xuekeId,tipFlag}) => {
			if (userCode !== 'Visitor') {
        initUserProducts();
			} else {
        data.activeProduct = productId;
        data.activeXueke = xuekeId;
        data.activeTipFlag = tipFlag || '0';
        initVisitProducts();
			}
		});

    // 初始化游客产品数据
    function initVisitProducts() {
      httpApi.getCommonTree().then(res => {
        data.xuekeData = res.data||[];
      })
    }

    function initUserProducts() {
      httpApi.getIndexTree().then(res => {
        data.xuekeData = res.data||[];
        const {
          levelId,
        } = cacheManager.get('auth');
        if (levelId) {
          // LevelId 翻找根节点学科，执行选中高亮操作
          const xuekeObj = findRootNode(data.xuekeData, levelId,'levelId');
          const productObj = findTreeNode(data.xuekeData, levelId,'levelId');
          data.activeProduct = productObj.id;
          data.activeXueke = xuekeObj.id;
        } else {
          data.activeProduct = null;
          data.activeXueke = null
        }
      })
    }

		// 选择 年级+学期
		function handleConfirm() {
			if (!data.activeXueke) {
				uni.showToast({
					title: "请选择课程类别",
					duration: 2000,
					icon: 'error'
				});
				return;
			}
			if (!data.activeProduct) {
				uni.showToast({
					title: "请选择课程等级",
					duration: 2000,
					icon: 'error'
				});
				return;
			}
      goDAOToStudy();
		}

		// 跳转 岛 学习
		function goDAOToStudy() {
      const Product = data.xuekeData.find(item => item.id == data.activeXueke).children.find(item => item.id == data.activeProduct)
      const levelId = Product.levelId;
      const typeId = Product.typeId;
      const subjectId = Product.subjectId;

			if (userCode !== 'Visitor') {
				const auth = cacheManager.get('auth');
				cacheManager.updateObject('auth', {
          typeId: typeId,
          levelId: levelId,
          subjectId: subjectId,
          zhangId: data.activeProduct == auth.nianji && data.activeXueke == auth.cardId ? auth.zhangId: 0,
          currentZhang: 0
				})
				cacheManager.remove('daoPageCache')
				uni.redirectTo({
					url: `/pages/study/index`
				})
			} else {
        if (typeId == 1) {
          // 新岛
          uni.redirectTo({
            url: `/pages/study/index?levelId=${levelId}&typeId=${typeId}&subjectId=${subjectId}&tipFlag=${data.activeTipFlag}`
          })
        } else {
          // 旧岛
          uni.redirectTo({
            url: `/pages/study/index?levelId=${levelId}&typeId=${typeId}&subjectId=${subjectId}&zhangId=0&tipFlag=${data.activeTipFlag}`
          })
        }

			}

		}
		function handleBack() {
			if (userCode !== 'Visitor') {
				uni.redirectTo({ url: `/pages/study/index`})
			} else {
				uni.redirectTo({url: '/pages/login/index'})
			}
		}
		
		return {
			...toRefs(data),
			handleBack,
			// 方法
			handleConfirm, // 选择年级+学科
		};
	}

	const {
		activeProduct,
		activeXueke,
    xuekeData,
		handleConfirm,
		handleBack
	} = useSelectGrade()

  const xuekeList = computed(() => {

    if (!xuekeData.value.length) {
      return []
    }
    const d_id = activeXueke.value || xuekeData.value[0].id;
    return xuekeData.value.find(item => item.id == d_id).children
  })

  function handleSelectGrade(item) {
		activeProduct.value = item.id;
	}

	function handleSelectXueke(item) {
		activeXueke.value = item.id;
    activeProduct.value = null;
	}
	

</script>