1

pages.json

@@ -4,7 +4,7 @@
             "path" : "pages/home/home",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "懒人企业福利社",
                 "enablePullDownRefresh": false
             }
             
@@ -13,7 +13,7 @@
             "path" : "pages/order/order",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "订单",
                 "enablePullDownRefresh": false
             }
             

pages/order/order.vue

 <template>
-	<view>
+	<view class="container">
+		<view class="empty" v-if="orderLists.length<=0 && loadingType != 'loading'">
+			<image class="empty-img" src="../../static/order/empty-order.png" mode=""></image>
+			<view class="empty-text">暂无订单</view>
+		</view>
+		<view class="order-list">
+			<view class="item" v-for="(item, index) in orderLists" :key="index" @click="goDetails(item)">
+				<view class="order-top">
+					<view class="num">
+						订单编号：{{item.orderSn}}
+					</view>
+					<view class="status" :style="{'color':statusTextColor[item.state]}">
+						{{item.stateDes}}
+					</view>
+				</view>
+				<view class="goods-info">
+					<image class="img" :src="item.img" mode="aspectFill"></image>
+					<view class="info">
+						<view class="title">{{item.title}}</view>
+						<view class="spec">
+							<view>{{item.specsTitle}}</view>
+							<view>x{{item.payNumber}}</view>
+						</view>
+						<view class="price">
+							{{isPayCompleteOrder(item)}}：{{$numUtils.getGoodsPrice(item,'order')}}
+						</view>
+					</view>
+				</view>
+				<view class="btn">
+					<view class="btn-item pay-btn" v-if="isShowPay(item)" @click.stop="goCoupon(item)">
+						查看卡券
+					</view>
+				</view>
+			</view>
+		</view>
+		<uni-load-more :status="loadingType" v-if="orderLists.length>0"></uni-load-more>
 		
 	</view>
 </template>
@@ -8,12 +43,156 @@
 	export default {
 		data() {
 			return {
-				
+				orderLists: [],
+				loadingType: more,
+				page: 1,
+				statusTextColor:{
+					'100':'#FF0520','200':'#FF6205','300':'#686868'
+				},
+				statusText:{
+					'100':'待兑换','200':'兑换成功','300':'兑换失败'
+				},
 			};
+		},
+		onLoad() {
+			this.getList()
+		},
+		methods: {
+			getList() {
+				if (this.loadingType == 'noMore') {
+					return
+				}
+				this.loadingType = 'loading';
+				let params = {'page': this.page, 'pageSize':'10'}
+				this.$net.post('/order/list',params).then((res)=>{
+					if (res && res.code==200) {
+						this.orderLists = this.orderLists.concat(res.data.list)
+						let paginate = res.data.paginate
+						if (this.page == paginate.lastPage || this.orderLists.length==0) {
+							this.loadingType = 'noMore'
+						} else {
+							this.loadingType = 'more'
+							this.page++
+						}
+					} else {
+						this.toast(res.message)
+					}
+				})
+			}
 		}
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.container {
+	background-color: #F5F5F5;
+	width: 100%;
+	height: 100%;
+	.order-list {
+		padding: 210rpx 24rpx 0;
+		.item {
+			border-radius: 16rpx;
+			background-color: #FFFFFF;
+			margin-bottom: 24rpx;
+			padding: 32rpx 24rpx;
+			.order-top {
+				display: flex;
+				justify-content: space-between;
+				.num {
+					margin-top: 2rpx;
+					font-size: 22rpx;
+					color: #686868;
+				}
+				.status {
+					font-size: 24rpx;
+				}
+			}
+			.goods-info {
+				display: flex;
+				margin-top: 32rpx;
+				.img {
+					height: 160rpx;
+					width: 160rpx;
+					border-radius: 8rpx;
+					background-color: #D8D8D8;
+				}
+				.info {
+					margin: 8rpx 0 0 16rpx;
+					position: relative;
+					.title {
+						font-size: 22rpx;
+						color: #252525;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-line-clamp: 2;
+						line-clamp: 2;
+						-webkit-box-orient: vertical;
+						// height: 64rpx;
+						line-height: 32rpx;
+						width: 478rpx;
+					}
+					.spec {
+						width: 478rpx;
+						display: flex;
+						justify-content: space-between;
+						margin-top: 10rpx;
+						view {
+							font-size: 20rpx;
+							color: #686868;
+						}
+					}
+					.price {
+						position: absolute;
+						top: 118rpx;
+						left: 0;
+						width: 478rpx;
+						text-align: right;
+						font-size: 24rpx;
+						font-weight: bolder;
+						color: #252525;
+					}
+				}
+			}
+			.btn {
+				width: 654rpx;
+				display: flex;
+				justify-content: flex-end;
+				.btn-item {
+					margin-top: 40rpx;
+					height: 62rpx;
+					width: 176rpx;
+					border-radius: 32rpx;
+					text-align: center;
+					font-size: 24rpx;
+					line-height: 64rpx;
+				}
+				.pay-btn {
+					border: 2rpx solid #FF0520;
+					color: #FF0520;
+					margin-left: 24rpx;
+				}
+				.other-btn {
+					border: 2rpx solid #C9C9C9;
+					color: #686868;
+				}
+			}
+		}
+	}
+	.empty {
+		padding: 432rpx 136rpx 0;
+		.empty-img {
+			height: 280rpx;
+			width: 480rpx;
+		}
+		.empty-text {
+			font-size: 28rpx;
+			color: #BFBFBF;
+			margin-top: 48rpx;
+			width: 480rpx;
+			text-align: center;
+		}
+	}
+}
 
 </style>