wx_mini_app/pages/index/index.vue

<template>
<view class="pages">
    <u-swiper height="200" radius="8" :list="list1" @change="change" @click="click"></u-swiper>
    <div class="content-card">
        <u-subsection mode="subsection" :list="list" :current="current" @change="sectionChange"></u-subsection>
        <u-cell>
			<div slot="title" @click="handleToCity">
				长沙市
			</div>
            <template slot="right-icon">
                搜附近
            </template>
        </u-cell>
        <div class="content-occupation" v-if="current==1">
            <div @click="handleCalendar('single')">
                <div>入住</div>
                <div>{{timeList[0]}}</div>
            </div>
            <!-- <div>
                {{`共${timeList.length-1}晚`}}
            </div>
            <div>
                <div>离店</div>
                <div>{{timeList[timeList.length-1]}}</div>
            </div> -->
        </div>
        <div class="content-occupation" v-else>
            <div @click="handleCalendar('range')">
                <div>入住</div>
                <div>{{timeList[0]}}</div>
            </div>
            <div>
                {{`共${timeList.length-1}晚`}}
            </div>
            <div>
                <div>离店</div>
                <div>{{timeList[timeList.length-1]}}</div>
            </div>
        </div>
        <u--input placeholder="位置/酒店/关键词" border="surround" shape="circle" clearable></u--input>
		<div style="margin-top:20px;">
			<u-button type="primary" @click="handleToSearch">搜索</u-button>
		</div>
		<u-calendar :show="calendarShow" :mode="mode" @confirm="confirm" @close="closeCalendar"></u-calendar>
    </div>
</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            list1: [
                'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                'https://cdn.uviewui.com/uview/swiper/swiper3.png',
            ],
            list: ['全日房', '钟点房'],
            current: 0,
			calendarShow:false,
			mode: 'range',
			// timeList:[],//选择的时间
            timeCopy:[]
        }
    },
    computed:{
        ...mapState({
            timeList:state=>state.timeList
        })
    },
    onLoad() {

    },
	mounted(){
		this.initDate()
	},
    methods: {
        change(e) {
            // console.log('change', e)
        },
        click(e) {
            console.log('click', e)
        },
        sectionChange(e) {
            console.log('sectionChange', e)
            if (e == 1) {
                // this.$state.commit('setTimeList', [this.timeList[0]])
            }else{

            }
            this.current = e
        },
		handleToCity(){
			uni.navigateTo({
				url:'/components/city/linzq-citySelect/linzq-citySelect'
			})
		},
		handleCalendar(mode){
			// this.calendarShow = true
            uni.navigateTo({
                url:`/components/calendar/Calendar?mode=${mode}`
            })
		},
		confirm(e){
			console.log(e)
			this.timeList = e
			this.calendarShow = false
		},
		closeCalendar(){
			this.calendarShow = false
		},
		//初始化时间
		initDate(){
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let tomorrow = new Date(date.getTime() + 24 * 60 * 60 * 1000);
			let tomorrowYear = tomorrow.getFullYear();
			let tomorrowMonth = tomorrow.getMonth() + 1;
			let tomorrowDay = tomorrow.getDate();
			let today = year + '-' + month + '-' + day;
			let tomorrowDate = tomorrowYear + '-' + tomorrowMonth + '-' + tomorrowDay;
            if (this.timeList.length == 0) {
                this.$store.commit('setTimeList', [today, tomorrowDate])
            }
			// this.timeList = [today, tomorrowDate]
			return [today, tomorrowDate];
		},
		handleToSearch(){
			uni.navigateTo({
				url:'/components/searchPage/searchPage'
			})
		}
    }
}
</script>

<style lang="scss" scoped>
.content-card {
    background-color: #fff;
    padding: 20px;
    height: 300px;
    width: 87vw;
    margin: auto;
    margin-top: 10px;
}

.pages {
    background-color: rgb(243, 243, 243);
    height: 100vh;
}

.content-occupation {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 10px 15px;
}
</style>