feat：订单管理接口联调

pages/my/index.vue

@@ -17,7 +17,7 @@
 				</view>
 			</view>
 			<view class="o_menus">
-				<view v-for="(item,index) in menus" :key="index">
+				<view v-for="(item,index) in menus" :key="index" @click="specifiedOrder(index)">
 					<image :src="item.img"></image>
 					<text>{{item.title}}</text>
 				</view>
@@ -73,8 +73,13 @@
 				]
 			}
 		},
-		
+
 		methods: {
+			specifiedOrder(index) {
+				uni.navigateTo({
+					url: '/pagesMy/orderList/orderList?Type='+index
+				})
+			},
 			navigatorAllOrder() {
 				uni.navigateTo({
 					url: '/pagesMy/orderList/orderList'

pagesMy/orderList/orderList.vue

@@ -1,35 +1,66 @@
 <template>
 	<view class="pages">
-		<TopTabs :list="tabList" @changeTab="changeTab" :placeholder="'输入景点名称/订单号'">
-		</TopTabs>
+		<!-- <TopTabs :list="tabList" @changeTab="changeTab">
+		</TopTabs> -->
+		<view class="tb">
+			<view class="tabs">
+				<view v-for="(item,index) in tabList" :key="index" @tap="changeTab1(index)">
+					<text :class="index==current?'active':''">{{item.name}}</text>
+				</view>
+			</view>
+		</view>
 		<view class="mainContain">
-			<view class="card" >
+			<view class="card" v-for="item,index  in dataList" :key="index">
 				<view class="header">
-					<span style="font-weight: 700;">订单号：A20231213102359619119</span>
+					<span style="font-weight: 700;">订单号：{{item.orderCode}}</span>
 
-					<text :class="statusClass[0]">{{status[0]}}</text>
+					<text v-if='item.orderStatus==-1&&item.status==1' class="orange">待确认</text>
+					<text v-else-if='item.status==0&&item.orderStatus==-1' class="red">待支付</text>
+					<text v-else-if='item.orderStatus==1&&item.status==1' class="green">已预订</text>
+					<text v-else :class="statusClass[item.orderStatus]">{{status[item.orderStatus]}}</text>
 				</view>
 				<view class="mainContent">
-					<view class="image">
-
-					</view>
+					<image class="image" :src="item.cover" mode="aspectFill"></image>
 					<view class="middle">
-						<span class="title">海景房-306</span>
+						<span class="title">{{item.houseBaseName}}-{{item.roomNumber}}</span>
 						<span class='info'>
-							<span>郑一璇</span>
-							<span>15753988251</span>
-							<span>03/11 - 03/12 (共两晚)</span>
+							<span>{{item.guestName}}</span>
+							<span>{{item.guestPhone}}</span>
+							<span>{{item.arriveDate}}到{{item.leaveDate}} </span>
 						</span>
 					</view>
 					<view class="price">
-						￥1288.0
+						￥{{item.orderAmount}}
 					</view>
 				</view>
-				<view class="bottom" @click="handleDetail()">
+				<view class="bottom"  v-if="item.orderStatus==-1">
+					<view class="refuse">
+						拒绝
+					</view>
+					<view class="btn">
+						确认订单
+					</view>
+				</view>
+				<view class="bottom"  v-else-if="item.orderStatus==1">
 					<view class="btn">
 						办理入住
 					</view>
 				</view>
+				<view class="bottom" v-else-if="item.orderStatus==2">
+					<view class="btn">
+						办理退房
+					</view>
+				</view>
+				<view class="bottom" @click="handleDetail(item)" v-else-if="item.orderStatus==3">
+					<view class="detail">
+						详情
+					</view>
+				</view>
+				<view class="bottom" @click="handleDetail(item)" v-else-if="item.orderStatus==4">
+					<view class="detail">
+						详情
+					</view>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -44,17 +75,24 @@
 		},
 		data() {
 			return {
+				current: 0,
+				mysearch: '',
+				dataList: [],
+				limit: 10,
+				page: 1,
 				statusClass: [
+					'',
 					'green',
 					'blue',
 					'grey',
-					'orange'
+					'grey',
 				],
 				status: [
+					'',
 					'已预订',
 					'已入住',
+					'已退房',
 					'已取消',
-					'待确认'
 				],
 				// mt: uni.getSystemInfoSync().statusBarHeight + 44,
 				tabList: [{
@@ -75,27 +113,94 @@
 				],
 			}
 		},
+		onLoad(option) {
+			if (option.Type) {
+				const type = parseInt(option.Type) + 1
+				console.log(type, 'option');
+				console.log(option.Type, 'option11111');
+				this.changeTab1(type)
+			} else {
+				this.getOrderList()
+			}
+		},
 		methods: {
-			handleDetail() {
+			changeTab1(index) {
+				this.current = index;
+				this.changeTab(index)
+			},
+			getOrderList(orderStatus) {
+				this.$api.get('/merchant/hotel/order/getMerchantOrderPageList', {
+					homestayId: '1711268640588517378',
+					limit: this.limit,
+					page: this.page,
+					orderStatus: orderStatus ? orderStatus : ''
+				}).then((res => {
+					if (res.data.code == 0) {
+						this.dataList = res.data.data.list
+						this.dataList.forEach((i, index) => {
+							this.dataList[index].arriveDate = i.arriveDate.slice(0, 10)
+							this.dataList[index].leaveDate = i.leaveDate.slice(0, 10)
+						})
+						console.log(this.dataList, 'this.dataList');
+					} else {
+						uni.showToast({
+							title: res.data.msg,
+							icon: 'none'
+						})
+					}
+
+
+				}))
+			},
+			getOrderByStatusList() {
+				this.$api.get('/merchant/hotel/order/getMerchantOrderPageList', {
+					homestayId: '1711268640588517378',
+					limit: this.limit,
+					page: this.page,
+					status: 0
+				}).then((res => {
+					if (res.data.code == 0) {
+						this.dataList = res.data.data.list
+						this.dataList.forEach((i, index) => {
+							this.dataList[index].arriveDate = i.arriveDate.slice(0, 10)
+							this.dataList[index].leaveDate = i.leaveDate.slice(0, 10)
+						})
+						console.log(this.dataList, 'this.dataList');
+					} else {
+						uni.showToast({
+							title: res.data.msg,
+							icon: 'none'
+						})
+					}
+
+
+				}))
+			},
+			handleDetail(item) {
 				uni.navigateTo({
-					url: '/pagesMy/orderList/alreadyBook'
+					url: '/pages/house/orderInfo?orderId='+item.orderCode
 				})
 			},
 			changeTab(index) {
+				console.log(index, 'index------');
 				this.tabIdx = index;
-				// switch (index) {
-				// 	case 0:
-				// 		this.gtiList()
-				// 		break
-				// 	case 1:
-				// 		this.getiList(0)
-				// 		break
-				// 	case 2:
-				// 		this.getiList(1)
-				// 		break
-				// 	case 3:
-				// 		this.getiList(-3)
-				// }
+				switch (index) {
+					case 0:
+						this.getOrderList()
+						break
+					case 1:
+						this.getOrderList(-1)
+						break
+					case 2:
+						this.getOrderByStatusList()
+						break
+					case 3:
+						this.getOrderList(1)
+						break
+					case 4:
+						this.getOrderList(4)
+						break
+				}
 			},
 		}
 	}
@@ -104,7 +209,64 @@
 <style lang="scss" scoped>
 	.pages {
 		background: #F9FAFC;
-		height: 100vh;
+
+		.tb {
+			width: 100%;
+
+			top: 0;
+			left: 0;
+			z-index: 999;
+
+			.searchBoxParent {
+				width: 100%;
+				background: #fff;
+				padding: 20rpx 24rpx 6rpx;
+				box-sizing: border-box;
+
+				.searchBox {
+					width: 100%;
+					background-color: #fff;
+				}
+			}
+
+			.tabs {
+				background: #fff;
+				padding: 26rpx 0;
+				display: flex;
+				align-items: center;
+				width: 100%;
+
+				&>view {
+					width: 25%;
+					font-size: 28rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: black;
+					line-height: 40rpx;
+					position: relative;
+					text-align: center;
+				}
+
+				.active {
+					font-size: 32rpx;
+					font-family: PingFang-SC-Bold, PingFang-SC;
+					font-weight: bold;
+					color: black;
+					line-height: 45rpx;
+				}
+
+				.active::after {
+					position: absolute;
+					content: '';
+					width: 50rpx;
+					height: 8rpx;
+					background: #1372FF;
+					bottom: -26rpx;
+					left: 60%;
+					margin-left: -42rpx;
+				}
+			}
+		}
 
 		.green {}
 
@@ -125,6 +287,10 @@
 					border-bottom: 1px #f3f3f3 solid;
 					padding: 20rpx;
 
+					.red {
+						color: indianred;
+					}
+
 					.green {
 						color: #39CE77;
 					}
@@ -151,10 +317,9 @@
 					justify-content: space-evenly;
 
 					.image {
-						background: url('https://i.ringzle.com/file/20231024/a68c2b2909d84930bbec1e5c7adbb0b4.jpg');
 						background-repeat: no-repeat;
 						background-size: cover;
-						width: 180rpx;
+						width: 198rpx;
 						height: 180rpx;
 						border-radius: 16rpx;
 					}
@@ -164,6 +329,7 @@
 						display: flex;
 						flex-direction: column;
 						justify-content: space-between;
+						margin-left: 25rpx;
 
 
 						.title {
@@ -201,12 +367,29 @@
 					display: flex;
 					justify-content: flex-end;
 
+					.refuse {
+						margin-right: 30rpxs;
+						border: 1rpx solid orangered;
+						border-radius: 35rpx;
+						color: orangered;
+						padding: 13rpx 34rpx;
+					}
+
 					.btn {
 						background: #1372FF;
 						border-radius: 35rpx;
 						color: white;
 						padding: 13rpx 34rpx;
+						margin-left: 30rpx;
+
+					}
 
+					.detail {
+
+						border: 1rpx solid darkgrey;
+						border-radius: 35rpx;
+						color: darkgrey;
+						padding: 13rpx 34rpx;
 					}
 				}