活动按钮状态流转

2026-03-25 15:53:37 +08:00
commit 37346e790f
2762 changed files with 240282 additions and 0 deletions
--- a/pages/component/tab-bar/tab-bar.vue
+++ b/pages/component/tab-bar/tab-bar.vue
@@ -0,0 +1,144 @@
+<!-- +----------------------------------------------------------------------
+| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
+| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
+----------------------------------------------------------------------
+| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
+| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
+----------------------------------------------------------------------
+| 组件-底部导航 开发者: 麦沃德科技-半夏  
+---------------------------------------------------------------------- -->
+
+<template>
+	<view class="component-tab-bar" v-if="tabBarList && tabBarList.length">
+		<view class="tab-bar-main" :style="{'--theme-color': themeColor}">
+			<view class="main-item wbcentre" v-for="(item, index) in tabBarList" :key="index" @click="tabBarPages(index)">
+				<image class="item-img" :src="item.selicon" mode="aspectFit" v-if="item.path == currentPath"></image>
+				<image class="item-img" :src="item.icon" mode="aspectFit" v-else></image>
+				<view class="item-text" :class="{active: item.path == currentPath}">{{ item.name }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from "vuex"
+	export default {
+		name: "tabBar",
+		data() {
+			return {
+				// 当前页面路径
+				currentPath: ""
+			}
+		},
+		computed: {
+			...mapState({
+				themeColor: state => state.app.themeColor,
+				tabBarList: state => {
+					let list = state.app.tabBarList
+					let pages = getCurrentPages();
+					let isShow = false
+					if (pages && pages.length) {
+						let currentPath = "/" + pages[pages.length - 1].route;
+						if (list.length) {
+							for (let i in list) {
+								if (currentPath == list[i].path) {
+									isShow = true
+									// #ifdef MP-WEIXIN
+									wx.hideHomeButton();
+									// #endif
+								}
+							}
+						}
+					}
+					if (!isShow) list = []
+					return list
+				},
+			})
+		},
+		mounted() {
+			let pages = getCurrentPages();
+			this.currentPath = "/" + pages[pages.length - 1].route;
+		},
+		methods: {
+			// 跳转底部导航
+			tabBarPages(index) {
+				const item = this.tabBarList[index]
+				if (item.jump_type == 1) {
+					// 图文
+					if (item.path == this.currentPath) return
+					uni.navigateTo({
+						url: "/pages/webview/imageText?type=2&id=" + item.id
+					})
+				} else if (item.jump_type == 2) {
+					// 内部页面
+					if (item.path == this.currentPath) return
+					this.$util.toPage({
+						path: item.path,
+						mode: 3
+					})
+				} else if (item.jump_type == 3) {
+					// 外部链接
+					this.$util.toPage({
+						path: item.path,
+						mode: 4,
+					})
+				} else if (item.jump_type == 4) {
+					// 小程序
+					this.$util.toPage({
+						appId: JSON.parse(item.path).appid,
+						path: JSON.parse(item.path).path,
+						mode: 5,
+					})
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.component-tab-bar {
+		width: 100%;
+		height: 126rpx;
+
+		.tab-bar-main {
+			background: #fff;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 998;
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+			display: flex;
+			justify-content: space-around;
+			border-top: 2rpx solid #F6F7FB;
+
+			.main-item {
+				flex: 1;
+				height: 124rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+
+				.item-img {
+					width: 56rpx;
+					height: 56rpx;
+					margin: 0 auto;
+				}
+
+				.item-text {
+					font-size: 24rpx;
+					color: #333;
+					margin-top: 4rpx;
+					text-align: center;
+
+					&.active {
+						color: var(--theme-color);
+					}
+				}
+			}
+		}
+	}
+</style>