Skip to content

M
million
Commit bbed3b34 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 229d2153
Show whitespace changes
Inline Side-by-side
Showing with 977 additions and 9 deletions
src/App.vue
View file @ bbed3b34
...@@ -10,7 +10,7 @@ export default { ...@@ -10,7 +10,7 @@ export default {
}; };
</script> </script>
<style> <style>
@import url("//at.alicdn.com/t/font_1890699_xghg25k0wxr.css"); @import url("//at.alicdn.com/t/font_1890699_e5j7jxghnwi.css");
@font-face { @font-face {
font-family: "oswald"; font-family: "oswald";
src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf"); src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
......
src/pages/Search.vue
View file @ bbed3b34
<style>
.SearchMain {
min-height: 800px;
}
.SearchTop {
width: 100%;
margin: 32px 0 30px 0;
background-color: rgba(255, 255, 255, .95);
border-top: 1px solid #eee;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .03);
user-select: none;
}
.SearchContent {
position: relative;
display: flex;
width: 100%;
margin: 6px auto 0;
height: 60px;
max-width: 1160px;
}
.SearchMain .showbox {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 345px;
background: #fff;
left: 0;
top: 60px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.Search_Zhi {
display: inline-block;
margin: 0 10px;
height: 60px;
line-height: 60px;
}
.full_price {
width: 40%;
display: inline-block;
margin-left: 20px;
}
.moreTiaojiao {
width: 100%;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 18px;
border-bottom: 1px solid #eee;
color: #333;
}
.full_listDiv {
padding: 20px;
border-bottom: 1px solid #eee;
}
.full_title {
margin-bottom: 10px;
font-size: 15px;
font-weight: 700;
color: #666;
}
.full_btndiv {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: space-between;
width: 100%;
border-top: 1px solid #eee;
padding: 20px 10px;
background-color: #fff;
}
.search-bar-m {
display: flex;
width: 100%;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.search-bar-m .keyword-input {
width: calc(100% - 40px);
cursor: pointer;
}
.keyword-input {
height: 44px;
border: 0;
margin: 0;
padding: 0;
font-size: 14px;
outline: none;
color: #333;
padding-left: 20px;
}
.search-bar-m i {
height: 45px;
line-height: 45px;
text-align: center;
margin-left: 20px;
color: #999;
}
.sortDiv {
width: 100%;
display: flex;
justify-content: space-between;
border-top: 1px solid #eee;
}
.sortShaixuan {
width: 50%;
height: 57px;
line-height: 57px;
text-align: center;
}
@media only screen and (max-width: 1200px) {
.pd-list .pd-box {
flex-basis: calc(50% - 10px) !important;
}
.pd-list .pd-box:nth-child(even) {
margin-right: 0 !important;
}
}
@media only screen and (min-width: 768px) {
.pd-box:hover {
transform: translate(0, -4px) !important;
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
}
}
@media only screen and (max-width: 425px) {
.pd-list .pd-box {
flex-basis: 100% !important;
/* margin-right: 0 !important; */
margin:0 10px 20px -20px!important;
}
}
.pd-list .pd-box {
margin-right: 20px;
margin-bottom: 30px;
flex-basis: calc(25% - 15px);
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 2px 3px rgba(0,0,0,.09);
transition: -webkit--webkit-transform .2s ease,box-shadow .2s ease;
background-color: #fff;
}
.pd-box .pd-img {
position: relative;
width: 100%;
padding-bottom: 66.237%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.pd-box .pd-img .pd-price {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
border-bottom: 4px solid #00afff;
text-align: right;
}
.pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
color: #fff;
font-size: 22px;
font-weight: 700;
background-color: #00afff;
-webkit-border-radius: 5px 0 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 5px 0 0;
-moz-background-clip: padding;
border-radius: 5px 0 0;
background-clip: padding-box;
}
.pd-box .pd-img .pd-price .price small {
padding: 0 4px;
font-size: 14px;
}
.pd-box .pd-content {
padding: 15px 15px 20px;
}
.pd-box .pd-title {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: #333;
}
.pd-box .pd-departure {
padding-top: 10px;
font-size: 14px;
color: #999;
}
.pd-box .pd-departure .more {
float: right;
font-size: 14px;
}
.Search_center .pd-list {
display: flex;
flex-flow: wrap;
width:100%;
}
.pd-list li{
list-style-type: none;
}
.SearchMain .search-content{
display: flex;
align-items: flex-start;
}
.wl-section-block {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.search-filter-aside{
width: 300px;
margin-right: 30px;
margin-bottom: 30px;
background-color: #fff;
}
.search-content .group-result-list {
display: flex;
flex-flow: wrap;
width: calc(100% - 300px);
}
.search-filter-aside .search-header {
position: relative;
padding: 10px 15px;
border-bottom: 1px solid #eee;
font-size: 18px;
font-weight: 700;
}
.search-filter-aside .clear-filter {
position: absolute;
top: 15px;
right: 15px;
bottom: auto;
left: auto;
z-index: 1;
display: flex;
align-items: center;
font-size: 13px;
color: #999;
}
.search-filter-aside .search-type {
position: relative;
padding: 15px;
border-bottom: 1px solid #eee;
}
.search-filter-aside .search-type .search-title {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
color: #333;
}
.range-text {
display: flex;
justify-content: space-between;
letter-spacing: 0;
font-weight: 700;
color: #333;
font-size: 15px;
}
.SearchMain .row.inline{
display:flex!important;
}
.group-statis-block{
display: flex;
justify-content: flex-start;
width: 100%;
font-weight: 700;
margin-bottom: 15px;
font-size: 15px;
height: 45px;
}
.group-result-list .group-statis-block>* {
display: inline-block;
height: 100%;
line-height: 45px;
}
.group-result-list .group-statis-block .group-share {
position: relative;
width: 150px;
text-align: center;
background-color: #2a8dbd;
color: #fff;
margin-right: 15px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.16), 0 2px 7px 0 rgba(0,0,0,.12);
}
.group-result-list .group-statis-block .group-statis-detail {
padding-left: 10px;
background: #fff;
width: calc(100% - 150px);
}
.group-statis-detail .title {
font-size: 18px;
}
.group-statis-detail .num {
color: #fd992d;
margin: 0 3px;
font-size: 16px;
}
.group-box{
width:100%;
display: flex;
flex-wrap: wrap;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.09);
transition: transform .2s ease,box-shadow .2s ease;
margin-bottom: 20px;
}
.group-cover{
position: relative;
width: 270px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
overflow: hidden;
}
.group-cover img {
position: absolute;
top: 0;
right: null;
bottom: null;
left: 0;
z-index: 1;
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
.group-box .group-main {
display: flex;
flex-wrap: wrap;
width: calc(100% - 270px);
flex-basis: calc(100% - 270px);
}
.group-box>div {
flex: 1;
}
.group-box .group-main .group-info {
padding: 20px;
width: calc(100% - 200px);
border-right: 1px solid #eee;
}
.group-box .group-main .group-info .group-detail {
margin-bottom: 5px;
font-size: 14px;
color: #666;
}
.group-box .group-main .group-info .group-detail i {
margin-right: 5px;
font-size: 18px;
}
.group-box .group-main .group-info .group-detail>* {
display: inline-block;
vertical-align: middle;
}
.group-name{
color: #333;
font-size: 16px;
line-height: 1.2;
font-weight:bold;
}
.group-list{
margin:0;
padding:0;
}
.group-list li{
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 5px;
list-style-type: none;
}
.group-list li a{
padding: 5px;
font-size: 12px;
background-color: #d9edf7;
border-color: #bce8f1;
color:#0083bd;
border-radius: 3px;
background-clip: padding-box;
}
.price-info{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 20px 15px;
width: 200px;
font-size: 14px;
}
.price-wrap{
width: 100%;
text-align: right;
}
.price-wrap>* {
display: block;
width: 100%;
}
.price_Search{
font-size: 32px;
font-weight: 700;
color: #ff9a14;
}
.price_unit{
font-size: 14px;
padding-right: 5px;
}
.btn_warning{
text-align: center;
cursor: pointer;
padding: 0 15px;
height: 40px;
min-width: 135px;
font-size:15px;
border-radius: 2px;
background-clip: padding-box;
letter-spacing: .05em;
background-color: #ff9a14;
color: #fff;
margin-top:10px;
line-height: 40px;
}
@media only screen and (max-width: 1200px){
.search-content .search-filter-aside {
display: none;
}
.search-content .group-result-list {
width: 100%;
}
}
@media only screen and (max-width: 1200px){
.search-content {
max-width: 768px;
}
}
@media only screen and (max-width: 768px){
.group-statis-block .group-statis-detail {
width: calc(100% - 45px);
}
.group-box .group-cover {
display: block;
width: 100%;
padding-bottom: 60%;
}
.group-box .group-main {
display: block;
width: 100%;
}
.group-box .group-main .group-info {
width: 100%;
padding-bottom: 0;
border-right: 0;
}
.group-box .group-main .price-info {
display: block;
width: 100%;
padding-top: 0;
}
.price-info .price-wrap .price_Search {
font-size: 28px;
}
}
</style>
<template> <template>
<div></div> <div class="SearchMain">
<div class="SearchTop">
<!-- 电脑端 -->
<div class="row SearchContent" v-if="!$q.screen.xs">
<div class="col-3">
<q-input filled id="search_key" v-model="searchKey" class="bg-grey-1" style="margin-right:10px;"
:label="$t('search')" @focus="searchFocusHandler" @blur="searchBlurHandler" @keyup="searchChangeHandler" />
</div>
<div class="col-2">
<q-input filled v-model="startDate" mask="date">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="startDate" @input="() => $refs.qDateProxy.hide()" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="Search_Zhi">至</div>
<div class="col-2">
<q-input filled v-model="endDate" mask="date">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="endDate" @input="() => $refs.qDateProxy.hide()" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="col-2" style="margin-left:10px;">
<q-select filled v-model="priceSort" :options="navs" emit-value map-options />
</div>
<div class="col-2" style="margin-left:10px;">
<span style="margin-top:15px;display:inline-block;cursor:pointer;" @click="fullHeight = true">更多篩選條件</span>
</div>
<div v-show="showSplitPannel" id="sb" transition-show="fade" elevated transition-hide="scale"
class="showbox row">
<div style="width:180px;">
<q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;">
<q-list>
<q-item v-for="(x, i) in areas" :key="i" clickable v-ripple :active="crtAreaIndex==i"
@click="clkAreaHandler(i)" active-class="my-menu-link">
<q-item-section>
<q-item-label>{{ x.Name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</div>
<q-separator vertical />
<div class="col q-pa-md">
<q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;">
<template v-if="areas[crtAreaIndex]&&areas[crtAreaIndex].SubList&&areas[crtAreaIndex].SubList.length>0">
<div class="area-box" v-for="(x, i) in areas[crtAreaIndex].SubList" :key="i">
<div class="q-mb-md">
<div class="h3" @click="chosenAreaHandler(x.Name)">{{x.Name}}</div>
</div>
<template v-if="x&&x.SubList && x.SubList.length>0">
<div class="q-mb-sm row to-end" v-for="(y, yi) in x.SubList" :key="yi">
<div class="h4" @click="chosenAreaHandler(y.Name)">{{y.Name}}</div>
<template v-if="y&&y.SubList&&y.SubList.length>0">
<div class="h5" @click="chosenAreaHandler(z.Name)" v-for="(z, zi) in y.SubList" :key="zi">
{{z.Name}}
</div>
</template>
</div>
</template>
<q-separator class="q-mt-md q-mb-md" color="grey-2" inset />
</div>
</template>
</q-scroll-area>
</div>
</div>
</div>
<!-- 手机端 -->
<div v-if="$q.screen.xs">
<div class="search-bar-m">
<i class="iconfont iconchazhao"></i>
<input type="text" placeholder="搜尋" value="" @click="showPopup=true" readonly="readonly" class="keyword-input">
</div>
<div class="sortDiv">
<q-select filled style="width:50%" v-model="priceSort" :options="navs" emit-value map-options />
<div class="sortShaixuan" @click="fullHeight = true">更多篩選條件</div>
</div>
</div>
</div>
<!-- 模式一 -->
<div class="Search_center" style="display:none;">
<ul class="pd-list">
<li class="pd-box">
<a class="pd-link">
<div class="pd-img" :style="{backgroundImage:`url('http://de0s2vtm6rzpn.cloudfront.net/b2b/112083/tour_cover/11208315385464307090_rsz.jpg')`}">
<div class="pd-price">
<div class="price">
11
<small class="unit">天</small> 50900
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日</h3>
<div class="pd-departure">
出發日期：2021-01-01
<span class="more">...更多</span>
</div>
</div>
</a>
</li>
<li class="pd-box">
<a class="pd-link">
<div class="pd-img" :style="{backgroundImage:`url('http://de0s2vtm6rzpn.cloudfront.net/b2b/112083/tour_cover/11208315385464307090_rsz.jpg')`}">
<div class="pd-price">
<div class="price">
11
<small class="unit">天</small> 50900
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日</h3>
<div class="pd-departure">
出發日期：2021-01-01
<span class="more">...更多</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- 模式二 -->
<div class="wl-section-block search-content">
<div class="search-filter-aside">
<div class="search-header">
篩選項目
<span class="clear-filter">清除所有篩選</span>
</div>
<div class="search-body">
<div class="search-type">
<div class="search-title">
價格
<span class="clear-filter">清除篩選</span>
</div>
<div style="width:100%;height:57px;">
</div>
<div class="range-text">
<div class="min">50,900</div>
<div class="max">50,900</div>
</div>
</div>
<div class="search-type">
<div class="search-title">
天數
<span class="clear-filter">清除篩選</span>
</div>
<q-checkbox right-label v-model="dayNum" label="11天" />
</div>
<div class="search-type">
<div class="search-title">
出發機場
<span class="clear-filter">清除篩選</span>
</div>
</div>
<div class="search-type">
<div class="search-title">
主要航班
<span class="clear-filter">清除篩選</span>
</div>
<q-checkbox right-label v-model="flight" label="長榮" />
</div>
<div class="search-type">
<div class="search-title">
主要航班
<span class="clear-filter">清除篩選</span>
</div>
<div class="q-gutter-sm">
<q-checkbox v-model="StartWeek" v-for="(item,index) in weekList" val="teal" :label="item.label" :key="index"
color="teal" />
</div>
</div>
</div>
</div>
<div class="group-result-list">
<div class="group-statis-block">
<div class="group-share"></div>
<div class="group-statis-detail">
<span class="title">全區 歐</span>
:找到
<span class="num"> 1 </span>個行程
<span class="pc">，目前在第<span style="color: #7f7f7f;"> 1 </span>頁</span>
</div>
</div>
<div>
<div class="group-box">
<a class="group-cover">
<img src="http://de0s2vtm6rzpn.cloudfront.net/b2b/112083/tour_cover/11208315385464307090_rsz.jpg">
</a>
<div class="group-main">
<div class="group-info">
<div class="group-name" style="margin-bottom:5px;">
魅力歐洲～法比荷、最愛羅浮宮、特色三遊船、絕美羊角村、魅力風車城8日
</div>
<div class="group-detail">
<i class="iconfont iconaddress"></i>
<span>巴黎省</span>
</div>
<div class="group-detail">
<i class="iconfont icontime"></i>
<span>11 天</span>
</div>
<ul class="group-list">
<li>
<a>2021-01-01</a>
</li>
</ul>
</div>
<div class="price-info">
<div class="price-wrap">
<div class="price_Search">
<small class="price_unit">TWD$</small>50900
</div>
<a class="btn_warning">更多出發日</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<q-dialog v-model="fullHeight" full-height>
<q-card class="column full-height" style="width: 500px">
<div class="moreTiaojiao">更多篩選條件</div>
<div class="full_listDiv" style="padding-bottom:0">
<span>價格：</span>
<q-input class="full_price" v-model="price1" filled autogrow />
<q-input class="full_price" v-model="price2" filled autogrow />
</div>
<div class="full_listDiv">
<div class="full_title">天數</div>
<div class="q-gutter-sm">
<q-checkbox right-label v-model="dayNum" label="11天" />
</div>
</div>
<div class="full_listDiv">
<div class="full_title">主要航班</div>
<div class="q-gutter-sm">
<q-checkbox right-label v-model="flight" label="長榮" />
</div>
</div>
<div class="full_listDiv">
<div class="full_title">出發星期</div>
<div class="q-gutter-sm">
<q-checkbox v-model="StartWeek" v-for="(item,index) in weekList" val="teal" :label="item.label" :key="index"
color="teal" />
</div>
</div>
<div class="full_btndiv">
<q-btn color="white" style="width:49%" text-color="black" label="清除" />
<q-btn color="primary" style="width:49%" label="套用" v-close-popup />
</div>
</q-card>
</q-dialog>
<popup v-model="showPopup" mode="top" :safeAreaInsetBottom="true" border-radius="5">
<div class="chosen-box">
<div class="title">搜尋行程</div>
<div class="chosen-tab">
<q-tabs v-model="tab" align="justify" narrow-indicator class="q-mb-md">
<q-tab class="text-purple" name="dest" label="目的地" />
<q-tab class="text-teal" name="kw" label="關鍵字" />
</q-tabs>
<div v-show="tab=='dest'">
<div class="q-mb-md">
<q-select filled v-model="chosenResult.fl" :options="areas" option-label="Name" option-value="Name"
label="請選擇地區" />
</div>
<div class="q-mb-md" v-if="chosenResult.fl.SubList">
<q-select filled v-model="chosenResult.sl" :options="chosenResult.fl.SubList" option-label="Name"
option-value="Name" label="請選擇地區" />
</div>
<div class="q-mb-md" v-if="chosenResult.sl.SubList">
<q-select filled v-model="chosenResult.tl" :options="chosenResult.sl.SubList" option-label="Name"
option-value="Name" label="請選擇地區" />
</div>
<div class="q-mb-md" v-if="chosenResult.tl.SubList">
<q-select filled v-model="chosenResult.ful" :options="chosenResult.tl.SubList" option-label="Name"
option-value="Name" label="請選擇地區" />
</div>
</div>
<div v-show="tab=='kw'" class="q-mb-md">
<q-input filled id="search_key" v-model="searchKey" class="bg-grey-1" :label="$t('search')" />
</div>
<div class="q-mb-md row">
<div class="col">
<q-input filled v-model="searchDate" :label="$t('search_date_begin')" mask="date" class="bg-grey-1">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy">
<q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchDate"
@input="() => $refs.qDateProxy.hide()" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="split-word bg-grey-3 q-pl-xs q-pr-xs">至</div>
<div class="col">
<q-input filled v-model="searchEndDate" :label="$t('search_date_end')" mask="date" class="bg-grey-1">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy">
<q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchEndDate"
@input="() => $refs.qDateProxy.hide()" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</div>
<div>
<q-btn color="primary" unelevated style="width:100%" filled label="搜尋" @click="goSearchHandler" />
</div>
</div>
</div>
</popup>
</div>
</template> </template>
<script> <script>
export default { //搜尋輪播淡出 - 小
import popup from "../components/props/index";
export default {
components: {
popup
},
data() { data() {
return {}; return {
searchKey: '',
startDate: '',
endDate: '',
priceSort: 1,
price1: '',
price2: '',
dayNum: ['11天'],
flight: ['长荣'],
StartWeek: ['星期一'],
showSplitPannel: false,
fullHeight: false,
thumbStyle: {
right: "4px",
borderRadius: "5px",
backgroundColor: "#027be3",
width: "5px",
opacity: 0.75
},
barStyle: {
right: "2px",
borderRadius: "9px",
backgroundColor: "#027be3",
width: "9px",
opacity: 0.2
},
areas: [],
crtAreaIndex: 0,
navs: [{
label: '依推薦程度',
value: 1
}, {
label: '低價優先',
value: 2
}, {
label: '高價優先',
value: 3
}, {
label: '最快出發日',
value: 4
}, {
label: '最晚出發日',
value: 5
}, {
label: '天數少到多',
value: 6
}, {
label: '天數多到少',
value: 7
}],
weekList: [{
label: '星期一',
value: 1
}, {
label: '星期二',
value: 2
}, {
label: '星期三',
value: 3
}],
showPopup: false,
tab: "dest",
chosenResult: {
fl: "",
sl: "",
tl: "",
ful: ""
},
searchDate: "",
searchEndDate: "",
};
},
mounted() {
if (localStorage.baseifo) {
var jObj = JSON.parse(localStorage.baseifo);
this.areas = jObj.AreaList;
} else {
this.getAera()
}
document.addEventListener("click", this.clickHandler);
},
methods: {
//获取地区数据
getAera() {
this.apipost(
"ws_get_GetSearchArea", {},
res => {
if (res.data.resultCode == 1) {
if (res.data.data) {
this.areas = res.data.data.AreaList;
}
}
}, },
mounted() {}, err => {}
methods: {} );
}; },
searchFocusHandler() {
if (this.searchKey == "") {
setTimeout(() => {
this.showSplitPannel = true;
}, 200);
}
},
searchBlurHandler() {
},
searchChangeHandler() {
if (this.searchKey == "") {
this.showSplitPannel = true;
} else {
this.showSplitPannel = false;
}
},
clkAreaHandler(i) {
this.crtAreaIndex = i;
},
clickHandler(e) {
if (!document.querySelector("#sb").contains(e.target)) {
this.showSplitPannel = false;
}
},
chosenAreaHandler() {
this.searchKey = name;
this.showSplitPannel = false;
},
goSearchHandler() {
if (this.searchKey == "") {
this.$q.notify({
color: "negative",
textColor: "#FFF",
icon: "report_problem",
message: "尊敬的客人，請選擇一個目的地吧",
position: "top",
timeout: 3000
});
}
}
}
};
</script> </script>
<style></style> <style></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment