刘文博 / gulu-vue

Download as
Browse Code »

Commit e4713149ad8ca1f90187d452d68dccd7d18a11df

Authored by 范牧
1 parent daf137d6fd
Exists in master

我的订单修改

Showing 2 changed files with 158 additions and 138 deletions   Show diff stats
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path": "pages/index/index", 4 "path": "pages/index/index",
5 "style": { 5 "style": {
6 "navigationBarTitleText": "商城一览" 6 "navigationBarTitleText": "商城一览"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path": "pages/user/user", 10 "path": "pages/user/user",
11 "style": { 11 "style": {
12 "navigationBarTitleText": "我的" 12 "navigationBarTitleText": "我的"
13 } 13 }
14 }, 14 },
15 { 15 {
16 "path": "pages/addOpticsData/addOpticsData", 16 "path": "pages/addOpticsData/addOpticsData",
17 "style": { 17 "style": {
18 "navigationBarTitleText": "验光数据" 18 "navigationBarTitleText": "验光数据"
19 } 19 }
20 }, 20 },
21 { 21 {
22 "path": "pages/detailsChoiceArgs/detailsChoiceArgs", 22 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
23 "style": { 23 "style": {
24 "navigationBarTitleText": "镜片名称名称" 24 "navigationBarTitleText": "镜片名称名称"
25 } 25 }
26 }, 26 },
27 { 27 {
28 "path": "pages/purchaseLenses/purchaseLenses", 28 "path": "pages/purchaseLenses/purchaseLenses",
29 "style": { 29 "style": {
30 "navigationBarTitleText": "产品选购" 30 "navigationBarTitleText": "产品选购"
31 } 31 }
32 }, 32 },
33 { 33 {
34 "path": "pages/lensDetails/lensDetails", 34 "path": "pages/lensDetails/lensDetails",
35 "style": { 35 "style": {
36 "navigationBarTitleText": "产品详情" 36 "navigationBarTitleText": "产品详情"
37 } 37 }
38 }, 38 },
39 { 39 {
40 "path": "pages/myOrderPaying/myOrderPaying", 40 "path": "pages/myOrderPaying/myOrderPaying",
41 "style": { 41 "style": {
42 "navigationBarTitleText": "我的订单" 42 "navigationBarTitleText": "我的订单"
43 } 43 }
44 }, 44 },
45 { 45 {
46 "path": "pages/myOrder/myOrder", 46 "path": "pages/myOrder/myOrder",
47 "style": { 47 "style": {
48 "navigationBarTitleText": "我的订单" 48 "navigationBarTitleText": "我的订单"
49 } 49 }
50 }, 50 },
51 { 51 {
52 "path": "pages/cart/cart", 52 "path": "pages/cart/cart",
53 "style": { 53 "style": {
54 "navigationBarTitleText": "购物车" 54 "navigationBarTitleText": "购物车"
55 } 55 }
56 }, 56 },
57 { 57 {
58 "path": "pages/frameDetail/frameDetail", 58 "path": "pages/frameDetail/frameDetail",
59 "style": { 59 "style": {
60 "navigationBarTitleText": "产品详情" 60 "navigationBarTitleText": "产品详情"
61 } 61 }
62 }, 62 },
63 { 63 {
64 "path": "pages/refundProgress/refundProgress", 64 "path": "pages/refundProgress/refundProgress",
65 "style": { 65 "style": {
66 "navigationBarTitleText": "申请退款" 66 "navigationBarTitleText": "申请退款"
67 } 67 }
68 }, 68 },
69 { 69 {
70 "path": "pages/address/addAddress", 70 "path": "pages/address/addAddress",
71 "style": { 71 "style": {
72 "navigationBarTitleText": "新增地址" 72 "navigationBarTitleText": "新增地址"
73 } 73 }
74 }, 74 },
75 { 75 {
76 "path": "pages/address/addressList", 76 "path": "pages/address/addressList",
77 "style": { 77 "style": {
78 "navigationBarTitleText": "地址管理" 78 "navigationBarTitleText": "地址管理"
79 } 79 }
80 }, 80 },
81 { 81 {
82 "path": "pages/confirmOrder/confirmOrder", 82 "path": "pages/confirmOrder/confirmOrder",
83 "style": { 83 "style": {
84 "navigationBarTitleText": "确认订单" 84 "navigationBarTitleText": "确认订单"
85 } 85 }
86 }, 86 },
87 { 87 {
88 "path": "pages/refundment/refundWays", 88 "path": "pages/refundment/refundWays",
89 "style": { 89 "style": {
90 "navigationBarTitleText": "退款方式" 90 "navigationBarTitleText": "退款方式"
91 } 91 }
92 }, 92 },
93 { 93 {
94 "path": "pages/refundment/refundment", 94 "path": "pages/refundment/refundment",
95 "style": { 95 "style": {
96 "navigationBarTitleText": "申请退款" 96 "navigationBarTitleText": "申请退款"
97 } 97 }
98 }, 98 },
99 { 99 {
100 "path": "pages/predelivery/predelivery", 100 "path": "pages/predelivery/predelivery",
101 "style": { 101 "style": {
102 "navigationBarTitleText": "待发货" 102 "navigationBarTitleText": "待发货"
103 } 103 }
104 }, 104 },
105 { 105 {
106 "path": "pages/customerService/customerService", 106 "path": "pages/customerService/customerService",
107 "style": { 107 "style": {
108 "navigationBarTitleText": "在线客服" 108 "navigationBarTitleText": "在线客服"
109 } 109 }
110 }, 110 },
111 { 111 {
112 "path": "pages/detailStandard/detailStandard_sun", 112 "path": "pages/detailStandard/detailStandard_sun",
113 "style": { 113 "style": {
114 "navigationBarTitleText": "太阳镜选购页" 114 "navigationBarTitleText": "太阳镜选购页"
115 } 115 }
116 }, 116 },
117 { 117 {
118 "path": "pages/detailStandard/detailStandard_k", 118 "path": "pages/detailStandard/detailStandard_k",
119 "style": { 119 "style": {
120 "navigationBarTitleText": "镜框选购页" 120 "navigationBarTitleText": "镜框选购页"
121 } 121 }
122 }, 122 },
123 { 123 {
124 "path": "pages/newOpticsData/newOpticsData", 124 "path": "pages/newOpticsData/newOpticsData",
125 "style": { 125 "style": {
126 "navigationBarTitleText": "验光数据" 126 "navigationBarTitleText": "验光数据"
127 } 127 }
128 } 128 }
129 ], 129 ],
130 "globalStyle": { 130 "globalStyle": {
131 "navigationBarTextStyle": "black", 131 "navigationBarTextStyle": "black",
132 "navigationBarTitleText": "uni-app", 132 "navigationBarTitleText": "uni-app",
133 "navigationBarBackgroundColor": "#F8F8F8", 133 "navigationBarBackgroundColor": "#F8F8F8",
134 "backgroundColor": "#F8F8F8" 134 "backgroundColor": "#F8F8F8"
135 }, 135 },
136 "tabBar": { 136 "tabBar": {
137 "color": "#C0C4CC", 137 "color": "#C0C4CC",
138 "selectedColor": "#fa436a", 138 "selectedColor": "#fa436a",
139 "borderStyle": "black", 139 "borderStyle": "black",
140 "backgroundColor": "#ffffff", 140 "backgroundColor": "#ffffff",
141 "list": [ 141 "list": [
142 { 142 {
143 "pagePath": "pages/index/index", 143 "pagePath": "pages/index/index",
144 "iconPath": "static/tab-home.png", 144 "iconPath": "static/tab-home.png",
145 "selectedIconPath": "static/tab-home-current.png", 145 "selectedIconPath": "static/tab-home-current.png",
146 "text": "首页" 146 "text": "首页"
147 }, 147 },
148 { 148 {
149 "pagePath": "pages/cart/cart", 149 "pagePath": "pages/cart/cart",
150 "iconPath": "static/tab-cart.png", 150 "iconPath": "static/tab-cart.png",
151 "selectedIconPath": "static/tab-cart-current.png", 151 "selectedIconPath": "static/tab-cart-current.png",
152 "text": "购物车" 152 "text": "购物车"
153 }, 153 },
154 { 154 {
155 "pagePath": "pages/user/user", 155 "pagePath": "pages/user/user",
156 "iconPath": "static/tab-my.png", 156 "iconPath": "static/tab-my.png",
157 "selectedIconPath": "static/tab-my-current.png", 157 "selectedIconPath": "static/tab-my-current.png",
158 "text": "我的" 158 "text": "我的"
159 } 159 }
160 ] 160 ]
161 }, 161 },
162 "condition": { 162 "condition": {
163 "current": 0, 163 "current": 0,
164 "list": [ 164 "list": [
165 { 165 {
166 "name": "首页", 166 "name": "首页",
167 "path": "pages/index/index", 167 "path": "pages/index/index",
168 "query": "" 168 "query": ""
169 }, 169 },
170 { 170 {
171 "name": "产品详情", 171 "name": "产品详情",
172 "path": "pages/frameDetail/frameDetail", 172 "path": "pages/frameDetail/frameDetail",
173 "query": "" 173 "query": ""
174 }, 174 },
175 { 175 {
176 "name": "镜片、美瞳参数选择", 176 "name": "镜片、美瞳参数选择",
177 "path": "pages/purchaseLenses/purchaseLenses", 177 "path": "pages/purchaseLenses/purchaseLenses",
178 "query": "" 178 "query": ""
179 }, 179 },
180 { 180 {
181 "name": "确认订单", 181 "name": "确认订单",
182 "path": "pages/confirmOrder/confirmOrder", 182 "path": "pages/confirmOrder/confirmOrder",
183 "query": "" 183 "query": ""
184 }, 184 },
185 { 185 {
186 "name": "新增地址", 186 "name": "新增地址",
187 "path": "pages/address/addAddress", 187 "path": "pages/address/addAddress",
188 "query": "" 188 "query": ""
189 }, 189 },
190 { 190 {
191 "name": "地址管理", 191 "name": "地址管理",
192 "path": "pages/address/addressList", 192 "path": "pages/address/addressList",
193 "query": "" 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 "name": "我的", 206 "name": "我的",
197 "path": "pages/user/user", 207 "path": "pages/user/user",
198 "query": "" 208 "query": ""
199 } 209 }
200 ] 210 ]
201 } 211 }
202 } 212 }
src/pages/myOrder/myOrder.vue
Diff comments   View file @e471314
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <!-- <view class="searchBar"> 5 <!-- <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 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> --> 8 </view> -->
9 <view class="screenBar"> 9 <view class="screenBar">
10 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > 10 <view
11 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 11 v-for="item in screenItems"
12 </view> 12 :key="item.current"
13 </view> 13 @click="onClickItem(item.current)"
14 </view> 14 >
15 <view class="orderList" > 15 <view
16 <view 16 class="screenItem"
17 v-for="(order) in orderList" 17 v-bind:class="{ active: current === item.current }"
18 :key="order.orderId" 18 >{{ item.text }}</view>
19 > 19 </view>
20 <OrderCard :order = "order" :current="current"></OrderCard> 20 </view>
21 </view> 21 </view>
22 </view> 22 <view class="orderList">
23 <view class="footer" >没有更多订单了，去商城看看吧~</view> 23 <view
24 </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 </template> 35 </template>
26 <script> 36 <script>
27 import OrderCard from './components/OrderCard.vue'; 37 import OrderCard from './components/OrderCard.vue'
28 import store from '@/store'; 38 import store from '@/store'
29 39
30 export default { 40 export default {
31 components:{ 41 components: {
32 'OrderCard': OrderCard 42 OrderCard: OrderCard
33 }, 43 },
34 data() { 44 data() {
35 return { 45 return {
36 //顶部筛选项 46 // 顶部筛选项
37 screenItems: [ 47 screenItems: [
38 {current:"10",text:'全部'}, 48 { current: '10', text: '全部' },
39 {current:"0",text:'待付款'}, 49 { current: '0', text: '待付款' },
40 {current:"1",text:'待收货'}, 50 { current: '1', text: '待收货' },
41 {current:"2",text:'已完成'}, 51 { current: '2', text: '已完成' }
42 // {current:"3",text:'已评价'}, 52 // {current:"3",text:'已评价'},
43 // {current:"4",text:'退款'}, 53 // {current:"4",text:'退款'},
44 ], 54 ],
45 //当前所在item 默认10-->全部 55 // 当前所在item 默认10-->全部
46 current: "10", 56 current: '10'
47 }; 57 }
48 }, 58 },
49 59
50 onLoad: function(option) { 60 onLoad: function(option) {
51 //获取订单列表 61 // 获取订单列表
52 store.dispatch('myOrder/getList', { 62 store.dispatch('myOrder/getList', {
53 uid: "1", 63 uid: '1',
54 way: "", 64 way: ''
55 }); 65 })
56 //从user过来传的status，给current，以显示对应item 66 // 从user过来传的status，给current，以显示对应item
57 this.current = option.status 67 this.current = option.status
58 }, 68 },
59 computed: { 69 computed: {
60 orderList() { 70 orderList() {
61 // console.log('orderList', this.$store.state.myOrder.orderList); 71 // console.log('orderList', this.$store.state.myOrder.orderList);
62 return this.$store.state.myOrder.orderList; 72 return this.$store.state.myOrder.orderList
63 } 73 }
64 }, 74 },
65 methods:{ 75 methods: {
66 //tab点击事件 76 // tab点击事件
67 onClickItem(e) { 77 onClickItem(e) {
68 if (this.current !== e) { 78 if (this.current !== e) {
69 this.current = e; 79 this.current = e
70 } 80 }
71 } 81 }
72 82
73 } 83 }
74 } 84 }
75 </script> 85 </script>
76 86
77 <style lang="scss"> 87 <style lang="scss">
78 .content { 88 .content {
79 display: flex; 89 display: flex;
80 flex-direction: column; 90 flex-direction: column;
81 align-items: center; 91 align-items: center;
82 background-color: #F7F6F6; 92 background-color: #f7f6f6;
83 min-height: 100vh; 93 min-height: 100vh;
84 .header{ 94 .header {
85 background-color: #ffffff; 95 background-color: #ffffff;
86 width: 100%; 96 width: 100%;
87 // height: 232rpx; 97 // height: 232rpx;
88 padding: 20rpx 40rpx 16rpx 40rpx; 98 padding: 20rpx 40rpx 16rpx 40rpx;
89 box-sizing: border-box; 99 box-sizing: border-box;
90 position: fixed; 100 position: fixed;
91 top: 0; 101 top: 0;
92 left: 0; 102 left: 0;
93 // .searchBar { 103 // .searchBar {
94 // width: 670rpx; 104 // width: 670rpx;
95 // display: flex; 105 // display: flex;
96 // justify-content: center; 106 // justify-content: center;
97 // align-items: center; 107 // align-items: center;
98 // box-sizing: border-box; 108 // box-sizing: border-box;
99 // padding: 0rpx 16rpx; 109 // padding: 0rpx 16rpx;
100 // border: 1px solid #FF6B4A; 110 // border: 1px solid #ff6b4a;
101 // border-radius: 8rpx; 111 // border-radius: 8rpx;
102 // background-color: #ffffff; 112 // background-color: #ffffff;
103 // } 113 // }
104 114
105 .screenBar{ 115 .screenBar {
106 width: 670rpx; 116 width: 670rpx;
107 // height: 110rpx; 117 // height: 110rpx;
108 height: 70rpx; 118 height: 70rpx;
109 display: flex; 119 display: flex;
110 flex-direction: row; 120 flex-direction: row;
111 justify-content: space-between; 121 justify-content: space-between;
112 align-items: center; 122 align-items: center;
113 color: #333333; 123 color: #333333;
114 font-size: 32rpx; 124 font-size: 32rpx;
115 } 125 }
116 .screenItem{ 126 .screenItem {
117 height: 50rpx; 127 height: 50rpx;
118 font-size: 32rpx; 128 font-size: 32rpx;
119 color: #333333; 129 color: #333333;
120 display: flex; 130 display: flex;
121 justify-content: center; 131 justify-content: center;
122 align-items: center; 132 align-items: center;
123 transition:all 0.2s; 133 transition: all 0.2s;
124 } 134 }
125 .active{ 135 .active {
126 // font-size: 34rpx; 136 // font-size: 34rpx;
127 color: #EC5D3B; 137 color: #ec5d3b;
128 } 138 }
129 .searchIpt { 139 .searchIpt {
130 height: 68rpx; 140 height: 68rpx;
131 width: 670rpx; 141 width: 670rpx;
132 padding: 16rpx; 142 padding: 16rpx;
133 font-size: 28rpx; 143 font-size: 28rpx;
134 box-sizing: border-box; 144 box-sizing: border-box;
135 } 145 }
136 } 146 }
137 .orderList{ 147 .orderList {
138 // margin-top: 232rpx; 148 // margin-top: 232rpx;
139 margin-top: 132rpx; 149 margin-top: 132rpx;
140 } 150 }
141 .footer{ 151 .footer {
142 font-size: 14px; 152 font-size: 14px;
143 color: #B8B8B8; 153 color: #b8b8b8;
144 margin: 40rpx 0; 154 margin: 40rpx 0;
145 } 155 }
146 } 156 }
147 </style> 157 </style>
148 158