hezhiying/pages/SearchGoodsList/SearchGoodsList.vue

<template>
	<view class="page">
		<!-- 搜索 -->
		<view class="search-head">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="search">
				<!-- <text class="iconfont icon-fadajing"></text> -->
				<view>
					{{keyword}}
				</view>
				<!-- <input type="text" v-model="keyword" placeholder="搜索商品" /> -->
			</view>
			<view class="cut" @click="isList = !isList">
				<text class="iconfont" :class="isList?'icon-shitu01':'icon-shitu02'"></text>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="screen-info">
			<view class="screen-list">
				<view class="list">
					<text>综合排序</text>
					<text></text>
				</view>
				<view class="list">
					<text>价格排序</text>
					<view class="icon_j">
						<text class="iconfont icon-sanjiao up"></text>
						<text class="iconfont icon-sanjiao down"></text>
					</view>
				</view>
				
				<view class="list">
					<text>销量优先</text>
					<text></text>
				</view>
				
			</view>
			
		</view>
		<!-- 商品列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
				:down="downOption"
				:up="upOption"
				:top="0">
				<view class="goods-list">
					<view v-if="goodsList.length>0">
						<view :class="isList?'list-view':'list-li'" v-for="(item,index) in goodsList" @click="onGoodsList" :key="index">
							<view class="thumb">
								<image :src="item.img" mode="heightFix"></image>
							</view>
							<view class="item">
								<view class="title">
									<text class="two-omit">{{item.name}}</text>
								</view>
								<view class="price">
									<view class="retail-price">
										<text class="min">￥</text>
										<text class="max">{{item.price}}</text>
										<view class="tag" v-if="item.is_goods === 1">
											<text>抢购价</text>
										</view>
									</view>
									<view class="vip-price">
										<text class="min">￥</text>
										<text class="max">{{item.vip_price}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="empty" v-else>
						<image src="../../static/image/empty.png" mode="widthFix"></image>
					</view>
				</view>
			</mescroll-body>
		</view>
		
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
				},
				// 列表视图切换
				isList: true,
				// 筛选弹窗
			
				// 筛选切换
				screenShow: 0,
				
				keyword: '',
				goodsList:[]
        
			}
		},
		onLoad(params) {
			this.keyword = params.keyword||'';
		},
		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() =>{
					this.mescroll.endByPage(10, 20);
				},500)
			},
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			
			/**
			 * 商品列表点击
			 */
			onGoodsList(item,index){
				uni.navigateTo({
					url: '/pages/GoodsDetails/GoodsDetails',
					animationType: 'zoom-fade-out',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import  'SearchGoodsList.scss';
</style>