YTAPP/pages/home/index.vue

<template>
	<view class="warp">
		<uni-grid class="grid" :column="3" :show-border="false" :square="false" @change="change">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
				<view class="grid-item-box" @click="itemClick(item.url)">
					<image class="image" :src="item.src" mode="aspectFill" />
					<text class="text">{{ item.text }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';

const token = ref(null);
const user = ref(null);
const list = ref([
	// {
	// 	url: '/pages/scan/index',
	// 	src: '/static/scan_fill.png',
	// 	text: '扫描入库'
	// },
	{
		url: '/pages/instock/index',
		src: '/static/weigh_fill.png',
		text: '称重'
	},
	{
		url: '/pages/warehouseScan/index',
		src: '/static/houscan.png',
		text: '仓库扫描'
	},
	{
		url: '/pages/scanLotno/index',
		src: '/static/link.png',
		text: '托盘/批次'
	},
	{
		url: '/pages/waybillNo/index',
		src: '/static/link.png',
		text: '库位绑定'
	},
	// {
	// 	url:'/pages/waybillDeliveryOrder/index',
	// 	src: '/static/dispatch.png',
	// 	text: '派送单'
	// }
]);
onShow(() => {
	token.value = uni.getStorageSync('token');
	user.value = uni.getStorageSync('user');
	console.log('show---', { token: token.value, user: user.value });
});
const itemClick = (url) => {
	console.log(url);
	if (token.value) {
		uni.navigateTo({
			url
		});
	} else {
		uni.navigateTo({
			url: '/pages/login/index'
		});
	}
};
const change = () => {};
const logout = () => {
	uni.removeStorageSync('token');
	uni.removeStorageSync('user');
	token.value = uni.getStorageSync('token');
	user.value = uni.getStorageSync('user');
};
</script>

<style lang="scss">
.image {
	width: 36px;
	height: 36px;
}

.text {
	font-size: 14px;
	margin-top: 10px;
}
.grid {
	margin-top: 20px;
}
.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.grid-dot {
	position: absolute;
	top: 5px;
	right: 15px;
}
</style>