1

components/mobile-frame/index.vue

@@ -8,7 +8,10 @@
 			</scroll-view>
 		</view>
 		<view class="foot" v-if="frameStyle&&frameStyle.useBar||false">
-			底部菜单
+			<view class="list" v-for="(item,index) in barList" :key="index" @tap="toPath(index,item)">
+				<image class="image" src="../../static/logo.png" mode=""></image>
+				<view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -18,10 +21,52 @@
 		props: {
 			frameStyle: {
 				type: Object,
-			}
+			},
 		},
 		data() {
-			return {};
+			return {
+				active: 0,
+				barList: [{
+						name: '首页',
+						route: 'pages/home/index'
+					},
+					{
+						name: '微店',
+						route: 'pages/store/index'
+					},
+					{
+						name: '周边',
+						route: 'pages/week/index'
+					},
+					{
+						name: '购物车',
+						route: 'pages/market/index'
+					},
+					{
+						name: '我的',
+						route: 'pages/my/index'
+					},
+				]
+			};
+		},
+		created: function() {
+			const that = this;
+			that.search()
+		},
+		onShow: function() {},
+		methods: {
+			search() {
+				const that = this;
+				let pages = getCurrentPages();
+				let currentPage = pages[pages.length - 1];
+				let index = that.barList.findIndex((i) => i.route == currentPage.route);
+				if (index) that.$set(that, `active`, index);
+			},
+			toPath(index, item) {
+				const that = this;
+				that.$set(that, `active`, index);
+				that.$emit('toPath', item)
+			}
 		}
 	}
 </script>
@@ -37,6 +82,23 @@
 			height: 8vh;
 			overflow: hidden;
 			background-color: var(--footColor);
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+
+			.list {
+				padding: 2vw 0;
+				text-align: center;
+
+				.image {
+					width: 7vw;
+					height: 5vw;
+				}
+
+				.name {
+					font-size: 12px;
+				}
+			}
 		}
 	}
 

pages.json

@@ -65,7 +65,7 @@
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
-		"navigationBarTitleText": "中科在线-app",
+		"navigationBarTitleText": "点到网",
 		"navigationBarBackgroundColor": "#FB1438",
 		"backgroundColor": "#F8F8F8"
 	},

pages/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<mobile-frame>
+	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
 		首页
 	</mobile-frame>
 </template>
@@ -7,10 +7,20 @@
 <script>
 	export default {
 		data() {
-			return {};
+			return {
+				frameStyle: {
+					useBar: true
+				},
+			};
 		},
 		onShow: function() {},
-		methods: {}
+		methods: {
+			toPath(e) {
+				if (e && e.route) uni.redirectTo({
+					url: `/${e.route}`
+				})
+			}
+		}
 	}
 </script>
 

pages/index/index.vue

@@ -7,7 +7,7 @@
 				<button size="mini" @click="toCommon('pages/store/index')">微店</button>
 				<button size="mini" @click="toCommon('pages/week/index')">周边</button>
 				<button size="mini" @click="toCommon('pages/market/index')">购物车</button>
-				<button size="mini" @click="toCommon('pages/my/index')">我的</button>
+				<button size="mini" @click="toCommon('pages/my/index')">我的1</button>
 			</view>
 		</view>
 	</mobile-frame>
@@ -42,9 +42,9 @@
 						// })
 					},
 					fail: function(res) {
-						// uni.redirectTo({
-						// 	url: `/pages/login/index`
-						// })
+						uni.redirectTo({
+							url: `/pages/home/index`
+						})
 					}
 				});
 			},

pages/store/index.vue

@@ -1,16 +1,26 @@
 <template>
-	<mobile-frame>
-		首页
+	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
+		微店
 	</mobile-frame>
 </template>
 
 <script>
 	export default {
 		data() {
-			return {};
+			return {
+				frameStyle: {
+					useBar: true
+				},
+			};
 		},
 		onShow: function() {},
-		methods: {}
+		methods: {
+			toPath(e) {
+				if (e && e.route) uni.redirectTo({
+					url: `/${e.route}`
+				})
+			}
+		}
 	}
 </script>
 

pages/week/index.vue

@@ -1,16 +1,26 @@
 <template>
-	<mobile-frame>
-		首页
+	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
+		周边
 	</mobile-frame>
 </template>
 
 <script>
 	export default {
 		data() {
-			return {};
+			return {
+				frameStyle: {
+					useBar: true
+				},
+			};
 		},
 		onShow: function() {},
-		methods: {}
+		methods: {
+			toPath(e) {
+				if (e && e.route) uni.redirectTo({
+					url: `/${e.route}`
+				})
+			}
+		}
 	}
 </script>