uniProject/pages/chanpinZiliao/shuxue/jstxInfo.vue

<template>
	<view class="ezy-jstx-ziliao-page">
		<view class="icon-title-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">{{data.ziliaoName}}</text>
		</view>
		<view class="ezy-page-body jstx-body">
			<view class="jstx-body-title"></view>
			<!-- 资料等级标签切换 -->
			<view class="jstx-tab-box">
				<view v-if="data.dengjiList.length > 0" v-for="(item, index) in data.dengjiList" :key="item.dengjiId" @click="zldjBtn(item,index)"
				class="tab-item" :class="{active: item.dengjiId == data.dengjiActiveSelect}">{{ item.dengjiName }}</view>
			</view>
			<!-- 版本卡片列表 -->
			<view v-if="data.banbenList.length > 0" class="jstx-card-list">
				<view v-for="(bbItem, index) in data.banbenList" :key="bbItem.banbenId"
				@click="cardBtn(bbItem)" class="ziliao-card-box">
					<!-- <img/> -->
					<img :src="bbItem.cover" class="card-img"/>
					<!-- 内容区 -->
					<view class="card-content-box">
						<view class="ziliao-name">{{ bbItem.ziliaoName }}</view>
						<view class="banben-name">{{ bbItem.banbenName}}</view>
					</view>
					<icon class="card-icon"></icon>
				</view>
			</view>
			<!-- 无数据提示 -->
			<view class="ezy-no-sj" v-else>
				<icon></icon>
				<text>暂无数据</text>
			</view>
		</view>
		<!-- 下载弹窗 -->
		<jstxDownDialog ref="jstxDownRef" @confirm-btn="jstxDialogConfirm" :content="data.jcContent"></jstxDownDialog>
	</view>
</template>

<script setup>
import {reactive, ref} from "vue";
import {onLoad,onShow} from "@dcloudio/uni-app"
import {jisuanInfo,jisuanPdf} from '@/api/ziliao.js'
import jstxDownDialog from './jstxDownDialog.vue';
const data = reactive({
	id: '',
	ziliaoName: '',
	dengjiList: [],
	dengjiActiveSelect: '',
	dengjiActiveSelectName: '',
	banbenList: [],
	banbenId: '',
	jcContent: '',
})
const jstxDownRef = ref(null);

function handleBack() {
	uni.switchTab({
		url: '/pages/chanpinZiliao/index'
	})
}
			
// jisuantexun Info data
function getJisuanInfo() {
  jisuanInfo({ziliaoId:data.id}).then(res => {
	  data.ziliaoName = res.data.ziliaoName;
	  data.dengjiList = res.data.dengjiList;
	  // 默认加载第一个资料等级的数据
	  const firstLevel = data.dengjiList[0];
	  data.dengjiActiveSelect = firstLevel.dengjiId;
	  data.dengjiActiveSelectName = firstLevel.dengjiName;
	  data.banbenList = firstLevel.banbenList || [];
  }).catch(err => {
	  uni.showToast({ title: '加载失败，请稍后重试', icon: 'none' });
  })
}

// tab切换资料登记
function zldjBtn(item,index){
	data.dengjiActiveSelect = item.dengjiId;
	data.dengjiActiveSelectName = item.dengjiName;
	data.banbenList = data.dengjiList[index].banbenList;
}

// card点击
function cardBtn(bbItem) {
	// 确认逻辑
	data.banbenId = bbItem.banbenId;
	data.jcContent = "鹅状元将为您随机生成"+ data.dengjiActiveSelectName +"《" + bbItem.banbenName + "》100道试题。"
	jstxDownRef.value.handleShow();
}

// 弹窗确认	
function jstxDialogConfirm() {
	jisuanPdf({
	  banbenId:data.banbenId,
	}).then(res1 => {
		const url = res1.data;
		if (!url) {
			uni.showToast({ title: '未获取到文件地址', icon: 'none' });
			return;
		}
		
		uni.downloadFile({
		  url,
		  success: function (res) {
		    var filePath = res.tempFilePath;
		    uni.openDocument({
		      filePath: filePath,
		      showMenu: true,
		      success: function (res) {
				jstxDownRef.value.handleClose();
		      },
			  fail: () => {
			  	uni.showToast({ title: '无法打开文件', icon: 'none' });
			  }
		    });
		  }
		});
	}).catch(err => {
		uni.showToast({ title: '生成失败，请稍后重试', icon: 'none' });
	});
}
	
onLoad((options) => {
	data.id = options.ziliaoId;
	getJisuanInfo()
})
</script>