caimei-applets-caimei/second/pages/product/product-list.vue

<template name="secondList">
	<view class="container">
		<view class="good-search-top">
			<view class="search-from name" @click="this.$api.navigateTo(clickPath)">
				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
				<view class="input">请输入商品关键词</view>
				<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText"></text>
			</view>
		</view>
		<view class="ListImg" v-if="searchHide">
			<image src="http://static-b.caimei365.com/app/img/bg/banner.png" class="banner-img"></image>
		</view>
		<view class="main-content" v-if="searchHide">
			<view class="secondTitle">
				<view class="ClassA" @click="handle('1')" :class="[currentId == '1' ? 'active':'',currentId == '1' ? 'off':'']">
					{{ tabTitleName }}
					<text class="iconfont" :class="mainflag ? 'icon-xiangxiajiantou':'icon-xiangshangjiantou'"></text>
					<view class="line" v-if="currentId == '1'"></view>
				</view>
				<view class="ClassA" @click="handle('2')" :class="[currentId == '2' ? 'active':'',currentId == '2' ? 'off':'']">
					临期产品
					<view class="line" v-if="currentId == '2'"></view>
				</view>
				<view class="ClassA" @click="handle('3')" :class="[currentId == '3' ? 'active':'',currentId == '3' ? 'off':'']">
					其他
					<view class="line" v-if="currentId == '3'"></view>
				</view>
			</ul>
		</view>
		<view class="mainTab" v-if="mainflag" v-show="searchHide">
			 <view class="li" v-for="(item,index) in tabList" @click='handleChild(item)' :key="index" :class="currentID2 ==index?'addstyle':' '">{{item.name}}</view>
		</view>
		<view class="shopList" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
			<scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y v-if="tabchildList.length > 0">
		            <view class="Listitem" v-if="isShow" v-for="(item, index) in tabchildList" :key="index" :class="item.sold==1?'activeImg':''"
					 :productid="item.productID" @click.stop="navToDetailPage(item.productID)">
		                <view class="itemImg onhref" >
		                    <image :src="item.imageList[0]" class="bigImg"></image>
							<image src="http://static-b.caimei365.com/app/img/icon/yishou.png" class="yishou_bg" v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0"></image>
		                </view>
		               <view class="ItemInfo">
							<text class="infotag news" v-if="item.sold==0&&item.newAdded==1">新</text>
		                    <view class="productname" href="" :style="item.sold==0&&item.newAdded==1?'text-indent:60rpx':''">
		                        {{item.name}}
		                    </view>
		                    <view class="targetprice" >
		                        <text v-if="item.detailTalkFlag ==2 && hasLogin==false">价格详聊</text>
		                        <text v-else-if="!hasLogin" class="priceparam">登录查看价格</text>
		                        <text v-else-if="hasLogin && item.detailTalkFlag==2">价格详聊</text>
		                        <text v-else>￥{{item.price1Str}}</text>
		                    </view>
							<view class="shijian">
								<text class="iconfont  icon-shijian"></text> {{item.onLineDateStr}}
							</view>
		                    <view class="dizhi">
								<view class="dizhi_left">
									<text class="iconfont  icon-dizhi1"></text>
									{{item.provinceCityDistrict}}
								</view>
		                        <view class="liulan_right">
									<text class="iconfont  icon-kejian1"></text>
		                           {{item.viewingNum}}
		                        </view>
		                    </view>
		                </view>
		            </view>
					<view v-if="showLoading && tabchildList.length > 4">
						<view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
						<view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
					</view>
					</scroll-view>
		            <view class="no-content" v-show="showflag" :class="showflag?'show':''">
		                <image src="http://static-b.caimei365.com/app/img/bg/kong_m.png"  />
		                <view class="error-message">
		                    <view>此分类下面没有商品，换其它分类瞅瞅</view>
		                </view>
		            </view>
		        </view>
				<view class="fabu" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
					 <text  class="intro"  @click.stop="gotointro" >二手市场介绍</text>
					 <text  class="release" @click.stop="gotoform" >我要发布</text>
				</view>
				<!-- 透明模态层 -->
				<modal-layer v-if='isModallayer'></modal-layer>
		</view>
	</view>
</template>

<script>
	import modalLayer from "@/components/modal-layer"
	import { mapState,mapMutations } from 'vuex';
	export default{
		name:'secondList',
		components:{
			modalLayer
		},
		data(){
			return{
				clickPath:'/pages/search/search-second',
				 isShowClose:false,
				 isModallayer:false,
				 currentId:1,
				 currentID2:0,
				 isShow:false,
				 requestFlag: true,
				 showflag:false,
				 mainflag:false,
				 tabTitleName:'二手仪器',
				 tabTitle: [
							{value:'1',name:'二手仪器'},
							{value:'2',name:'临期产品'},
							{value:'3',name:'其他'}
						   ],
			    tabList : [
							{value:'0',name:'全部'},
							{value:'1',name:'轻光电'},
							{value:'2',name:'重光电'},
							{value:'3',name:'耗材配件'},
				   ],
			    // listQuery:{
						pageNum:1,
						pageSize:10,
						name:'',
					// },   
			  tabchildList:[],
			  productsList:[],
			  tabchild:{},
			  params:{},
			  hasNextPage:false ,
			  showLoading: false,
			  loadingNow: true,
			 loadingText: '上拉加载更多',
			 pullFlag: true,
			 isFocus:false,
			 isShowEmpty: false,
			 isShowEmptyText: '搜索相关商品',
			 showSkeleton:true,
			 windowHeight: '',
			 scrollHeight: '',
			 searchHide:true,
			}
		},
		created() {
			 this.setScrollHeight();		
			 this.gettabList();
			 this.isFocus = true;
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			scrolltolower() {
				if(this.hasNextPage && this.pullFlag) {
					this.gettabList(true);
				}
			},
			setScrollHeight() {
				const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
				this.windowHeight = windowHeight - 1;
				this.scrollHeight = windowHeight - 1;
			},
			handle: function (index) {//一級分类
				   const _this = this;
				   _this.currentId = index;
				   _this.tabTitleName = '二手仪器';
				   this.pageNum = 1
				   if ( _this.currentId == '1'){
						_this.mainflag = !_this.mainflag;
				   }else {
						_this.mainflag=false;
						_this.currentID2 = 0;
				   }
				   _this.gettabList();
			          },
			 handleChild:function(item){ //二级分类
				const _this = this;
			   _this.currentID2 = item.value;
			   _this.tabTitleName = item.name;
			   if (_this.currentID2==item.value){
				   _this.mainflag=false;
			   }
		       _this.gettabList();
			  },	
		    gotointro:function(){
				this.$api.navigateTo('/second/pages/form/introduce');
			},
			gotoform:function(){
				this.$api.navigateTo('/second/pages/form/form');
			},
			navToDetailPage:function(id) {
				this.isModallayer = true;
				this.$api.navigateTo(`/second/pages/product/product-details?id=${id}`);
				this.isModallayer = false;
			},
			gettabList:function (loadMore) {
							this.showLoading = true;
							this.loadingNow = true;
							this.loadingText = '加载中';
							this.isShowEmpty = false;				
							if(loadMore) {this.pageNum += 1;}
							let params = {
									secondHandType:this.currentId,
									instrumentType:this.currentID2,
									name:this.name,
									pageNum:this.pageNum,
									pageSize:this.pageSize
							}
						this.SecondService.SeconHandProductList(params).then(res =>{
			                     if (res.code == 0) {
			                           const data = res.data;
			                           if(data.results.length == 0){
			                               this.tabchildList = [];
			                               this.showflag = true;
			                               this.listRecord = data.totalRecord;
			                           }else {
			                               this.showflag = false;
			                               this.isShow = true;
										   let results = data.results;
										   if(loadMore) {
										   	this.tabchildList = [...this.tabchildList,...results];
										   } else {
										   	this.tabchildList = [...results];
										   	this.showSkeleton = false;
										   }
			                               this.hasNextPage = data.hasNextPage;
			                               this.listRecord = data.totalRecord;
										  
			                           }
									   // 防上拉暴滑
									   this.pullFlag = false;
									   setTimeout(()=>{ this.pullFlag = true; },500)
									   // 底部提示文案
									   if(this.hasNextPage) {
									   	this.loadingText = '上拉加载更多';
									   } else {
									   	this.showLoading = true;
									   	this.loadingNow = false;
									   	this.loadingText = '已至底部';
									   }
			                         }else{
			                            this.$util.msg(error.msg,2000);
			                         }
			                    this.requestFlag = true;
			                })
			          },	
			  onShowClose () {//输入框失去焦点时触发
				if(this.name != ''){
					this.isShowClose = true;
				}else{					
					this.isShowClose = false
				}
			  },
			  delInputText(){//清除输入框内容
			  	this.name = '';
			  	this.tabchildList =[];
			  	this.isFocus = true
			  	this.isShowClose = false;
			  	this.loadingNow = false;
			  	this.isShowEmpty = true;
			  	this.secondHandType = 1;
			  	this.instrumentType='';
			  	this.gettabList();
				this.searchHide = true;
			  },
			  searchOpertor(){//搜索商品
				if(this.name == ''){
					this.$util.msg('请输入商品关键词',2000)
					this.secondHandType = 1
					this.instrumentType=''
					// this.gettabList();
					this.searchHide = true;
				}else{
					this.pageNum = 1
					this.showSkeleton = true;
					this.gettabList();
					this.isFocus = false;
					this.searchHide = false;
					
				}
			  },
				},
			
	}
</script>
<style lang="scss">
	.ClassA .iconfont{
		position: absolute;
		right: 20rpx;
	}
	.warp-container{
		width: 100%;
		height: 100%;
	}
	.good-search-top{
		width: 702rpx;
		height: 70rpx;
		flex: 1;
		margin: 20rpx auto;
		
	}
	.search-from{
		width: 702rpx;
		height: 66rpx;
		background: #F7F7F7;
		border-radius: 40rpx;
		float: left;
		position: relative;
	}
	.input{
		width: 340rpx;
		height: 66rpx;
		float: left;
		line-height: 66rpx;
		color: #b2b2b2;
		font-size: 28rpx;
	}
	.icon-iconfonticonfontsousuo1{
		width: 64rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		display: block;
		font-size: 38rpx;
		float: left;
		color: #999999;
	}
	.icon-shanchu1{
		font-size:32rpx;
		color: #999999;
		position: absolute;
		width: 120rpx;
		height: 70rpx;
		line-height: 70rpx;
		top: 0;
		right: 0;
		text-align: center;
		z-index: 10;
	}
	.ListImg{
		width: 750rpx;
		height: 266rpx;
	}
	.banner-img{
		width: 100%;
		height: 100%;
	}
	.secondTitle {
		width: 100%;
		height:90rpx;
		background-color: #ffffff;
		border-bottom: 2rpx solid #F0F2F4;
		position: relative;
	}
	.ClassA.active {
		color: #E15621;
	}
	.ClassA {
		width: 240rpx;
		height: 90rpx;
		display: inline-block;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		cursor: pointer;
		color: #666666;
		border: 0;
		position: relative;
		.line {
		    width: 10vw;
		    margin: 0 auto;
		    height: .48vw;
		    background-color: #e15616;
		    display: block;
		}
	}
	.mainTab {
		background: #fff;
		width: 29vw;
		position: absolute;
		z-index: 1;
	}
	.mainTab .li.addstyle {
		color: #e15616;
	}
	.mainTab  {
		.li{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #627386;
			cursor: pointer;
		}
		.line {
			width: 75rpx;
			margin: 0 auto;
			height: 4rpx;
			background-color: #e15616;
			display: block;
		}
	}
	.no-content{
		width: 100%;
		text-align: center;
		top: 50%;
		position: absolute;

	}
	.no-content img{
		width: 306rpx;
		height: 212rpx;
	}
	.error-message{
		font-size: 24rpx;
		color: #b2b2b2;
	}
	.Listitem {
		height: 202rpx;
		padding:30rpx 20rpx;
		border-bottom: 2rpx solid #F0F2F4;
	}
	.itemImg {
		width: 180rpx;
		height: 180rpx;
		float: left;
		background: #000;
		position: relative;
		.bigImg {
			width: 100%;
			height: 100%;
		}
	}
	.activeImg {
		opacity: 0.5;
	}
	.ItemInfo {
		float: right;
		width:500rpx;
		.dizhi{
			font-size: 24rpx;
			color: #999999;
			margin-top: 10rpx;
		}
		.shijian{
			font-size: 24rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}
	.infotag{
		font-size: 20rpx;
		padding: 5rpx 15rpx;
		background: #f94b4b;
		color: #fff;
		position: absolute;
		border-radius: 6rpx;
	}
	.productname{
		display: inline-block;
		font-size: 28rpx;
		color: #333333;
		vertical-align: top;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		width: 500rpx;
	}
	.targetprice {
		font-size: 26rpx;
		color: #f94b4b;
		cursor: pointer;
		margin: 15rpx 0;
	}
	.icon-shijian{
		font-size: 30rpx;
		color: #999999;
		margin-right: 10rpx;
	}
	.icon-kejian1{
		font-size: 30rpx;
		color: #999999;
		margin-right: 10rpx;
	}
	.icon-dizhi1{
		font-size: 30rpx;
		color: #999999;
		margin-right: 10rpx;
	}
	.dizhi_left{
		float: left;
	}
	.liulan_right{
		float: right;
		margin-right: 25rpx;
	}
	.itemImg  {
		.yishou_bg{
			width: 90rpx;
			height: 90rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%)
		}
	}
	.fabu {
		text{
			display: inline-block;
			width: 280rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			border-radius: 42rpx;
			margin: 15rpx;
			font-size: 30rpx;
		}
	}
	.fabu{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		.intro{
			background: #ffe6dc;
			color: #e15616;
		}
		.release{
			background: $btn-confirm;
			color: #ffffff;
			width: 402rpx;
		}
	}

</style>