talk_appAmin/pages/index.vue

<template>
	<view class="content">
		<view class="bj">
			<view class="text1">
				<view class="text1-1">校园管理</view>
				<view class="text1-2">在线审核</view>
				<view class="text1-3">
					<view class="text1-4">随时随地的在线审核</view>
				</view>
			</view>
			<image :src="adindex1" class="bj-img"></image>
		</view>
		<view class="grid">
			<!-- 通过未通过显示 -->
			<view class="grid1">
				<up-grid :border="false" col="3" @click="grid1Click1">
					<up-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex"
						customStyle="padding-top: 24rpx; ">
						<image :src="listItem.icon" style="width: 70rpx; height: 80rpx;"></image>
						<text style="font-size: 24rpx;color: #6AA2FF;margin-top: 12rpx;">{{ listItem.title }}</text>
					</up-grid-item>
				</up-grid>
			</view>
			<!-- 管理工具 -->
			<view class="grid2">
				<view class="text2">管理工具</view>
				<!-- <up-grid :border="false" col="4" @click="grid1Click2">
					<up-grid-item v-for="(listItem, listIndex) in list2" :key="listIndex"
						customStyle="padding-top: 30rpx; ">
						<image :src="listItem.icon" style="width: 60rpx; height: 60rpx;"></image>
						<text style="font-size: 24rpx;color: #6AA2FF;margin-top: 12rpx;">{{ linstItem.title }}</text>
					</up-grid-item>
				</up-grid> -->
				<up-grid :border="false" col="4" @click="grid1Click2">
				    <up-grid-item v-for="(listItem, listIndex) in list2" :key="listIndex"
				                  customStyle="padding-top: 30rpx;">
				      <image :src="listItem.icon"
				             :style="{width: listIndex === 1 ? '53rpx' : listIndex === 3 ? '49rpx' : '60rpx',
				                     height: listIndex === 1 ? '60rpx' : listIndex === 3 ? '60rpx' : '60rpx'}"></image>
				      <text style="font-size: 24rpx;color: #6AA2FF;margin-top: 12rpx;">{{ listItem.title }}</text>
				    </up-grid-item>
				  </up-grid>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getCount } from "@/api/activityInfo/info";
import {
	ref,
	reactive,
	toRefs,
	onMounted,
	onUnmounted,
	onBeforeUnmount,
	getCurrentInstance
} from 'vue';
import {
	onReachBottom,
	onLoad,
	onShow,
	onPageScroll
} from "@dcloudio/uni-app";
const { proxy } = getCurrentInstance();
const QNDomain = proxy.$store.state.user.QNDomain
const bgColor = ref('rgba(170, 0, 0, 0)');
const isOfficial = ref(true)
const kfopen = ref(false)

const iconConfig = proxy.iconConfig;
const adindex1 = iconConfig.adindex1;

const adgrade = iconConfig.adgrade;
const adcoin = iconConfig.adcoin;
const puacti = iconConfig.puacti;
const admyactivity = iconConfig.admyactivity;
const adpass = iconConfig.adpass;
const talkautid = iconConfig.talkautid;
const stuaudit = iconConfig.stuaudit;
const adacaudit = iconConfig.adacaudit;
const adaudit = iconConfig.adaudit;
const auditreject = iconConfig.auditreject;


const auditrejectacount = ref(111)
const adauditacount = ref(111)
const adpassacount = ref(111)
const list1 = ref([
	{ icon: auditreject, title: `未通过(${auditrejectacount.value})` },
	{ icon: adaudit, title: `待审核(${adauditacount.value})` },
	{ icon: adpass, title: `已通过(${adpassacount.value})` }
])
const list2 = ref([
	{ icon: talkautid, title: '话题审核' },
	{ icon: adacaudit, title: '活动审核' },
	{ icon: stuaudit, title: '认证审核' },
	{ icon: admyactivity, title: '我的活动' },
	{ icon: puacti, title: '发布活动' },
	{ icon: adcoin, title: '校园币管理' },
	{ icon: adgrade, title: '等级管理' }
])
const grid1Click1 = (e) => {
	console.log(e);
}
onLoad(() => {
	proxy.$store.dispatch('webSockerInfo')
	getCountInfo();
})
onShow(() => {
	proxy.$store.dispatch('webSockerInfo')
	getCountInfo();
})
const getCountInfo = () =>{
	let from = {}
	getCount(from).then(e => {

		let data = e.data
		// 将字符串转换为整数并相加
		auditrejectacount.value = parseInt(data.talkTopicNoPass || 0) + parseInt(data.actiTopicNoPass || 0);
		adauditacount.value = parseInt(data.talkTopicAudit || 0) + parseInt(data.actiTopicAudit || 0);
		adpassacount.value = parseInt(data.talkTopicPass || 0) + parseInt(data.actiTopicPass || 0);
		list1.value = [
			{ icon: auditreject, title: `未通过(${auditrejectacount.value})` },
			{ icon: adaudit, title: `待审核(${adauditacount.value})` },
			{ icon: adpass, title: `已通过(${adpassacount.value})` }
		]
	})
}


// 点击管理工具的按钮aaa
const grid1Click2 = (e) => {
	console.log('点击了这个按钮', e);
	// e==>0 话题审核
	if (e == 0) {
		uni.navigateTo({
			url: '/pages/work/index'
		})
	}
	if (e == 1) {
		uni.navigateTo({
			url: '/pages/work/activity_sh/activity_sh'
		})
	}
	if (e == 2) {
		uni.navigateTo({
			url: '/pages/work/renzhen_sh/renzhen_sh'
		})
	}
	if (e == 3) {
		uni.navigateTo({
			url: '/pages/work/My_activity/My_activity'
		})
	}
	// e==>4 发布活动
	if (e == 4) {
		uni.navigateTo({
			url: '/pages/activity/publish'
		})
	}
	if (e == 5) {
		uni.navigateTo({
			url: '/pages/work/guanli_gold/guanli_gold'
		})
	}
	if (e == 6) {
		uni.navigateTo({
			url: '/pages/work/guanli_level/guanli_level'
		})
	}

}
</script>

<style lang="scss" scoped>
page {
	background: #FFFFFF;
}

.content {
	height: 100%;
	background-color: #ffffff;
	position: relative;
}

.bj {
	width: 750rpx;
	height: 400rpx;
	background: #6aa2ff;
	z-index: -1;

	.text1 {
		position: relative;
		top: 120rpx;
		left: 60rpx;
		width: 244rpx;


		.text1-1 {
			font-weight: 400;
			font-size: 48rpx;
			color: #FFFFFF;
			margin-bottom: 30rpx;
		}

		.text1-2 {
			font-weight: 400;
			font-size: 48rpx;
			color: #FFFFFF;
			margin-bottom: 30rpx;
		}

		.text1-3 {
			width: 242rpx;
			height: 42rpx;
			line-height: 42rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #FFFFFF; // 添加这一行
			text-align: center;

			.text1-4 {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.bj-img {
		width: 280rpx;
		height: 276rpx;
		position: fixed;
		top: 88rpx;
		left: 428rpx;
	}
}

.grid {}

.grid1 {
	width: 686rpx;
	height: 166rpx;
	border-radius: 16rpx;
	background: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); // 添加这一行
	margin: 32rpx auto;

}

.grid2 {
	width: 686rpx;
	height: 350rpx;
	border-radius: 16rpx;
	background: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); // 添加这一行
	margin: 0 auto;

	.text2 {
		font-weight: 600;
		font-size: 28rpx;
		color: #6AA2FF !important;
		margin-top: 24rpx;
		margin-left: 24rpx;
	}

}
</style>