CjyTravel/subPageA/food/foodlist/foodlist.vue

<template>
	<view class="v-pages v-pages-bg">
		<view class="v-pages-search">
			<view class="search_box row flex-align-center">
				<view class="col">
					<input @input="write" type="text" class="input" @confirm="confirm" confirm-type="search"
						placeholder-style="color:#999" placeholder="搜索美食" />
				</view>
				<view class="btn_img" @click="search()">
					<image src="/subPageB/static/img/icon-search.png" class="img"></image>
				</view>
			</view>

			<view class="dy_fx amt_30">
				<view class="search-tip-bar">
					<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>
		<scroll-view @scroll="onReachScroll" @bindscrolltolower="lower" class="scroll-view" :scroll-top="topNum"
			scrollY="true">
			<view class="v-pages-list" v-if="shangjiaList.length>0">
				<view class="list_item vertical circle" v-for="(item,index) in shangjiaList" :key="index"
					@click="goToFoodDetail(item.guid,item.bm)">
					<view class="item_recommend normal" v-if="item.isrecommend=='YES'">
										热门推荐
					</view>
					<view class="item_image">
						<image :src="rootPaht+item.imagelist[0]" mode="aspectFill" class="img"></image>
					</view>
					<view class="item_content">
						<view class="content-name">{{item.title}}</view>
						<view class="content-desc">{{item.content}}</view>
					</view>
				</view>
				<view v-if="isData" :style="chaType" class="data-is-bottom" @tap="getFoodList(selectcondition.bm,true)">
					+ 查看更多
				</view>
				<view v-if="!isData" class="data-is-bottom">{{this.$param.pageMsg}}</view>
			</view>
			<view class="scroll-empty" v-else>
				<image class="empty-icon" src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/no-data.png" mode="widthFix">
				</image>
				<view class="empty-tip">~ 暂无相关数据 ~</view>
			</view>
		</scroll-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="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>
</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 {
				showSwiper: false,
				// 轮播图
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,

				tabHeight: 350,
				searchItemClass: "search-tip-item",
				pageClass: {
					sortItemClass: "sort-item",
					filterHdItemClass: "filter-hd-item",
					filterBdItem: "filter-bd-item"
				},
				pageClass2: {
					sortItemClass: "sort-item2",
				},
				priceSymbol: "",
				destinationBak: "all",
				destination: "all",
				filter: {
					sort: [],
					attribute: []
				},
				regionList: [],
				parentLevelItem: "attribute_ftype",
				defaultFilter: {
					attribute_ftype: 0
				},
				latitude: 0,
				longitude: 0,
				selectedFIlterBak: {
					attribute_ftype: 0
				},
				selectedFIlter: {
					attribute_ftype: 0
				},
				selectedParam: {
					sortId: 1,
					bm: "",
					hiddenSortPanel: !0,
					hiddenAttributePanel: !0,
					hiddenRegionPanel: !0,
				},
				param: {
					page: 1,
					noData: !1,
					loading: !1,
					finished: !1
				},
				foodlist: [],
				shangjiaList: [],
				topNum: 0,
				rootPaht: this.$config.ROOTPATH,
				selectcondition: {
					bm: "",
					sortId: 1,
					type: ""
				},
				regionname: "区域",
				width: 280,
				isData: true,
				pageSize: 10,
				searchTitle: "",
				chaType: "display: none;",
				netType: true
			}
		},
		onLoad(option) {
			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.initData();
			this.get_attribute();
			var region = option.region;
			if (region != null && region != '') {
				this.selectcondition.bm = region;
				this.get_data();
			} else {
				this.getData();
			}
			this.getRedisRegion() /* this.requestLocation(), this.get_data()*/ ;
			that.$util.saveOperatorLog(that, "FUN", "美食");
		},
		onShow() {
			this.destinationBak != this.destination && (this.initData(), this.get_data());
		},
		methods: {
			write: function(e) {
				this.searchTitle = e.detail.value;
			},
			search: function() {
				this.chaType = 'display: none;';
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.initData();
				this.get_data();
			},
			back: function(e) {
				uni.navigateBack({
					delta: 1
				})
			},
			confirm: function(e) {
				this.chaType = 'display: none;';
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.searchTitle = e.detail.value;
				this.initData();
				this.get_data();
			},
			getData: function() {
				var that = this;
				var data = {
					"key": this.$param.userkey + "_food_list"
				}
				that.$Request.post(that.$config.getRedisData, data).then(res => {
					if (res.status == 200) {
						this.param.page += 1;
						var fd = res.data.tuijian;
						for (let i = 0; i < fd.length; i++) {
							fd[i].logo = that.$config.ROOTPATH + fd[i].logo;
						}
						that.width = "width:" + (fd.length * 90) + "%";
						that.foodList = fd;
						if (fd.length > 0) {
							that.showSwiper = true
						} else {
							that.showSwiper = false
						}
						var sd = res.data.foodList;
						for (let i = 0; i < sd.length; i++) {
							sd[i].logo = that.$config.ROOTPATH + sd[i].logo;
						}
						that.shangjiaList = sd;
						if (sd.length < that.pageSize) {
							that.isData = false;
						}
						uni.hideLoading();
						that.chaType = "";
					} else {
						that.get_data();
					}
				})
			},
			initData: function() {
				this.chaType = 'display: none;';
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				var param = {};
				param.page = 1;
				param.noData = false;
				param.finished = false;
				this.isData = true;
				this.param = param;
				//this.foodList = [];
				this.shangjiaList = [];
				this.destinationBak = this.destination;
			},
			selected: function(event) {
				this.initData();
				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.selectcondition.sortId = dataset.id;
				this.get_data();
			},
			regionSelected: function(event) {
				this.initData();
				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.selectcondition.bm = this.selectedParam.bm;
				this.regionname = dataset.name;
				this.get_data();
			},
			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;
			},

			resetFilter: function() {
				this.selectedFIlter = {
					attribute_ftype: 0
				}
			},
			confirmClick: function() {
				this.initData();
				//设置选中的筛选项
				var selectedParam = this.selectedParam;
				selectedParam.hiddenAttributePanel = true,
					this.selectedFIlterBak = this.selectedFIlter;
				this.parentLevelItem = "attribute_ftype";
				this.selectedParam = selectedParam;

				this.get_data();
			},
			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;
				this.selectcondition.type = a.id;

			},
			getRedisRegion: function() {
				var data = {
					key: this.$param.userkey + '_mdd_list'
				};
				this.$Request.post(this.$config.getRedisData, data).then(res => {
					if (res.status == 200) {
						this.regionList = res.data.mddList;
						var all = {
							bm: "",
							title: "全部"
						}
						this.regionList.unshift(all);
						for (var i = 0; i < this.regionList.length; i++) {
							if (this.regionList[i].bm == this.selectcondition.bm) {
								this.regionname = this.regionList[i].title;
							}
						}
					} else {
						this.getRegion();
					}
				});
			},
			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;
					var all = {
						bm: "",
						title: "全部"
					}
					this.regionList.unshift(all);
					for (var i = 0; i < this.regionList.length; i++) {
						if (this.regionList[i].bm == this.selectcondition.bm) {
							this.regionname = this.regionList[i].title;
						}
					}
				});
			},
			get_attribute: function() {
				var that = this;
				var url = this.$config.getCondition;
				var data = {
					type: 'food',
					userkey: this.$param.userkey,
					condition: this.$param.foodFLType,
				};
				this.$Request.post(url, data).then(res => {
					var flag = that.$util.isSuccess(res);
					if (!flag) {
						return;
					}
					this.filter = res.data;
				});
			},
			onReachScroll: function(t) {
				//console.log(t);
				// t.detail.scrollTop > 100 ? this.floorstatus = true : this.floorstatus = false;
				// var a = this.param;

				// a.noData || a.finished || a.loading || this.get_data();
			},
			get_data: function() {
				var that = this;
				/* var url = this.$config.getMessageInfoFormFilter;
				var data = {
					type: this.$param.foodType,
					userkey: this.$param.userkey,
					pageSize: 100,
					region: this.selectcondition.bm,
					isrecommend: "YES",
					sort: "2"
					//title: this.searchTitle
				};
				this.$Request.post(url, data).then(res => {
					var flag = that.$util.isSuccess(res);
					if (!flag) {
						return;
					}
					var data = res.data;
					for (let i = 0; i < data.length; i++) {
						data[i].logo = that.$config.ROOTPATH + data[i].logo;
					}
					that.width = "width:" + (data.length * 90) + "%";
					that.foodList = data; */
				that.getFoodList(that.selectcondition.bm, false);
				/* }); */
			},
			getFoodList(region, flag) {
				var type = this.selectedFIlterBak['attribute_ftype'];
				if (type != 0) {
					var sub_column2 = "sub_column2&" + type + "&select"
				}
				var that = this;
				var url = this.$config.getMessageInfoFormFilter_two;
				var data = {
					type: this.$param.foodType,
					userkey: this.$param.userkey,
					pageno: this.param.page,
					pageSize: this.pageSize,
					region: region,
					sort: this.selectcondition.sortId,
					title: this.searchTitle,
					lng: this.$param.clng,
					lat: this.$param.clat,
					shopType: this.$param.restaurantType,
					sub_column2: sub_column2
				};
				this.$Request.post(url, data).then(res => {
					var flag = that.$util.isSuccess(res);
					if (!flag) {
						uni.hideLoading();
						that.chaType = "";
						return;
					}
					// console.log("列表"+JSON.stringify(res.data))
					var data = res.data;
					for (let i = 0; i < data.length; i++) {
						data[i].logo = that.$config.ROOTPATH + data[i].logo;
						if (flag) {
							this.shangjiaList.push(data[i]);
						}
					}
					if (!flag) {
						this.shangjiaList = data;
					} else {
						this.param.page += 1;
						if (data.length < this.pageSize) {
							this.isData = false;
						}
					}
					uni.hideLoading();
					that.chaType = "";
				})
			},
			goToFoodDetail: function(fid, fareacode) {
				uni.navigateTo({
					url: "/subPageA/food/fooddetial/fooddetial?fid=" + fid + "&fareacode=" + fareacode
				})
			}
		}
	}
</script>

<style>
	.sort-page {
		top: 180rpx;

	}

	.filter-page {
		top: 180rpx;
	}
</style>