uniProject/pages/admin/haibao/index.vue

<template>
	<view class="phone-haibao-page">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">职业海报</text>
		</view>
		<view class="haibao-body-box">
			<view class="haibao-menu-box">
				<view v-for="menu in menuData" :key="menu.id" class="menu-item-box"
				      :class="{ active: selectedCategory == menu.id }"
				      @click="menuBtn(menu.id)">
				  {{ menu.name }}
				</view>
			</view>
			<view class="haibao-show-box">
				<view class="haibao-title">共{{cardData.length}}个海报</view>
				<view class="card-list-box">
					<view v-for="item in cardData" :key="item.id" class="haibao-card-box"
					      @click="cardBtn(item.id)">
						  <img :src="item.image"/>
						  <view class="card-name">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script setup>
import * as httpApi from '@/api/haibao.js'	
import { ref, reactive } from "vue"
import {onLoad} from "@dcloudio/uni-app";
const menuData = ref([])
const cardData = ref([])
// 当前选中的分类
const selectedCategory = ref(null)

function goUpPage() {
	uni.redirectTo({
		url: `/pages/admin/ShouYe/shouye`
	})
}

function getHaibaoListData(data) {
		httpApi.getHaibaoList({zyId:data}).then(res =>{
			cardData.value = res.data;
		})
	}
	
function menuBtn(id){
	getHaibaoListData(id);
	selectedCategory.value = id;
	console.log('selectedCategory.value',selectedCategory.value);
}

function cardBtn(data){
	uni.redirectTo({
		url:`/pages/admin/haibao/haibaoInfo?cardId=${data}&menuId=${selectedCategory.value}`
	})
}
function pageInit(){
	httpApi.getHaibaoOpsZhiye().then(res =>{
		menuData.value = res.data;
		if(menuData.value){
			selectedCategory.value = menuData.value[0].id;
			getHaibaoListData(selectedCategory.value);
		}
	})
}
function pageRecover(data){
	httpApi.getHaibaoOpsZhiye().then(res =>{
		menuData.value = res.data;
		menuBtn(data.menuId);
	})
}
onLoad((options) => {
	// 详情页返回
	if(options.menuId){
		pageRecover(options)
	}else{
		// 首页进入
		pageInit()
	}
	
})
</script>