Food/food_wechat
3
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

【类 型】：factor

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

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
This commit is contained in:
sszdot 2024-12-18 17:52:08 +08:00
parent a1feb8bb4b
commit 2745f9c263
1 changed files with 64 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
pages/main/index.vue
View File

@ -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">
.topbar {
background-color: $uni-color-error;
height: 176rpx;
<style lang="scss" scoped>
.avatarBox {
margin-top: 89rpx;
border: 12rpx solid #fff;
}
.topTit{margin-right: 104rpx;}
.setItemBox {
width: 72rpx;
height: 72rpx;
}
.reserveBox {
margin-bottom: 60rpx;
}
</style>