Commit 987972474c72fbc1e3705207bb2b48dfbd8e0c18
1 parent
1dbed037e6
Exists in
master
订单页card组件提取
Showing
3 changed files
with
62 additions
and
14 deletions
Show diff stats
src/pages.json
src/pages/myOrder/myOrder.vue
| ... | ... | @@ -4,20 +4,44 @@ |
| 4 | 4 | <!-- 搜索--> |
| 5 | 5 | <view class="searchBar"> |
| 6 | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
| 7 | - <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> | |
| 7 | + <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> | |
| 8 | + </view> | |
| 9 | + <view class="screenBar"> | |
| 10 | + <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > | |
| 11 | + <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> | |
| 12 | + </view> | |
| 8 | 13 | </view> |
| 9 | - | |
| 10 | 14 | </view> |
| 15 | + <OrderCard></OrderCard> | |
| 11 | 16 | |
| 12 | 17 | </view> |
| 13 | 18 | </template> |
| 14 | 19 | |
| 15 | -<script> | |
| 16 | - export default { | |
| 20 | +<script> | |
| 21 | + import OrderCard from './OrderCard.vue' | |
| 22 | + export default { | |
| 23 | + components:{ | |
| 24 | + 'OrderCard':OrderCard | |
| 25 | + }, | |
| 17 | 26 | data() { |
| 18 | - return { | |
| 27 | + return { | |
| 28 | + screenItems: [ | |
| 29 | + {current:0,text:'全部'}, | |
| 30 | + {current:1,text:'待付款'}, | |
| 31 | + {current:2,text:'待发货'}, | |
| 32 | + {current:3,text:'待收货'}, | |
| 33 | + {current:4,text:'退款售后'}, | |
| 34 | + ], | |
| 35 | + current: 0, | |
| 19 | 36 | |
| 20 | 37 | }; |
| 38 | + }, | |
| 39 | + methods:{ | |
| 40 | + onClickItem(e) { | |
| 41 | + if (this.current !== e) { | |
| 42 | + this.current = e; | |
| 43 | + } | |
| 44 | + } | |
| 21 | 45 | } |
| 22 | 46 | } |
| 23 | 47 | </script> |
| ... | ... | @@ -48,6 +72,29 @@ |
| 48 | 72 | background-color: #ffffff; |
| 49 | 73 | } |
| 50 | 74 | |
| 75 | + .screenBar{ | |
| 76 | + width: 670rpx; | |
| 77 | + height: 110rpx; | |
| 78 | + display: flex; | |
| 79 | + flex-direction: row; | |
| 80 | + justify-content: space-between; | |
| 81 | + align-items: center; | |
| 82 | + color: #333333; | |
| 83 | + font-size: 32rpx; | |
| 84 | + } | |
| 85 | + .screenItem{ | |
| 86 | + height: 50rpx; | |
| 87 | + font-size: 32rpx; | |
| 88 | + color: #333333; | |
| 89 | + display: flex; | |
| 90 | + justify-content: center; | |
| 91 | + align-items: center; | |
| 92 | + transition:all 0.2s; | |
| 93 | + } | |
| 94 | + .active{ | |
| 95 | + // font-size: 34rpx; | |
| 96 | + color: #EC5D3B; | |
| 97 | + } | |
| 51 | 98 | .searchIpt { |
| 52 | 99 | height: 68rpx; |
| 53 | 100 | width: 670rpx; | ... | ... |
src/pages/myOrder/orderCard.vue
| 1 | 1 | <template> |
| 2 | - <view> | |
| 2 | + <view class="card"> | |
| 3 | 3 | |
| 4 | 4 | </view> |
| 5 | 5 | </template> |
| ... | ... | @@ -15,5 +15,13 @@ |
| 15 | 15 | </script> |
| 16 | 16 | |
| 17 | 17 | <style lang="scss"> |
| 18 | - | |
| 18 | + .card{ | |
| 19 | + width: 670rpx; | |
| 20 | + height: 478rpx; | |
| 21 | + background: #FFFFFF; | |
| 22 | + box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); | |
| 23 | + border-radius: 8px; | |
| 24 | + border-radius: 8px; | |
| 25 | + margin-top: 20rpx; | |
| 26 | + } | |
| 19 | 27 | </style> | ... | ... |