caimei-applets-caimei/pages/second/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>
			</view>
		</view>
		<view class="ListImg" v-if="searchHide">
			<image src="https://static.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-xiangshangjiantou':'icon-xiangxiajiantou'"></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="https://static.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">￥价格详聊</text>
								<text v-else-if="!hasLogin" class="priceparam" @click.stop="NavigatorLogin(item)">
									<text v-if="item.sold==1"></text>								
									<text v-else>登录查看价格></text>								
								</text>
								<text v-else-if="hasLogin && item.detailTalkFlag==2">
									<text v-if="item.sold == 1"></text>
									<text v-else>￥价格详聊</text>
								</text>
								<text v-else>
									<text v-if="item.sold == 1"></text>
									<text v-else>￥{{ item.price | NumFormat}}</text>
								</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 ? item.viewingNum : '0'}}
		                        </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="https://static.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' }" v-if="identity == 1">
					 <text  class="intro long" @click.stop="navigator('/pages/second/form/introduce')" >二手市场介绍</text>
				</view>
				<view class="fabu" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }" v-else>
					 <text  class="intro"  @click.stop="navigator('/pages/second/form/introduce')" >二手市场介绍</text>
					 <text  class="release" @click.stop="NavigatorRelease" >我要发布</text>
				</view>
				<!-- 透明模态层 -->
				<modal-layer v-if='isModallayer'></modal-layer>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import authorize from '@/common/config/authorize.js'
	import wxLogin from '@/common/config/wxLogin.js'
	import modalLayer from '@/components/modal-layer'
	export default{
		components:{
			modalLayer
		},
		data(){
			return{
				userId:0,
				isIphoneX:this.$store.state.isIphoneX,
				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:'美容仪器'}
				   ],
				pageNum:1,
				pageSize:10,
				name:'',
				tabchildList:[],
				productsList:[],
				tabchild:{},
				params:{},
				hasNextPage:false ,
				showLoading: false,
				loadingNow: true,
				loadingText: '上拉加载更多',
				pullFlag: true,
				isShowEmpty: false,
				showSkeleton:true,
				windowHeight: '',
				scrollHeight: '',
				searchHide:true,
			}
		},
		created() {
			 this.setScrollHeight()	
			this.$api.getStorage().then((resolve) => {
				this.userId = resolve.userId ? resolve.userId : ''
				this.gettabList()
			})	
		},
		computed: {
			...mapState(['hasLogin','userInfo','isWxAuthorize','identity'])
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2)
			},
		},
		onLoad(option) {
			if(option.type =='share'){
				wxLogin.wxLoginAuthorize()
			}
		},
		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()
			  },	
			navigator(url){
				this.$api.navigateTo(url)
			},	
			navToDetailPage:function(id) {
				this.isModallayer = true
				this.$api.navigateTo(`/pages/second/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 = {
						userId:this.userId,
						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
				})
			},	
			NavigatorLogin(pros){// 登录查看价格
				// 友盟埋点二手市场列表登录查看价格点击事件
				if(process.env.NODE_ENV != 'development'){
					this.$uma.trackEvent('Um_Event_SecondListLoginSubmit', {
						Um_Key_ProductId: `${pros.productId}`,
						Um_Key_PageName: '二手市场登录查看价格',
						Um_Key_SourcePage: '二手市场列表',
					})
				}
				this.$api.navigateTo('/pages/login/login')
			},
			NavigatorRelease(){// 我要发布
				// 友盟埋点二手市场列表我要发布点击事件
				if(process.env.NODE_ENV != 'development'){
					this.$uma.trackEvent('Um_Event_SecondReleaseSubmit', {
						Um_Key_PageName: '我要发布',
						Um_Key_SourcePage: '二手市场列表',
					})
				}
				this.$api.navigateTo('/pages/second/form/form')
			}
		},
		onShareAppMessage(res){//分享转发
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		    }
			return {
			  title: '欢迎来到采美二手市场~',
			  path: `pages/search/search-instrument?keyWord=${this.listQuery.keyword}`
			}
		},	
		onShow() {
			
		}
	}
</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: 265rpx;
	}
	.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: #FF5B00;
		    display: block;
		}
	}
	.mainTab {
		background: #fff;
		width: 29vw;
		position: absolute;
		z-index: 1;
		border-radius: 6rpx;
		box-shadow:0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.07);
		.li{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #627386;
			cursor: pointer;
			&.addstyle{
				color: #FF5B00;
			}
		}
		.line {
			width: 75rpx;
			margin: 0 auto;
			height: 4rpx;
			background-color: #FF5B00;
			display: block;
		}
	}
	.no-content{
		width: 100%;
		text-align: center;
		top: 50%;
		position: absolute;
		image{
			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{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding-top: 20rpx;
		text{
			display: inline-block;
			width: 280rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			border-radius: 42rpx;
			margin: 15rpx;
			font-size: 30rpx;
			&.intro{
				background: #ffe6dc;
				color: #FF5B00;
				&.long{
					width: 600rpx;
					display: block;
					margin: 0 auto;
				}
			}
			&.release{
				background: $btn-confirm;
				color: #ffffff;
				width: 402rpx;
			}
		}
	}

</style>