uniProject/pages/selectVersion/selectVersion.vue

<template>
	<view class="select-version-page">
		<view class="icon-title-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">请选择教材</text>
		</view>
		<view class="ezy-tab-border">
			<view class="ezy-border-body">
				<view class="tab-head-box">
					<view :key="item.id" @click="handleTopBottom(item)" v-for="item in data.allList"
						:class="['tab-item',{active: item.id == data.shangxiaId}]">{{item.lable}}</view>
				</view>
				<scroll-view scroll-y="true" class="select-version-body" :scroll-into-view="data.scrollTop">
					<view class="version-content-box">
						<!-- 产品 -->
						<view v-for="item in list" :key="item.id" :id="`s_${item.id}`"
							@click="handleSelectVersion(item)"
							:class="[ 'version-item', {'active': item.id == data.shangxiaVersionId} ]">
							<view class="version-item-border">{{item.lable}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="select-version-line"></view>
				<button class="select-version-confirm-btn" @click="handleConfirm"></button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		computed,
		nextTick,
	} from "vue";
	import * as httpApi from "@/api/selectGradesTerms.js";
	import {
		getUserIdentity,
		findRootNode,
		findTreeNode
	} from "@/utils/common.js"
	import cacheManager from "@/utils/cacheManager.js"
	import {
		getDataFromStr
	} from "@/utils/common.js"
	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
		typeId,
		tipFlag
	}) => {
		const userCode = getUserIdentity();
		if (userCode !== 'Visitor') {
			initUserProducts();
		} else {
			data.levelId = getDataFromStr(levelId)[0];
			data.subjectId = subjectId || 1;
			data.shangxiaId = shangxiaId || 1; // 默认选中上册
			data.shangxiaVersionId = getDataFromStr(levelId)[1]; // 默认选中上册
			data.typeId = typeId;
			data.activeTipFlag = tipFlag || '0';
			initVisitProducts();
		}
	});

	function handleBack() {
		const userCode = getUserIdentity();
		if (userCode !== 'Visitor') {
			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 {
				levelId: levelIdD,
			} = cacheManager.get('auth');

			let levelId = getDataFromStr(levelIdD)[0];
			
			console.log('levelId',levelId,data.shangxiaVersionId,levelId + ',' + data.shangxiaVersionId)
			
			cacheManager.updateObject('auth', {
				// 修改上下册+版本字段
				levelId: levelId + ',' + data.shangxiaVersionId,
			})
			
			
			// 通知岛重新调用接口
			cacheManager.remove('zhangInfo')
			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}&youkeZhangId=${data.shangxiaVersionId}`
			})
		}

	}


	function initUserProducts() {

		const {
			levelId: levelIdD,
		} = cacheManager.get('auth');

		let levelId = getDataFromStr(levelIdD)[0];

		data.levelId = levelId;
		httpApi.getUserZhangList({
			levelId: data.levelId
		}).then(res => {
			data.allList = res.data || [];
			let zhangId = getDataFromStr(levelIdD)[1]
			if (zhangId) {
				// LevelId 翻找根节点学科，执行选中高亮操作
				const obj1 = findRootNode(data.allList, zhangId, 'id');
				const obj2 = findTreeNode(data.allList, zhangId, 'children', 'id');
				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>