hotelHomestayWx/pagesHouse/Mine/ordersList/index.vue

<template>
	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+54+52)+'px'}">
		<!-- 头部 -->
		<!-- 	<u-navbar title="酒店民宿订单" :leftIconSize="36" bgColor="#ffffff" leftIconColor="#333333" :titleStyle="titleStyle"
			@leftClick="returnBack"></u-navbar> -->
		<c-nav-bar title="我的订单"></c-nav-bar>

		<TopTabs :list="list" @changeTab="changeTab" :top="mt" :placeholder="'输入关键字'" @sousuo="sousuo"></TopTabs>

		<view class="list">
			<view v-for="(item,index) in orderList" :key="index" cc v-if="FormData.orderStatus==item.orderStatus"
				@click.stop="orderDeatils(item)">
				<view class="item">
					<text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
					<text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
					<text class="status s2" v-if="item.orderStatus=='-2'">待付款</text>
					<text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
					<text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
					<text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>

					<view class="head">
						<!-- <image src="../../../static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
						<!-- <image src="../../../static/scenicSpots/ticketIcon.png" v-else></image> -->
						<image src="../../../static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
						<image src="../../../static/my/jd_ms.png" mode="" v-else></image>
						<text>酒店民宿</text>
					</view>

					<view class="mid">
						<view class="name" :class="item.orderStatus=='-3'?'disabled':''">{{item.homestayName}}</view>
						<view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
						<view class="des">{{item.houseBaseName}}</view>
					</view>
					<view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>

					<view class="btns">

						<template v-if="item.orderStatus==1">
							<view @click.stop="toStatus0(item)">
								取消
							</view>
							<!-- 	<view @click.stop="GoRefund(item)">
								申请退订
							</view> -->
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>

						<template v-if="item.orderStatus==-2">
							<view @click.stop="toStatus0(item)">
								取消
							</view>
							<view @click.stop="GoToPay(item)" style="color: #0DBFFD;">
								去支付
							</view>
						</template>


						<template v-if="item.orderStatus==3||item.orderStatus==2">
							<!-- 	<view @click.stop="applyAfterSales(item)">
								删除
							</view> -->
							<view @click.stop="toEvaluate(item)">
								评价
							</view>
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>
						<template v-if="item.orderStatus==5||item.orderStatus==4">
							<!-- 	<view @click.stop="applyAfterSales(item)">
								删除
							</view> -->
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>
						<template v-if="item.orderStatus==-1">
							<view @click.stop="GoRefund(item)">
								取消
							</view>
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>

					</view>
				</view>

			</view>
			<view v-else @click.stop="orderDeatils(item)">
				<view class="item">
					<text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
					<text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
					<text class="status s2" v-if="item.orderStatus=='-2'">待付款</text>
					<text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
					<text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
					<text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>

					<view class="head">
						<!-- <image src="../../../static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
						<!-- <image src="../../../static/scenicSpots/ticketIcon.png" v-else></image> -->
						<image src="../../../static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
						<image src="../../../static/my/jd_ms.png" mode="" v-else></image>
						<text>酒店民宿</text>
					</view>

					<view class="mid">
						<view class="name" :class="item.orderStatus=='0'?'disabled':''">{{item.homestayName}}</view>
						<view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
						<view class="des">{{item.houseBaseName}}</view>
					</view>
					<view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>

					<view class="btns">

						<template v-if="item.orderStatus==1">
							<view @click.stop="toStatus0(item)">
								取消
							</view>
							<!-- 	<view @click.stop="GoRefund(item)">
								申请退订
							</view> -->
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>

						<template v-if="item.orderStatus==-2">
							<view @click.stop="toStatus0(item)">
								取消
							</view>
							<view @click.stop="GoToPay(item)" style="color: #0DBFFD;">
								去支付
							</view>
						</template>
						<template v-if="item.orderStatus==3||item.orderStatus==2">
							<!-- 	<view @click.stop="applyAfterSales(item)">
								删除
							</view> -->
							<view @click.stop="toEvaluate(item)">
								评价
							</view>
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>
						<template v-if="item.orderStatus==5||item.orderStatus==4">
							<!-- 	<view @click.stop="applyAfterSales(item)">
								删除
							</view> -->
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>
						<template v-if="item.orderStatus==-1">
							<view @click.stop="GoRefund(item)">
								取消
							</view>
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>

					</view>
				</view>
				<!-- <view class="tip">{{orderList.length>0?'已显示全部订单':'暂无订单'}}</view> -->
			</view>
		</view>
		<!-- <view class="tip"> -->
		<!-- {{orderList.length>0?'已显示全部订单':'暂无订单'}} -->
		<!-- <nodata v-if="orderList.length === 0"></nodata> -->
		<!-- </view> -->
		<!-- 取消弹框 -->
		<!-- <u-modal :show="showAgree" :title="title" :content='content' showCancelButton="true" confirmText='确定'
			confirmColor='#0cbffd' @confirm="confirm" @cancel='cancel'></u-modal> -->


		<!-- <u-toast ref="uToast"></u-toast> -->

	</view>
</template>

<script>
	// import nodata from '@/compoments/NoData/index.vue'
	// import TopTabs from '@/compoments/TopTabs/topTabs.vue';
	export default {
		components: {
			// TopTabs,
			// nodata
		},
		data() {
			return {
				// mt: uni.getSystemInfoSync().statusBarHeight + 44,
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待使用'
				}, {
					name: '退款'
				}],

			}
		},

		onLoad() {

		},
		onReachBottom() {

		},

		methods: {


		}
	}
</script>

<style lang="less">
	.orderList {
		box-sizing: border-box;
		background-color: #fff;

		.u-tabs__wrapper__nav__line {
			// left: 20rpx !important
		}
	}

	.u-button {
		height: 60rpx !important;
	}

	.tip {
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 33rpx;
		margin: 56rpx 0;
	}
</style>
<style lang="scss">
	page {
		background-color: #F5F8FA;
	}

	.disabled {
		color: #AAA !important
	}

	.list {
		padding: 0 24rpx;

		.item {
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 16rpx;
			padding: 36rpx 24rpx 0;
			position: relative;

			.status {
				right: 24rpx;
				top: 40rpx;
				font-size: 26rpx;
				color: #AAA;
				position: absolute;

				&.s2 {
					color: #FF7D01;
				}

				&.s3 {
					color: #01B9F9
				}
			}

			.head {
				color: #111;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
					vertical-align: middle;
				}

				text {
					vertical-align: middle;
				}
			}

			.mid {
				padding: 24rpx 50rpx 40rpx 56rpx;
				border-bottom: 1rpx solid #EFEFEF;

				.name {
					font-size: 32rpx;
				}

				.date {
					margin: 30rpx 0;
					color: #AAAAAA;
				}

				.des {
					color: #AAAAAA;
				}
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&>view {
					// margin: 24rpx 0 0 24rpx;
					margin: 24rpx;
					width: 148rpx;
					height: 56rpx;
					border: 1rpx solid #EFEFEF;
					border-radius: 28rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.price {
				position: absolute;
				right: 24rpx;
				bottom: 144rpx;
				font-size: 32rpx;
				color: #111;
				font-weight: 600;
			}
		}
	}

	.ml12 {
		height: 56rpx;
		width: 148rpx;
		line-height: 56rpx;
		display: inline-block;
		margin-left: 24rpx;
	}
</style>