ihotel-h5/pages/my_orderlist/my_orderlist.vue

<template>
	<view class="content">
		<!-- 切换栏 -->
		<view class="inv-h-w">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="changeTab(0)">全部</view>
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="changeTab(1)">待支付</view>
			<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="changeTab(2)">待入住</view>
			<view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="changeTab(3)">已入住</view>
			<view :class="['inv-h',Inv==4?'inv-h-se':'']" @click="changeTab(4)">已取消</view>
			<view :class="['inv-h',Inv==5?'inv-h-se':'']" @click="changeTab(5)">待结账</view>
			<view :class="['inv-h',Inv==6?'inv-h-se':'']" @click="changeTab(6)">已完成</view>
		</view>
		<!-- 订单样式 -->
		<view class="room-kuang">
			<view class="room-xinxi" v-for="(item,index) in troom" :key="index">
				<view @click="navigateToOrderMark(item.id)">
				<image class="room-image" :src="item.srcUrl"></image>
				<view class="room-name">{{item.name}}</view>
				<view class="room-time">{{item.time}}</view>
				<view class="room-order">{{item.order_num}}</view>
				<view class="room-type">{{item.type}}</view>
				<view class="room-price">{{item.price}}</view>
				</view>
				<uni-countdown v-if="item.types === 1" class="room-count" color="#FF5733" :show-day="false" :second="timeupSecond" @timeup="timeup" />
				<text v-if="item.types === 1" class="room-count-txt">之后取消</text>
				<view class="room-button">
					<text v-if="item.type === '已取消'">删除</text>
					<text v-if="item.type === '待支付'">取消订单</text>
					<text v-if="item.type === '已完成'">删除</text>
					<text v-if="item.type === '待入住'">取消订单</text>
					<text v-if="item.type === '已入住'">删除</text>
				</view>
				<view class="room-button2" :class="{'room-button3': item.type == '待支付'}">
					<text v-if="item.type === '已取消'">再次预定</text>
					<text v-if="item.type === '待支付'">支付</text>
					<text v-if="item.type === '已完成'">再次预定</text>
					<text v-if="item.type === '待入住'">办理入住</text>
					<text v-if="item.type === '已入住'">退房</text>
				</view>
				<view class="room-line"  v-if="index<(troom.length-1)"></view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入图片
	import room1 from '../../static/index/room_image.svg'
	import room2 from '../../static/index/room_image.svg'
	export default {
		data(){
			return {
				Inv: 0,
				tabList:[
					{id:1,name:'全部'},
					{id:2,name:'待支付'},
					{id:3,name:'待入住'},
					{id:4,name:'已入住'},
					{id:5,name:'已取消'},
					{id:6,name:'待结账'},
					{id:7,name:'已完成'},
				],
				room:[],
				troom:[],
				timeupSecond: 1800
			}
		},
		onShow() {
			// 模拟从后台拿到的数据
			var room = [
				{id:1,srcUrl:room1,name:'01户型',order_num:'订单号：23021260',price:'¥0.00',time:'2022.07.21 - 2022.07.22',type:'待支付',types:1},
				{id:2,srcUrl:room2,name:'02户型',order_num:'订单号：23021261',price:'¥0.00',time:'2022.07.21 - 2022.07.22',type:'已取消',types:4},
				{id:3,srcUrl:room1,name:'01户型',order_num:'订单号：23021262',price:'¥0.00',time:'2022.07.21 - 2022.07.22',type:'已完成',types:6},
				{id:4,srcUrl:room2,name:'02户型',order_num:'订单号：23021263',price:'¥0.00',time:'2022.07.21 - 2022.07.22',type:'待入住',types:2},
			]
			// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
			room.forEach(el => el.isChecked = false);
			this.room = room;
			this.troom = room;//真实数据赋值给页面数据
		},
		onLoad(option) {
			this.Inv=option.Inv;
			// console.log(this.Inv)
		},
		mounted(){
			// location.reload()//自动刷新
			// console.log(this.Inv)
			this.changeTab(this.Inv)
		},
		methods:{
			/**
			  * @Explain：选项卡点击切换
			  */
			changeTab(Inv) {
				var that = this;
				this.Inv =Inv
				var arr = [];
				that.room.map(item => {//遍历真实数据，拿到所需要的数据放在页面数据tlist中，展示在页面上
					if(item.types == this.Inv){
						arr.push(item);
					}
				})
				that.troom = arr;
				if(this.Inv == 0){//获取全部数据
					that.troom = that.room;
				}
				//滚动到顶部
				uni.pageScrollTo({
					duration: 0, //过渡时间必须为0，否则运行到手机会报错
					scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
				})
			},
			// 倒计时
			timeup() {
				uni.showToast({
					title: '时间到'
				})
				this.timeupSecond = 1799
			},
			// 跳转到订单详情
			navigateToOrderMark(id) {
				// console.log(id)
				uni.navigateTo({
					url: "../order_mark/order_mark?ids="+id,
					complete: () => {console.log("调用完成,id:"+id)}
				})
			},
			
		},
	}
</script>

<style>
	@import url(./css/my_orderlist.css);
</style>