boss_app/pages/predetermine/predetermine.vue

<template>
<view>
	<Header @change="headerChange">
		<template #search>
            <u--input v-model="keyWord" placeholder="姓名/手机号" border="surround" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" fontSize="12px" :customStyle="{border:'1px solid #e2e2e2',padding:'0 10px',margin:'0 10px',borderRadius:'20px'}">
            </u--input>
        </template>
        <template #section>
            <u-subsection :list="list" mode="subsection" :current="current" @change="sectionChange"></u-subsection>
        </template>
	</Header>
	<Allpredetermine :keyWord="keyWord" v-if="current==0" ref="allpredetermine" />
	<ArrivalsDay :keyWord="keyWord" v-if="current==1" @changeList="selectArrivalsChange" />
	<u-subsection v-if="arrivalsCur" style="margin-top:10px" :list="checkRoom" mode="subsection" :current="currentRoom" @change="roomChange"></u-subsection>
	<div class="btn-add" v-else>
		<div class="btn-add-left">返回</div>
		<div class="btn-add-right">添加预定</div>
	</div>
</view>
</template>

<script>
import Allpredetermine from '@/components/predetermineList/allPredetermine.vue'
import Header from '@/components/header.vue'
import ArrivalsDay from '../../components/predetermineList/arrivalsDay.vue'
export default {
	components: {
		Header,
		Allpredetermine,
		ArrivalsDay
	},
    data() {
        return {		
			list: ['全部预定', '今日预抵', '预定未到', '远期房态', '今日已入住'],
			checkRoom:['查看详情', '拨打电话','开单入住', '预排房间'],
            current: 0,
			currentRoom: 0,
			arrivalsCur: false,
			keyWord: ''
        };
    },
	onLoad(options){
		if (options.current) {
			this.current = options.current
		}
	},
	methods:{
		sectionChange(i){
			console.log(i)
			this.current = i
		},
		roomChange(i){
			console.log(i)
			this.currentRoom = i
		},
		selectArrivalsChange(e){
			console.log(e);
			this.arrivalsCur = e
		},
		headerChange(e){
			console.log(e)
		}
	}
}
</script>

<style lang="scss" scoped>
page{
	background-color: #f5f5f5;
}
.btn-add{
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	border: 1px solid rgb(60, 156, 255);
	border-radius: 5px;
	overflow: hidden;
	margin-top: 15px;
}
.btn-add-left{
	width: 50%;
	height: 100%;
	background-color: #fff;
	color: rgb(60, 156, 255);
	text-align: center;
	line-height: 40px;
}
.btn-add-right{
	width: 50%;
	height: 100%;
	background-color: rgb(60, 156, 255);
	color: #fff;
	text-align: center;
	line-height: 40px;
}
</style>