You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1028 lines
31 KiB
1028 lines
31 KiB
<template>
|
|
<view>
|
|
<!-- <uni-nav-bar :fixed="false" color="#FFFFFF" background-color="#1677ff">
|
|
<block slot="left">
|
|
<view class="city" @click="back">
|
|
<uni-icons type="arrowleft" color="#fff" size="22" />
|
|
<view>景区</view>
|
|
|
|
</view>
|
|
</block>
|
|
<view class="input-view">
|
|
<uni-icons class="input-uni-icon" @click="search()" type="search" size="22" color="#666666" />
|
|
<input class="nav-bar-input" type="text" @input="write" color="#666666" placeholder="输入景区名称" @confirm="confirm" confirm-type="search">
|
|
</view>
|
|
</uni-nav-bar> -->
|
|
<view class="aml_30 amr_30 wc_sbox">
|
|
<view class="dy_fx an_sch">
|
|
<view class="fx_1">
|
|
<input @input="write" type="text" class="an_sch_ipt" @confirm="confirm" confirm-type="search" color="#666666"
|
|
placeholder-style="color:#999" placeholder="输入景区名称" />
|
|
</view>
|
|
<view class="an_sch_img" @click="search()">
|
|
<image src="/subPageB/static/img/icon-search.png" class="ac_size_1"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="category">
|
|
<view class="search-container">
|
|
<view class="search-tip-bar">
|
|
<view @tap="changeRegionPanel" :class="[searchItemClass, selectedParam.hiddenRegionPanel ? 'active' : '']"
|
|
data-type="hiddenRegionPanel">{{ regionname }}</view>
|
|
|
|
<view @tap="changePanel" :class="[searchItemClass, selectedParam.hiddenSortPanel ? 'active' : '']"
|
|
data-type="hiddenSortPanel">智能排序</view>
|
|
<view @tap="changePanel" :class="[searchItemClass, selectedParam.hiddenAttributePanel ? 'active' : '']"
|
|
data-type="hiddenAttributePanel">分类筛选</view>
|
|
</view>
|
|
</view>
|
|
<view class="category-wrapper" v-if="catrgoryList.length > 0" style="top: 110rpx">
|
|
<!-- 左边导航 -->
|
|
<scroll-view v-if="leftScollShow" scrollY="true" class="scroll-view" scroll-with-animation="true"
|
|
:scroll-top="left_scroll">
|
|
<view class="left-content">
|
|
<view class="title-content" :class="select_index === index ? 'onSelected' : ''"
|
|
v-for="(title, index) in catrgoryList" :key="title.id" @tap="choose(index)">
|
|
{{ title.name }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 右边内容 -->
|
|
<scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true" :scroll-top="right_scroll"
|
|
@scroll="myscroll">
|
|
<view class="right-content">
|
|
<!-- 产品区 -->
|
|
<view class="product-wrapper">
|
|
<view class="category-item">
|
|
<view class="category-content" v-if="scenicList.content.length>0">
|
|
<view class="product-item relative" v-for="(p_item, p_index) in scenicList.content"
|
|
@tap="gotoDetail(p_item.cid)">
|
|
<view class="lq_recommend" v-if="p_item.isrecommend=='YES'">
|
|
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/tuijian.png" mode="widthFix"></image>
|
|
</view>
|
|
<view style="width:200rpx;flex:0 0 200rpx; height: 150rpx;overflow: hidden;"><image mode="aspectFill" style="width:100%; height: 200rpx;" :src="p_item.thumb"></image></view>
|
|
<view class="m-content">
|
|
<view class="product-title1">{{ p_item.cname }}</view>
|
|
<view class="product-title m-blue border blue-border">{{
|
|
p_item.slevel
|
|
}}</view>
|
|
<view class="product-con"><image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon_address.png" mode="widthFix"></image>{{ p_item.address }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="scroll-empty" v-else>
|
|
<image class="empty-icon" src="http://www.mescroll.com/img/mescroll-empty.png?v=1" mode="widthFix"></image>
|
|
<view class="empty-tip">~ 暂无相关数据 ~</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="sort-page" :hidden="selectedParam.hiddenSortPanel">
|
|
<view class="sort-group">
|
|
<view @tap="selected" :class="[
|
|
pageClass.sortItemClass,
|
|
selectedParam.sortId == item.id ? 'sort-item-active' : '',
|
|
]" data-panel="hiddenSortPanel" data-type="sortId" :data-id="item.id" v-for="(item, index) in filter.sort"
|
|
:key="index">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sort-page" :hidden="selectedParam.hiddenRegionPanel">
|
|
<view class="sort-group">
|
|
<view @tap="regionSelected" :class="[
|
|
pageClass.sortItemClass,
|
|
selectedParam.bm == item.bm ? 'sort-item-active' : '',
|
|
]" data-panel="hiddenRegionPanel" :data-name="item.title" data-type="bm" :data-id="item.bm"
|
|
v-for="(item, index) in regionList" :key="index">
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="filter-page" :hidden="selectedParam.hiddenAttributePanel">
|
|
<view class="filter-box">
|
|
<scroll-view scrollY class="filter-hd">
|
|
<view @tap="parentLevel" :class="[
|
|
pageClass.filterHdItemClass,
|
|
parentLevelItem == 'attribute_' + items.type
|
|
? 'filter-hd-item-active'
|
|
: '',
|
|
]" :data-parentLevelItem="'attribute_' + items.type" v-for="(items, index) in filter.attribute"
|
|
:key="index">
|
|
{{ items.name }}
|
|
</view>
|
|
</scroll-view>
|
|
<scroll-view scrollY class="filter-bd">
|
|
<view class="filter-group" v-if="parentLevelItem == 'attribute_' + items.type"
|
|
v-for="(items, index) in filter.attribute" :key="items.dicnum">
|
|
<view @tap="childLevel" :class="[
|
|
pageClass.filterBdItem,
|
|
selectedFIlter['attribute_' + items.type] == 0
|
|
? 'filter-bd-item-active'
|
|
: '',
|
|
]" data-id="0" :data-type="'attribute_' + items.type">
|
|
全部
|
|
</view>
|
|
<view @tap="childLevel" :class="[
|
|
pageClass.filterBdItem,
|
|
selectedFIlter['attribute_' + items.type] == item.dicnum
|
|
? 'filter-bd-item-active'
|
|
: '',
|
|
]" :data-id="item.dicnum" :data-type="'attribute_' + items.type"
|
|
v-for="(item, childIndex) in items.child" :key="childIndex">
|
|
{{ item.dicname }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="control-bar-block">
|
|
<view @tap="resetFilter" class="control-back-btn">恢复默认</view>
|
|
<view @tap="confirmClick" class="control-confirm-btn">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
|
|
import uniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
|
|
import uniSection from "@/components/uni-section/uni-section.vue";
|
|
import uniStatusBar from "@/components/uni-status-bar/uni-status-bar.vue";
|
|
export default {
|
|
components: {
|
|
uniIcons,
|
|
uniNavBar,
|
|
uniSection,
|
|
uniStatusBar,
|
|
},
|
|
data() {
|
|
return {
|
|
windows_height: 0, //屏幕高度
|
|
filter: {
|
|
sort: [],
|
|
attribute: [],
|
|
},
|
|
swiperList: [],
|
|
catrgoryList: [],
|
|
scenicList: [],
|
|
select_index: 0,
|
|
right_height: [], //右侧每个内容的高度集合
|
|
right_scroll: 0, //右侧的滑动值
|
|
left_height: 0, //左侧总高度
|
|
left_scroll: 0, //左侧滑动值
|
|
last: 0,
|
|
leftScollShow: false,
|
|
regionList: [],
|
|
regionname: "全部",
|
|
searchItemClass: "search-tip-item",
|
|
pageClass: {
|
|
sortItemClass: "sort-item",
|
|
filterHdItemClass: "filter-hd-item",
|
|
filterBdItem: "filter-bd-item",
|
|
},
|
|
searchTitle: "",
|
|
parentLevelItem: "attribute_stype",
|
|
defaultFilter: {
|
|
attribute_stype: 0,
|
|
attribute_slevel: 0,
|
|
},
|
|
selectedFIlterBak: {
|
|
attribute_stype: 0,
|
|
attribute_slevel: 0,
|
|
},
|
|
selectedFIlter: {
|
|
attribute_stype: 0,
|
|
attribute_slevel: 0,
|
|
},
|
|
selectedParam: {
|
|
sortId: 1,
|
|
bm: "",
|
|
hiddenSortPanel: !0,
|
|
hiddenAttributePanel: !0,
|
|
hiddenRegionPanel: !0,
|
|
},
|
|
netType: true,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
var that = this;
|
|
this.$util.getNetworkType(
|
|
function (res) {
|
|
if (res.networkType === "none") {
|
|
uni.showToast({
|
|
title: that.$param.netMsg,
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
that.netType = false;
|
|
}
|
|
},
|
|
function () {
|
|
uni.showToast({
|
|
title: that.$param.netMsg,
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
that.netType = false;
|
|
}
|
|
);
|
|
if (!that.netType) {
|
|
return;
|
|
}
|
|
this.$util.hideLoadingByTime();
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
});
|
|
// this.init(options.id);
|
|
this.get_attribute();
|
|
this.getRedisRegion();
|
|
this.getRedisData(options.id);
|
|
this.windows_height = uni.getSystemInfoSync().windowHeight;
|
|
setTimeout(function () {
|
|
uni.hideLoading();
|
|
}, 500);
|
|
that.$util.saveOperatorLog(that, "FUN", "景区");
|
|
},
|
|
methods: {
|
|
write: function (e) {
|
|
this.searchTitle = e.detail.value;
|
|
},
|
|
search: function () {
|
|
this.init(null);
|
|
},
|
|
back: function (e) {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
confirm: function (e) {
|
|
this.searchTitle = e.detail.value;
|
|
this.init(null);
|
|
},
|
|
getRedisData: function (id) {
|
|
var data = {
|
|
key: this.$param.userkey + "_scenic_list",
|
|
};
|
|
this.$Request.post(this.$config.getRedisData, data).then((res) => {
|
|
if (res.status == 200 && res.data.error == 0) {
|
|
var list = [];
|
|
list = res.data.list;
|
|
|
|
var index = 0;
|
|
for (let i = 0; i < list.length; i++) {
|
|
var paddingList = list[i].content;
|
|
for (let j = 0; j < paddingList.length; j++) {
|
|
paddingList[j].thumb = this.$config.ROOTPATH + paddingList[j].thumb;
|
|
}
|
|
list[i].logo = this.$config.ROOTPATH + list[i].logo;
|
|
if (id != null && id != "") {
|
|
if (list[i].id == id) {
|
|
index = i;
|
|
this.select_index = i;
|
|
}
|
|
}
|
|
}
|
|
this.catrgoryList = list;
|
|
this.scenicList = list[index];
|
|
|
|
this.$nextTick(() => {
|
|
this.getHeightList();
|
|
});
|
|
} else {
|
|
this.init(id);
|
|
}
|
|
});
|
|
},
|
|
init(id) {
|
|
var type = this.selectedFIlterBak["attribute_stype"];
|
|
var level = this.selectedFIlterBak["attribute_slevel"];
|
|
var region = this.selectedParam.bm;
|
|
//var res = {"data":{"error":0,"data":{"banner":[{"Imgid":10,"src":"http://dummyimage.com/530x180"},{"Imgid":11,"src":"http://dummyimage.com/530x180"}],"list":[{"id":0,"name":"选向教较","content":[{"cid":0,"cname":"日复己","thumb":"http://dummyimage.com/100x100"},{"cid":1,"cname":"更层","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"机团则","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]}]}},"statusCode":200,"header":{"content-type":"application/json; charset=utf-8"},"errMsg":"request:ok"};
|
|
//var res = {"data":{"error":0,"data":{"banner":[{"Imgid":10,"src":"http://dummyimage.com/530x180"},{"Imgid":11,"src":"http://dummyimage.com/530x180"}],"list":[{"id":0,"name":"正定","content":[{"cid":0,"cname":"日复己","thumb":"http://dummyimage.com/250x100"},{"cid":1,"cname":"更层","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"鹿泉","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"平山","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"井陉","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]}]}},"statusCode":200,"header":{"content-type":"application/json; charset=utf-8"},"errMsg":"request:ok"};
|
|
//var res = {"data":{"error":0,"data":{"banner":[{"Imgid":10,"src":"http://dummyimage.com/530x180"},{"Imgid":11,"src":"http://dummyimage.com/530x180"}],"list":[{"id":0,"name":"正定","logo":"http://dummyimage.com/530x180","content":[{"cid":0,"cname":"日复己","thumb":"http://dummyimage.com/250x100"},{"cid":1,"cname":"更层","thumb":"http://dummyimage.com/100x100"}]},{"id":1,"name":"鹿泉","logo":"http://dummyimage.com/530x180","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]},{"id":2,"name":"平山","logo":"http://dummyimage.com/530x180","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]},{"id":3,"name":"井陉","logo":"http://dummyimage.com/530x180","content":[{"cid":8,"cname":"群更论","thumb":"http://dummyimage.com/100x100"},{"cid":9,"cname":"院广认","thumb":"http://dummyimage.com/100x100"}]}]}},"statusCode":200,"header":{"content-type":"application/json; charset=utf-8"},"errMsg":"request:ok"};
|
|
var data = {
|
|
type: this.$param.mddType,
|
|
userkey: this.$param.userkey,
|
|
title: this.searchTitle,
|
|
sort: this.selectedParam.sortId,
|
|
areacode: region,
|
|
slevel: null == level || 0 == level ? "" : level,
|
|
stype: null == type || 0 == type ? "" : type,
|
|
lng: this.$param.clng,
|
|
lat: this.$param.clat,
|
|
};
|
|
this.$Request.post(this.$config.sceniclist, data).then((res) => {
|
|
if (res.data.error === 0) {
|
|
var list = res.data.list;
|
|
var index = 0;
|
|
for (let i = 0; i < list.length; i++) {
|
|
var paddingList = list[i].content;
|
|
for (let j = 0; j < paddingList.length; j++) {
|
|
paddingList[j].thumb = this.$config.ROOTPATH + paddingList[j].thumb;
|
|
}
|
|
list[i].logo = this.$config.ROOTPATH + list[i].logo;
|
|
if (id != null && id != "") {
|
|
if (list[i].id == id) {
|
|
index = i;
|
|
this.select_index = i;
|
|
}
|
|
}
|
|
}
|
|
this.catrgoryList = list;
|
|
this.scenicList = list[index];
|
|
this.$nextTick(() => {
|
|
this.getHeightList();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
getHeightList() {
|
|
let _this = this;
|
|
let selectorQuery = uni.createSelectorQuery();
|
|
selectorQuery.select(".left-content").boundingClientRect(function (rects) {
|
|
_this.left_height = "30"; //rects.height;
|
|
});
|
|
selectorQuery
|
|
.selectAll(".category-item")
|
|
.boundingClientRect(function (rects) {
|
|
_this.right_height = rects.map((item) => item.top);
|
|
})
|
|
.exec();
|
|
},
|
|
choose(index) {
|
|
if (this.select_index === index) {
|
|
return;
|
|
}
|
|
this.scenicList = this.catrgoryList[index];
|
|
this.select_index = index;
|
|
// 加入防抖
|
|
if (this.timeout) {
|
|
clearTimeout(this.timeout); //清除计时器
|
|
}
|
|
this.timeout = setTimeout(() => {
|
|
this.right_scroll = this.right_height[index] - 110;
|
|
}, 300);
|
|
},
|
|
myscroll(e) {
|
|
//引入节流
|
|
let right_content_height = e.detail.scrollHeight - this.windows_height;
|
|
if (right_content_height == e.detail.scrollTop) {
|
|
return;
|
|
}
|
|
let scroll_top = e.detail.scrollTop + 110; //110是banner图的高度
|
|
//判断当前的scrollTop在哪个区间内;
|
|
let now = +new Date();
|
|
if (now - this.last > 100) {
|
|
this.last = now;
|
|
// let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top && scroll_top < arr[index + 1]);
|
|
// this.select_index = active_index;
|
|
// if (this.left_height - this.windows_height) {
|
|
// //如果有超出部分
|
|
// let diff = this.left_height - this.windows_height
|
|
// this.left_scroll = Math.round((active_index * diff) / (this.catrgoryList.length - 1))
|
|
// }
|
|
}
|
|
},
|
|
gotoDetail(e) {
|
|
console.log(e);
|
|
const list = JSON.stringify(this.scenicList.content)
|
|
console.log("list",list)
|
|
uni.navigateTo({
|
|
url: `/subPageA/scenic/scenicdetial/scenicdetial?guid=` + e + `&list=`+list,
|
|
});
|
|
},
|
|
getRedisRegion: function () {
|
|
var that = this;
|
|
var data = {
|
|
key: that.$param.userkey + "_mdd_list",
|
|
};
|
|
that.$Request.post(that.$config.getRedisData, data).then((res) => {
|
|
if (res.status == 200) {
|
|
that.regionList = res.data.mddList;
|
|
var all = {
|
|
bm: "",
|
|
title: "全部",
|
|
};
|
|
that.regionList.unshift(all);
|
|
for (var i = 0; i < that.regionList.length; i++) {
|
|
if (that.regionList[i].bm == that.selectedParam.bm) {
|
|
that.regionname = that.regionList[i].title;
|
|
}
|
|
}
|
|
} else {
|
|
that.getRegion();
|
|
}
|
|
});
|
|
},
|
|
|
|
resetFilter: function () {
|
|
this.selectedFIlter = {
|
|
//this.defaultFilter;
|
|
attribute_stype: 0,
|
|
attribute_slevel: 0,
|
|
};
|
|
},
|
|
confirmClick: function () {
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
});
|
|
//设置选中的筛选项
|
|
var selectedParam = this.selectedParam;
|
|
(selectedParam.hiddenAttributePanel = true),
|
|
(this.selectedFIlterBak = this.selectedFIlter);
|
|
this.parentLevelItem = "attribute_stype";
|
|
this.selectedParam = selectedParam;
|
|
this.init(null);
|
|
setTimeout(function () {
|
|
uni.hideLoading();
|
|
}, 500);
|
|
},
|
|
parentLevel: function (t) {
|
|
var currentTarget = t.currentTarget.dataset;
|
|
//console.log("aaaaaaaaaaaaaaaaa"+a.parentlevelitem);
|
|
this.parentLevelItem = currentTarget.parentlevelitem;
|
|
},
|
|
childLevel: function (t) {
|
|
var a = t.currentTarget.dataset,
|
|
e = this.selectedFIlter;
|
|
this.selectedFIlterBak = e;
|
|
e[a.type] = a.id;
|
|
this.selectedFIlter = e;
|
|
},
|
|
getRegion: function () {
|
|
var that = this;
|
|
var url = this.$config.getMessageInfoFormFilter;
|
|
var data = {
|
|
type: this.$param.mddType,
|
|
userkey: this.$param.userkey,
|
|
pageSize: 100,
|
|
sort: "2",
|
|
};
|
|
this.$Request.post(url, data).then((res) => {
|
|
var flag = that.$util.isSuccess(res);
|
|
if (!flag) {
|
|
return;
|
|
}
|
|
this.regionList = res.data;
|
|
for (var i = 0; i < this.regionList.length; i++) {
|
|
if (this.regionList[i].bm == this.selectedParam.bm) {
|
|
this.regionname = this.regionList[i].title;
|
|
}
|
|
}
|
|
this.regionList.unshift({
|
|
title: "全部",
|
|
bm: "",
|
|
});
|
|
});
|
|
},
|
|
get_attribute: function () {
|
|
var that = this;
|
|
var url = this.$config.getCondition;
|
|
var data = {
|
|
type: "scenic",
|
|
userkey: this.$param.userkey,
|
|
condition: this.$param.scenicType,
|
|
condition2: this.$param.scenicLevel,
|
|
};
|
|
this.$Request.post(url, data).then((res) => {
|
|
var flag = that.$util.isSuccess(res);
|
|
if (!flag) {
|
|
return;
|
|
}
|
|
this.filter = res.data;
|
|
});
|
|
},
|
|
selected: function (event) {
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
});
|
|
var dataset = event.currentTarget.dataset;
|
|
var param = this.selectedParam;
|
|
|
|
param[dataset.type] = dataset.id;
|
|
param.hiddenSortPanel = !0;
|
|
//console.log(dataset.id);
|
|
this.selectedParam = param;
|
|
this.init(null);
|
|
setTimeout(function () {
|
|
uni.hideLoading();
|
|
}, 500);
|
|
},
|
|
regionSelected: function (event) {
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
});
|
|
var dataset = event.currentTarget.dataset;
|
|
var param = this.selectedParam;
|
|
param[dataset.type] = dataset.id;
|
|
param.hiddenRegionPanel = !0;
|
|
//console.log(dataset.id);
|
|
this.selectedParam = param;
|
|
this.regionname = dataset.name;
|
|
this.init(null);
|
|
setTimeout(function () {
|
|
uni.hideLoading();
|
|
}, 500);
|
|
},
|
|
changePanel: function (event) {
|
|
var dataSet = event.currentTarget.dataset,
|
|
selectedParam = this.selectedParam;
|
|
"hiddenSortPanel" == dataSet.type
|
|
? ((selectedParam.hiddenAttributePanel = !0),
|
|
(selectedParam.hiddenRegionPanel = !0))
|
|
: (selectedParam.hiddenSortPanel = !0),
|
|
(selectedParam[dataSet.type] = !selectedParam[dataSet.type]),
|
|
(this.selectedParam = selectedParam);
|
|
},
|
|
changeRegionPanel: function (event) {
|
|
var dataSet = event.currentTarget.dataset,
|
|
selectedParam = this.selectedParam;
|
|
if ("hiddenRegionPanel" == dataSet.type) {
|
|
selectedParam.hiddenAttributePanel = !0;
|
|
selectedParam.hiddenSortPanel = !0;
|
|
} else {
|
|
selectedParam.hiddenRegionPanel = !0;
|
|
}
|
|
(selectedParam[dataSet.type] = !selectedParam[dataSet.type]),
|
|
(this.selectedParam = selectedParam);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
@import "/static/css/common.css";
|
|
|
|
page {
|
|
background: #fff;
|
|
}
|
|
|
|
.search-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
z-index: 3;
|
|
}
|
|
.search-tip-bar {
|
|
display: flex;
|
|
height: 60rpx;
|
|
border-bottom: 2rpx solid #e5e5e5;
|
|
justify-content: space-between;
|
|
}
|
|
.search-tip-item {
|
|
width: 33.333333%;
|
|
height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
.search-tip-item:after {
|
|
display: inline-block;
|
|
margin: -2rpx 0 0 6rpx;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 8rpx solid #666;
|
|
border-right: 8rpx solid transparent;
|
|
border-left: 8rpx solid transparent;
|
|
content: "";
|
|
vertical-align: middle;
|
|
}
|
|
.search-tip-item.active:after {
|
|
border-top: 0;
|
|
border-right: 8rpx solid transparent;
|
|
border-bottom: 8rpx solid #666;
|
|
border-left: 8rpx solid transparent;
|
|
}
|
|
.scroll-view {
|
|
position: absolute;
|
|
top: 60rpx;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 4;
|
|
}
|
|
.list-container {
|
|
width: 100%;
|
|
background: #fff;
|
|
}
|
|
.list-wrap {
|
|
box-sizing: border-box;
|
|
padding: 0 30rpx;
|
|
width: 100%;
|
|
border-top: 1px solid #e1e1e1;
|
|
}
|
|
.list-item {
|
|
display: flex;
|
|
padding: 30rpx 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.list-item .item-pic {
|
|
width: 240rpx;
|
|
height: 180rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
.list-item .item-info {
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
}
|
|
.list-item .item-info .title {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
max-height: 76rpx;
|
|
text-overflow: ellipsis;
|
|
font-size: 32rpx;
|
|
line-height: 38rpx;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.list-item .item-info .attr .tip {
|
|
display: inline-block;
|
|
margin-right: 12rpx;
|
|
padding: 0 5rpx;
|
|
height: 32rpx;
|
|
border: 1rpx solid #ff7362;
|
|
border-radius: 5rpx;
|
|
color: #ff7362;
|
|
font-size: 20rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
.list-item .item-info .data {
|
|
display: flex;
|
|
margin-top: 10rpx;
|
|
justify-content: space-between;
|
|
}
|
|
.list-item .item-info .data .myd,
|
|
.list-item .item-info .data .sell {
|
|
color: #05a9f0;
|
|
font-size: 26rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
.list-item .item-info .data .myd1,
|
|
.list-item .item-info .data .sell {
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
.list-item .item-info .data .price {
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
.list-item .item-info .data .price .num {
|
|
color: #ff4f32;
|
|
font-size: 32rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
.sort-page {
|
|
position: absolute;
|
|
top: 210rpx !important;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.sort-group {
|
|
background: #fff;
|
|
}
|
|
.sort-item {
|
|
position: relative;
|
|
padding: 0 30rpx;
|
|
height: 78rpx;
|
|
border-bottom: 2rpx solid #e5e5e5;
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
line-height: 78rpx;
|
|
}
|
|
.sort-item-active {
|
|
color: #1677ff;
|
|
}
|
|
.sort-item-active:after {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20rpx;
|
|
display: inline-block;
|
|
margin-top: -14rpx;
|
|
width: 22rpx;
|
|
height: 18rpx;
|
|
background: url("") center no-repeat;
|
|
background-size: contain;
|
|
content: "";
|
|
}
|
|
.filter-page {
|
|
position: absolute;
|
|
top: 210rpx !important;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
background: #fff;
|
|
height: auto;
|
|
}
|
|
.filter-box {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 108rpx;
|
|
left: 0;
|
|
display: -webkit-box;
|
|
}
|
|
.filter-hd {
|
|
width: 220rpx;
|
|
height: 100%;
|
|
background: #f2f6f9;
|
|
}
|
|
.filter-hd-item {
|
|
position: relative;
|
|
padding: 0 20rpx;
|
|
height: 80rpx;
|
|
font-size: 28rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
.filter-bd-item-active,
|
|
.filter-hd-item-active {
|
|
background: #fff;
|
|
color: #1677ff;
|
|
}
|
|
.filter-bd-item-active:after {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20rpx;
|
|
display: inline-block;
|
|
margin-top: -14rpx;
|
|
width: 22rpx;
|
|
height: 18rpx;
|
|
background: url("") center no-repeat;
|
|
background-size: contain;
|
|
content: "";
|
|
}
|
|
.filter-bd {
|
|
padding: 0 20rpx;
|
|
height: 100%;
|
|
-webkit-box-flex: 1;
|
|
}
|
|
.filter-bd-item {
|
|
position: relative;
|
|
padding: 0 20rpx;
|
|
height: 78rpx;
|
|
border-bottom: 2rpx solid #e5e5e5;
|
|
font-size: 28rpx;
|
|
line-height: 78rpx;
|
|
}
|
|
.control-bar-block {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: -webkit-box;
|
|
padding: 14rpx 20rpx;
|
|
height: 80rpx;
|
|
background: #fafafa;
|
|
}
|
|
.control-back-btn {
|
|
margin-right: 20rpx;
|
|
width: 170rpx;
|
|
height: 76rpx;
|
|
border: 2rpx solid #b8b8b8;
|
|
border-radius: 10rpx;
|
|
color: #8a8a8a;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
line-height: 76rpx;
|
|
}
|
|
.control-confirm-btn {
|
|
height: 80rpx;
|
|
border-radius: 10rpx;
|
|
background: #1677ff;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
-webkit-box-flex: 1;
|
|
}
|
|
|
|
.category {
|
|
.category-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: absolute;
|
|
top: 80rpx;
|
|
bottom: 0;
|
|
z-index: 4;
|
|
margin-top: 50px;
|
|
|
|
.left-wrapper {
|
|
width: 180rpx;
|
|
flex: 0 0 180rpx;
|
|
background-color: #f6f6f6;
|
|
|
|
.left-content {
|
|
.title-content {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 25rpx;
|
|
border-bottom: 1px solid #dedede;
|
|
cursor: pointer;
|
|
color: #666;
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
&.onSelected {
|
|
background-color: #fff;
|
|
position: relative;
|
|
color: #18c1b0;
|
|
font-weight: 700;
|
|
font-size: 28rpx;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 10rpx;
|
|
height: 100%;
|
|
background: linear-gradient(124deg, #18c1b0 0%, #44c118 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 景区列表 图片背景色块填充*/
|
|
.category-content .product-item:nth-child(4n) .product-img {
|
|
background-color: #f2dedc !important;
|
|
}
|
|
|
|
.category-content .product-item:nth-child(4n + 1) .product-img {
|
|
background-color: #e6f2dc !important;
|
|
}
|
|
|
|
.category-content .product-item:nth-child(4n + 2) .product-img {
|
|
background-color: #dcf0f2 !important;
|
|
}
|
|
|
|
.category-content .product-item:nth-child(4n + 3) .product-img {
|
|
background-color: #e9dcf2 !important;
|
|
}
|
|
|
|
.right-wrapper {
|
|
flex: 1;
|
|
|
|
.right-content {
|
|
width: 96%;
|
|
margin: 0 2%;
|
|
// border-left: 1rpx solid #efefef;
|
|
box-sizing: border-box;
|
|
|
|
.banner-wrapper {
|
|
margin: 0 20rpx;
|
|
padding: 0rpx 2%;
|
|
padding-top: 30rpx;
|
|
display: flex;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1rpx solid #dedede;
|
|
position: relative;
|
|
|
|
.category-title2 {
|
|
width: 46%;
|
|
|
|
.swiper-img {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
border-radius: 14rpx;
|
|
// 图片背景色块填充
|
|
background: #dcf0f2;
|
|
}
|
|
}
|
|
|
|
.category-title3 {
|
|
width: 49%;
|
|
padding: 10rpx 20rpx;
|
|
|
|
.category-title4 {
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
padding-bottom: 10rpx;
|
|
padding-top: 14rpx;
|
|
}
|
|
|
|
.category-title5 {
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
.category-img {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
width: 12rpx;
|
|
height: 24rpx;
|
|
margin-top: -24rpx;
|
|
|
|
.swiper-img {
|
|
width: 100%;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-content {
|
|
width: 100%;
|
|
height: 180rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.swiper-item {
|
|
.swiper-img {
|
|
width: 100%;
|
|
height: 180rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-wrapper {
|
|
.category-item {
|
|
.category-title {
|
|
height: 60rpx;
|
|
font-size: 26rpx;
|
|
line-height: 60rpx;
|
|
font-weight: 500;
|
|
padding-left: 20rpx;
|
|
color: #000;
|
|
}
|
|
|
|
.category-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-flow: wrap;
|
|
padding-top: 30rpx;
|
|
margin: 0 20rpx;
|
|
|
|
justify-content: space-between;
|
|
.product-item {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: start;
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
.product-img {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 14rpx;
|
|
}
|
|
|
|
.m-content {
|
|
overflow: hidden;
|
|
flex:1;
|
|
margin-left: 15rpx;
|
|
|
|
.product-title1 {
|
|
font-size: 32rpx;
|
|
padding-bottom: 12rpx;
|
|
padding-top: 10rpx;
|
|
}
|
|
.product-title {
|
|
width: fit-content;
|
|
font-size: 24rpx;
|
|
padding: 3rpx 10rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.product-con{ font-size: 28rpx;color: #999;
|
|
height: 40rpx;
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
image{width: 24rpx;margin-right: 8rpx;}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|