LocalLivingServicesUniapp/components/index_nav.vue

<template>
	<!-- <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		:autoplay="false" interval="5000" duration="500">
		<swiper-item class="item">
			
		</swiper-item>
	</swiper> -->
	<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
			}
		},
		data() {
			return {
				dotStyle: true,
				baseList: [{
						name: '店铺设置',
						url: '/static/index/shop.png',
						path: '/pages/store/settings'
					},
					{
						name: '团餐活动',
						url: '/static/index/groupMeal.png',
						path: '/pages/groupMeal/goods/list'
					},
					{
						name: '优惠券',
						url: '/static/index/coupon.png',
						path: '/pages/coupon/coupon'
					},
					{
						name: '退款管理',
						url: '/static/index/refund.png'
					},
					{
						name: '订单管理',
						url: '/static/index/indent.png',
						path:'/pages/order/index',
						type:'tabbar'
					},
					{
						name: '提现管理',
						url: '/static/index/withdraw.png',
						path:'/pages/finance/index',
						type:'tabbar'
					},
					{
						name: '商品管理',
						url: '/static/index/product.png',
						path: '/pages/product/index'
					},
					{
						name: '客户评价',
						url: '/static/index/evaluate.png',
						path: '/pages/evaluate/evaluate'
					},
					{
						name: '广告管理',
						url: '/static/index/ad.png',
						path: '/pages/adManagement/adlist'
					},
					{
						name: '储值管理',
						url: '/static/index/toup.png',
						path: '/pages/topUp/index',
						needTopUp: true
					},
					// {
					// 	name: '门店管理',
					// 	url: '/static/index/all.png',
					// 	path: '/pages/storeManage/index',
					// 	needTopUp: true
					// },
					{
						name: '全部服务',
						url: '/static/index/all.png',
						path: '/pages/index/full'
					},
				],
				// 弹窗
				modalText: {
					title: '提示',
					btntext: '好的',
					content: '报名成功，请等待平台审核'
				},
			}
		},
		computed: {
			swiperList() {
				return this.baseList.filter((item) => !item.needTopUp || this.showTopUp);
			}
		},
		methods: {
			async jump(item) {
				// 需要先报名
				if (item.name === '团餐活动') {
					try {
						// 获取门店状态
						const res1 = await this.$http.get('/groupmeal/gmMerchant/queryByMerchantId?merchantId=' + uni
							.getStorageSync('login_user_info').merchantId);
						const isOpen = res1.data.result;
						// 门店是否关闭
						if (isOpen) {
							// 检查报名状态
							const res2 = await this.$http.post('/groupmeal/gmMerchantApplicationRecord/isApply', {});
							if (!res2.data.result) {
								uni.navigateTo({
									url: '/pages/groupMeal/goods/index'
								});
							} else {
								let status = res2.data.result.status;
								if (status == 1) {
									uni.navigateTo({
										url: item.path
									});
								} else {
									this.modalText.content = status == 2 ?
										'很抱歉，您没有通过平台审核，如有疑问请联系平台客服。' :
										'团餐活动报名审核中，请耐心等待';
									this.$refs.myModal.onOpen();
								}
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '团餐活动已关闭'
							});
						}
					} catch (error) {
						console.error('跳转出错:', error);
						uni.showToast({
							icon: 'none',
							title: '网络错误，请重试'
						});
					}
					return;
				}

				if (!item.path) {
					uni,uni.showToast({
						title: '功能暂未开放',
						icon:'none'
					});
					return
				};
				console.log(item.path)
				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;
		// justify-content: space-between;
		column-gap: 30rpx;
		
	}

	.card {
		width: 100rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		image {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 8rpx;
		}
	}

	// .card:nth-child(-n+5) {
	// 	margin-bottom: 40rpx;
	// }

	::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>