uniProject/pages/admin/ShouYe/shouye.vue

<template>
  <view class="admin-shouye-page">
	  <view class="shouye-head-box">{{indexInfoData.jzName}}</view>
	  <view class="index-banner-default" v-if="!swiperInfo.length>0"></view>
	  <uni-swiper-dot v-else class="shouye-swiper-box" :info="swiperInfo" :current="current" field="content" mode="dot" :dots-styles="dotStyle">
	  	<swiper class="swiper-box" @change="change" autoplay circular interval="5000">
			<!-- autoplay circular interval="3000" -->
	  		<swiper-item v-for="(item ,index) in swiperInfo" :key="index">
				<img class="index-banner-img" :src="item.pic" @click="gotoKc(item)"/>
	  		</swiper-item>
	  	</swiper>
	  </uni-swiper-dot>

	  <view class="tj-btn-box">
	  		<text :class="{active: tjBtn == 1}" @click="tjBtnClick(1)">本周</text>
	  		<text :class="{active: tjBtn == 2}" @click="tjBtnClick(2)">本月</text>
	  		<text :class="{active: tjBtn == 0}" @click="tjBtnClick(0)">全部</text>
	  </view>
	  <view class="index-tj-row">
		 <view class="index-tj-box">
		 		  <view class="tj-num-box">{{indexInfoData.bzCount}}/{{indexInfoData.jzCount}}</view>
		 		  <view class="tj-tip-box">考证人员/家政人员</view>
		 </view>
		 <view class="index-kc-box" @click="goToPage('sykc')">
		 	<view class="tj-num-box">{{indexInfoData.kechengCount}}/{{indexInfoData. kechengUsed}}</view>
		 	<view class="tj-tip-box">剩余课程/已售课程</view>
			<icon class="sjkc-jt-icon"></icon>
		 </view>
	  </view>
	  <view class="index-tongzhi-box" @click="goToPage('tz')">
	  		  <text class="tongzhi-num">{{tzNum}}</text>
	  		  <rich-text :nodes="tzContent" class="tongzhi-content"></rich-text>
	  		  <icon></icon>
	  </view>
	  <view class="card-list-box">
		 <view class="card-list-title">管理家政人员</view>
		 <view @click="goToPage('jz')" class="card-item-box">
		 	<icon class="index-icon jz-icon"></icon>
		 	<text>家政人员</text>
		 </view>
		 <view @click="goToPage('zzh')" class="card-item-box">
		 	<icon class="index-icon zzh-icon"></icon>
		 	<text>创建子账号</text>
		 </view>
	  </view>
	  <view class="card-list-box">  
		<view class="card-list-title">管理考证人员</view>
		<view @click="goToPage('bz')" class="card-item-box">
			<icon class="index-icon kz-icon"></icon>
			<text>办证管理</text>
		</view>
		<view @click="goToPage('ks')" class="card-item-box">
			<icon class="index-icon ks-icon"></icon>
			<text>考试管理</text>
		</view>
		<view @click="goToPage('cj')" class="card-item-box">
			<icon class="index-icon cj-icon"></icon>
			<text>成绩管理</text>
		</view>
		<view @click="goToPage('lc')" class="card-item-box">
			<icon class="index-icon lx-icon"></icon>
			<text>练习管理</text>
		</view>
		<view @click="goToPage('kc')" class="card-item-box">
			<icon class="index-icon kc-icon"></icon>
			<text>课程管理</text>
		</view>
	</view>	
	<!-- 页面底端 -->
	<customTabbarAdminVue :current-tab="0"></customTabbarAdminVue>
  </view>
</template>

<script setup>
import {onLoad,onShow} from '@dcloudio/uni-app';
import {reactive,ref} from "vue";
import customTabbarAdminVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";
import {getAppNoticeList,getAppNoticeWait,getGlIndexInfo,getIndexKechengList} from '@/api/shouye.js'

const tjBtn = ref(1);
const tzNum = ref(0);
const tzContent = ref('');
const searchType = ref('');
const current = ref(0);
let indexInfoData = reactive({
		searchType:1,
		bzCount: 0,
		jzCount: 0,
		jzName: '',
		kechengCount: 0,//剩余课程数量
		kechengUsed: 0,//售出课程数量
	});
const swiperInfo = ref([]);
const dotStyle = reactive({
	width:'8',
	height:'8',
	bottom:'-12',
	backgroundColor: 'rgba(226,230,236)',
	border: '1px rgb(226,230,236) solid',
	selectedBackgroundColor: 'rgb(92, 192, 147)',
	selectedBorder: '1px rgb(92, 192, 147) solid'
});

function change(e) {
				current.value = e.detail.current
			}
			
function gotoKc(item){
	uni.navigateTo({
		url: `/pages/admin/Kecheng/study?kcId=${item.kcId}&from=shouye`
	})
}

onLoad((options) => {
		initPage();
})

function initPage() {
	getKcTg();
	getTzNum();
	getTzlist();
	getIndexInfo();
}	
function getKcTg(){
	getIndexKechengList({}).then(res => {
		swiperInfo.value = res.data.data;
	})
}
function getTzNum(){
	getAppNoticeWait({}).then(res => {
		tzNum.value = res.data;
	})
}

function getIndexInfo(){
	getGlIndexInfo({searchType:indexInfoData.searchType}).then(res => {
		indexInfoData.bzCount = res.data.bzCount;
		indexInfoData.jzCount = res.data.jzCount;
		indexInfoData.jzName = res.data.jzName;
		indexInfoData.kechengCount = res.data.kechengCount;
		indexInfoData.kechengUsed = res.data.kechengUsed;
	})
}

function getTzlist(){
	const opt = {
		page: 1,
		size: 10, // 固定查询10条
	}
	getAppNoticeList(opt).then(res => {
		tzContent.value = res.data.data[0].name;
	})
}

// 按钮切换
function tjBtnClick(data){
	tjBtn.value = data;
	indexInfoData.searchType = data;
	getIndexInfo();
}
// 获取用户头像
	function goToPage(data){
		switch (data) {
		    case 'jz':
		        uni.redirectTo({
		        	url:'/pages/admin/Jiazheng/index'
		        })
		        break;
			case 'zzh':
			    uni.redirectTo({
			    	url:'/pages/admin/zizhanghao/list'
			    })
			    break;
			case 'sykc':
			    uni.redirectTo({
			    	url:'/pages/admin/yishou/yishou'
			    })
			    break;
		    case 'bz':
		        uni.redirectTo({
		        	url:'/pages/admin/banzheng/list'
		        })
		        break;
		    case 'ks':
		        uni.redirectTo({
		        	url:'/pages/admin/Kaoshi/list'
		        })
		        break;
			case 'cj':
			    uni.redirectTo({
			    	url:'/pages/admin/Chengji/list'
			    })
			    break;
			case 'kc':
			    uni.redirectTo({
			    	url:'/pages/admin/Kecheng/list'
			    })
			    break;
			case 'tz':
			    uni.redirectTo({
			    	url:'/pages/admin/tongzhi/list'
			    })
			    break;
			case 'lc':
				uni.redirectTo({
					url:'/pages/admin/Lianxi/list'
				})
				break;
		}
	}
</script>