Skip to content

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

修改

parent 061df054
Show whitespace changes
Inline Side-by-side
Showing with 233 additions and 80 deletions
src/App.vue
View file @ b32858be
......@@ -10,7 +10,7 @@ export default {
};
</script>
<style>
@import url("//at.alicdn.com/t/font_1890699_hdbdh9httvc.css");
@import url("//at.alicdn.com/t/font_1890699_t3cp3liyfpg.css");
@font-face {
font-family: "oswald";
src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
......
src/pages/Search.vue
View file @ b32858be
......@@ -16,7 +16,7 @@
display: flex;
width: 100%;
margin: 6px auto 0;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.03);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .03);
}
.SearchMain .showbox {
......@@ -114,6 +114,7 @@
display: flex;
justify-content: space-between;
border-top: 1px solid #eee;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.03);
}
.sortShaixuan {
......@@ -143,8 +144,7 @@
@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;
margin-right: 0 !important;
}
}
......@@ -209,6 +209,11 @@
line-height: 1.5;
font-weight: 400;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pd-box .pd-departure {
......@@ -222,10 +227,23 @@
font-size: 14px;
}
.Search_center {
width: 100%;
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
.Search_center .pd-list {
display: flex;
flex-flow: wrap;
width: 100%;
margin: 0;
padding: 0;
}
.pd-list li:nth-child(4n) {
margin-right: 0;
}
.pd-list li {
......@@ -235,7 +253,7 @@
.SearchMain .search-content {
display: flex;
align-items: flex-start;
margin-top:20px;
margin-top: 20px;
}
.wl-section-block {
......@@ -277,6 +295,7 @@
align-items: center;
font-size: 13px;
color: #999;
cursor: pointer;
}
.search-filter-aside .search-type {
......@@ -568,13 +587,15 @@
max-width: 1160px;
align-items: center;
}
.SearchContent .search-item {
display: flex;
border-right: 1px solid #eee;
line-height: 44px;
padding-right:20px;
padding-right: 20px;
}
.search-filter-inner i{
.search-filter-inner i {
width: 50px;
height: 45px;
line-height: 45px;
......@@ -582,11 +603,50 @@
color: #999;
display: inline-block;
}
.full-height .q-textarea .q-field__control{
min-height:25px!important;
.full-height .q-textarea .q-field__control {
min-height: 25px !important;
}
.full_price .q-placeholder{
min-height:25px!important;
.full_price .q-placeholder {
min-height: 25px !important;
}
.text-h6 {
text-align: center;
padding: 0 20px;
height: 60px;
line-height: 60px;
font-size: 18px;
color: #333;
font-weight: 700;
position: relative;
}
.text-h6 i {
position: absolute;
right:20px;
cursor: pointer;
font-size:23px;
}
.SearchContent .q-field--filled .q-field__control{
background:#fff;
}
.SearchContent .q-field--filled .q-field__control:before{
background-color: #fff;
border-bottom: 0;
}
.SearchContent .q-field--filled.q-field--focused .q-field__control:before{
background-color: #fff!important;
}
.sortDiv .q-field--filled .q-field__control{
background:#fff;
}
.sortDiv .q-field--filled .q-field__control:before{
background-color: #fff;
border-bottom: 0;
}
.sortDiv .q-field--filled.q-field--focused .q-field__control:before{
background-color: #fff!important;
}
</style>
<template>
......@@ -595,52 +655,22 @@
<!-- 电脑端 -->
<div class="row SearchContent" v-if="!$q.screen.xs">
<div class="search-filter-inner">
<div class="search-item" @click="showPopup=true,goSearchHandler">
<div class="search-item" style="width:200px;cursor:pointer;" @click="isShowDialog=true,goSearchHandler">
<i class="iconfont iconchazhao"></i>
{{qMsg.searchKey}}
</div>
<div class="search-item" @click="showPopup=true,goSearchHandler">
<div class="search-item" @click="isShowDialog=true,goSearchHandler">
<i class="iconfont iconrili"></i>
{{qMsg.startDate}} ~ {{qMsg.endDate}}
</div>
<div class="search-item" style="margin-left:20px;border-right:0">
<div class="search-item" style="margin-left:20px;">
<q-select filled v-model="sortNum" :options="sortArray" @input="changeData" emit-value map-options />
</div>
<div class="col-2" style="margin-left:20px;">
<span style="display:inline-block;cursor:pointer;" @click="fullHeight = true">更多篩選條件</span>
</div>
<!-- <div class="col-3">
<q-input filled id="search_key" v-model="qMsg.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="qMsg.startDate" mask="date">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qStartDateProxy" transition-show="scale" transition-hide="scale"
@input="changeData">
<q-date v-model="qMsg.startDate" @input="() => $refs.qStartDateProxy.hide()" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="Search_Zhi">至</div>
<div class="col-2">
<q-input filled v-model="qMsg.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" @input="changeData">
<q-date v-model="qMsg.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="sortNum" :options="sortArray" @input="changeData" 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" style="z-index:999" transition-show="fade" elevated
transition-hide="scale" class="showbox row">
<div style="width:180px;">
......@@ -681,12 +711,6 @@
</div>
</div>
<template v-if="ShowType==0">
<!--豆腐格-->
<searchBlock :DataList="DataList" :qMsg="qMsg"></searchBlock>
</template>
<template v-else>
<!-- 手机端 -->
<div v-if="$q.screen.xs">
<div class="search-bar-m">
......@@ -701,37 +725,42 @@
</div>
</div>
<template v-if="ShowType==0">
<!--豆腐格-->
<searchBlock :DataList="DataList" :qMsg="qMsg"></searchBlock>
</template>
<template v-else>
<div class="wl-section-block search-content">
<div class="search-filter-aside">
<div class="search-header">
篩選項目
<span class="clear-filter">清除所有篩選</span>
<span class="clear-filter" @click="clearAll()">清除所有篩選</span>
</div>
<div class="search-body">
<div class="search-type">
<div class="search-title">
價格
<span class="clear-filter">清除篩選</span>
<span class="clear-filter" @click="clearPrice()">清除篩選</span>
</div>
<div style="width:100%;height:57px;display:none">
</div>
<div class="range-text">
<div class="min">
<q-input class="full_price" style="width:80%" placeholder="最低价" v-model="qMsg.minPrice" @input="changeData" filled
autogrow />
<q-input class="full_price" style="width:80%" placeholder="最低价" v-model="qMsg.minPrice"
@input="changeData" filled autogrow />
</div>
<div class="max">
<q-input class="full_price" style="width:80%" placeholder="最高价" v-model="qMsg.maxPrice" @input="changeData" filled
autogrow />
<q-input class="full_price" style="width:80%" placeholder="最高价" v-model="qMsg.maxPrice"
@input="changeData" filled autogrow />
</div>
</div>
</div>
<div class="search-type">
<div class="search-title">
天數
<span class="clear-filter">清除篩選</span>
<span class="clear-filter" @click="clearDays()">清除篩選</span>
</div>
<q-checkbox right-label v-model="dayNum" v-for="(item,index) in dayArray" :label="item.text"
:key="index" :val="item.id" @input="changeData" />
......@@ -752,7 +781,7 @@
<div class="search-type">
<div class="search-title">
出發星期
<span class="clear-filter">清除篩選</span>
<span class="clear-filter" @click="clearWeek()">清除篩選</span>
</div>
<div class="q-gutter-sm">
<q-checkbox v-model="WeekDay" v-for="(item,index) in weekList" :val="item.value" :label="item.label"
......@@ -772,8 +801,10 @@
<div class="moreTiaojiao">更多篩選條件</div>
<div class="full_listDiv" style="padding-bottom:20px">
<span>價格：</span>
<q-input class="full_price" style="width:30%;height:45px;" v-model="qMsg.minPrice" @input="changeData" filled autogrow />
<q-input class="full_price" style="width:30%;height:45px;" v-model="qMsg.maxPrice" @input="changeData" filled autogrow />
<q-input class="full_price" style="width:30%;height:45px;" v-model="qMsg.minPrice" @input="changeData" filled
autogrow />
<q-input class="full_price" style="width:30%;height:45px;" v-model="qMsg.maxPrice" @input="changeData" filled
autogrow />
</div>
<div class="full_listDiv">
<div class="full_title">天數</div>
......@@ -801,9 +832,87 @@
</div>
</q-card>
</q-dialog>
<q-dialog v-model="isShowDialog">
<q-card>
<q-card-section>
<div class="text-h6">
搜尋行程
<i class="iconfont iconbaseline-close-px" @click="isShowDialog=false"></i>
</div>
</q-card-section>
<q-separator />
<div style="max-height: 550px;padding:20px 30px 30px 30px" class="scroll">
<div class="chosen-box">
<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" @input="setSearchKey(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="qMsg.searchKey" @input="changeData" class="bg-grey-1"
:label="$t('search')" />
</div>
<div class="q-mb-md row">
<div class="col">
<q-input filled v-model="qMsg.startDate" style="width:99%" :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="qDateProxy7" @input="changeData">
<q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇"
v-model="qMsg.startDate" @input="() => $refs.qDateProxy7.hide()" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="col">
<q-input filled v-model="qMsg.endDate" :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="qDateProxy8" @input="changeData">
<q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇"
v-model="qMsg.endDate" @input="() => $refs.qDateProxy8.hide()" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</div>
<div>
<q-btn color="primary" unelevated style="width:100%;height:50px;margin-top:20px;" filled label="搜尋"
@click="isShowDialog=false,goSearchHandler()" />
</div>
</div>
</div>
</div>
<q-separator />
</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="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="目的地" />
......@@ -877,6 +986,7 @@
},
data() {
return {
isShowDialog: false,
sortNum: 1, //排序
dayNum: [], //天数
WeekDay: [],
......@@ -1068,6 +1178,49 @@
}
},
methods: {
//清除所有条件
clearAll(){
let msg={
cityId: 0,
companyId: 0,
startDate: "", //开始日期
endDate: "", //结束日期
lineId: 0, //线路编号
lineTeamId: 0, //系列编号
minPrice: "", //最低价格
maxPrice: "", //最高价格
minTripDay: "", //最低行程条数
maxTripDay: "", //最高行程天数
orderByDate: 0,
orderByPrice: 0,
orderBySales: 0,
pageIndex: 1,
pageSize: 20,
priceOrderByField: 4,
searchKey: "",
startCityId: 0,
PageCount: 0,
TotalCount: 0,
}
this.qMsg = msg;
this.goSearchHandler();
},
//清除价格
clearPrice(){
this.qMsg.minPrice='';
this.qMsg.maxPrice='';
this.goSearchHandler();
},
//清除天数
clearDays(){
this.dayNum=[];
this.goSearchHandler();
},
//清除星期
clearWeek(){
this.WeekDay=[];
this.goSearchHandler();
},
//获取地区数据
getAera() {
this.apipost(
......@@ -1119,11 +1272,11 @@
this.goSearchHandler();
},
//分页方法
getPage(){
getPage() {
this.goSearchHandler();
},
setSearchKey(obj){
this.qMsg.searchKey=obj.Name;
setSearchKey(obj) {
this.qMsg.searchKey = obj.Name;
},
goSearchHandler() {
this.$q.loading.show()
......
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