qzw_xcx/pages/index/hotelsearch.vue

<template>
	<view class="searchType" style="background: #fff">
		<view class="flex-box flex-v-ce tops">
			<view class="input-view flex-1">
				<uni-icon type="search" size="22" color="#666666" />
				<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @input="confirm" @confirm="confirm" />
			</view>
			<view @click="search" class="search">取消</view>
		</view>
		<view class="sx">
			<view style="width: 95%;margin: 0 auto;">
				<view @click="choseType(1)" :class="tabIndex == 1 ? 'active' : ''" class="typeItem">综合</view>
				<view @click="choseType(2)" class="typeItem">
					<view class="iconClass">
						<view :class="tabIndex == 2 ? 'active' : ''">上新</view>
						<view v-if="istopclick == 0"><img style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort.png" /></view>
						<view v-if="istopclick == 1"><img style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort_down.png" /></view>
						<view v-if="istopclick == 2"><img style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort_up.png" /></view>
					</view>
				</view>
				<view @click="choseType(3)" class="typeItem">
					<view class="iconClass">
						<view :class="tabIndex == 3 ? 'active' : ''">价格</view>
						<view style="display: flex;flex-direction: column;margin-left: 10rpx;">
							<view v-if="isprice == 0"><img style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort.png" /></view>
							<view v-if="isprice == 3"><img style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort_down.png" /></view>
							<view v-if="isprice == 4"><img style="width: 36upx;height: 36upx;vertical-align: middle;" src="../../static/sort_up.png" /></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view
			style="height:calc(100vh - 172upx);"
			class="floor-list"
			:scroll-top="scrollTop"
			scroll-y="true"
			@scroll="scroll"
			@scrolltoupper="upper"
			@scrolltolower="lower"
			:refresher-enabled="false"
		>
			<!-- 商品列表 -->
			<shopList :goodId="store_id" :productList="goods_list" />
			<view v-if="goods_list.length == 0" class="noData">未找到内容</view>
		</scroll-view>
		<Gobacktop @getop="getop" v-if="isTop" />
	</view>
</template>

<script>
import Gobacktop from '@/component/Gobacktop.vue';
import uniIcon from '@/component/uni-icon/uni-icon.vue';
import shopList from '@/component/shopList.vue'; // 商品列表
export default {
	components: {
		uniIcon,
		shopList
	},
	onLoad(a) {
		this.goodId = a.store_id;
	},
	data() {
		return {
			isTop: 0,
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			isDetail: 1,
			isprice: 0,
			page: 1,
			goodId: 0,
			tabIndex: 1,
			istopclick: 0,
			goods_price: '',
			goods_commonid: '',
			chosegoods_commonid: true,
			chosegoods_price: true,
			searchvalue: '',
			goods_list: []
		};
	},
	methods: {
		getop() {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			this.isTop = false;
		},
		search() {
			uni.navigateBack()
		},
		confirm(e) {
			if(e.detail.value){
				this.searchvalue = e.detail.value;
				this.goods_list = [];
				this.getshopdetail();
			}else{
				this.goods_list = [];
			}
		},
		// 滚动到顶部
		upper(e) {},

		// 滚到底部
		lower(e) {
			if (this.isDetail == 1) {
				this.page = this.page + 1;
				this.getshopdetail();
			}
		},

		// 滚动时触发
		scroll(e) {
			if (e.detail.scrollTop > 250) {
				this.isTop = true;
			} else {
				//当距离小于500时显示回到顶部按钮
				this.isTop = false;
			}
			this.old.scrollTop = e.detail.scrollTop;
		},
		// 获取商品详情
		getshopdetail(e) {
			uni.showLoading();
			this.request({
				url: '/v2/entry/storeGoods',
				method: 'get',
				data: {
					store_id: this.goodId,
					page: this.page,
					goods_commonid: this.goods_commonid, // 上新排序
					goods_price: this.goods_price,
					keyword: this.searchvalue
				},
				success: res => {
					uni.hideLoading();
					if (e == 2) {
						this.goods_list = [];
					}
					this.goods_list = this.goods_list.concat(res.data.data.goods_list);
					if (res.data.data.goods_list.length < 10) {
						this.isDetail = 2;
					}
				}
			});
		},
		choseType(e) {
			this.page = 1;
			this.tabIndex = e;
			if (this.tabIndex == 1) {
				// 服务
				this.istopclick = 0;
				this.isprice = 0;
				this.gc_id_2 = '';
				this.goods_price = '';
				this.goods_commonid = '';
				this.getshopdetail(2);
			} else if (this.tabIndex == 2) {
				//伤
				this.chosegoods_price = true;
				this.istopclick = this.chosegoods_commonid ? 1 : 2;
				this.isprice = 0;
				this.goods_price = '';
				this.goods_commonid = this.chosegoods_commonid ? 'asc' : 'desc';
				this.chosegoods_commonid = !this.chosegoods_commonid;
				this.getshopdetail(2);
			} else if (this.tabIndex == 3) {
				// 价格
				this.chosegoods_commonid = true;
				this.isprice = this.chosegoods_price ? 3 : 4;
				this.goods_price = this.chosegoods_price ? 'desc' : 'asc';
				this.goods_commonid = '';
				this.istopclick = 0;
				this.chosegoods_price = !this.chosegoods_price;
				this.getshopdetail(2);
			}
		}
	}
};
</script>

<style>
	.noData {
		margin-top: 30%;
		text-align: center;
		color: #999;
	}
.sx {
	padding: 20upx 18upx;
	padding-top: 0rpx;
	margin-top: 108upx;
	border-bottom: 1px solid #f1f1f1;
	position: sticky;
	top: 108upx;
}
.tops {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: #fff;
}
.search {
	color: #999;
	padding: 0 32rpx;
}
.searchType .input-view {
	display: flex;
	background-color: #e7e7e7;
	height: 30px;
	border-radius: 15px;
	padding: 0 4%;
	flex-wrap: nowrap;
	margin: 7px 0;
	line-height: 30px;
	margin: 24upx 0 24upx 32upx;
}

.searchType .input-view .uni-icon {
	line-height: 30px !important;
}

.searchType .input-view .input {
	height: 30px;
	line-height: 30px;
	width: 94%;
	padding: 0 3%;
}
.van-cell__title {
	flex: 6 !important;
}
.searchclass {
	display: flex;
	align-items: center;
	justify-content: center;
}
.active {
	color: #f76260;
}
.typeItem {
	width: 33%;
	display: inline-block;
	text-align: center;
}
.iconClass {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
</style>