我的订单修改结构，接口对接

pages/center/monthly/monthly.scss

@@ -1,10 +1,13 @@
+page{
+	background-color: #F6F6FF
+}
 .monthly {
-	background-color: #F6F6FF;
 	padding: 37rpx 40rpx;
 	height: calc(100vh - 88rpx);
 	overflow-y: scroll;
 	.monthly-list {
 		.monthly-list-item {
+			overflow: hidden;
 			width: 100%;
 			background-color: #fff;
 			border-radius: 15rpx;
@@ -13,7 +16,7 @@
 				display: flex;
 				justify-content: space-between;
 				padding: 26rpx 39rpx;
-				border-bottom: solid 1px #979797;
+				border-bottom: solid 1px #DFDFDF;
 				.mlit-left {
 					view {
 						&:first-child {
@@ -33,22 +36,17 @@
 					}
 				}
 				.mlit-right {
-					width: 104rpx;
-					height: 120rpx;
 					line-height: 50rpx;
 					text-align: center;
 					border-radius: 5rpx;
 					color: #858585;
 					font-size: 24rpx;
-					.mlit-right-items{
-						border: solid 1px red;
-						color:red;
-						margin-bottom: 10rpx;
-						
-					}
 					.mlit-right-item{
-						border: solid 1px #BDBDBD
+						padding: 0 15rpx;
+						border: solid 1px #BDBDBD;
 					}
+					.mlit-right-item.fee-status{color: #FA6400;border-color: #FA6400;}
+					.mlit-right-item + .mlit-right-item{margin-left: 10rpx;}
 				}
 			}
 			.monthly-list-item-bottom {
@@ -80,9 +78,18 @@
 					}
 				}
 			}
-		}
-		.rem{
-			float: right;
+			.button-wrap{
+				border-top: 1px solid #DFDFDF;
+				// padding: 26rpx 39rpx;
+				.tool-btn{
+					padding: 26rpx 39rpx;
+					flex: 1;
+					text-align: center;
+					&-cancel{
+						// background-color: red;
+					}
+				}
+			}
 		}
 	}
 }

pages/center/monthly/monthly.vue

@@ -8,17 +8,17 @@
 		 back-icon-color="#CCE8FF" 
 		 :background="{background: '#008CFF' }" title="我的包月"></u-navbar>
 		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
-			<scroll-view scroll-y style="height: 100%; width: 100%;" v-for="(monthlyItem, index) in  monthlyList" :key="monthlyItem.id">
+			<!-- <scroll-view scroll-y style="height: 100%; width: 100%;" v-for="(monthlyItem, index) in  monthlyList" :key="monthlyItem.id"> -->
 				<view class="monthly-list">
-					<view class="monthly-list-item" >
+					<view class="monthly-list-item"  v-for="(monthlyItem, index) in  monthlyList" :key="monthlyItem.id">
 						<view class="monthly-list-item-top">
 							<view class="mlit-left">
 								<view>{{monthlyItem.vehicleNo}}</view>
 								<view>{{monthlyItem.roadName}}</view>
 							</view>
-							<view class="mlit-right">
-							<view class="mlit-right-items" v-if="monthlyItem.feeStatus === 0">未缴费</view>
-							<view class="mlit-right-items" v-if="monthlyItem.feeStatus === 1">已缴费</view>
+							<view class="mlit-right u-flex">
+							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 0">未缴费</view>
+							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 1">已缴费</view>
 							<view class="mlit-right-item" v-if="monthlyItem.energyType === 1">汽油车</view>
 							<view class="mlit-right-item" v-if="monthlyItem.energyType === 2">新能源</view>
 							</view>
@@ -26,19 +26,26 @@
 						<view class="monthly-list-item-bottom" >
 							<view class="mlib-item">
 								<view>包期</view>:
-								<view>{{beginTime}}-{{endTime}}</view>
+								<view>{{monthlyItem.beginTime}}-{{monthlyItem.endTime}}</view>
 							</view>
 							<view class="mlib-item">
 								<view>剩余天数</view>:
 								<view>{{monthlyItem.surplusDays}}天</view>
 							</view>
 						</view>
+						<view v-if="monthlyItem.feeStatus=='0'" class="button-wrap u-flex u-row-right">
+							<view class="tool-btn" 
+							:class="{'tool-btn-cancel':monthlyItem.feeStatus=='0'}" 
+							v-if="monthlyItem.feeStatus=='0'" 
+							@click="cancelMonth(monthlyItem.monthId)">取消订单</view>
+							<!-- <u-button class="btn" v-if="monthlyItem.feeStatus=='0'" type="error" size="mini" @click="cancelMonth(monthlyItem.monthId)">取消缴费</u-button> -->
+						</view>
 					</view>
-					<u-button class="rem" v-if="monthlyItem.feeStatus=='0'" type="error" size="mini" @click="cancelMonth(monthlyItem.monthId)">取消缴费</u-button>
+					
 				</view>
-			</scroll-view>
+			<!-- </scroll-view> -->
 		</mescroll-body>
-		<u-modal v-model="canclShow" content="确认取消" @confirm="confirm"></u-modal>
+		<u-modal v-model="canclShow" content="确认取消该订单？" @confirm="confirm" :show-cancel-button="true"></u-modal>
 		<u-toast ref="uToast" />
 	</view>
 </template>