uniProject/pages/selectVersion/selectVersion.vue

<template>
	<view class="grades-terms-page">
		<view class="icon-title-navBar-box">
			<!-- 返回按钮↓ -->
			<view class="nav-bar-icon" @click="handleBack"></view>
		</view>
		<view class="grade-item-box">
			<view :key="item.id" @click="handleTopBottom(item)" v-for="item in data.allList"
				:class="['grade-item',{active: item.id == data.shangxiaId}]">{{item.lable}}</view>
		</view>
		<scroll-view scroll-y="true" class="subject-body" :scroll-into-view="data.scrollTop">
			<view class="subject-content-box">
				<!-- 产品 -->
				<view v-for="item in list" :key="item.id" :id="`s_${item.id}`" @click="handleSelectVersion(item)"
					:class="[
						    'subject-item',
						    item.typeId === 1 && 'subject-jstx-item',
						    {
						      'active': item.id == data.shangxiaVersionId
						    }
						  ]">
					<img :src="item.cover" class="subject-item-img" />
					<view class="subject-item-text"><text>{{item.lable}}</text></view>
				</view>
			</view>
		</scroll-view>
		<view class="grade-line"></view>
		<button class="grade-confirm-btn" @click="handleConfirm"></button>
	</view>
</template>

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


	const data = reactive({
		scrollTop: '',
		allList: [],
		levelId: null,
		typeId: null,
		subjectId: null,
		tipFlag: null,
		shangxiaId: 1, // 上下册
		shangxiaVersionId: null, // 当前版本
	})
	
	const list = computed(() => {
		if (!data.allList.length) {
			return []
		}
		const d_id = data.shangxiaId;
	
		return data.allList.find(item => item.id == d_id).children
	})

	onLoad(({
		levelId,
		subjectId,
		shangxiaId, // 上下册Id
		shangxiaVersionId, // 上下册版本Id
		typeId,
		tipFlag
	}) => {
		const userCode = getUserIdentity();
		if (userCode !== 'Visitor') {
			initUserProducts();
		} else {
			data.levelId = levelId;
			data.subjectId = subjectId || 1;
			data.shangxiaId = shangxiaId || 1; // 默认选中上册
			data.shangxiaVersionId = shangxiaVersionId; // 默认选中上册
			data.typeId = typeId;
			data.activeTipFlag = tipFlag || '0';
			initVisitProducts();
		}
	});

	function handleBack() {
		const userCode = getUserIdentity();
		if (userCode !== 'Visitor') {
			if (!data.activeProduct) {
				return;
			}
			const auth = cacheManager.get('auth');
			uni.redirectTo({
				url: `/pages/selectGradesTerms/index`
			})
		} else {
			uni.redirectTo({
				url: `/pages/selectGradesTerms/index?productId=${data.levelId}&xuekeId=${data.subjectId}&tipFlag=${data.tipFlag}`
			})
		}
	}

	function handleTopBottom(item) {
		data.shangxiaId = item.id;
		data.shangxiaVersionId = null;
	}

	function handleSelectVersion(item) {
		data.shangxiaVersionId = item.id
	}


	function handleConfirm() {
		if (!data.shangxiaId) {
			uni.showToast({
				title: "请选择上下册",
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (!data.shangxiaVersionId) {
			uni.showToast({
				title: "请选择版本",
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		goDAOToStudy();
	}
	
	// 跳转 岛 学习
	function goDAOToStudy() {
		const userCode = getUserIdentity();
		if (userCode !== 'Visitor') {
			const auth = cacheManager.get('auth');
			cacheManager.updateObject('auth', {
				// 修改上下册+版本字段
			})
			// 通知岛重新调用接口
			cacheManager.remove('daoPageCache')
			uni.redirectTo({
				url: `/pages/study/index`
			})
		} else {
			// 新英语岛
			uni.redirectTo({
				url: `/pages/study/index?levelId=${data.levelId}&typeId=${data.typeId}&subjectId=${data.subjectId}&tipFlag=${data.activeTipFlag}`
			})
		}
	
	}
	

	function initUserProducts() {
		httpApi.getUserZhangList({
			levelId: data.levelId
		}).then(res => {
			data.allList = res.data || [];
			const {
				levelId,
			} = cacheManager.get('auth');
			if (levelId) {
				// LevelId 翻找根节点学科，执行选中高亮操作
				const obj1 = findRootNode(data.allList, shangxiaId, 'shangxiaId');
				const obj2 = findTreeNode(data.allList, shangxiaId, 'children', 'shangxiaId');
				data.shangxiaVersionId = obj2.id;
				data.shangxiaId = obj1.id;

			} else {
				data.shangxiaVersionId = null;
				data.shangxiaId = 1
			}

			nextTick(() => {
				// 滚动到某个元素显示
				data.scrollTop = `s_${data.shangxiaVersionId}`
			})
		})
	}

	function initVisitProducts() {
		httpApi.getCommonZhangList({
			levelId: data.levelId
		}).then(res => {
			data.allList = res.data || [];
		})
	}


</script>

<style>

</style>