BD-LDBD-UNI/components/Menu.vue

<template>
	<!-- 产品分类导航 -->
	<view class="menu-category-box" v-if="carousel">
		<!-- mb20 -->
		<!-- :style="list.length <= menu ? `height:200rpx` : `height:360rpx`" -->
		<swiper class="menu-swiper-box" :style="list.length <= menu ? `height:160rpx` : `height:320rpx`"
			@change="onSwiper" circular :autoplay="false" :interval="3000" :duration="1000">
			<swiper-item class="menu-swiper-item" v-for="(itemList, index) in carousel" :key="index"
				:style="list.length <= menu ? `height:200rpx` : `height:340rpx`">
				<view class="menu-tab-box">
					<view v-for="item in itemList">
						<view class="tab-list y-f" :style="{ width: 710 / menu + 'rpx' }" :key="item.name"
							@tap="routerTo(item)">
							<image class="tab-img Shop-selector-circular"
								:style="{ width: imgW + 'rpx', height: imgW + 'rpx' }" :src="item.pic"></image>
							<text class="Shop-selector-rect">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="menu-category-dots" v-if="carousel.length > 1">
			<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'"
				v-for="(dot, index) in carousel.length" :key="index"></text>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				categoryCurrent: 0 //分类轮播下标
			};
		},
		props: {
			list: {
				type: Array,
				default: []
			},
			menu: {
				default: 5
			},
			imgW: {
				type: Number,
				default: 100
			}
		},
		computed: {
			carousel() {
				if (this.list) {
					let list = this.sortData(this.list, this.menu * 2);
					return list;
				}
			}
		},
		created() {},
		methods: {
			// 数据分层
			sortData(oArr, length) {
				let arr = [];
				let minArr = [];
				oArr.forEach(c => {
					if (minArr.length === length) {
						minArr = [];
					}
					if (minArr.length === 0) {
						arr.push(minArr);
					}
					minArr.push(c);
				});

				return arr;
			},
			// 轮播
			onSwiper(e) {
				this.categoryCurrent = e.detail.current;
			},
			// 路由跳转
			routerTo(item) {
				// const token = "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VySWQiOjE1OTcxNTUzMDAwOTAwODUzNzgsImFjY291bnQiOiIxNTE0MTE1NTQ3NyIsInV1aWQiOiIyYjMxN2MzZC04OGMwLTQxZmEtOTFlNi00YTQ1ZDQxYzUwNGYiLCJyZW1lbWJlck1lIjp0cnVlLCJleHBpcmF0aW9uRGF0ZSI6MTY3ODA5MDE1NDYxMywiY2FUb2tlbiI6bnVsbCwib3RoZXJzIjpudWxsLCJzdWIiOiIxNTk3MTU1MzAwMDkwMDg1Mzc4IiwiaWF0IjoxNjc2MzM3MTIxLCJleHAiOjE2NzgwOTAxNTR9._b6LSaJ6gRKgR0rbwZh61K9F0DKJ4w3OjIo_yb2VfH7ynzX99RPod6MYpFnO0Naehve2AbMHd5vyNKsHkj7Oew"

				if (item.name == "预约洗车") {
					this.$yrouter.push({ path: "/pages/preCarWash/index" });
				}else if (item.name == "维修保养") {
					this.$yrouter.push({ path: "/pages/maintenance/index" });
					// this.$yrouter.push({ path: "/pages/maintenance/index?token="+token });
				}else if (item.name == "汽车商城") {
					this.$yrouter.push({ path: "/pages/preCarWash/washOrder/index" });
				}else if (item.name == "租车商城") {
					this.$yrouter.push({ path: "/pages/maintenance/maintainOrder/index" });
				}else if (item.name == "综合商城") {
					this.$yrouter.push({ path: "/pages/userMeal/index" });
				}else if (item.name == "登记过户") {
					this.$yrouter.push({ path: "/pages/maintenance/onlineReservation/index" });
				}
			}
		}
	};
</script>

<style lang="scss">
	button::after {
		border: none;
	}

	button {
		background-color: #fff;
	}

	// 产品分类
	.y-f {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.menu-category-box {
		// padding: 40rpx 30rpx 0 30rpx;
		padding: 20rpx 0rpx 0rpx;
		background: #fff !important;
		box-sizing: border-box;
		// border-radius: 10rpx;
		overflow: hidden;
	}

	.menu-category-box,
	.menu-swiper-box {
		position: relative;
		background: #fff;

		.menu-swiper-item {
			background: #fff;
			height: 100%;
			width: 100%;
		}

		.menu-tab-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.tab-list {
				font-size: 23rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				padding-bottom: 30rpx;
				line-height: 30rpx;

				text {
					width: max-content;
				}

				.tab-img {
					border-radius: 25rpx;
				}
			}
		}

		.menu-category-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20rpx;

			.category-dot {
				width: 40rpx;
				height: 3rpx;
				background: #eeeeee;
				margin-right: 10rpx;
			}

			.category-dot-active {
				width: 40rpx;
				height: 3rpx;
				background: #a8700d;
				margin-right: 10rpx;
			}
		}
	}
</style>