LocalLivingServicesUniapp/components/index_nav.vue

<template>
	<view class="item">
		<view class="card" v-for="(item,index) in swiperList" :key="index" @click="jump(item)">
			<image :src="item.url" mode="aspectFill"></image>
			{{item.name}}
		</view>
		<!-- 弹窗 -->
		<Modal ref="myModal" :title="modalText.title" :content="modalText.content" :showCancelButton="false" />
	</view>
</template>

<script>
	import Modal from '@/components/modal/index.vue';
	export default {
		name: 'indexNav',
		components: {
			Modal,
		},
		props: {
			/** 行业是否为美食（由分类准入接口控制） */
			showTopUp: {
				type: Boolean,
				default: false
			},
			/** 是否展示团餐设置/团餐订单（isApply 审核通过才展示） */
			showGroupMeal: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				baseList: [{
						name: '店铺设置',
						url: '/static/newIndex/shop.png',
						path: '/pages/store/settings'
					},
					{
						name: '菜品管理',
						url: '/static/newIndex/productShop.png',
						path: '/pages/merchantDish/dish/list',
						needTopUp: true
					},
					{
						name: '商品管理',
						url: '/static/newIndex/product.png',
						path: '/pages/product/index'
					},
					{
						name: '门店管理',
						url: '/static/newIndex/store.png',
						path: '/pages/index/shop',
						needTopUp: true
					},
					{
						name: '储值管理',
						url: '/static/newIndex/toup.png',
						path: '/pages/topUp/index',
						needTopUp: true
					},
					{
						name: '广告管理',
						url: '/static/newIndex/ad.png',
						path: '/pages/adManagement/adlist'
					},
					{
						name: '优惠券',
						url: '/static/newIndex/coupon.png',
						path: '/pages/coupon/coupon'
					},
					{
						name: '客户评价',
						url: '/static/newIndex/evaluate.png',
						path: '/pages/evaluate/evaluate'
					},
					{
						name: '团餐设置',
						url: '/static/newIndex/groupMeal.png',
						path: '/pages/merchantDish/settings/index',
						needGroupMeal: true
					},
					{
						name: '团餐订单',
						url: '/static/newIndex/groupMealOrder.png',
						path: '/pages/merchantDish/orders/index',
						needGroupMeal: true
					},
				],
				// 弹窗
				modalText: {
					title: '提示',
					btntext: '好的',
					content: '报名成功，请等待平台审核'
				},
			}
		},
		computed: {
			swiperList() {
				return this.baseList.filter((item) => {
					if (item.needTopUp && !this.showTopUp) return false;
					if (item.needGroupMeal && !this.showGroupMeal) return false;
					return true;
				});
			}
		},
		methods: {
			async jump(item) {
				if (!item.path) {
					uni.showToast({
						title: '功能暂未开放',
						icon: 'none'
					});
					return
				};
				if (item.type) {
					uni.switchTab({
						url: item.path
					})
				} else {
					uni.navigateTo({
						url: item.path
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		column-gap: 0;
	}

	.card {
		width: 20%;
		display: flex;
		flex-direction: column;
		margin-bottom: 28rpx;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		color: #1d2129;
		line-height: 34rpx;

		image {
			width: 72rpx;
			height: 72rpx;
			margin-bottom: 12rpx;
		}
	}

	::v-deep .uni-swiper-wrapper {
		-webkit-transform: translate3d(0px, 0, 0);
		-moz-transform: translate3d(0px, 0, 0);
		-o-transform: translate(0px, 0px);
		-ms-transform: translate3d(0px, 0, 0);
		transform: translate3d(0px, 0, 0);
	}
</style>