【类 型】：factor

【原  因】：
【过  程】：我的  页面ui重构
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

pages/main/index.vue

@@ -1,5 +1,46 @@
 <template>
 	<view class="vh100 flex column">
+		<!-- topbar -->
+		<u-navbar title="我的" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
+			<view class="u-nav-slot" slot="left">
+				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
+			</view>
+		</u-navbar>
+		<!-- 头像 -->
+		<view class="flex mc">
+			<view class="avatarBox rad-c">
+				<u-avatar size="300rpx" :src="avatarSrc"></u-avatar>
+			</view>
+		</view>
+		<!-- 昵称 -->
+		<view class="flex mc fz28 fb m-t-24">
+			{{userInfo.name}}
+		</view>
+		<!-- 菜单栏 -->
+		<view class="m-t-24 m-r-24 m-l-24 bg-w p-24 rad8 boxshadow">
+			<view class="fb fz36 p-b-12 borderBDas">常用功能</view>
+			<view class="flex msb">
+				<view class="setItemBox flex mac column p-24">
+					<u-icon name="order" size="28"></u-icon>
+					<view class="fz24">订单</view>
+				</view>
+				<view class="setItemBox flex mac column p-24">
+					<u-icon name="map-fill" size="28"></u-icon>
+					<view class="fz24">地图</view>
+				</view>
+				<view class="setItemBox flex mac column p-24">
+					<u-icon name="server-fill" size="28"></u-icon>
+					<view class="fz24">客服</view>
+				</view>
+				<view class="setItemBox flex mac column p-24">
+					<u-icon name="setting-fill" size="28"></u-icon>
+					<view class="fz24">设置</view>
+				</view>
+			</view>
+		</view>
+		<!-- 取餐列表 -->
+		<orderItem v-for="order in orderList" :order=order :key="order.id"></orderItem>
+		<view class="reserveBox"></view>
 		<!-- tabbar -->
 		<view>
 			<tabbar></tabbar>
@@ -19,15 +60,31 @@
 			// 当页面显示时，设置tabber的激活项
 			this.$store.commit('setTabbarCurrent', 2)
 		},
-		methods: {
+		computed: {
-		}
+			userInfo() {
+				return this.$store.state.userInfo
+			},
+			//订单列表 过滤出 已付款的状态订单
+			orderList() {
+				return this.$store.state.orderList.filter(item => item.main_status === '已付款')
+			}
+		},
+		watch: {},
+		methods: {}
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-	.topbar {
+	.avatarBox {
-		background-color: $uni-color-error;
+		margin-top: 89rpx;
-		height: 176rpx;
+		border: 12rpx solid #fff;
 	}
-	.topTit{margin-right: 104rpx;}
+	.setItemBox {
+		width: 72rpx;
+		height: 72rpx;
+	}
+	.reserveBox {
+		margin-bottom: 60rpx;
+	}
+	
 </style>