提交

components/CustomTabBar.vue

@@ -0,0 +1,144 @@
+<template>
+    <view class="custom-tab-bar">
+        <view class="tab-item" :class="{ 'active': currentTab === 0 }" @click="switchTab(0)">
+            <image :src="currentTab === 0 ? tabBar.list[0].selectedIconPath : tabBar.list[0].iconPath"></image>
+            <text>{{ tabBar.list[0].text }}</text>
+        </view>
+        <view class="tab-item" :class="{ 'active': currentTab === 1 }" @click="switchTab(1)">
+            <image :src="currentTab === 1 ? tabBar.list[1].selectedIconPath : tabBar.list[1].iconPath"></image>
+            <text>{{ tabBar.list[1].text }}</text>
+        </view>
+        <view class="tab-item home-item" :class="{ 'active': currentTab === 2 }" @click="switchTab(2)">
+            <image :src="tabBar.list[2].iconPath" v-if="currentTab !== 2"></image>
+			<view v-else class="home-item-box">
+				<image :src="tabBar.list[2].selectedIconPath"></image>
+			</view>
+            <text v-if="currentTab !== 2">{{ tabBar.list[2].text }}</text>
+        </view>
+        <view class="tab-item" :class="{ 'active': currentTab === 3 }" @click="switchTab(3)">
+            <image :src="currentTab === 3 ? tabBar.list[3].selectedIconPath : tabBar.list[3].iconPath"></image>
+            <text>{{ tabBar.list[3].text }}</text>
+        </view>
+        <view class="tab-item" :class="{ 'active': currentTab === 4 }" @click="switchTab(4)">
+            <image :src="currentTab === 4 ? tabBar.list[4].selectedIconPath : tabBar.list[4].iconPath"></image>
+            <text>{{ tabBar.list[4].text }}</text>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+	props: {
+		currentTab: {
+			type: Number,
+			default: 0
+		}
+	},
+    data() {
+        return {
+            tabBar: {
+                list: [
+                    {
+                        "pagePath": "pages/map/map",
+                        "iconPath": "/static/images/map.png",
+                        "selectedIconPath": "/static/images/selectMap.png",
+                        "text": "特产地图"
+                    },
+                    {
+                        "pagePath": "pages/coupon/coupon",
+                        "iconPath": "/static/images/coupon.png",
+                        "selectedIconPath": "/static/images/selectCoupon.png",
+                        "text": "领券中心"
+                    },
+                    {
+                        "pagePath": "pages/index/index",
+                        "iconPath": "/static/images/home.png",
+                        "selectedIconPath": "/static/images/selectHome.png",
+                        "text": "首页"
+                    },
+                    {
+                        "pagePath": "pages/cart/cart",
+                        "iconPath": "/static/images/cart.png",
+                        "selectedIconPath": "/static/images/selectCart.png",
+                        "text": "购物车"
+                    },
+                    {
+                        "pagePath": "pages/user/user",
+                        "iconPath": "/static/images/mine.png",
+                        "selectedIconPath": "/static/images/selectMine.png",
+                        "text": "我的"
+                    }
+                ]
+            }
+        };
+    },
+    onLoad() {
+        this.getCurrentTab();
+    },
+    methods: {
+        getCurrentTab() {
+            const pages = getCurrentPages();
+            const currentPage = pages[pages.length - 1];
+            const currentPath = currentPage.route;
+            this.tabBar.list.forEach((item, index) => {
+                if (item.pagePath === currentPath) {
+                    this.currentTab = index;
+                }
+            });
+        },
+        switchTab(index) {
+            if (this.currentTab === index) return;
+            uni.switchTab({
+                url: '/' + this.tabBar.list[index].pagePath
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.custom-tab-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 150rpx;
+    background-image: url('/static/images/tabBarBg.png');
+	background-size: 100% 100%;
+}
+
+.tab-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+	width: 20%;
+}
+
+.tab-item image {
+    width: 53rpx;
+    height: 53rpx;
+}
+
+.tab-item text {
+    font-size: 24rpx;
+    color: #666666;
+}
+
+.tab-item.active text {
+    color: #6A8A2D;
+}
+
+.home-item-box {
+	width: 112rpx;
+	height: 112rpx;
+	background: #6A8A2D;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>

pages.json

@@ -3,7 +3,8 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "首页",
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -11,6 +12,24 @@
 			"style": {
 				"navigationBarTitleText": "uni-app"
 			}
+		},
+		{
+			"path": "pages/map/map",
+			"style": {
+				"navigationBarTitleText": "uni-app"
+			}
+		},
+		{
+			"path": "pages/cart/cart",
+			"style": {
+				"navigationBarTitleText": "uni-app"
+			}
+		},
+		{
+			"path": "pages/coupon/coupon",
+			"style": {
+				"navigationBarTitleText": "uni-app"
+			}
 		}
 	],
 	"subPackages": [{
@@ -27,23 +46,48 @@
                 "style" : {
                     "navigationBarTitleText" : "视频"
                 }
+            },
+            {
+                "path" : "line/index",
+                "style" : {
+                    "navigationBarTitleText" : "精选线路"
+                }
             }
 		]
 	}],
 	"tabBar": {
-		"color": "#999999",
+		"custom": true,
-		"selectedColor": "#333333",
+		"color": "#666666",
+		"selectedColor": " #6A8A2D",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"fontSize": "24rpx",
 		"height": "100rpx",
-		"iconWidth": "40rpx",
+		"iconWidth": "53rpx",
 		"list": [{
+				"pagePath": "pages/map/map",
+				"iconPath": "/static/images/map.png",
+				"selectedIconPath": "/static/images/selectMap.png",
+				"text": "特产地图"
+			},
+			{
+				"pagePath": "pages/coupon/coupon",
+				"iconPath": "/static/images/coupon.png",
+				"selectedIconPath": "/static/images/selectCoupon.png",
+				"text": "领券中心"
+			},
+			{
 				"pagePath": "pages/index/index",
 				"iconPath": "/static/images/home.png",
 				"selectedIconPath": "/static/images/selectHome.png",
 				"text": "首页"
 			},
+			{
+				"pagePath": "pages/cart/cart",
+				"iconPath": "/static/images/cart.png",
+				"selectedIconPath": "/static/images/selectCart.png",
+				"text": "购物车"
+			},
 			{
 				"pagePath": "pages/user/user",
 				"iconPath": "/static/images/mine.png",

pages/cart/cart.vue

@@ -0,0 +1,31 @@
+<template>
+	<view class="bg">
+		<CustomTabBar :currentTab="3" />
+	</view>
+</template>
+
+<script>
+	import CustomTabBar from '@/components/CustomTabBar.vue';
+	export default {
+		components: {
+			CustomTabBar
+		},
+		data() {
+			return {
+				
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+	.bg {
+		
+	}
+</style>

pages/coupon/coupon.vue

@@ -0,0 +1,31 @@
+<template>
+	<view class="bg">
+		<CustomTabBar :currentTab="1" />
+	</view>
+</template>
+
+<script>
+	import CustomTabBar from '@/components/CustomTabBar.vue';
+	export default {
+		components: {
+			CustomTabBar
+		},
+		data() {
+			return {
+				
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+	.bg {
+		
+	}
+</style>

pages/index/index.vue

@@ -1,11 +1,15 @@
 <template>
-	<view class="content">
+	<view class="bg">
-		
+		<CustomTabBar :currentTab="2" />
 	</view>
 </template>
 
 <script>
+	import CustomTabBar from '@/components/CustomTabBar.vue';
 	export default {
+		components: {
+			CustomTabBar
+		},
 		data() {
 			return {
 				
@@ -21,10 +25,9 @@
 </script>
 
 <style>
-	.content {
+	.bg {
-		display: flex;
+		width: 100%;
-		flex-direction: column;
+		min-height: 100vh;
-		align-items: center;
+		background: #CDE29E;
-		justify-content: center;
 	}
 </style>

pages/map/map.vue

@@ -0,0 +1,31 @@
+<template>
+	<view class="bg">
+		<CustomTabBar :currentTab="0" />
+	</view>
+</template>
+
+<script>
+	import CustomTabBar from '@/components/CustomTabBar.vue';
+	export default {
+		components: {
+			CustomTabBar
+		},
+		data() {
+			return {
+				
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+	.bg {
+		
+	}
+</style>

pages/user/user.vue

@@ -1,8 +1,34 @@
 <template>
+	<view class="content">
+		<CustomTabBar :currentTab="4" />
+	</view>
 </template>
 
 <script>
+	import CustomTabBar from '@/components/CustomTabBar.vue';
+	export default {
+		components: {
+			CustomTabBar
+		},
+		data() {
+			return {
+				
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
 </script>
 
 <style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
 </style>

static/css/base.css

@@ -12,6 +12,14 @@ input {
 	border: none;
 }
 
+view {
+	box-sizing: border-box;
+}
+
+.bg {
+	padding-bottom: 250rpx;
+}
+
 .flex-between {
 	display: flex;
 	justify-content: space-between;

store/modules/user.js

@@ -37,9 +37,15 @@ export default {
 			state.toPath = currentPage.$page.fullPath
 			if(state.toPath == '/pages/login/login') return;
 			// 登录
+			// #ifdef MP-WEIXIN
 			uni.navigateTo({
 				url: '/pages/login/login'
 			})
+			// #endif
+			
+			// #ifdef H5
+			
+			// #endif
 		},
 		//订单数据
 		changeOrderInfo(state, data) {

subPackages/line/index.vue

@@ -0,0 +1,5 @@
+<template>
+	<view>
+		
+	</view>
+</template>