wx_mini_app/components/searchPage/searchPage.vue

<template>
<view class="pages">
    <div class="title-top">
        <u-input placeholder="位置/酒店/关键词" :customStyle="{background:'rgb(243, 243, 243)'}">
            <u--text @click="handleToCity" text="长沙" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
            <div slot="suffix" class="search-right">
                <div>住{{timeList[0]}}</div>
                <div v-if="timeList.length==1">离{{timeList[timeList.length-1]}}</div>
            </div>
        </u-input>
    </div>
    <div class="tabs">
        <div @click="sort">推荐排序</div>
        <div @click="starPriceShow=true">星级价格</div>
        <div @click="locationAreaShow=true">位置区域</div>
        <div @click="screenShow=true">筛选</div>
    </div>
    <!-- 推荐排序弹窗 -->
    <u-action-sheet :actions="sortList" :show="sortShow" safeAreaInsetBottom @close="sortClose" @select="sortSelect" round="8"></u-action-sheet>
    <!-- 星级价格弹窗 -->
    <u-action-sheet :show="starPriceShow" safeAreaInsetBottom @close="starPriceShow=false" @select="starPriceSelect" round="8">
        <div style="height:36vh;padding:10px">
            <div class="star-top">
                <div>星级</div>
                <div style="display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;margin-top:10px">
                    <div class="star-top-box" v-for="item in starPriceList" :key="item.id">{{item}}</div>
                </div>
            </div>
            <div class="star-top">
                <div>价格：{{starValue}}-不限</div>
                <div>
                    <u-slider v-model="starValue" max="1000"></u-slider>
                </div>
            </div>
            <div class="star-btn">
                <div style="width:80px">
                    清空
                </div>
                <u-button type="primary">确定</u-button>
            </div>
        </div>
    </u-action-sheet>

    <!-- 位置区域弹窗 -->
    <u-action-sheet :show="locationAreaShow" safeAreaInsetBottom @close="locationAreaShow=false" round="8">
        <Sidebar :dataList="locationAreaList" />
    </u-action-sheet>

    <!-- 筛选弹窗 -->
    <u-action-sheet :show="screenShow" safeAreaInsetBottom @close="screenShow=false" round="8">
        <Sidebar :dataList="screenList" />
    </u-action-sheet>

    <!-- 酒店列表 -->
    <div class="card-list" v-for="item in 15" :key="item.id" @click="handleToHotelDetail(item)">
        <div class="card-list-image">
            <u-image :showLoading="true" mode="scaleToFill" src="@/static/niu.jpg" width="120px" height="190px" @click="click"></u-image>
        </div>
        <div class="card-list-right">
            <div style="font-size: 18px;color:#000;">练习时长两年半的酒店</div>
            <div>0分 0条评论 | 经济型</div>
            <div>距离市中心66.66km · 四川省理塘县(世界最高城)</div>
            <div>
                <span style="border:1px solid #ff9900;color:#ff9900;padding:3px 4px;border-radius:5px;margin-right:5px;">交通方便</span> 
                <span style="border:1px solid #19be6b;color:#19be6b;padding:3px 4px;border-radius:5px;">服务周到</span>
            </div>
            <div style="margin-left:auto;color:#3c9cff;margin-right:10px;font-size: 18px;">70起</div>
        </div>
    </div>
</view>
</template>

<script>
import Sidebar from '../sidebar.vue'
import { mapState } from 'vuex'
export default {
    components:{
        Sidebar
    },
    computed:{
        ...mapState({
            timeList:state=>state.timeList
        })
    },
    data() {
        return {
            sortList: [{
                    name: '推荐排序',
                    // subname:"选项一描述",
                },
                {
                    name: '距离优先',
                    // disabled:false
                },
                {
                    name: '低价优先', //开启后文字不显示
                    // loading:true
                },
                {
                    name: '评分优先'
                },
                {
                    name: '评论数优先'
                }
            ],
            sortShow: false,
            starPriceList: ['经济型', '二星/实惠', '三星/舒适', '四星/高档', '五星/豪华'],
            starPriceShow: false,
            starValue: 0,
            locationAreaShow: false,
            locationAreaList: [
                {
                    name:'距离我',
                    children:[
                        {
                            name:'500m'
                        },
                        {
                            name:'1km'
                        },
                        {
                            name:'2km'
                        },
                        {
                            name:'3km'
                        },
                        {
                            name:'5km'
                        },
                        {
                            name:'10km'
                        },
                    ]
                },
                {
                    name:'热门推荐'
                },
                {
                    name:'商业区'
                },
                {
                    name:'行政区'
                },
                {
                    name:'热门景点'
                },
                {
                    name:'机场车站'
                },
                {
                    name:'地铁线路',
                    children:[
                        {
                            name:'1号线',
                            children:[
                                {
                                    name:'开福区政府'
                                }
                            ]
                        },
                        {
                            name:'2号线',
                            children:[
                                {
                                    name:'五一广场'
                                }
                            ]
                        },
                        {
                            name:'3号线',
                            children:[
                                {
                                    name:'阳光100'
                                }
                            ]
                        },
                        {
                            name:'4号线',
                            children:[
                                {
                                    name:'罐子岭'
                                }
                            ]
                        },
                        {
                            name:'5号线',
                            children:[
                                {
                                    name:'万家丽广场'
                                }
                            ]
                        },
                        {
                            name:'6号线',
                            children:[
                                {
                                    name:'芙蓉区政府'
                                }
                            ]
                        }
                    ]
                },
                {
                    name:'大学周边'
                },
                {
                    name:'医院周边'
                }
            ],
            screenShow:false,
            screenList:[
                {
                    name:'主题类型',
                    children:[
                        {
                            name:'情侣约会'
                        },
                        {
                            name:'亲子家庭'
                        },
                        {
                            name:'快捷连锁'
                        },
                        {
                            name:'主题特色'
                        },
                        {
                            name:'海滨风光'
                        }
                    ]
                },
                {
                    name:'点评推荐',
                    children:[
                        {
                            name:'评分',
                            children:[
                                {
                                    name:'3分以上'
                                }
                            ]
                        },
                        {
                            name:'数量',
                            children:[
                                {
                                    name:'100条以上'
                                }
                            ]
                        }
                    ]
                },
                {
                    name:'酒店品牌',
                    children:[
                        {
                            name:'豪华型',
                            children:[
                                {
                                    name:'希尔顿'
                                }
                            ]
                        },
                        {
                            name:'高档型',
                            children:[
                                {
                                    name:'万豪'
                                }
                            ]
                        }
                    ]
                },
                {
                    name:'设施服务',
                    children:[
                        {
                            name:'温泉',
                        },
                        {
                            name:'租车',
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        handleToCity() {
            uni.navigateTo({
                url: '/components/city/linzq-citySelect/linzq-citySelect'
            })
        },
        sort() {
            this.sortShow = true
        },
        sortClose() {
            this.sortShow = false
        },
        sortSelect(e) {
            console.log(e)
            this.sortShow = false
        },
        handleToHotelDetail(){
            uni.navigateTo({
                url:'/components/hotelDetail/hotelDetail'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.pages {
    background-color: rgb(243, 243, 243);
    height: 100vh;
}

.title-top {
    padding: 0 10px;
    background: #fff;
    height: 60px;
    display: flex;
    align-items: center;
}

.search-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #00000060;
}

.tabs {
    height: 50px;
    background: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.star-top {
    text-align: left;

    .star-top-box {
        padding: 5px 10px;
        border: 1px solid #2979ff;
        color: #2979ff;
        border-radius: 20px;
        text-align: center;
        margin-bottom: 5px;
    }
}

.star-btn {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.card-list{
    background: #fff;
    width: 100%;
    height: 200px;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
    .card-list-right{
        height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        flex: 1;
        color: #00000060;
    }
}
</style>