search.vue

<template>
	<view class="content">
		<view class="navbar" :style="{position:headerPosition}">
			<view class="search-content">
				<uni-icons color="#212121" class="search-icon-arrowleft" @click="backHome" size="24" type="arrowleft" />
				<view class="search-input_box" @click="searchClick">
					<view class="search-input_val">{{searchVal}}</view>
					<uni-icons color="#999999" class="uni-searchbar__box-icon-search" size="20" type="search" />
				</view>
			</view>
			<view class="search-condition">
				<view class="search-condition_item" :class="{current: param.label === 'default'}" @click="tabClick('default')">
					<text>综合排序</text>
					<view class="icon_tips">
						<text :class="{active: param.order === 'asc' && param.label === 'default'}" class="yticon"></text>
						<text :class="{active: param.order === 'desc' && param.label === 'default'}" class="yticon"></text>
					</view>
				</view>
				<view class="search-condition_item" :class="{current: param.label === 'sales'}" @click="tabClick('sales')">
					<text>销量排序</text>
					<view class="icon_tips">
						<text :class="{active: param.order === 'asc' && param.label === 'sales'}" class="yticon xia"></text>
						<text :class="{active: param.order === 'desc' && param.label === 'sales'}" class="yticon"></text>
					</view>
				</view>
				<view class="search-condition_item" :class="{current: param.label === 'price'}" @click="tabClick('price')">
					<text>价格排序</text>
					<view class="icon_tips">
						<text :class="{active: param.order === 'asc' && param.label === 'price'}" class="yticon xia"></text>
						<text :class="{active: param.order === 'desc' && param.label === 'price'}" class="yticon"></text>
					</view>
				</view>
				<view class="search-condition_item" :class="{current: param.label === 'add_time'}" @click="tabClick('add_time')">
					<text>新品排序</text>
					<view class="icon_tips">
						<text :class="{active: param.order === 'asc' && param.label === 'add_time'}" class="yticon xia"></text>
						<text :class="{active: param.order === 'desc' && param.label === 'add_time'}" class="yticon"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 空白页 -->
		<empty v-if="goods_list.length === 0" title=''></empty>
		<!-- 商品列表 -->
		<view class="goods-list" v-if="goods_list.length > 0">
			<view class="goods-item" v-for="(item,index) in goods_list" :key="index">
				<countDown v-if="item._source.is_pro === 1" :time="item._source.end_time"></countDown>
				<view class="image-outer" @click="jumpPhpPage(`app=goods&id=${item._source.goods_id}`)">
					<image :src="item._source.default_image || $noGoodsImg" lazy-load  @error="$__reloadResource(item)" mode="aspectFill"></image>
				</view>
				<view class="title">{{item._source.goods_name}}</view>
				<view class="sub-title">{{item._source.goods_subname}}</view>
				<view v-if="isLogin">
					<view v-if="item._source.is_pro === 1">
						<view class="price"><text class="price-tips">￥</text>{{item._source.pro_price.toFixed(2)}}
							<text class="discount">{{(item._source.pro_price*10/Number(item._source.price)).toFixed(1)}}折</text>
						</view>
						<view class="origin_price">¥{{item._source.price}}</view>
					</view>
					<view v-if="item._source.is_pro === 0">
						<view class="price"><text class="price-tips">￥</text>{{item._source.price}}</view>
					</view>
				</view>
				<view v-if="!isLogin" class="unlogin_price">登录显示价格</view>
				<!-- <view class="old-price"><text class="price-tips">￥</text>30.00</view> -->
				<image class="cart-icon" @click="addCart(item._source.default_spec, 1)" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/global/icon_gouwuche%402x.png"></image>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<BottomBar />
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import countDown from "@/components/countDown.vue";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import BottomBar from "@/components/BottomBar/BottomBar.vue";
	import empty from '@/components/empty.vue';
	import service from '@/components/service.vue';
	import { php, go } from '../../common/host.js';
	export default {
		components: {
			uniIcons,
			empty,
			uniLoadMore,
			countDown
		},
		data() {
			return {
				goods_list: [],
				searchVal: '',
				loadingType: 'more', //加载更多状态
				headerPosition: "fixed",
				headerTop: "0px",
				isLogin: false,
				param: {
					keyword: '',
					pageSize: 20,
					current: 1,
					label: 'default',
					order: 'desc'
				}
			};
		},
		onLoad(option){
			// var pages = getCurrentPages(); // 当前页面
			// var beforePage = pages[pages.length - 2];
			// #ifdef H5
			//默认请求微信分享
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.share({titie: this.$getNavigationBarTitle()});
			}
			// #endif
			this.param = {...this.param, ...option};
			this.searchVal = option.keyword;
			this.getData();
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.getData('refresh');
		},
		//加载更多
		onReachBottom(){
			this.getData();
		},
		methods: {
			backHome(){
				uni.reLaunch({
					url: '/pages/home/home'
				})
			},
			// 加入购物车
			addCart(spec_id, quantity) {
				this.$addCart(spec_id, quantity, this.isLogin);
			},
			// 搜索框点击
			searchClick() {
				const keyword = this.searchVal || '';
				uni.navigateTo({
					url: `/pages/searchhistory/searchhistory?keyword=${keyword}`
				})
			},
			// 跳转商品详情页
			jumpPhpPage(url) {
				let link = url ? `${php}${url}` : php;
				window.location.href = link;
			},
			// 获取数据
			getData(type = 'add', loading) {
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					// 区分是不是首次加载
					if(this.goods_list.length > 0){
						this.param.current += 1;
					}
					this.loadingType = 'loading';
				}else{
					this.param.current = 1;
					this.loadingType = 'more'
				}
				uni.request({
					url: '/uni/api/search_goods/search_goods_list',
					method: 'POST',
					data: this.param,
					dataType: 'json',
					success: (res) => {
						const { data } = res;
						if(data.code == 0){
							if(type === 'refresh'){
								this.goods_list = [];
							}
							this.goods_list = this.goods_list.concat(data.data);
							this.goods_list.map((item, key) => {
								if(item._source.is_pro === 1  && new Date(item._source.end_time).getTime() < new Date().getTime())
								item._source.is_pro = 0;
							});
							this.isLogin = data.login_flg === 1;
							const {total, page_size, current} = data.page;
							this.param.current = current;
							//判断是否还有下一页，有是more,没有是nomore
							this.loadingType = this.goods_list.length >= total ? 'nomore' : 'more';
							if(type === 'refresh'){
								if(loading == 1){
									uni.hideLoading();
								}else{
									uni.stopPullDownRefresh();
								}
							}
						}
					}
				});
			},
			// tab搜索条件
			tabClick(name) {
				if(this.param.label !== name){
					this.param.order = 'desc';
				}else{
					this.param.order = this.param.order === 'desc' ? 'asc': 'desc';
				}
				this.param.label = name;
				
				uni.pageScrollTo({
					duration: 100,
					scrollTop: 0
				})
				this.getData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			}
		}
	}
</script>

<style lang="less">
.content{
	padding-top: 168rpx;
	padding-bottom:100rpx;
}
.navbar{
	left: 0;
	width: 100%;
	z-index: 999;
	background-color: #fff;
	box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
	// top: var(--window-top);
	top: 0;
}
.search-content{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 88rpx;
	padding: 0 20rpx;
	.search-icon-arrowleft{
		margin-right: 20rpx;
		width: 40rpx;
	}
	.search-input_box{
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		position: relative;
		background-color: #F8F8F8;
		border-radius: 60rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.search-input_val{
			position: absolute;
			font-size: 26rpx;
			color: #212121;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			box-sizing: border-box;
			padding-left: 70rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			width: 100%;
		}
		.uni-searchbar__box-icon-search{
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			top: 0rpx;
			left: 10rpx;
		}
		.search-input{
			height: 60rpx;
			line-height: 60rpx;
			flex: 1;
			padding-left: 75rpx;
			padding-right: 25px;
			font-size: 26rpx;
			color: #212121;
		}
		.search-close{
			position: absolute;
			right: 20rpx;
			top: 0rpx;
		}
	}
	.active{
		border: 3rpx solid #FFCD00;
	}
	.cancel-button{
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #212121;
	}
}
.search-condition{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80rpx;
	border-bottom: 2rpx solid #ececec;
	.search-condition_item{
		flex: 1;
		font-size: 26rpx;
		color: #7c7c7c;
		font-weight: 400;
		text-align: center;
		height: 100%;
		line-height: 80rpx;
		.icon_tips{
			display: inline-block;
			.yticon{
				display: block;
				width: 20rpx;
				height: 20rpx;
				background: url(data:image;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAAKlBMVEUAAAAAAAAqKioeHh4jIyMkJCQjIyMkJCQjIyMfHx8jIyMiIiIhISEjIyMLPgjcAAAADnRSTlMAAQwRJCssMjNJUGFjZnUvgGkAAAA6SURBVAjXY2CgLmDtAIIAMJPlLhA4QITn3r17E6pC++7dTVAm2927CVAm49pbAjAzbA7DjWMvoMAtAFI2ESM4e3ZZAAAAAElFTkSuQmCC) no-repeat;
				background-size: cover;
				margin-left: 4rpx;
				display: none;
				&.active{
					display: block;
					width: 20rpx;
					height: 20rpx;
					background: url(data:image;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAAKlBMVEUAAAAAAAAhISEkJCQiIiIhISEgICAhISEgICAgICAhISEhISEhISEhISFyXSx2AAAADXRSTlMAAh8rW2tufH+2x/P5faSp4gAAADpJREFUCNdjYKAuYO0AggAwk+UuEDhAhOfevXsTqkL77t1NUCbb3bsJUCbj2lsCMDNsDsONYy+gwC0AUjYRIzh7dlkAAAAASUVORK5CYII=) no-repeat;
					background-size: cover;
					.xia{
						display: block;
						transform: scaleY(-1);
					}
				}
			}
			.xia{
				display: none;
				transform: scaleY(-1);
			}
		}
		&.current{
			color: #212121;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
		}
	}
}
.goods-list{
	display:flex;
	flex-wrap:wrap;
	padding: 20rpx 0;
	background: #fff;
	.goods-item{
		width: 374rpx;
		height: 536rpx;
		box-sizing: border-box;
		padding: 40rpx 27rpx 24rpx 27rpx;
		position: relative;
		&:nth-child(2n+1){
			margin-right: 2rpx;
		}
		.image-outer{
			width: 320rpx;
			height: 280rpx;
			position: relative;
			image{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				max-width: 100%;
				max-height: 100%;
				margin: auto;
			}
		}
		.title{
			height: 38rpx;
			line-height: 38rpx;
			font-size: 26rpx;
			color: #212121;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 20rpx;
			margin-bottom: 4rpx;
		}
		.sub-title{
			height: 38rpx;
			line-height: 38rpx;
			font-size: 26rpx;
			color: #7C7C7C;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.price{
			height: 44rpx;
			line-height: 44rpx;
			font-size: 32rpx;
			color: #AE8A57;
			.price-tips{
				font-size: 26rpx;
			}
			.discount {
				display: inline-block;
				padding: 0 14rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				background:rgba(254,244,232,1);
				color: #AE8A57;
				font-size: 20rpx;
				margin-left: 8px;
				position: relative;
				top: -4rpx;
			}
		}
		.origin_price {
			color: #aeaeae;
			font-size: 24rpx;
			line-height: 34rpx;
			text-decoration: line-through;
		}
		.old-price{
			height: 34rpx;
			line-height: 34rpx;
			text-align: left;
			font-size: 24rpx;
			color: #AEAEAE;
			text-decoration: line-through;
			.price-tips{
				font-size: 24rpx;
			}
		}
		.cart-icon{
			position: absolute;
			width: 64rpx;
			height: 64rpx;
			right: 24rpx;
			bottom: 52rpx;
		}
	}
}
.unlogin_price{
	font-size: 30rpx;
}

</style>