油站二维码

pages/orderList/orderList.vue

@@ -10,9 +10,22 @@
 				 @tap="tabSelect" :data-id="index">{{item}}</view>
 			</view>
 		</scroll-view>
-		<view class="margin">
-			<OrderItem class="cu-list menu-avatar comment" v-for="(item,index) in tabList" :key="index" v-show="index==TabCur"
-			 :item="order" />
+		<view class="padding　 padding-bottom-0">
+			<view v-show="TabCur==0" class="order-list">
+				<view 　v-for="item in allOrder" :key="item.orderID">
+					<OrderItem class="cu-list order-item  menu-avatar   comment" :item="item" />
+				</view>
+			</view>　
+			<view v-show="TabCur==1" class="order-list">
+				<view v-for="item in payingOrder" :key="item.orderID">
+					<OrderItem class="cu-list order-item menu-avatar comment" :item="item" />
+				</view>
+			</view>
+			<view v-show="TabCur==2" class="order-list">
+				<view 　 v-for="item in finishedOrder" :key="item.orderID">
+					<OrderItem class="cu-list order-item  menu-avatar   comment" :item="item" />
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -27,11 +40,11 @@
 		data() {
 			return {
 				tabList: [
-					'全部', '待支付', '已支付', '退款'
+					'全部', '待支付', '已支付'
 				],
 				TabCur: 0,
 				pageNumber: 1,
-				istate: 3,
+				istate: -3,
 				scrollLeft: 0,
 				order: {
 					istate: 0,
@@ -44,7 +57,10 @@
 					sourceType: 3,
 					realamount: 4.66,
 					credateDatetime: '2020-10-12 12:30:10'
-				}
+				},
+				allOrder: [],
+				finishedOrder: [],
+				payingOrder: [],
 			}
 		},
 		created() {
@@ -56,11 +72,12 @@
 				this.calcIstate(this.TabCur)
 				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
 			},
+		
 			calcIstate(id) {
 
 				switch (id) {
 					case 0:
-						this.istate = 3
+						this.istate = -3
 						this.loadList()
 						break
 					case 1:
@@ -71,11 +88,6 @@
 						this.istate = 1
 						this.loadList()
 						break
-					case 3:
-						this.istate = 2
-						this.loadList()
-						break
-
 				}
 			},
 			loadList() {
@@ -84,7 +96,19 @@
 					pageIndex: this.pageNumber //类型：Number  必有字段  备注：查询第几页,默认一页10条
 				}
 				cloudSiteApi.getSiteOrder(data2).then(res => {
-
+					if (res.code === 20000) {
+						switch (this.istate) {
+							case 0:
+								this.payingOrder = res.data
+								break
+							case 1:
+								this.finishedOrder = res.data
+								break
+							case -3:
+								this.allOrder = res.data
+								break
+						}
+					}
 				})
 			}
 		}
@@ -95,4 +119,8 @@
 	.content {
 		min-height: 100%;
 	}
+
+	.order-list .order-item:last-of-type {
+		margin-bottom: 0;
+	}
 </style>