diff --git a/src/pages.json b/src/pages.json index ba0036a..d4df2a5 100644 --- a/src/pages.json +++ b/src/pages.json @@ -1,12 +1,5 @@ { "pages": [ - { - "path": "pages/index/index", - "style": { - "navigationBarTitleText": "商城一览" - // "enablePullDownRefresh":true - } - }, { "path" : "pages/myOrder/myOrder", "style" : { diff --git a/src/pages/myOrder/myOrder.vue b/src/pages/myOrder/myOrder.vue index bc9e4fb..ac9e18c 100644 --- a/src/pages/myOrder/myOrder.vue +++ b/src/pages/myOrder/myOrder.vue @@ -4,20 +4,44 @@ <!-- 搜索--> <view class="searchBar"> <icon class="searchIcon" type="search" size="14"></icon> - <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> + <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> + </view> + <view class="screenBar"> + <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > + <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> + </view> </view> - </view> + <OrderCard></OrderCard> </view> </template> -<script> - export default { +<script> + import OrderCard from './OrderCard.vue' + export default { + components:{ + 'OrderCard':OrderCard + }, data() { - return { + return { + screenItems: [ + {current:0,text:'全部'}, + {current:1,text:'待付款'}, + {current:2,text:'待发货'}, + {current:3,text:'待收货'}, + {current:4,text:'退款售后'}, + ], + current: 0, }; + }, + methods:{ + onClickItem(e) { + if (this.current !== e) { + this.current = e; + } + } } } </script> @@ -48,6 +72,29 @@ background-color: #ffffff; } + .screenBar{ + width: 670rpx; + height: 110rpx; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + color: #333333; + font-size: 32rpx; + } + .screenItem{ + height: 50rpx; + font-size: 32rpx; + color: #333333; + display: flex; + justify-content: center; + align-items: center; + transition:all 0.2s; + } + .active{ + // font-size: 34rpx; + color: #EC5D3B; + } .searchIpt { height: 68rpx; width: 670rpx; diff --git a/src/pages/myOrder/orderCard.vue b/src/pages/myOrder/orderCard.vue index 8c3b35f..339dac9 100644 --- a/src/pages/myOrder/orderCard.vue +++ b/src/pages/myOrder/orderCard.vue @@ -1,5 +1,5 @@ <template> - <view> + <view class="card"> </view> </template> @@ -15,5 +15,13 @@ </script> <style lang="scss"> - + .card{ + width: 670rpx; + height: 478rpx; + background: #FFFFFF; + box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); + border-radius: 8px; + border-radius: 8px; + margin-top: 20rpx; + } </style>