vue3微信公众号商城项目实战系列（11）"我的"页面
我的页面效果如下：
Mine.vue 页面代码如下：
布局块代码：
1 <template> 2 <div class="mine"> 3 4 <div class="mine-top"> 5 <img src="/mine.png" /><br /> 6 <span class="mine-top-title">微信公众号商城</span> 7 <br /> 8 <div>登录</div> 9 </div> 10 11 <div class="mine-order"> 12 <div class="mine-order-title">我的订单</div> 13 <div class="mine-order-category"> 14 <div class="mine-order-item" @click="onOrderQuery(1)"> 15 <span>{{orderSummary.paying}}</span> 16 <span>待付款</span> 17 </div> 18 <div class="mine-order-item" @click="onOrderQuery(2)"> 19 <span>{{orderSummary.receiving}}</span> 20 <span>待收货</span> 21 </div> 22 <div class="mine-order-item" @click="onOrderQuery(3)"> 23 <span>{{orderSummary.finished}}</span> 24 <span>已完成</span> 25 </div> 26 <div class="mine-order-item" @click="onOrderQuery(4)"> 27 <span>{{orderSummary.servicing}}</span> 28 <span>退款/售后</span> 29 </div> 30 </div> 31 </div> 32 33 <div class="mine-func"> 34 <div class="mine-func-item"> 35 <span>地址管理</span> 36 <span>></span> 37 </div> 38 </div> 39 40 41 <div class="mine-func"> 42 <div class="mine-func-item"> 43 <span>我的收藏</span> 44 <span>></span> 45 </div> 46 </div> 47 48 <div class="mine-func"> 49 <div class="mine-func-item"> 50 <span>联系我们</span> 51 <span>></span> 52 </div> 53 </div> 54 55 56 <div class="mine-func"> 57 <div class="mine-func-item"> 58 <span>隐私政策</span> 59 <span>></span> 60 </div> 61 </div> 62 <TabBar name="mine" /> 63 </div> 64 </template>
脚本块代码：
1 <script setup> 2 import {reactive, toRefs, onMounted} from 'vue'; 3 import {orderCount} from '@/http/api.js'; 4 import {useRouter} from 'vue-router'; 5 import TabBar from '@/components/TabBar.vue'; 6 const router = useRouter(); 7 8 const data=reactive({orderSummary:{"paying":0,"receiving":0,"finished":0,"servicing":0}}); 9 let{orderSummary} = toRefs(data); 10 11 onMounted(()=>{ 12 orderCount({}).then(res=>{ 13 data.orderSummary=res; 14 }); 15 16 }); 17 18 function onOrderQuery(orderType){ 19 router.push({name:'orders',query:{tp:orderType}}); 20 } 21 </script>
样式块代码：
1 <style> 2 .mine-top{ 3 background-color: #bff8ff; 4 height: 200px; 5 text-align: center; 6 border-radius: 0 0 50% 50%/10%; 7 padding-top: 20px; 8 } 9 .mine-top-title{ 10 font-size: 18px; 11 } 12 13 .mine-order, .mine-func{ 14 width: 350px; 15 margin: 8px auto; 16 border:solid 1px #F0F0F0; 17 border-radius: 10px; 18 padding:10px 20px; 19 } 20 .mine-order-title{ 21 height: 40px; 22 border-bottom: solid 1px #F0F0F0; 23 } 24 .mine-order-category{ 25 height: 60px; 26 display: flex; 27 flex-direction: row; 28 justify-content: space-evenly; 29 align-items: center; 30 } 31 .mine-order-item{ 32 display: flex; 33 flex-direction: column; 34 justify-content: space-evenly; 35 align-items: center; 36 } 37 .mine-func{ 38 background-color: #F7F7F7; 39 } 40 .mine-func-item{ 41 display: flex; 42 flex-direction: row; 43 justify-content: space-between; 44 } 45 </style>
功能比较简单，就不一 一分解实现了。
