Blame view
src/pages/myOrder/myOrder.vue
3.34 KB
4506eedf6
![]() |
1 |
<template> |
72a08fa45
|
2 3 4 |
<view class="content"> <view class="header"> <!-- 搜索--> |
9a8f39ae3
|
5 |
<!-- <view class="searchBar"> |
72a08fa45
|
6 |
<icon class="searchIcon" type="search" size="14"></icon> |
987972474
|
7 |
<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> |
9a8f39ae3
|
8 |
</view> --> |
987972474
|
9 10 11 12 |
<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> |
72a08fa45
|
13 |
</view> |
72a08fa45
|
14 |
</view> |
46e5b6c99
|
15 |
<view class="orderList" > |
72d769fb7
|
16 17 18 19 |
<view v-for="(order) in orderList" :key="order.orderId" > |
46e5b6c99
|
20 21 22 |
<OrderCard :order = "order" :current="current"></OrderCard> </view> </view> |
9a8f39ae3
|
23 |
<view class="footer" >没有更多订单了,去商城看看吧~</view> |
843fce64e
|
24 25 |
</view> </template> |
987972474
|
26 |
<script> |
72d769fb7
|
27 28 29 |
import OrderCard from './components/OrderCard.vue'; import store from '@/store'; |
987972474
|
30 31 |
export default { components:{ |
72d769fb7
|
32 |
'OrderCard': OrderCard |
4506eedf6
![]() |
33 34 |
}, data() { |
987972474
|
35 |
return { |
9a8f39ae3
|
36 |
//顶部筛选项 |
987972474
|
37 |
screenItems: [ |
9a8f39ae3
|
38 39 40 41 42 43 |
{current:"10",text:'全部'}, {current:"0",text:'待付款'}, {current:"1",text:'待收货'}, {current:"2",text:'已完成'}, // {current:"3",text:'已评价'}, // {current:"4",text:'退款'}, |
987972474
|
44 |
], |
9a8f39ae3
|
45 46 |
//当前所在item 默认10-->全部 current: "10", |
4506eedf6
![]() |
47 |
}; |
987972474
|
48 |
}, |
a8284c675
|
49 |
|
9a8f39ae3
|
50 51 |
onLoad: function(option) { //获取订单列表 |
72d769fb7
|
52 53 |
store.dispatch('myOrder/getList', { uid: "1", |
9a8f39ae3
|
54 55 56 57 |
way: "", }); //从user过来传的status,给current,以显示对应item this.current = option.status |
72d769fb7
|
58 59 60 |
}, computed: { orderList() { |
9a8f39ae3
|
61 62 |
// console.log('orderList', this.$store.state.myOrder.orderList); return this.$store.state.myOrder.orderList; |
72d769fb7
|
63 |
} |
0508098fe
|
64 |
}, |
987972474
|
65 |
methods:{ |
9a8f39ae3
|
66 |
//tab点击事件 |
987972474
|
67 68 69 70 71 |
onClickItem(e) { if (this.current !== e) { this.current = e; } } |
9a8f39ae3
|
72 |
|
4506eedf6
![]() |
73 74 75 76 |
} } </script> |
72a08fa45
|
77 78 79 80 81 82 |
<style lang="scss"> .content { display: flex; flex-direction: column; align-items: center; background-color: #F7F6F6; |
46e5b6c99
|
83 84 |
min-height: 100vh; .header{ |
72a08fa45
|
85 |
background-color: #ffffff; |
46e5b6c99
|
86 |
width: 100%; |
9a8f39ae3
|
87 88 |
// height: 232rpx; padding: 20rpx 40rpx 16rpx 40rpx; |
46e5b6c99
|
89 90 91 92 |
box-sizing: border-box; position: fixed; top: 0; left: 0; |
9a8f39ae3
|
93 94 95 96 97 98 99 100 101 102 103 |
// .searchBar { // width: 670rpx; // display: flex; // justify-content: center; // align-items: center; // box-sizing: border-box; // padding: 0rpx 16rpx; // border: 1px solid #FF6B4A; // border-radius: 8rpx; // background-color: #ffffff; // } |
46e5b6c99
|
104 105 106 |
.screenBar{ width: 670rpx; |
9a8f39ae3
|
107 108 |
// height: 110rpx; height: 70rpx; |
46e5b6c99
|
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
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; padding: 16rpx; font-size: 28rpx; box-sizing: border-box; } |
72a08fa45
|
136 |
} |
46e5b6c99
|
137 |
.orderList{ |
9a8f39ae3
|
138 139 |
// margin-top: 232rpx; margin-top: 132rpx; |
987972474
|
140 |
} |
46e5b6c99
|
141 142 143 144 |
.footer{ font-size: 14px; color: #B8B8B8; margin: 40rpx 0; |
72a08fa45
|
145 |
} |
4506eedf6
![]() |
146 147 |
} </style> |