CjyTravel/subPageB/Homestay/homestaylist/homestaylist.vue

<template>
	<view class="v-pages v-pages-bg tab">
		<view class="v-pages-search bg">
			<view class="search_box row flex-align-center">
				<view class="col">
					<input @input="write" type="text" class="input" confirm-type="search" @confirm="confirm"
						color="#A0A7B2" 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>
		<!-- 列表 -->
		<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
			<view class="v-pages-list bgfff">
				<navigator class="list_item row" v-for="(item, index) in listDatas" :key="index" hover-class="none"
					:url="'/subPageB/Homestay/homestaydetail/homestaydetail?guid=' + item.id">
					<view class="item_recommend" v-if="item.isrecommend == 'YES'">
						<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/hotel_top_01.png"
							mode="widthFix">
						</image>
					</view>
					<view class="item_image hotel">
						<image class="img" :src="item.hlogo" mode="aspectFill"></image>
					</view>
					<view class="item_content col">
						<view class="content-name">{{ item.hname }}</view>
						<view class="content-level hotel">{{ item.hlevel||'--' }} </view>
						<view class="content-tip"><text class="item" v-for="cell in item.facilities">{{cell}}</text>
						</view>
						<view class="content-address m-t-12">{{ item.addressInfo||'--' }}</view>
						<view class="item-price" v-if="item.price">
							<text class="num_pr">¥</text><text class="num_jd">{{ item.price }}</text>
							<text class="num_qi">起</text>
						</view>
					</view>
				</navigator>
			</view>
		</mescroll-uni>
	</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';
	// 自定义的mescroll-xinlang.vue
	import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
	var that;
	export default {
		components: {
			uniIcons,
			uniNavBar,
			uniSection,
			uniStatusBar,
			MescrollUni
		},
		data() {
			that = this;
			return {
				searchItemClass: 'search-tip-item',
				pageClass: {
					sortItemClass: 'sort-item',
					filterHdItemClass: 'filter-hd-item',
					filterBdItem: 'filter-bd-item'
				},
				priceSymbol: '',
				destinationBak: 'all',
				destination: 'all',
				filter: [],
				parentLevelItem: 'attribute_htype',
				defaultFilter: {
					attribute_htype: 0
				},
				latitude: 0,
				longitude: 0,
				selectedFIlterBak: {
					price: 0
				},
				selectedFIlter: {
					attribute_htype: 0
				},
				selectedParam: {
					sortId: 5,
					bm: '',
					hiddenSortPanel: !0,
					hiddenAttributePanel: !0,
					hiddenRegionPanel: !0
				},
				param: {
					pagesize: 10,
					pageno: 1,
					noData: false,
					loading: false,
					finished: false,
				},
				listDatas: [],
				topNum: 0,
        rootPath: this.$config.ROOTPATH,
				regionname: '区域',
				regionList: [],
				searchTitle: '',
				downOption: {
					auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				upOption: {
					auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				top: 0,

				mescroll: '',
				data: false,
				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();

			var region = option.region;
			if (region != null && region != '') {
				this.selectedParam.bm = region;
			}
			this.get_attribute();
			this.getRedisRegion();
			this.initData();
			//this.get_data(null);
			// this.requestLocation();
			that.$util.saveOperatorLog(that, 'FUN', '酒店');
		},
		onShow() {
			this.$util.getLocation(
				function(res) {
					console.log(res, '坐标')
					that.$param.clat = res.latitude;
					that.$param.clng = res.longitude;
					that.destinationBak != that.destination && (that.initData(), that.get_data());
				})
		},
		methods: {
			write: function(e) {
				this.searchTitle = e.detail.value;
			},
			search: function() {
				this.initData();
				this.get_data();
			},
			confirm(e) {
				this.searchTitle = e.detail.value;
				this.initData();
				this.get_data();
			},
			initData: function() {
				this.data = false;
				this.listDatas = [];
				this.destinationBak = this.destination;
			},
			/*下拉刷新的回调 */
			downCallback() {
        this.mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				this.mescroll = mescroll
				this.param.pageno = this.mescroll.num
				this.get_data();
			},
			get_data: function() {
				var type = this.selectedFIlterBak['attribute_htype'];
				var level = this.selectedFIlterBak['attribute_hlevel'];
				var region = this.selectedParam.bm;

				var requestData = {
					pagesize: 10, //mescroll.optUp.page.size,
					areacode: region,
					pageno: this.param.page,
					timestamp: 0,
					sort: this.selectedParam.sortId,
					type: null == level || 0 == level ? '' : level,
					level: null == type || 0 == type ? '' : type,
					lng: this.$param.clng,
					lat: this.$param.clat,
					userkey: this.$param.userkey,
					hotelName: this.searchTitle
				};
				this.$Request.get(this.$config.getHomestayList, requestData, '', '', false, true).then(res => {
					var list = res.data.list || [] // 当前页数据
					if (this.mescroll.num == 1) this.listDatas = []; // 第一页需手动制空列表

					list.forEach((item, index) => {
						let data = {
							id: item.id,
							hlogo: this.rootPath + item.hotelLogo,
							facilities: item.facilities ? item.facilities.split(",") : [],
							hname: item.hotelName,
							hlevel: item.hlevel,
							isrecommend: item.isrecommend,
							price: item.minPrice,
							addressInfo: item.addressInfo,
						}
						this.listDatas.push(data)
					})

					setTimeout(() => {
						this.mescroll.endSuccess(list.length); // 请求成功, 结束加载
					}, 1000);

				});
			},

		}
	};
</script>

<style>
	page {
		background-color: #fff;
	}

	.sort-page {
		top: 180rpx !important
	}

	.filter-page {
		height: auto;
		top: 180rpx !important;
	}

	.search-container {
		height: auto;
	}

	.sell_jd image {
		width: 24rpx;
		margin-right: 8rpx;
	}
</style>