活动按钮状态流转

pages/component/menu/menu.vue

@@ -0,0 +1,160 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
++----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
++----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
++----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
++----------------------------------------------------------------------
+| 组件-菜单 开发者: 麦沃德科技-半夏
++---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-menu flex flex-wrap">
+		<block v-for="(item, index) in showData" :key="index" @click="toPage(index)">
+			<button class="menu-item clear" open-type="contact" :style="{width: (parseFloat(100 / rowNumber).toFixed(2) + '%'), marginTop: (index < rowNumber ? 0 : marginTop)}" v-if="item.info == 'contact'">
+				<image :src="item.icon" :style="{width: iconSize, height: iconSize}" mode="aspectFit"></image>
+				<text class="text-ellipsis" :style="{fontSize: fontSize, color: fontColor, lineHeight: lineHeight, marginTop: space}">{{item.name}}</text>
+			</button>
+			<view class="menu-item" :style="{width: (parseFloat(100 / rowNumber).toFixed(2) + '%'), marginTop: (index < rowNumber ? 0 : marginTop)}" @click="toPage(index)" v-else>
+				<view class="item-icon" :style="{width: iconSize, height: iconSize}">
+					<image :src="item.icon" mode="aspectFit"></image>
+					<view class="count" :style="{background: themeColor}" v-if="item.count && parseInt(countData[item.count]) > 0">{{parseInt(countData[item.count]) > 99 ? '99+' : countData[item.count]}}</view>
+				</view>
+				<text class="text-ellipsis" :style="{fontSize: fontSize, color: fontColor, lineHeight: lineHeight, marginTop: space}">{{item.name}}</text>
+				<!-- #ifdef H5 -->
+				<wx-open-launch-weapp class="item-absolute" :appid="item.content.appid" :path="item.content.path" v-if="item.skip_type == 3">
+					<script type="text/wxtag-template">
+						<style> .btn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style>
+					  <view class="btn"></view>
+					</script>
+				</wx-open-launch-weapp>
+				<!-- #endif -->
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "menuIndex",
+		props: {
+			// 组件内容
+			showData: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 组件数量
+			countData: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 每排数量
+			rowNumber: {
+				type: Number,
+				default: 4,
+			},
+			// 图标尺寸
+			iconSize: {
+				type: String,
+				default: "96rpx",
+			},
+			// 文字尺寸
+			fontSize: {
+				type: String,
+				default: "28rpx",
+			},
+			// 文字行高
+			lineHeight: {
+				type: String,
+				default: "40rpx",
+			},
+			// 文字颜色
+			fontColor: {
+				type: String,
+				default: "#5A5B6E",
+			},
+			// 图文间隔
+			space: {
+				type: String,
+				default: "16rpx",
+			},
+			// 上下间隔
+			marginTop: {
+				type: String,
+				default: "32rpx",
+			},
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+			})
+		},
+		methods: {
+			toPage(index) {
+				// #ifdef H5
+				if (this.showData[index].skip_type == 3) return
+				// #endif
+				if (this.showData[index].info) {
+					this.$util.toPage(this.showData[index].info)
+				} else {
+					this.$emit("toPage", this.showData[index])
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.component-menu {
+		.menu-item {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			background: transparent;
+			border-radius: 0;
+			padding: 0;
+
+			.item-icon {
+				position: relative;
+
+				.count {
+					position: absolute;
+					top: -8rpx;
+					left: 50%;
+					margin-left: 16rpx;
+					color: #FFF;
+					text-align: center;
+					font-size: 24rpx;
+					line-height: 32rpx;
+					padding: 0 8rpx;
+					min-width: 32rpx;
+					border-radius: 32rpx;
+				}
+			}
+
+			text {
+				width: 100%;
+				padding: 0 8rpx;
+				box-sizing: border-box;
+				text-align: center;
+			}
+
+			.item-absolute {
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+			}
+		}
+	}
+</style>