Skip to content

B
bigwood
Commit 81d22662 authored by youjie's avatar youjie
Browse files
Options

no message

parent 823d72a2
Show whitespace changes
Inline Side-by-side
Showing with 1086 additions and 145 deletions
src/components/searchdata/rightList.vue
View file @ 81d22662
...@@ -165,7 +165,10 @@ ...@@ -165,7 +165,10 @@
chosenAddress: [], chosenAddress: [],
goodsType: [], goodsType: [],
dateRange: null, dateRange: null,
msg: null, msg: {
pageIndex:1,
pageSize:10,
},
qMsg: null, qMsg: null,
dataList: [], dataList: [],
sortNum: 1, sortNum: 1,
...@@ -192,14 +195,6 @@ ...@@ -192,14 +195,6 @@
const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
data.chosenAddress = JSON.parse(JSON.stringify(search.chosenAddress)) data.chosenAddress = JSON.parse(JSON.stringify(search.chosenAddress))
data.qMsg = JSON.parse(JSON.stringify(search.msg)) data.qMsg = JSON.parse(JSON.stringify(search.msg))
data.msg = JSON.parse(JSON.stringify(search.msg))
data.msg.teamType = [];
data.msg.priceRange = {
min: 1,
max: 100000,
};
data.msg.minPrice = 0;
data.msg.maxPrice = 100000;
data.dateRange = { from: data.msg.startDate, to: data.msg.endDate }; data.dateRange = { from: data.msg.startDate, to: data.msg.endDate };
watch(data.msg, (n, o) => { watch(data.msg, (n, o) => {
...@@ -213,12 +208,13 @@ ...@@ -213,12 +208,13 @@
// methods.goSearchHandler(); // methods.goSearchHandler();
},{deep:true}) },{deep:true})
const methods = { const methods = {
// 删除目的地
removeChosen(x,i) { removeChosen(x,i) {
console.log(x,'00000')
search.deleteChosen = JSON.parse(JSON.stringify(x)) search.deleteChosen = JSON.parse(JSON.stringify(x))
data.chosenAddress.splice(i,1) data.chosenAddress.splice(i,1)
search.chosenAddress = JSON.parse(JSON.stringify(data.chosenAddress)) search.chosenAddress = JSON.parse(JSON.stringify(data.chosenAddress))
}, },
// 排序方式
chosenSortHandler(x) { chosenSortHandler(x) {
data.sortNum = x.value; data.sortNum = x.value;
data.msg.orderByDate = data.sortNum == 4 ? 1 : data.sortNum == 5 ? 2 : 0; data.msg.orderByDate = data.sortNum == 4 ? 1 : data.sortNum == 5 ? 2 : 0;
...@@ -253,7 +249,7 @@ ...@@ -253,7 +249,7 @@
data.msg.priceOrderByField = 2; data.msg.priceOrderByField = 2;
} }
} }
let param = Object.assign(data.msg) let param = Object.assign(data.msg,search.msg)
scheduledTripService.GetB2BTravelPageList(param).then(r => { scheduledTripService.GetB2BTravelPageList(param).then(r => {
$q.loading.hide(); $q.loading.hide();
if (r.data.resultCode == ApiResult.SUCCESS) { if (r.data.resultCode == ApiResult.SUCCESS) {
...@@ -291,13 +287,6 @@ ...@@ -291,13 +287,6 @@
}) })
}, },
} }
const searchCnt = computed(() => {
let setCnt = 0
if ($q.platform.is.mobile) {
if (data.msg.min) setCnt++
}
return setCnt
})
methods.goSearchHandler(); methods.goSearchHandler();
return { return {
......
src/components/searchdata/search.vue
View file @ 81d22662
<template> <template>
<div v-if="$q.platform.is.mobile" class="rounded-borders bg-white row items-center q-mb-md q-px-md">
<q-input
v-model="searchAdd.name"
type="text"
standout
:placeholder="$t('v103.scheduledTrip.searchinput')"
class="q-my-md"
@update:model-value="changeAddrSearchHandler"
/>
<div class="col"></div>
<q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
<q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt"
v-if="searchCnt > 0" />
<svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
<q-tooltip>{{ $t('morequery') }}</q-tooltip>
<q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]"
:model-value="canHide">
<q-card class="q-pa-md rounded-borders" style="width: 300px">
<div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
<div class="rounded-borders q-my-md q-px-xs q-py-xs bg-grey-3">
<div v-if="chosenAddress.length==0" class="q-px-sm q-py-xs">{{$t('v103.scheduledTrip.screeningtitle')}}</div>
<template v-else>
<q-chip
v-for="(x, i) in chosenAddress"
size="12px"
:key="i"
removable
outline
color="grey"
:label="x.Name"
@remove="removeChosen(x,i,1)"
/>
</template>
<q-popup-proxy :offset="[0, 10]">
<div class="bg-white q-pb-lg" style="width: 300px;">
<div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.screeningtitle')}}</div>
<div v-for="(x, i) in areaList" :key="i">
<div class="addr">
<div
class="addr-list q-px-md q-py-sm cursor-pointer row items-center"
v-if="x.isShow"
>
<q-checkbox
indeterminate-value="half"
@update:model-value="changeCheckHandler(x)"
v-model="x.checked"
size="xs"
/>
<span class="col" @click="changeExplesdHandler(x)">{{
x.Name
}}</span>
<q-icon
@click="changeExplesdHandler(x)"
v-if="
searchAdd.name.length == 0 ||
(searchAdd.name.length > 0 && x.isShowChild)
"
:name="!x.explsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
size="20px"
/>
</div>
<div
class="q-mx-md"
v-if="
x.explsed ||
(x.SubList && x.isShowChild && searchAdd.name.length > 0)
"
>
<template v-for="(y, yi) in x.SubList">
<div
class="addr-list q-px-md q-py-sm row items-center"
:key="yi"
v-if="y.isShow"
>
<q-checkbox
@update:model-value="changeCheckHandler(y, x)"
v-model="y.checked"
size="xs"
/>
<span class="col">{{ y.Name }}</span>
</div>
</template>
</div>
</div>
</div>
</div>
</q-popup-proxy>
</div>
<div class="rounded-borders q-my-md q-px-xs q-py-xs bg-grey-3">
<div v-if="msg.teamType.length==0" class="q-px-sm q-py-xs">{{$t('v103.scheduledTrip.allcommoditytype')}}</div>
<template v-else>
<q-chip
v-for="(x, i) in msg.teamType"
size="12px"
:key="i"
removable
outline
color="grey"
:label="x==2?$t('v103.scheduledTrip.daytrip'):$t('v103.scheduledTrip.multiday')"
@remove="removeChosen(x,i,2)"
/>
</template>
<q-popup-proxy :offset="[0, 10]">
<div class="bg-white q-pb-lg" style="width: 300px;">
<div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.allcommoditytype')}}</div>
<div class="add" v-for="(x, i) in goodsType" :key="i">
<div class="q-mx-md" v-if="x.explsed">
<div
class="addr-list q-px-md q-py-sm row items-center"
v-for="(y, yi) in x.SubList"
:key="yi"
>
<q-checkbox
v-model="y.checked"
size="xs"
@update:model-value="changeGoodTypeHandler(y)"
/>
<span class="col">{{ y.Name }}</span>
</div>
</div>
</div>
</div>
</q-popup-proxy>
</div>
<div class="q-my-md row no-padding bg-grey-3">
<div
class="q-px-md q-py-sm"
style="border-right: 1px solid #eee; border-radius: 0 !important"
>
<q-icon name="event" size="24px" />
</div>
<div class="row items-center justify-center col">
<span class="text-grey-8">{{
dateRange.from
? `${dateRange.from} - ${dateRange.to}`
: $t('v103.scheduledTrip.screeningdate')
}}</span>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
<div>
<q-date
v-model="dateRange"
:options="optionsFn"
range
@range-end="dateRangeHandler"
mask="YYYY/MM/DD"
></q-date>
</div>
</q-popup-proxy>
</div>
</div>
<div class="q-my-md">
<div class="text-subtitle1 text-weight-bold">{{$t('v103.scheduledTrip.screeningprice')}}（CNY）</div>
<div class="q-mt-md text-grey-6 text-subtitle1">
{{ msg.priceRange.min }} - {{ msg.priceRange.max }}
</div>
<q-range
v-model="msg.priceRange"
:min="1"
:max="100000"
:step="1"
@input="testHandler"
color="primary"
class="q-mt-md"
/>
</div>
<div class="rounded-borders q-my-md q-px-xs q-py-xs bg-grey-3">
<div v-if="dayArray.findIndex((x)=>{ return x.checked})" class="q-px-sm q-py-xs">{{$t('v103.scheduledTrip.journeytime')}}</div>
<template v-else>
<template v-for="(x, i) in dayArray">
<q-chip
v-if="x.checked"
size="12px"
:key="i"
removable
outline
color="grey"
:label="x.text"
@remove="removeChosen(x,i,3)"
/>
</template>
</template>
<q-popup-proxy :offset="[0, 10]">
<div class="bg-white q-pb-lg" style="width: 300px;">
<div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.journeytime')}}</div>
<div
class="addr-list q-px-md q-py-sm row items-center"
v-for="(y, yi) in dayArray"
:key="yi"
>
<q-checkbox
v-model="y.checked"
size="xs"
@update:model-value="changeTripDayHandler"
/>
<span class="col text-grey-8" style="font-weight: 400">{{
y.text
}}</span>
</div>
</div>
</q-popup-proxy>
</div>
</q-card>
</q-popup-proxy>
</q-btn>
<q-btn color="primary" unelevated :label="$t('query')" />
</div>
<template v-if="$q.platform.is.desktop">
<q-card flat class="rounded-borders q-py-md"> <q-card flat class="rounded-borders q-py-md">
<div class="text-subtitle1 text-weight-bold q-mx-md">{{$t('v103.scheduledTrip.screeningtitle')}}</div> <div class="text-subtitle1 text-weight-bold q-mx-md">{{$t('v103.scheduledTrip.screeningtitle')}}</div>
<q-input <q-input
...@@ -157,6 +367,7 @@ ...@@ -157,6 +367,7 @@
</q-expansion-item> </q-expansion-item>
</q-card> </q-card>
</template> </template>
</template>
<script lang="ts"> <script lang="ts">
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
...@@ -255,11 +466,41 @@ ...@@ -255,11 +466,41 @@
x.checked = false; x.checked = false;
}); });
data.dateRange = { from: data.msg.startDate, to: data.msg.endDate }; data.dateRange = { from: data.msg.startDate, to: data.msg.endDate };
watch(data.msg, (n, o) => {
search.msg = JSON.parse(JSON.stringify(n))
},{deep: true})
const methods = { const methods = {
// 删除目的地、商品类别、旅游时间
removeChosen(x,i,type) {
if(type==1){
if(data.chosenAddress.length==1){
search.deleteChosen = null as any
}else{
search.deleteChosen = JSON.parse(JSON.stringify(x))
}
data.chosenAddress.splice(i,1)
search.chosenAddress = JSON.parse(JSON.stringify(data.chosenAddress))
data.chosenAddress.length==0&&data.areaList.forEach(y=>{
y.checked = false
y.SubList.forEach(z=>{
z.checked = false
})
})
}else if(type==2){
data.goodsType.forEach(y=>{
y.SubList.forEach(z=>{
if(x==z.Id){
z.checked = false
}
})
})
data.msg.teamType.splice(i,1)
search.msg = JSON.parse(JSON.stringify(data.msg))
}else if(type==3){
data.dayArray[i].checked = false
}
},
// 初始化目的地
initAreaList() { initAreaList() {
let jObj = JSON.parse(localStorage.getItem("baseifo")); let jObj = JSON.parse(localStorage.getItem("baseifo"));
jObj.AreaList.forEach((x) => { jObj.AreaList.forEach((x) => {
...@@ -278,11 +519,13 @@ ...@@ -278,11 +519,13 @@
data.areaList.push(...x.SubList); data.areaList.push(...x.SubList);
}); });
}, },
// 旅游时间
changeExplesdHandler(x) { changeExplesdHandler(x) {
x.explsed = !x.explsed; x.explsed = !x.explsed;
if (x.SubList) { if (x.SubList) {
} }
}, },
// 商品类型
changeGoodTypeHandler(x) { changeGoodTypeHandler(x) {
if (x.checked && data.msg.teamType.indexOf(x.Id) == -1) { if (x.checked && data.msg.teamType.indexOf(x.Id) == -1) {
data.msg.teamType.push(x.Id); data.msg.teamType.push(x.Id);
...@@ -291,24 +534,27 @@ ...@@ -291,24 +534,27 @@
data.msg.teamType.splice(i, 1); data.msg.teamType.splice(i, 1);
} }
}, },
// 目的地
changeCheckHandler(x, p = null) { changeCheckHandler(x, p = null) {
if(x.checked=='half'){ if(x.checked=='half'){
x.checked = true x.checked = true
}else{ }else if(x.checked){
x.checked = !x.checked x.checked = false
}else if(!x.checked){
x.checked = true
} }
if (p) { if (p) {
let t = p.SubList.filter((x) => x.checked); let t = p.SubList.filter((x) => x.checked);
p.checked = t.length == p.SubList.length ? true : t.length == 0 ? false : "half"; p.checked = t.length == p.SubList.length ? true : t.length == 0 ? false : "half";
methods.changeChosenHandler(x); methods.changeChosenHandler(x,p.Id);
} else { } else {
x.SubList.forEach((item) => { x.SubList.forEach((item) => {
item.checked = x.checked; item.checked = x.checked;
methods.changeChosenHandler(item); methods.changeChosenHandler(item,x.Id);
}); });
} }
}, },
changeChosenHandler(x) { changeChosenHandler(x,Pid) {
let i = search.chosenAddress.findIndex((item) => item.Id == x.Id) ?? -1; let i = search.chosenAddress.findIndex((item) => item.Id == x.Id) ?? -1;
if (!x.checked) { if (!x.checked) {
if (i > -1) { if (i > -1) {
...@@ -316,10 +562,12 @@ ...@@ -316,10 +562,12 @@
} }
} else { } else {
if (i == -1) { if (i == -1) {
x.Pid = Pid
search.chosenAddress.push(x); search.chosenAddress.push(x);
} }
} }
}, },
// 价格区间
changeTripDayHandler() { changeTripDayHandler() {
data.msg.minTripDay = "0"; data.msg.minTripDay = "0";
data.msg.maxTripDay = "0"; data.msg.maxTripDay = "0";
...@@ -336,26 +584,28 @@ ...@@ -336,26 +584,28 @@
data.msg.maxTripDay = data.msg.maxTripDay =
data.msg.maxTripDay == "0" ? "" : data.msg.maxTripDay; data.msg.maxTripDay == "0" ? "" : data.msg.maxTripDay;
}, },
testHandler(e) {
data.msg.minPrice = e.min;
data.msg.maxPrice = e.max;
},
// 选择时间区间
optionsFn(cd) { optionsFn(cd) {
return ( return (
cd >= cd >=
date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD") date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD")
); );
}, },
testHandler(e) {
data.msg.minPrice = e.min;
data.msg.maxPrice = e.max;
},
dateRangeHandler(e) { dateRangeHandler(e) {
data.msg.startDate = `${e.from.year}/${e.from.month}/${e.from.day}`; data.msg.startDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
data.msg.endDate = `${e.to.year}/${e.to.month}/${e.to.day} `; data.msg.endDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
if (qDateProxy.value) qDateProxy.value.hide() if (qDateProxy.value) qDateProxy.value.hide()
}, },
// 商品类型
initGoods() { initGoods() {
data.goodsType.push({ data.goodsType.push({
Id: 1, Id: 1,
Name: t('v103.scheduledTrip.sightseeingitinerary'), Name: t('v103.scheduledTrip.sightseeingitinerary'),
explsed: false, explsed: $q.platform.is.desktop? false:true,
SubList: [ SubList: [
{ {
Id: 2, Id: 2,
...@@ -370,7 +620,9 @@ ...@@ -370,7 +620,9 @@
], ],
}); });
}, },
// 搜寻目的地
changeAddrSearchHandler(v) { changeAddrSearchHandler(v) {
search.chosenAddress = []
data.areaList.forEach((x) => { data.areaList.forEach((x) => {
x.isShow = x.Name.indexOf(v) != -1; x.isShow = x.Name.indexOf(v) != -1;
x.isShowChild = false; x.isShowChild = false;
...@@ -384,15 +636,30 @@ ...@@ -384,15 +636,30 @@
}); });
}, },
} }
watch(data.msg, (n, o) => {
search.msg = JSON.parse(JSON.stringify(n))
},{deep: true})
watch(search, (n, o) => { watch(search, (n, o) => {
console.log(search.deleteChosen,'===-======') data.chosenAddress = JSON.parse(JSON.stringify(n.chosenAddress))
methods.changeGoodTypeHandler(n.deleteChosen) if(n.deleteChosen){
data.areaList.forEach(x=>{
x.SubList.forEach(y=>{
if(x.Id==n.deleteChosen.Pid&&y.Id==n.deleteChosen.Id){
methods.changeCheckHandler(y,x)
}
})
})
}
},{deep: true}) },{deep: true})
const searchCnt = computed(() => { const searchCnt = computed(() => {
let setCnt = 0 let setCnt = 0
if ($q.platform.is.mobile) { if ($q.platform.is.mobile) {
if (data.msg.min) setCnt++ if (search.chosenAddress.length>0) setCnt++
if (search.msg.teamType.length>0) setCnt++
if (search.msg.priceRange.min) setCnt++
if (data.dateRange.from) setCnt++
let days = data.dayArray.map(x=>x.checked)
if (days.indexOf(true)!=-1) setCnt++
} }
return setCnt return setCnt
}) })
...@@ -401,8 +668,8 @@ ...@@ -401,8 +668,8 @@
methods.initGoods(); methods.initGoods();
return { return {
...toRefs(data), ...toRefs(data),
search,
...methods, ...methods,
searchCnt,
qDateProxy, qDateProxy,
qNameProxy, qNameProxy,
} }
......
src/pages/scheduledTrip/scheduledTripList.vue
View file @ 81d22662
<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); */
min-height: 600px;
}
.SearchContent {
position: relative;
display: flex;
width: 100%;
margin: 6px auto 0;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .03);
}
.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: 40px;
line-height: 40px;
}
.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;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.03);
}
.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;
}
}
.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;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.pd-box .pd-departure {
padding-top: 10px;
font-size: 14px;
color: #999;
}
.pd-box .pd-departure .more {
float: right;
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 {
list-style-type: none;
}
.SearchMain .search-content {
display: flex;
align-items: flex-start;
margin-top: 20px;
}
.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;
cursor: pointer;
}
.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;
}
}
.SearchMain .q-field__control {
height: 46px;
}
.SearchMain .q-field__control {
min-height: 46px !important;
}
.SearchMain .q-field__native {
min-height: 46px;
}
.SearchMain .q-field__marginal {
height: 46px;
}
.search-filter-inner {
position: relative;
display: flex;
flex-wrap: wrap;
/* width: 100%; */
height: 48px;
margin: 0 auto;
max-width: 1160px;
align-items: center;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
.SearchContent .search-item {
display: flex;
border-right: 1px solid #eee;
line-height: 44px;
padding-right: 20px;
}
.search-item:first-child{
border-left: 1px solid #eee;
}
.search-filter-inner i {
width: 50px;
height: 45px;
line-height: 45px;
text-align: center;
color: #999;
display: inline-block;
}
.full-height .q-textarea .q-field__control {
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;
}
.mobileSearch{
display:none;
}
@media only screen and (max-width: 768px){
.SearchContent {
display:none;
}
.mobileSearch{
display:block;
}
}
.SearchMain .blank-block{
margin: 100px auto;
width: 300px;
text-align: center;
}
.SearchMain .blank-block i{
font-size: 80px;
color: #ddd;
}
.SearchMain .blank-block p{
color: #999;
font-size: 15px;
letter-spacing: 1px;
}
.desktop-page{
max-width:1200px;
margin:0 auto;
}
</style>
<template> <template>
<div class="fix-height-subpage column no-wrap q-pa-md"> <div class="fix-height-subpage column no-wrap" :class="{'q-pa-md':$q.platform.is.desktop,'q-pa-sm':$q.platform.is.mobile}">
<div class="row items-start q-mt-lg"> <div class="SearchMain" :class="{'desktop-page':$q.platform.is.desktop}">
<div class="col-3 q-mr-lg"> <div class="SearchTop">
<div :class="{'row items-start q-mt-lg':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div :class="{'col-3 q-mr-lg':$q.platform.is.desktop}">
<search></search> <search></search>
</div> </div>
<div class="col q-mt-sm"> <div :class="{'col q-mt-sm':$q.platform.is.desktop,}">
<rightList></rightList> <rightList></rightList>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -30,8 +719,8 @@ export default defineComponent({ ...@@ -30,8 +719,8 @@ export default defineComponent({
}) })
const search = reactive({ const search = reactive({
chosenAddress: [] as Array<any>, chosenAddress: [] as Array<any>,//右边目的地
deleteChosen: null as any, deleteChosen: null as any,//右侧删除目的地
msg:{ msg:{
cityId: 0, cityId: 0,
companyId: 0, companyId: 0,
...@@ -46,13 +735,9 @@ export default defineComponent({ ...@@ -46,13 +735,9 @@ export default defineComponent({
orderByDate: 0, orderByDate: 0,
orderByPrice: 0, orderByPrice: 0,
orderBySales: 0, orderBySales: 0,
pageIndex: 1,
pageSize: 10,
priceOrderByField: 4, priceOrderByField: 4,
searchKey: "", searchKey: "",
startCityId: 0, startCityId: 0,
PageCount: 0,
TotalCount: 0,
teamType: [], teamType: [],
priceRange:{ priceRange:{
min: 1, min: 1,
......
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