zyejMAll-mobile/sheep/components/s-menu-button/s-menu-button.vue

<!-- 装修基础组件：菜单导航（金刚区） -->
<template>
	<view>
		<view class="title">
			我的服务
		</view>
		<!-- 包裹层 -->
		<view class="ui-swiper" :class="[props.mode, props.bg, props.ui]"
			:style="[{ height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]">
			<!-- 轮播 -->
			<swiper :circular="props.circular" :current="state.cur" :autoplay="props.autoplay"
				:interval="props.interval" :duration="props.duration" :style="[{ height: swiperHeight + 'rpx' }]"
				@change="swiperChange">
				<swiper-item v-for="(arr, index) in menuList" :key="index" :class="{ cur: state.cur == index }">
					<!-- 宫格 -->
					<view class="grid-wrap">
						<view v-for="(item, index) in arr" :key="index"
							class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
							:style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
							hover-class="ss-hover-btn" @tap="sheep.$router.go(item.url)">
							<view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
								<view v-if="item.badge.show" class="tag-box"
									:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
									{{ item.badge.text }}
								</view>
								<image v-if="item.iconUrl" class="menu-icon" :style="[
                  {
                    width: props.iconSize + 'rpx',
                    height: props.iconSize + 'rpx',
                  },
                ]" :src="sheep.$url.cdn(item.iconUrl)" mode="aspectFill"></image>
								<view v-if="data.layout === 'iconText'" class="menu-title"
									:style="[{ color: item.titleColor }]">
									{{ item.title }}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 指示点 -->
			<template v-if="menuList.length > 1">
				<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
					<view class="line-box" v-for="(item, index) in menuList.length" :key="index"
						:class="[state.cur == index ? 'cur' : '', props.dotCur]"></view>
				</view>
				<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
					<view class="ui-tag radius" :class="[props.dotCur]" style="pointer-events: none">
						<view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ menuList.length }}</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 轮播menu
	 *
	 * @property {Boolean} circular = false  		- 是否采用衔接滑动，即播放到末尾后重新回到开头
	 * @property {Boolean} autoplay = true  		- 是否自动切换
	 * @property {Number} interval = 5000  			- 自动切换时间间隔
	 * @property {Number} duration = 500  			- 滑动动画时长,app-nvue不支持
	 * @property {Array} list = [] 					- 轮播数据
	 * @property {String} ui = ''  					- 样式class
	 * @property {String} mode  					- 模式
	 * @property {String} dotStyle  				- 指示点样式
	 * @property {String} dotCur= 'ui-BG-Main' 		- 当前指示点样式,默认主题色
	 * @property {String} bg  						- 背景
	 *
	 * @property {String|Number} col = 4  			- 一行数量
	 *  @property {String|Number} row = 1 			- 几行
	 * @property {String} hasBorder 				- 是否有边框
	 * @property {String} borderColor 				- 边框颜色
	 * @property {String} background		  		- 背景
	 * @property {String} hoverClass 				- 按压样式类
	 * @property {String} hoverStayTime 		  	- 动画时间
	 *
	 * @property {Array} list 		  				- 导航列表
	 * @property {Number} iconSize 		  			- 图标大小
	 * @property {String} color 		  			- 标题颜色
	 *
	 */

	import {
		reactive,
		computed
	} from 'vue';
	import sheep from '@/sheep';

	// 数据
	const state = reactive({
		cur: 0,
	});

	// 接收参数

	const props = defineProps({
		data: {
			type: Object,
			default () {},
		},
		styles: {
			type: Object,
			default () {},
		},
		circular: {
			type: Boolean,
			default: true,
		},
		autoplay: {
			type: Boolean,
			default: false,
		},
		interval: {
			type: Number,
			default: 5000,
		},
		duration: {
			type: Number,
			default: 500,
		},

		ui: {
			type: String,
			default: '',
		},
		mode: {
			//default
			type: String,
			default: 'default',
		},
		dotStyle: {
			type: String,
			default: 'long', //default long tag
		},
		dotCur: {
			type: String,
			default: 'ui-BG-Main',
		},
		bg: {
			type: String,
			default: 'bg-none',
		},
		height: {
			type: Number,
			default: 300,
		},

		// 是否有边框
		hasBorder: {
			type: Boolean,
			default: true,
		},
		// 边框颜色
		borderColor: {
			type: String,
			default: 'red',
		},
		background: {
			type: String,
			default: 'blue',
		},
		hoverClass: {
			type: String,
			default: 'ss-hover-class', //'none'为没有hover效果
		},
		// 一排宫格数
		col: {
			type: [Number, String],
			default: 3,
		},
		iconSize: {
			type: Number,
			default: 80,
		},
		color: {
			type: String,
			default: '#000',
		},
	});

	// 生成数据
	const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
	const swiperHeight = computed(
		() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180),
	);
	const windowWidth = sheep.$platform.device.windowWidth;

	// current 改变时会触发 change 事件
	const swiperChange = (e) => {
		state.cur = e.detail.current;
	};

	// 重组数据
	const splitData = (oArr = [], length = 1) => {
		let arr = [];
		let minArr = [];
		oArr.forEach((c) => {
			if (minArr.length === length) {
				minArr = [];
			}
			if (minArr.length === 0) {
				arr.push(minArr);
			}
			minArr.push(c);
		});

		return arr;
	};
</script>

<style lang="scss" scoped>
	.title {
		padding: 10px 20px;
		height: 20px;
		line-height: 20px;
		font-size: 16px;
		font-weight: 600;
		// border-bottom: 1px solid #dcdcdc;
	}

	.grid-wrap {
		width: 100%;
		display: flex;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		flex-wrap: wrap;
		align-items: center;
	}

	.menu-box {
		position: relative;
		z-index: 1;
		transform: translate(0, 0);

		.tag-box {
			position: absolute;
			z-index: 2;
			top: 0;
			right: -6rpx;
			font-size: 2em;
			line-height: 1;
			padding: 0.4em 0.6em 0.3em;
			transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
			transform-origin: 100% 0;
			border-radius: 200rpx;
			white-space: nowrap;
		}

		.menu-icon {
			transform: translate(0, 0);
			width: 80rpx;
			height: 80rpx;
			padding-bottom: 10rpx;
		}

		.menu-title {
			font-size: 24rpx;
			color: #333;
		}
	}

	::v-deep(.ui-swiper) {
		position: relative;
		z-index: 1;

		.ui-swiper-dot {
			position: absolute;
			width: 100%;
			bottom: 20rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;

			&.default .line-box {
				display: inline-flex;
				border-radius: 50rpx;
				width: 6px;
				height: 6px;
				border: 2px solid transparent;
				margin: 0 10rpx;
				opacity: 0.3;
				position: relative;
				justify-content: center;
				align-items: center;

				&.cur {
					width: 8px;
					height: 8px;
					opacity: 1;
					border: 0px solid transparent;
				}

				&.cur::after {
					content: '';
					border-radius: 50rpx;
					width: 4px;
					height: 4px;
					background-color: #fff;
				}
			}

			&.long .line-box {
				display: inline-block;
				border-radius: 100rpx;
				width: 6px;
				height: 6px;
				margin: 0 10rpx;
				opacity: 0.3;
				position: relative;

				&.cur {
					width: 24rpx;
					opacity: 1;
				}

				&.cur::after {}
			}

			&.line {
				bottom: 20rpx;

				.line-box {
					display: inline-block;
					width: 30px;
					height: 3px;
					opacity: 0.3;
					position: relative;

					&.cur {
						opacity: 1;
					}
				}
			}

			&.tag {
				justify-content: flex-end;
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
			}
		}
	}
</style>