海报开发

pages/admin/haibao/index.vue

@@ -0,0 +1,87 @@
+<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>