uniProject/components/catalogue/catalogue.vue

<template>
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
	 mask-background-color="rgba(255, 255, 255, 0.6);" :is-shadow="false">
		<scroll-view scroll-y="true" :scroll-top="scrollTop"  class="ezy-catalogue-dialog" :style="{backgroundImage: 'url(' + catalogueBjFun() + ')'}">
			<uni-icons @click="handleClose" class="catalogue-close-btn"></uni-icons>
			<!-- 目录区域 -->
			<uni-collapse v-model="activeCollapse" class="ezy-catalogue-collapse" :class="{ 'ezy-catalogue-collapse-vip': AuthCode === 'VIP'}" accordion>
				<uni-collapse-item title-border="none" :border="false" :name="index+''" v-for="(item,index) in list" 
				class="collapse-item-box" :class="{ 'collapse-active': activeCollapse === index+''}">
					<template v-slot:title>
							<view @click.stop="handleSelectZhang(item,index)" class="collapse-title">
								<view class="collapse-num-box">{{index+1}}</view>
								<!-- 章名 -->
								<text class="collapse-name">{{item.zhangName}}</text>
								<!-- 锁 -->
								<template v-if="AuthCode !== 'VIP'">
									<view class="collapse-lock" v-if="index!=0"></view>
								</template>
							</view>
					</template>
					<view class="collapse-content-box">
							<view v-for="(jie,cindex) in item.jieList" class="collapse-content-item" @click="handleJieClick(item,jie,index,cindex)">
								<text class="jie-index">{{`${index+1}.${cindex+1}`}}</text>
								<text class="text">{{jie.jieName}}</text>
							</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<tip-small-dialog ref="confirmDialogRef" @confirm-btn="handleConfirmPay" :content="Message"></tip-small-dialog>
			<tip-middle-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :content="MESSAGE_VISITER_TO_LOGIN"></tip-middle-dialog>
		</scroll-view>
	</uni-popup>
</template>

<script setup>
	import {
		useCatalogue
	} from './useCatalogue';
	import {
		ref
	} from "vue";
	import {
		toast
	} from "@/utils/common.js"
	import {getUserIdentity} from "@/utils/common.js"
	import {MESSAGE_VISITER_TO_LOGIN,MESSAGE_BEFORE_PAY} from "@/utils/constant.js"
  import tipSmallDialog from '@/components/dialog/tipSmallDialog.vue'
	import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
  import cacheManager from "@/utils/cacheManager.js";
	import {
	  onShow,onLoad
	} from '@dcloudio/uni-app';
	const growthType = ref(null);
	const AuthCode = ref(null);
	const scrollTop = ref(0)
	const cardId = ref(null)
	onShow(() => AuthCode.value = getUserIdentity()); // 用户身份
	onLoad((options) => {
		if (cacheManager.get('auth')) {
		  cardId.value = cacheManager.get('auth').cardId;
		} else {
		  cardId.value = options.cardId;
		}
	})

	const $emit = defineEmits(['change-zhang'])

	const { getCatalogue} = useCatalogue();

	const popupRef = ref(null); // 索引
	const confirmDialogRef = ref(null);
	const activeCollapse = ref('');
	const Message = MESSAGE_BEFORE_PAY;
	const youkeDialogRef = ref(null);
	const selectZhang = ref(null);

	const props = defineProps({
		list: {
			type: Array,
		}
	})
	
	function handleJieClick(item,jie,index,cindex) {
		selectZhang.value = item;
		if (index == 0 && cindex == 0 ) {
			// 全员可访问 第一章 第一节
			this.$emit('listSelectJieClick', item,jie);
			return;
		}
		if (AuthCode.value == 'Visitor') {
			// 游客
			youkeDialogRef.value.handleShow();
			return;
		}
		if (AuthCode.value == 'Not-Vip') {
			// 非VIP
			confirmDialogRef.value.handleShow();
			return;
		}
		
		// Vip
		this.$emit('listSelectJieClick', item,jie);
	}

	function catalogueBjFun(){
		if(cardId.value ==1){
			// 数学
			return 'static/images/catalog/catalog-shuxue-bj.png'
		}else if(cardId.value ==2){
			// 英语
			return 'static/images/catalog/catalog-yingyu-bj.png'
		}
	}
	
	function ykConfirm() {
		uni.redirectTo({
			url: '/pages/login/index'
		});
	}

	/**
	 * @summary 展示弹窗 暴露函数
	 */
	async function showPopup(data) {
		if (data) {
			const index = props.list.findIndex(item => item.zhangId == data.zhangId);
			// 滚动高度
			scrollTop.value = 50 * index;
			activeCollapse.value = index+'';
		}
		handleShow();
	}


	/**
	 * @summary 展示目录弹窗
	 */
	function handleShow() {
		popupRef.value.open('center');
	}

	/**
	 * @summary 关闭目录弹窗
	 */
	function handleClose() {
		popupRef.value.close();
	}
	/**
	 * @summary 选中
	 * @param({zhangId:string}) data
	 */
	function handleSelectZhang(data,index) {
		selectZhang.value = data;
		if(index !=0 && AuthCode.value == 'Visitor'){
			// 游客
			youkeDialogRef.value.handleShow();
			return;
		}

		if(index !=0 && AuthCode.value == 'Not-Vip'){
			// 非VIP
			confirmDialogRef.value.handleShow();
			return;
		}
		$emit('change-zhang', Object.assign({}, data));
		handleClose();
	}
	function handleConfirmPay() {
		const url = `/pages/pay/svip?cardId=${cardId.value}&formPage=studyWithCatalgue&selectZhangId=${selectZhang.value.zhangId}`
		uni.redirectTo({ url })
	}
	defineExpose({
		showPopup
	})
</script>