Client-Teapay/src/pagesB/hotel/index.vue

<template>
    <div class="hotel">
        <div class="formbox">
            <div class="tabtit">酒店预约</div>
            <div class="formbar">
                <div class="li flex_r flex_jb flex_ac">
                    <div class="flex_r flex_jb flex_ac">
                        <div class="address" @click="showAddress = !showAddress">
                            <span class="address_name">{{qda.cityName}}</span>
                            <span class="iconfont ico">&#xeb6d;</span>
                        </div>
                        <div class="addressStr">{{ addrStr }}</div>
                    </div>
                    <div @click="locationf" class="location">
                        <span class="iconfont ico2">&#xe61e;</span>
                        <div class="it">当前位置</div>
                    </div>
                </div>
                <div class="li flex_r flex_jb flex_ac" @click="showCaledar = !showCaledar">
                    <div class="day">
                        <div class="ti">入住</div>
                        <div class="daytxt">{{startStr.month}}月{{startStr.day}}日</div>
                    </div>
                    <div class="lab">共 {{dayCount}} 晚</div>
                    <div class="day">
                        <div class="ti">离店</div>
                        <div class="daytxt">{{endStr.month}}月{{endStr.day}}日</div>
                    </div>
                </div>
                <div class="li">
                    <input type="text" v-model="qda.queryText" placeholder="关键字/位置/品牌/酒店名称">
                </div>
                <div class="li" @click="popupShow = true">
                    <span v-if="priceRange.length || Leve">{{numinfo}} {{LeveStr}}</span>
                    <input type="text" placeholder="价格/星级" v-else>
                </div>
            </div>
        </div>
        <!-- 日期选择 -->
        <date-picker mode="2" ref="dayPicker" :isShow.sync="showCaledar" @callback="pickerChange" />
        <!-- 城市选择 -->
        <h-address @select="selectaddress" :visible.sync="showAddress" />

        <dev class="ni_popup" v-if="popupShow">
            <div class="starLevel">
                <div class="h_numinfo">每晚均价<span class="msg">{{numinfo}}</span></div>
                <div class="sliderBar">
                    <div class="num flex_r flex_jb"><span>￥0</span><span>￥1500+</span></div>
                    <div class="sb">
                        <nni-slider v-model="priceRange" activeColor="#00B76C" max="1500" />
                    </div>
                </div>
                <div class="nums">
                    <div :class="{num_item:true,active:activef(i)}" v-for="(i,s) in priceRs" :key="s" @click="onRange(i)">{{i.txt}}</div>
                </div>
                <div class="LevelB">
                    <div class="tit">星级</div>
                    <div class="ls flex_r flex_jb">
                        <div :class="{ls_i:true,active:Leve == i.v}" v-for="(i,s) in Levels" :key="s" @click="onLevel(i)">{{i.t}}</div>
                    </div>
                </div>
                <div class="pbtn flex_r flex_jse">
                    <div class="btn" @click="reset">重置</div>
                    <div class="btn corg" @click="confirm">确认</div>
                </div>
            </div>
        </dev>
        <div class="footimg">
            <image @click="search" class="btn" src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/7603bae2564783682b68b025003cae9012f917dcpng" mode="widthFix" />
            <image class="img" src="https://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/0c39d34eef6c35fa1ce63101a6f2ff8.jpg" mode="widthFix" />
        </div>
    </div>
</template>
<script>
import DatePicker from "@/pagesB/components/date-picker/date-picker.vue";
import hAddress from "@/components/h-address/address.vue";
import nniSlider from "@/pagesB/components/nni-slider/slider.vue";
import QQMapWX from '@/pagesB/static/js/qqmap-wx-jssdk.min.js';
const showmap = new QQMapWX({ key: 'K7LBZ-RE23Q-JEN5D-4ZNEI-MS54Q-BHF6D' });
import { post } from "@/request/api.js";
import { setCache } from "@/utils/storage.js"
export default {
    name: "hotel",
    props: {},
    components: {
        DatePicker,
        hAddress,
        nniSlider
    },
    data() {
        return {
            qda: {
                cityName: "",
                cityCode: "",
                checkInDate: "",
                checkOutDate: "",
                pageIndex: 1,
                pageSize: 20,
                range: 100
            },
            showCaledar: false,
            showAddress: false,
            startDate: '',
            endDate: '',
            startStr: {},
            endStr: {},
            dayCount: 1,
            addrStr: "",
            popupShow: false,
            priceRange: [],
            numinfo: "",
            priceRs: [
                { p: [0, 100], txt: "￥100以下" },
                { p: [100, 200], txt: "￥100-200" },
                { p: [200, 300], txt: "￥200-300" },
                { p: [300, 400], txt: "￥300-400" },
                { p: [400, 600], txt: "￥400-600" },
                { p: [600, 800], txt: "￥600-800" },
                { p: [800, 1500], txt: "￥800-1500" },
                { p: [1500, 1500], txt: "￥1500以上" },
            ],
            LeveStr: "", 
            Leve: undefined,
            Levels: [
                { v: 2, t: "二星/经济" },
                { v: 3, t: "三星/舒适" },
                { v: 4, t: "四星/高档" },
                { v: 5, t: "五星/豪华" },
            ]
        };
    },
    methods: {
        pickerChange(da) {
            this.startStr = da.startStr;
            this.endStr = da.endStr;
            this.dayCount = da.dayCount;
            this.qda.checkInDate = da.startStr.dateStr;
            this.qda.checkOutDate = da.endStr.dateStr;
            this.showCaledar = false
        },
        selectaddress(da) {
            this.qda.cityName = da.cityName;
            this.qda.cityCode = da.cityCode;
            this.qda.queryText = da.queryText || undefined;
            this.addrStr = "";
            delete this.qda.longitude;
            delete this.qda.latitude;
            this.showAddress = false;
        },
        search() {
            let qd = Object.assign({}, this.qda)
            setCache("hotelquery", qd);
            this.goto("/pagesB/hotel/hotelList");
        },
        // 获取当前位置
        async getLocation() {
            let { lat, lng } = await uni.Location();
            this.adres = { longitude: lng, latitude: lat };
            this.getToCity()
        },
        // 获取当前城市
        getToCity() {
            post("local/hotel/city", this.adres).then(res => {
                if (res.code == 0) {
                    let da = res.data
                    this.qda.cityName = da.cityName;
                    this.qda.cityCode = da.cityCode;
                }
            })
        },
        locationf() {
            delete this.qda.queryText;
            this.getLocation();
            let that = this;
            showmap.reverseGeocoder({
                success(result) {
                    let da = result.result
                    that.addrStr = da.formatted_addresses.recommend;
                    let { lat, lng } = da.location
                    that.qda = { ...that.qda, longitude: lng, latitude: lat }
                }
            });
        },
        onRange(va) {
            this.priceRange = va.p
            setTimeout(() => {
                this.numinfo = va.txt
            }, 0)
        },
        activef(va) {
            if (va.p[0] == this.priceRange[0] && va.p[1] == this.priceRange[1]) {
                return true
            } else return false
        },
        onLevel(va) {
            if (this.Leve == va.v) {
                this.Leve = undefined
            } else this.Leve = va.v
        },
        confirm() {
            if (this.priceRange.length) {
                this.qda.minPrice = this.priceRange[0]
                if (this.priceRange[0] != this.priceRange[1]) {
                    this.qda.maxPrice = this.priceRange[1]
                } else {
                    delete this.qda.maxPrice;
                }
            }
            if (this.Leve) {
                this.qda.hotelStars = this.Leve
            }
            this.popupShow = false
        },
        reset() {
            this.priceRange = [];
            delete this.qda.minPrice;
            delete this.qda.maxPrice;
            this.Leve = "";
            delete this.qda.hotelStars;
            this.popupShow = false
        }
    },
    watch: {
        priceRange: {
            immediate: true,
            deep: true,
            handler(va) {
                this.numinfo = `￥${va[0]} - ${va[1]}`
            }
        },
        Leve: {
            immediate: true,
            deep: true,
            handler(va) {
                for (const i of this.Levels) {
                    if(i.v == va){
                        this.LeveStr = i.t
                    }
                }
            }
        },
    },
    onLoad(da) {
        this.$refs.dayPicker.getInit();
        this.locationf();
    },
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.hotel {
    width: 100%;
    height: 1350rpx;
    background-image: url("https://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/78b6d4099023da41dd44706cea7381a.jpg");
    background-size: 100% 100%;
    position: relative;
}

.formbox {
    width: calc(100% - 60rpx);
    position: absolute;
    left: 30rpx;
    top: 450rpx;
}

.tabtit {
    background-color: #fff;
    width: 250rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 10rpx 10rpx 0 0;
    font-size: 38rpx;
    font-weight: 600;
    text-align: center;
    color: #00B76C;
}

.formbar {
    background-color: #fff;
    border-radius: 0 10rpx 10rpx 10rpx;
    padding: 16rpx 40rpx 22rpx;

    .li {
        border-bottom: 1px solid #d8d8d8;

        &:last-child {
            border-bottom: 0px;
        }

        padding: 18rpx 0;

        .ico {
            font-size: 20rpx;
            margin-left: 16rpx;
        }

        .address {
            padding: 0 12rpx;

            .address_name {
                display: inline-block;
                font-weight: 600;
                min-width: 66rpx;
            }

            span {
                vertical-align: middle;
            }
        }

        input {
            font-size: 28rpx;
        }

        .lab {
            border-bottom: 4rpx solid #00B76C;
            padding-bottom: 8rpx;
            font-size: 28rpx;
            color: #00B76C;
        }

        .day {
            width: 166rpx;
            text-align: center;

            .ti {
                color: #999;
                font-size: 24rpx;
                margin-bottom: 6rpx;
            }

            .daytxt {
                font-size: 36rpx;
                color: #00B76C;
                font-weight: 600;
            }
        }

        .day,
        .lab {
            vertical-align: middle;
        }
    }

    .addressStr {
        width: 350rpx;
        font-size: 28rpx;
        margin-left: 10rpx;
    }

    .location {
        text-align: center;

        .ico2 {
            font-size: 36rpx;
            color: #000;
        }

        .it {
            font-size: 20rpx;
            color: #999;
        }
    }
}

.ni_popup {
    width: 100%;
    height: 100vh;
    background-color: rgba($color: #000, $alpha: .4);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;

    .pbtn {
        margin-top: 50rpx;

        .btn {
            color: #666;
            font-size: 34rpx;
            width: 250rpx;
            text-align: center;
            background-color: rgba($color: #00B76C, $alpha: .3);
            height: 70rpx;
            border-radius: 35rpx;
            line-height: 70rpx;
        }

        .corg {
            background-color: #00B76C;
            color: #fff;
        }
    }
}

.starLevel {
    width: 100%;
    height: 720rpx;
    padding: 26rpx 32rpx;
    background-color: #fff;
    border-radius: 32rpx 32rpx 0 0;
    position: absolute;
    left: 0;
    bottom: 0;

    .h_numinfo {
        margin-bottom: 26rpx;
        font-size: 32rpx;

        .msg {
            color: #00B76C;
            margin-left: 12rpx;
        }
    }

    .sliderBar {
        .num {
            color: #999;
            font-size: 24rpx;
            margin-bottom: 18rpx;
        }

        .sb {
            padding: 0 18rpx;
        }
    }

    .nums {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 160rpx);
        grid-gap: 0 1px;
        margin-bottom: -10rpx;
        margin-top: 45rpx;

        .num_item {
            color: #333;
            width: 160rpx;
            text-align: center;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 26rpx;
            background-color: rgba($color: #000, $alpha: 0.08);
            margin-bottom: 12rpx;
            border-radius: 8rpx;

            &.active {
                color: #000;
                background-color: rgba($color: #00B76C, $alpha: 0.8);
            }
        }
    }

    .LevelB {
        margin-top: 45rpx;

        .tit {
            font-size: 32rpx;
            margin-bottom: 20rpx;
        }

        .ls_i {
            color: #333;
            font-size: 26rpx;
            background-color: rgba($color: #000, $alpha: 0.08);
            padding: 8rpx 22rpx;
            border-radius: 8rpx;

            &.active {
                color: #000;
                background-color: rgba($color: #00B76C, $alpha: 0.8);
            }
        }
    }
}

.footimg {
    width: 100%;
    position: fixed;
    bottom: -10rpx;
    left: 0;

    .btn {
        width: 272rpx;
        position: absolute;
        left: calc(50% - 136rpx);
        top: -3rpx;
    }

    .img {
        width: 100%;
    }
}
</style>