停车场包月车

common/apiurl.js

@@ -55,6 +55,8 @@ const apiurl = {
   getMonthPayUrl: '/client/monthpay/query/',
   //包月列表
   getMonthListUrl: '/client/memberinfo/monthList',
+	// 停车场包月列表
+	getParkMonthListUrl: '/client/memberinfo/monthList',
   //取消包月订单
   cancelMonthUrl: '/client/memberinfo/cancelMonth/',
 

common/http.api.js

@@ -63,6 +63,8 @@ const install = (Vue, vm) => {
   let monthPay = (params = {}) => vm.$u.post(apiurl.monthPayUrl, params);
   let getMonthPay = (params = {}) => vm.$u.get(apiurl.getMonthPayUrl + params.id);
   let getMonthList = (params = {}) => vm.$u.get(apiurl.getMonthListUrl, params);
+	// 停车场包月列表
+	let getParkMonthList = (params = {}) => vm.$u.get(apiurl.getParkMonthListUrl, params);
   let cancelMonth = (params = {}) => vm.$u.put(apiurl.cancelMonthUrl + params.monthId);
 
   let feePay = (params = {}) => vm.$u.put(apiurl.feePayUrl + params.vehicleId);
@@ -140,6 +142,7 @@ const install = (Vue, vm) => {
     monthPay,
     getMonthPay,
     getMonthList,
+		getParkMonthList,
     cancelMonth,
     messageRead,
     feePay,

pages/center/monthly/monthly.scss

@@ -2,13 +2,14 @@ page {
 	background-color: #F6F6FF
 }
 .monthly {
-	padding: 37rpx 40rpx;
 	height: calc(100vh - 88rpx);
 	overflow-y: scroll;
-	.paging {
-		padding: 37rpx 40rpx;
+	&-tab {
+		width: 100%;
+		background-color: #fff;
 	}
 	.monthly-list {
+		padding: 37rpx 40rpx;
 		.monthly-list-item {
 			overflow: hidden;
 			width: 100%;

pages/center/monthly/monthly.vue

@@ -2,6 +2,12 @@
 	<!-- 包月 -->
 	<view class="monthly">
 		<z-paging class="paging" ref="paging" v-model="dataList" @query="queryList">
+			<!-- 选项卡 -->
+			<view class="monthly-tab" slot="top">
+				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabChange" bg-color="#fff"
+					inactive-color="#000000" active-color="#008CFF" :bold="false"
+					:active-item-style="{color: '#008CFF'}"></u-tabs>
+			</view>
 			<view class="monthly-list">
 				<view class="monthly-list-item" v-for="(monthlyItem, index) in  dataList" :key="monthlyItem.id">
 					<view class="monthly-list-item-top">
@@ -52,6 +58,15 @@
 	export default {
 		data() {
 			return {
+				tabList: [{
+					name: '路段',
+					value: 'road'
+				}, {
+					name: '停车场',
+					value: 'park'
+				}],
+				current: 0,
+				currentValue: 'road',
 				id: '', // 当前选中的条目id
 				cancelShow: false,
 				dataList: [],
@@ -60,6 +75,12 @@
 			}
 		},
 		methods: {
+			//tabs通知swiper切换
+			tabChange(index) {
+				this.current = index;
+				this.currentValue = this.tabList[index].value
+				this.$refs.paging.reload()
+			},
 			customBack() {
 				this.$u.route({
 					type: 'switchTab',
@@ -68,7 +89,11 @@
 			},
 			// 下拉刷新操作
 			queryList(pageNo, pageSize) {
-				this.$u.api.getMonthList({
+				const tabObj = {
+					road: 'getMonthList',
+					park: 'getParkMonthList'
+				}
+				this.$u.api[tabObj[this.currentValue]]({
 						pageSize: pageSize,
 						pageNum: pageNo,
 					})
@@ -84,6 +109,7 @@
 							});
 						}
 					})
+
 			},
 			// 取消订单
 			cancelMonth(monthId) {

pages/payLists/payLists.vue

@@ -1,7 +1,7 @@
 <template>
   <view>
     <view class="swiper-wrap">
-      <!-- <view class="u-tabs-box">
+      <view class="u-tabs-box">
         <u-tabs-swiper
           activeColor="#008CFF"
           ref="tabs"
@@ -11,7 +11,7 @@
           :is-scroll="false"
           swiperWidth="100%"
         ></u-tabs-swiper>
-      </view> -->
+      </view>
       <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" disable-touch>
         <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
           <scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="reachBottom">