订单

components/OrderInfo.vue

@@ -0,0 +1,20 @@
+<template>
+	<view class="order-info"></view>
+</template>
+
+<script>
+export default {
+	name: 'OrderInfo',
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style lang="scss">
+.order-info {
+	background: #ffffff;
+	border-radius: 12px;
+	padding: 12px;
+}
+</style>

pages.json

@@ -61,6 +61,13 @@
 					"popGesture": "none"
 				}
 			}
+		}, {
+			"path": "pages/Orders",
+			"style": {
+				"navigationBarTitleText": "订单管理",
+				"enablePullDownRefresh": false
+			}
+
 		}
 	],
 	"preloadRule": {
@@ -70,9 +77,9 @@
 		}
 	},
 	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uView",
-		"navigationBarBackgroundColor": "#FFFFFF",
+		"navigationBarTextStyle": "white",
+		"navigationBarTitleText": "校园外卖",
+		"navigationBarBackgroundColor": "#214BBE",
 		"backgroundColor": "#F2F3F5"
 	},
 	"tabBar": {
@@ -87,7 +94,7 @@
 				"text": "首页"
 			},
 			{
-				"pagePath": "pages/example/js",
+				"pagePath": "pages/Orders",
 				"iconPath": "static/uview/imgs/tabbar_icon_02.png",
 				"selectedIconPath": "static/uview/imgs/tabbar_icon_02_pre.png",
 				"text": "订单管理"

pages/Orders.vue

@@ -0,0 +1,61 @@
+<template>
+	<view class="container">
+		<view class="top">
+			<u-tabs :current="tab" active-color="#ffffff" inactive-color="#ffffffcc" :list="tabs" :bg-color="$colors.prim" :is-scroll="false" @change="changeTab"></u-tabs>
+		</view>
+
+		<view class="list"><order-info></order-info></view>
+	</view>
+</template>
+
+<script>
+import OrderInfo from '../components/OrderInfo.vue';
+export default {
+	data() {
+		return {
+			tab: 0,
+			tabs: [
+				{
+					name: '全部订单'
+				},
+				{
+					name: '待接单'
+				},
+				{
+					name: '配送中'
+				},
+				{
+					name: '待退款'
+				},
+				{
+					name: '已完成'
+				}
+			]
+		};
+	},
+	methods: {
+		changeTab(index) {
+			this.tab = index;
+		}
+	},
+	components: {
+		OrderInfo
+	}
+};
+</script>
+
+<style lang="scss">
+.container {
+	background-color: #f2f4f5;
+}
+.top {
+	padding: 10px 0;
+	background-color: $u-type-primary;
+	position: sticky;
+	top: 0;
+}
+
+.list {
+	padding: 12px;
+}
+</style>