epidemic_store/pages/index/index.vue

<template>
	<view class="content">
		<view class="notice">
			<u-notice-bar 
				type="success" 
				mode="vertical" 
				:more-icon="true"
				 @click="noticeClick"
				 @getMore="noticeMore"
				:list="noticeList">
			</u-notice-bar>
		</view>
		<view class="title">仓库管理</view>
		<view class="menu-list u-flex u-flex-wrap u-row-left">
			<view class="menu-item" @click="menuClick(item)" v-for="(item,index) in storeMenuList" :key="index">
				<u-icon :name="item.name" custom-prefix="custom-icon" size="60" color="#11d183"></u-icon>
				<view class="text">{{item.text}}</view>
				<u-badge v-if="item.badge" class="badge" :offset="[0,0]" :count="item.badge" type="success"></u-badge>
			</view>
		</view>
		<view class="title">其他</view>
		<view class="menu-list u-flex u-flex-wrap u-row-left">
			<view class="menu-item" @click="menuClick(item)" v-for="(item,index) in otherMenuList" :key="index">
				<u-icon :name="item.name" custom-prefix="custom-icon" size="60" color="#11d183"></u-icon>
				<view class="text">{{item.text}}</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeList:['寒雨连江夜入吴','平明送客楚山孤'],
				storeMenuList:[
					{name:'ruku',text:'物资入库',url:'pages/putin/putin'},
					{name:'chukuguanli',text:'物资出库',url:'pages/putout/putout'},
					{name:'pandian',text:'库存盘点',url:'pages/check/check'},
					{name:'fq_kucunchaxun',text:'库存查询',url:'pages/seach/seach'},
					{name:'RectangleCopy',text:'退库申请',badge:2,url:'pages/return/return'},
				],
				otherMenuList:[
					{name:'xiugaimima',text:'修改密码',url:'pages/changepass/changepass'},
				]
			}
		},
		onLoad() {

		},
		methods: {
			noticeClick(e){
				console.log('noticeClick',e);
			},
			noticeMore(){
				console.log('noticeMore');
			},
			menuClick(item){
				if(!item.url){
					this.$refs.uToast.show({
						title: '暂未开放',
						type: 'error',
					})
				};
				this.$u.route({
					url: item.url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.title{
	font-size: 30rpx;
	background-color: var(--bg-color);
	padding: 24rpx;
	font-weight: bold;
}
.menu-list{
	padding: 24rpx;
	text-align: center;
	.menu-item{
		gap: 20rpx;
		width: 33.33%;
		position: relative;
		margin-bottom: 34rpx;
		.text{
			margin-top: 10rpx;
		}
	}
}
</style>