Commit e4713149ad8ca1f90187d452d68dccd7d18a11df
1 parent
daf137d6fd
Exists in
master
我的订单修改
Showing
2 changed files
with
158 additions
and
138 deletions
Show diff stats
src/pages.json
| ... | ... | @@ -193,6 +193,16 @@ |
| 193 | 193 | "query": "" |
| 194 | 194 | }, |
| 195 | 195 | { |
| 196 | + "name": "我的订单", | |
| 197 | + "path": "pages/myOrder/myOrder", | |
| 198 | + "query": "" | |
| 199 | + }, | |
| 200 | + { | |
| 201 | + "name": "待付款订单详情", | |
| 202 | + "path": "pages/myOrderPaying/myOrderPaying", | |
| 203 | + "query": "" | |
| 204 | + }, | |
| 205 | + { | |
| 196 | 206 | "name": "我的", |
| 197 | 207 | "path": "pages/user/user", |
| 198 | 208 | "query": "" | ... | ... |
src/pages/myOrder/myOrder.vue
| 1 | 1 | <template> |
| 2 | - <view class="content"> | |
| 3 | - <view class="header"> | |
| 4 | - <!-- 搜索--> | |
| 5 | - <!-- <view class="searchBar"> | |
| 6 | - <icon class="searchIcon" type="search" size="14"></icon> | |
| 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> | |
| 13 | - </view> | |
| 14 | - </view> | |
| 15 | - <view class="orderList" > | |
| 16 | - <view | |
| 17 | - v-for="(order) in orderList" | |
| 18 | - :key="order.orderId" | |
| 19 | - > | |
| 20 | - <OrderCard :order = "order" :current="current"></OrderCard> | |
| 21 | - </view> | |
| 22 | - </view> | |
| 23 | - <view class="footer" >没有更多订单了，去商城看看吧~</view> | |
| 24 | - </view> | |
| 2 | + <view class="content"> | |
| 3 | + <view class="header"> | |
| 4 | + <!-- 搜索--> | |
| 5 | + <!-- <view class="searchBar"> | |
| 6 | + <icon class="searchIcon" type="search" size="14"></icon> | |
| 7 | + <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> | |
| 8 | + </view> --> | |
| 9 | + <view class="screenBar"> | |
| 10 | + <view | |
| 11 | + v-for="item in screenItems" | |
| 12 | + :key="item.current" | |
| 13 | + @click="onClickItem(item.current)" | |
| 14 | + > | |
| 15 | + <view | |
| 16 | + class="screenItem" | |
| 17 | + v-bind:class="{ active: current === item.current }" | |
| 18 | + >{{ item.text }}</view> | |
| 19 | + </view> | |
| 20 | + </view> | |
| 21 | + </view> | |
| 22 | + <view class="orderList"> | |
| 23 | + <view | |
| 24 | + v-for="(order) in orderList" | |
| 25 | + :key="order.orderId" | |
| 26 | + > | |
| 27 | + <OrderCard | |
| 28 | + :order="order" | |
| 29 | + :current="current" | |
| 30 | + ></OrderCard> | |
| 31 | + </view> | |
| 32 | + </view> | |
| 33 | + <view class="footer">没有更多订单了，去商城看看吧~</view> | |
| 34 | + </view> | |
| 25 | 35 | </template> |
| 26 | 36 | <script> |
| 27 | - import OrderCard from './components/OrderCard.vue'; | |
| 28 | - import store from '@/store'; | |
| 37 | +import OrderCard from './components/OrderCard.vue' | |
| 38 | +import store from '@/store' | |
| 29 | 39 | |
| 30 | - export default { | |
| 31 | - components:{ | |
| 32 | - 'OrderCard': OrderCard | |
| 33 | - }, | |
| 34 | - data() { | |
| 35 | - return { | |
| 36 | - //顶部筛选项 | |
| 37 | - screenItems: [ | |
| 38 | - {current:"10",text:'全部'}, | |
| 39 | - {current:"0",text:'待付款'}, | |
| 40 | - {current:"1",text:'待收货'}, | |
| 41 | - {current:"2",text:'已完成'}, | |
| 42 | - // {current:"3",text:'已评价'}, | |
| 43 | - // {current:"4",text:'退款'}, | |
| 44 | - ], | |
| 45 | - //当前所在item 默认10-->全部 | |
| 46 | - current: "10", | |
| 47 | - }; | |
| 48 | - }, | |
| 40 | +export default { | |
| 41 | + components: { | |
| 42 | + OrderCard: OrderCard | |
| 43 | + }, | |
| 44 | + data() { | |
| 45 | + return { | |
| 46 | + // 顶部筛选项 | |
| 47 | + screenItems: [ | |
| 48 | + { current: '10', text: '全部' }, | |
| 49 | + { current: '0', text: '待付款' }, | |
| 50 | + { current: '1', text: '待收货' }, | |
| 51 | + { current: '2', text: '已完成' } | |
| 52 | + // {current:"3",text:'已评价'}, | |
| 53 | + // {current:"4",text:'退款'}, | |
| 54 | + ], | |
| 55 | + // 当前所在item 默认10-->全部 | |
| 56 | + current: '10' | |
| 57 | + } | |
| 58 | + }, | |
| 49 | 59 | |
| 50 | - onLoad: function(option) { | |
| 51 | - //获取订单列表 | |
| 52 | - store.dispatch('myOrder/getList', { | |
| 53 | - uid: "1", | |
| 54 | - way: "", | |
| 55 | - }); | |
| 56 | - //从user过来传的status，给current，以显示对应item | |
| 57 | - this.current = option.status | |
| 58 | - }, | |
| 59 | - computed: { | |
| 60 | - orderList() { | |
| 61 | - // console.log('orderList', this.$store.state.myOrder.orderList); | |
| 62 | - return this.$store.state.myOrder.orderList; | |
| 63 | - } | |
| 64 | - }, | |
| 65 | - methods:{ | |
| 66 | - //tab点击事件 | |
| 67 | - onClickItem(e) { | |
| 68 | - if (this.current !== e) { | |
| 69 | - this.current = e; | |
| 70 | - } | |
| 71 | - } | |
| 72 | - | |
| 73 | - } | |
| 74 | - } | |
| 60 | + onLoad: function(option) { | |
| 61 | + // 获取订单列表 | |
| 62 | + store.dispatch('myOrder/getList', { | |
| 63 | + uid: '1', | |
| 64 | + way: '' | |
| 65 | + }) | |
| 66 | + // 从user过来传的status，给current，以显示对应item | |
| 67 | + this.current = option.status | |
| 68 | + }, | |
| 69 | + computed: { | |
| 70 | + orderList() { | |
| 71 | + // console.log('orderList', this.$store.state.myOrder.orderList); | |
| 72 | + return this.$store.state.myOrder.orderList | |
| 73 | + } | |
| 74 | + }, | |
| 75 | + methods: { | |
| 76 | + // tab点击事件 | |
| 77 | + onClickItem(e) { | |
| 78 | + if (this.current !== e) { | |
| 79 | + this.current = e | |
| 80 | + } | |
| 81 | + } | |
| 82 | + | |
| 83 | + } | |
| 84 | +} | |
| 75 | 85 | </script> |
| 76 | 86 | |
| 77 | 87 | <style lang="scss"> |
| 78 | - .content { | |
| 79 | - display: flex; | |
| 80 | - flex-direction: column; | |
| 81 | - align-items: center; | |
| 82 | - background-color: #F7F6F6; | |
| 83 | - min-height: 100vh; | |
| 84 | - .header{ | |
| 85 | - background-color: #ffffff; | |
| 86 | - width: 100%; | |
| 87 | - // height: 232rpx; | |
| 88 | - padding: 20rpx 40rpx 16rpx 40rpx; | |
| 89 | - box-sizing: border-box; | |
| 90 | - position: fixed; | |
| 91 | - top: 0; | |
| 92 | - left: 0; | |
| 93 | - // .searchBar { | |
| 94 | - // width: 670rpx; | |
| 95 | - // display: flex; | |
| 96 | - // justify-content: center; | |
| 97 | - // align-items: center; | |
| 98 | - // box-sizing: border-box; | |
| 99 | - // padding: 0rpx 16rpx; | |
| 100 | - // border: 1px solid #FF6B4A; | |
| 101 | - // border-radius: 8rpx; | |
| 102 | - // background-color: #ffffff; | |
| 103 | - // } | |
| 104 | - | |
| 105 | - .screenBar{ | |
| 106 | - width: 670rpx; | |
| 107 | - // height: 110rpx; | |
| 108 | - height: 70rpx; | |
| 109 | - display: flex; | |
| 110 | - flex-direction: row; | |
| 111 | - justify-content: space-between; | |
| 112 | - align-items: center; | |
| 113 | - color: #333333; | |
| 114 | - font-size: 32rpx; | |
| 115 | - } | |
| 116 | - .screenItem{ | |
| 117 | - height: 50rpx; | |
| 118 | - font-size: 32rpx; | |
| 119 | - color: #333333; | |
| 120 | - display: flex; | |
| 121 | - justify-content: center; | |
| 122 | - align-items: center; | |
| 123 | - transition:all 0.2s; | |
| 124 | - } | |
| 125 | - .active{ | |
| 126 | - // font-size: 34rpx; | |
| 127 | - color: #EC5D3B; | |
| 128 | - } | |
| 129 | - .searchIpt { | |
| 130 | - height: 68rpx; | |
| 131 | - width: 670rpx; | |
| 132 | - padding: 16rpx; | |
| 133 | - font-size: 28rpx; | |
| 134 | - box-sizing: border-box; | |
| 135 | - } | |
| 136 | - } | |
| 137 | - .orderList{ | |
| 138 | - // margin-top: 232rpx; | |
| 139 | - margin-top: 132rpx; | |
| 140 | - } | |
| 141 | - .footer{ | |
| 142 | - font-size: 14px; | |
| 143 | - color: #B8B8B8; | |
| 144 | - margin: 40rpx 0; | |
| 145 | - } | |
| 146 | - } | |
| 88 | +.content { | |
| 89 | + display: flex; | |
| 90 | + flex-direction: column; | |
| 91 | + align-items: center; | |
| 92 | + background-color: #f7f6f6; | |
| 93 | + min-height: 100vh; | |
| 94 | + .header { | |
| 95 | + background-color: #ffffff; | |
| 96 | + width: 100%; | |
| 97 | + // height: 232rpx; | |
| 98 | + padding: 20rpx 40rpx 16rpx 40rpx; | |
| 99 | + box-sizing: border-box; | |
| 100 | + position: fixed; | |
| 101 | + top: 0; | |
| 102 | + left: 0; | |
| 103 | + // .searchBar { | |
| 104 | + // width: 670rpx; | |
| 105 | + // display: flex; | |
| 106 | + // justify-content: center; | |
| 107 | + // align-items: center; | |
| 108 | + // box-sizing: border-box; | |
| 109 | + // padding: 0rpx 16rpx; | |
| 110 | + // border: 1px solid #ff6b4a; | |
| 111 | + // border-radius: 8rpx; | |
| 112 | + // background-color: #ffffff; | |
| 113 | + // } | |
| 114 | + | |
| 115 | + .screenBar { | |
| 116 | + width: 670rpx; | |
| 117 | + // height: 110rpx; | |
| 118 | + height: 70rpx; | |
| 119 | + display: flex; | |
| 120 | + flex-direction: row; | |
| 121 | + justify-content: space-between; | |
| 122 | + align-items: center; | |
| 123 | + color: #333333; | |
| 124 | + font-size: 32rpx; | |
| 125 | + } | |
| 126 | + .screenItem { | |
| 127 | + height: 50rpx; | |
| 128 | + font-size: 32rpx; | |
| 129 | + color: #333333; | |
| 130 | + display: flex; | |
| 131 | + justify-content: center; | |
| 132 | + align-items: center; | |
| 133 | + transition: all 0.2s; | |
| 134 | + } | |
| 135 | + .active { | |
| 136 | + // font-size: 34rpx; | |
| 137 | + color: #ec5d3b; | |
| 138 | + } | |
| 139 | + .searchIpt { | |
| 140 | + height: 68rpx; | |
| 141 | + width: 670rpx; | |
| 142 | + padding: 16rpx; | |
| 143 | + font-size: 28rpx; | |
| 144 | + box-sizing: border-box; | |
| 145 | + } | |
| 146 | + } | |
| 147 | + .orderList { | |
| 148 | + // margin-top: 232rpx; | |
| 149 | + margin-top: 132rpx; | |
| 150 | + } | |
| 151 | + .footer { | |
| 152 | + font-size: 14px; | |
| 153 | + color: #b8b8b8; | |
| 154 | + margin: 40rpx 0; | |
| 155 | + } | |
| 156 | +} | |
| 147 | 157 | </style> | ... | ... |