<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>华付旅游</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<link rel="stylesheet" href="./css/index.css"/>
<link rel="stylesheet" href="./css/banner.css"/>
</head>
<body>
<div id="app" @click="showOps=false">
<div style="width: 70%;text-align: center;margin: auto;">
<div class="banner">
<div class="logo">
<img src="./img/hf-logo.png" alt="1"/>
<span>
<div class="logo-ch">华付旅游</div>
<div class="logo-en">www.huafu.com</div>
</span>
</div>
<div >
<input type="checkbox" id="toggle-button" v-model="isTest">
<!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input-->
<label for="toggle-button" class="button-label">
<span class="circle"></span>
<span class="text on">测试</span>
<span class="text off">正式</span>
</label>
</div>
</div>
<!--关键字搜索-->
<div class="search-bar">
<div class="input-box">
<input title="输入关键字搜索酒店" v-model="params.key" type="text" @click.stop="" @focus="showOps=true"
@keyup="handleKeyUp($event)">
<button @click="handleSearch">搜索</button>
</div>
<div id="complete-box" v-show="showOps && ops.length > 0">
<div v-for="(item, i) in ops" :key="i" @click="handleSearch" @mouseover="opsIndex = i"
:style='{"background-color": opsIndex===i ? "#EEE" : "#fff"}'>{{item}}
</div>
</div>
</div>
<!-- 已选择过滤项 -->
<div class="selected-ops">
<div class="open">全部结果：</div>
<div class="selected-op" v-for="(v, k) in params.filters" :key="k" @click="deleteFilter(k)">
{{filterNames[k]}}：<span>{{v}} <span class='close'>×</span></span>
</div>
</div>
<!--过滤项-->
<div class="filter-list">
<div v-for="(v, k) in remainFilter" :key="k">
<div class="filter-box">
<div class="f-key"><strong>{{filterNames[k]}}</strong></div>
<div class="column-divider"></div>
<div class="f-items">
<div class="f-item" @click="clickFilter(k, o)" v-for="(o, j) in v" :key="j"><a href="javascript:void(0)">
{{o}}</a></div>
</div>
</div>
<div class="row-divider"></div>
</div>
<div class="filter-box">
<div class="f-key"><strong>价格</strong></div>
<div class="column-divider"></div>
<div class="f-items">
<div class="f-item" @click="clickFilter('price','0-100')"><a href="javascript:void(0)">100元以下</a></div>
<div class="f-item" @click="clickFilter('price','100-300')"><a href="javascript:void(0)">100-300元</a></div>
<div class="f-item" @click="clickFilter('price','300-600')"><a href="javascript:void(0)">300-600元</a></div>
<div class="f-item" @click="clickFilter('price','600-1500')"><a href="javascript:void(0)">600-1500元</a></div>
<div class="f-item" @click="clickFilter('price','1500-0')"><a href="javascript:void(0)">1500元以上</a></div>
</div>
</div>
</div>
<!-- 排序 -->
<div class="top-ban">
<!--排序条件-->
<div class="sort-items">
<div class="sort-item" v-for="(item, i) in sortItems" :key="i">
<a :class="{selected: params.sortBy===item.key}" @click="params.sortBy=item.key"
href="javascript:void(0)">{{item.text}}</a>
|
</div>
</div>
<!--分页条-->
<div class="top-pagination">
<span>共 <i style="color: #222;">{{total}}</i> 家酒店</span>
<span><i style="color: red;">{{params.page}}</i>/{{totalPage}}</span>
<a class="btn-arrow" href="#" style="display: inline-block" @click="prePage"><</a>
<a class="btn-arrow" href="#" style="display: inline-block" @click="nextPage">></a>
</div>
</div>
<div class="row-divider" style="margin-bottom: 5px; width: 100%"></div>
<!--酒店列表-->
<div style="display: flex; justify-content: space-between;">
<div class="hotel-list">
<div class="hotel-box" v-for="(hotel,i) in hotels" :key="i"
style="display: flex;justify-content: space-between;" @mouseover="handleMarkerFocus(hotel)">
<div class="ad-mark" v-if="hotel.isAD">
<img src="./img/ad.png" width="40"/>
</div>
<div style="width: 0;"></div>
<div style="width: 25%"><img width="100%" :src="hotel.pic"></div>
<div class="hotel-info">
<div class="hotel-name" v-html="hotel.name">
</div>
<div class="star-name"> {{hotel.starName}}</div>
<div class="address">
位于 <span style="color: #BC8516;">{{hotel.business}}</span> 周边，{{hotel.address}}
</div>
<div class="order"> 1分钟前有人预订了该酒店</div>
<div v-if="hotel.distance" class="address">距离您 {{hotel.distance.toFixed(2)}} km</div>
</div>
<div style="text-align: left; width: 15%;">
<div>
<b style="color: #f60;">￥</b> <span id='hotel-price'>{{hotel.price}}</span> <span
style="font-size: 0.2em; color: #999;">起</span>
</div>
<div class='btn'>立即预定</div>
<div>
<span class="hotel-score">{{hotel.score / 10}}分</span> /<span>5分</span>
</div>
</div>
</div>
</div>
<div :class='{"map-box": true, "fixed-map": isFixed}' :style="{left: ml + 'px'}">
<div class="map-head">地图预览</div>
<div class="amap" id="container"></div>
<div class="map-geo" @click="getGeoLoc">
<img src="https://a.amap.com/jsapi/static/image/plugin/waite.png" v-show="loading">
</div>
</div>
</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/amap.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ddd292c88aa1bad9c04891a47724f40a"></script>
<script>
// 设置后台服务地址
axios.defaults.baseURL = "http://localhost:8089";
axios.defaults.timeout = 3000;
let app = new Vue({
el: "#app",
data: {
isTest: false,
filterNames: {
brand: "品牌",
city: "城市",
starName: "星级",
price: "价格",
},
filterList: {},// 过滤项的假数据
sortItems: [
{
key: "default",
text: "默认",
},
{
key: "score",
text: "评价",
},
{
key: "price",
text: "价格",
}
],// 排序字段的假数据
hotels: [],// 酒店数据
total: 0, // 总条数
totalPage: 0, // 总页数
params: {
key: "", // 搜索关键字
page: 1, // 当前页码
size: 5, // 每页大小
sortBy: "default",// 排序字段
filters: {}, // 过滤字段
},
map: {},// 地图对象
loc: "", // 地图标记
ml: 0, // 控制地图位置
geolocation:{}, // 定位系统
loading: false, // 是否在定位
currentHotel: {},
ops: [],
showOps: false,
opsIndex: -1,
isFixed: false,
testFilterData: {
"city": ["上海", "北京", "深圳", "杭州"],
"starName": ["四星","五星","二钻","三钻","四钻","五钻"],
"brand": ["7天酒店", "如家","速8", "皇冠假日","华美达","万怡","喜来�
vue 结合ES 使用demo
需积分: 5 141 浏览量
2023-07-12
21:14:12
上传
评论
收藏 121KB ZIP 举报
static.zip （9个子文件） 
static js 
vue.js 366KB axios.min.js 13KB amap.min.js 56KB img 
hf-logo.png 9KB ad.png 2KB ad2.png 1KB css index.css 7KB banner.css 2KB
index.html 23KB资源评论
