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,
	},
	data() {
		return {
			dotStyle: true,
			swiperList: [{
					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'
				},
				// {
				// 	name: '审核查询',
				// 	url: '/static/index/audit.png',
				// 	path: '/pages/store/examine'
				// },
				{
					name: '商品管理',
					url: '/static/index/product.png',
					path: '/pages/product/index'
				},
				{
					name: '提现管理',
					url: '/static/index/withdraw.png'
				},
				{
					name: '秒杀活动',
					url: '/static/index/seckill.png'
				},
				{
					name: '客户评价',
					url: '/static/index/evaluate.png',
					path: '/pages/evaluate/evaluate'
				},
				{
					name: '全部服务',
					url: '/static/index/all.png',
					path: '/pages/index/full'
				},
			],
			// 弹窗
			modalText: {
				title: '提示',
				btntext: '好的',
				// 很抱歉，您没有通过平台审核，如有疑问请联系平台客服。
				content: '报名成功，请等待平台审核'
			},
		}
	},
	methods: {
		jump(item) {
			// 需要先报名
			if (item.name === '团餐活动') {
				this.$http.post('/groupmeal/gmMerchantApplicationRecord/isApply', {}).then(res => {
					if (!res.data.result) {
						uni.navigateTo({
							url: '/pages/groupMeal/goods/index'
						});
					} else {
						let status = res.data.result.status;
						if (status == 1) {
							uni.navigateTo({
								url: item.path
							});
						} else {
							this.modalText.content = status == 2 ? '很抱歉，您没有通过平台审核，如有疑问请联系平台客服。' : '团餐活动报名审核中，请耐心等待';
							this.$refs.myModal.onOpen();
						}
					}
				});
				return;
			}
			if (!item.path) return;
			uni.navigateTo({
				url: item.path
			});
		}
	}
}
</script>

<style scoped lang="scss">
.item {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
}

.card {
	width: 20%;
	height: 96rpx;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	image {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 4rpx;
	}
}
.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>