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">
				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
					<input class="input"  
						   type="text" 
						   :focus="isFocus"
						   confirm-type="search" 
						   v-model="searchKeyword" 
						   placeholder="请输入商品关键词" 
						   @input="onShowClose" 
						   @confirm="searchOpertor"
						   maxlength="20"/>
				<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText"></text>
			</view>
		</view>
		<view class="ListImg">
			<img src="/static/second/banner.png"/>
		</view>
		<view class="main-content">
			<ul class="secondTitle">
				<li class="ClassA mIcon off" @click="handle('1')" :class="currentId == '1' ? 'active':''">
					{{ tabTitleName }}
					<span class="line" v-if="currentId == '1'"></span>
				</li>
				<li class="ClassA" @click="handle('2')" :class="[currentId == '2' ? 'active':'',currentId == '2' ? 'off':'']">
					临期产品
					<span class="line" v-if="currentId == '2'"></span>
				</li>
				<li class="ClassA" @click="handle('3')" :class="[currentId == '3' ? 'active':'',currentId == '3' ? 'off':'']">
					其他
					<span class="line" v-if="currentId == '3'"></span>
				</li>
			</ul>
		</view>
			<ul class="mainTab" v-if="mainflag">
				    <li v-for="(item,index) in tabList" @click='handleChild(item)' :class="currentID2 ==index?'addstyle':' '">{{item.name}}</li>
			</ul>
		<view class="shopList">
			 <!-- <view class="Listitem" v-if="isShow" v-for="(item, index) in tabchildList"> -->
<!-- 						<a class="itemImg onhref" href=''>
							<img :src="item.imageList[0]" :class="item.sold==1?'activeImg':''" class="bigImg">
						</a>
						<view class="ItemInfo">
							<view class="tag">
								<span class="infotag news" v-if="item.sold==0&&item.newAdded==1">最新</span>
								<span class="infotag brand" v-if="item.brandName!=null&&item.brandName!=''&&item.brandID!=161">{{item.brandName}}</span>
								<span class="infotag sold" v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0">已售</span>
								<span class="infotag other" v-if="item.brandID==161&&item.brandName!=''&&item.brandName!=null">{{item.brandName}}</span>
							</view>
							<a class="productname" :href="'/flea-market-'+item.productID+'.html'">
								{{item.name}}
							</a>
							<view class="targetprice">
								<span v-if="item.detailTalkFlag ==2 && userID==null">价格详聊</span>
								<span v-else-if="userID==null" class="priceparam" @click="toLogin">登录查看价格></span>
								<span v-else-if="userID!=null && item.detailTalkFlag==2">价格详聊</span>
								<span v-else>￥{{item.price1Str}}</span>
							</view>
							<view class="shijian">
								<view>
									<i class="icon mIcon  liulanliang"></i> {{item.viewingNum}}
								</view>
								<view>
									<i class="icon mIcon  shijian"></i> {{item.onLineDateStr}}
								</view>
							</view>
							<view class="dizhi">
								<i class="icon mIcon dizhi"></i>
								{{item.provinceCityDistrict}}
							</view>
						</view>
					</view>
					<view class="no-content" v-show="showflag" :class="showflag?'show':''">
						<img src="/img/flea-market/nologo.png" v-if="isPC" />
						<img src="/img/flea-market/kong_m.png" v-else />
						<view class="error-message">
							<p>此分类下面没有商品，换其它分类瞅瞅</p>
						</view>
					</view>
 -->		</view>
	</view>
</template>

<script>
  import { mapState,mapMutations } from 'vuex';
	export default{
		name:'secondList',
		data(){
			return{
				isShowClose:false,
				isFocus:false,
				searchKeyword:'',//搜索关键字
				currentId:1,
				currentID2:0,
				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:'耗材配件'},
				   ],
			}
		},
		created() {
		},
		methods:{
			handle: function (index) {//一級分类
			               var _this = this;
			               _this.currentId = index;
			               _this.tabTitleName = '二手仪器';
			               if ( _this.currentId == '1'){
			                    _this.mainflag = true;
			               }else {
			                    _this.mainflag=false;
			                    _this.currentID2 = 0;
			               }
			               // _this.gettabList();
			          },
			 handleChild:function(item){ //二级分类
			               var _this = this;
			               _this.currentID2 = item.value;
			               if(!isPC){
			                   _this.tabTitleName = item.name;
			                   if (_this.currentID2==item.value){
			                       _this.mainflag=false;
			                   }
			               }
			               // _this.gettabList();
			          },		  
				},
			
	}
</script>
<style>
	.warp-container{
		width: 100%;
		height: 100%;
	}
	.good-search-top{
		width: 702rpx;
		height: 70rpx;
		flex: 1;
		margin: 32rpx 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: $text-color;
			font-size: 28rpx;
		}
		.icon-iconfonticonfontsousuo1{
			width: 64rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			display: block;
			font-size: $font-size-38;
			float: left;
			color: #999999;
		}
		.icon-shanchu1{
			font-size: $font-size-32;
			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;
	}
	.ListImg>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;
			}
	.mainTab {
	    background: #fff;
	    width: 29vw;
	    position: absolute;
	    z-index: 1;
	}
	.mainTab li.addstyle {
	    color: #e15616;
	}
	.mainTab li {
	    height: 9.6vw;
	    line-height: 9.6vw;
	    text-align: center;
	    color: #627386;
	    cursor: pointer;
	}
</style>