二手

second/pages/product/product-list.vue

@@ -16,7 +16,7 @@
 			</view>
 		</view>
 		<view class="ListImg">
-			<img src="/static/second/banner.png"/>
+			<image src="/static/second/banner.png" class="banner-img"></image>
 		</view>
 		<view class="main-content">
 			<ul class="secondTitle">
@@ -34,69 +34,81 @@
 				</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>
+		<ul class="mainTab" v-if="mainflag">
+			 <li v-for="(item,index) in tabList" @click='handleChild(item)' :key="index" :class="currentID2 ==index?'addstyle':' '">{{item.name}}</li>
+		</ul>
+		<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':''">
+		                <a class="itemImg onhref" >
+		                    <image :src="item.mainImage" class="bigImg"></image>
+							<image src="../../../static/second/yishou.png" class="yishou_bg" v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0"></image>
+		                </a>
+		               <view class="ItemInfo">
+		                        <span class="infotag news" v-if="item.sold==0&&item.newAdded==1">新</span>
+		                        <!-- <span class="infotag sold" v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0">已售</span> -->
+		                    <a class="productname" href="" :style="item.sold==0&&item.newAdded==1?'text-indent:60rpx':''">
+		                        {{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}}
+								<i class="icon  shijian"></i> {{item.onLineDateStr}}
 							</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 class="dizhi">
+								<view class="dizhi_left">
+									<i class="icon mIcon dizhi"></i>
+									{{item.provinceCityDistrict}}
+								</view>
+		                        <view class="liulan_right">
+		                            <i class="icon mIcon  liulanliang"></i> {{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>
- -->		</view>
+					</scroll-view>
+		            <view class="no-content" v-show="showflag" :class="showflag?'show':''">
+		                <img src="/static/second/kong_m.png"  />
+		                <view class="error-message">
+		                    <p>此分类下面没有商品，换其它分类瞅瞅</p>
+		                </view>
+		            </view>
+		        </view>
+				<view class="fabu">
+					 <a href="second/pages/form/introduce" class="intro">市场介绍</a>
+					 <a href="second/pages/form/form" class="release">我要发布</a>
+				</view>
+				
+		</view>
 	</view>
 </template>
 
 <script>
-  import { mapState,mapMutations } from 'vuex';
+	import modalLayer from "@/components/modal-layer"
+	import { mapState,mapMutations } from 'vuex';
 	export default{
 		name:'secondList',
+		components:{
+		},
 		data(){
 			return{
-				isShowClose:false,
-				isFocus:false,
-				searchKeyword:'',//搜索关键字
-				currentId:1,
-				currentID2:0,
-				mainflag:false,
-				tabTitleName:'二手仪器',
-				tabTitle: [
+				 isShowClose:false,
+				 currentId:1,
+				 currentID2:0,
+				 isShow:false,
+				 requestFlag: true,
+				 showflag:false,
+				 mainflag:false,
+				 tabTitleName:'二手仪器',
+				 tabTitle: [
 							{value:'1',name:'二手仪器'},
 							{value:'2',name:'临期产品'},
 							{value:'3',name:'其他'}
@@ -107,34 +119,130 @@
 							{value:'2',name:'重光电'},
 							{value:'3',name:'耗材配件'},
 				   ],
+			    listQuery:{
+						pageNum:1,
+						pageSize:10,
+					},   
+			  tabchildList:[],
+			  productsList:[],
+			  tabchild:{},
+			  params:{},
+			  hasNextPage:false ,
+			  showLoading: false,
+			  loadingNow: true,
+			 loadingText: '上拉加载更多',
+			 pullFlag: true,
+			 isFocus:false,
+			 isShowEmpty: false,
+			 searchKeyword:'',//搜索关键字
+			 isShowEmptyText: '搜索相关商品',
+			 showSkeleton:true,
+			 windowHeight: '',
+			 scrollHeight: '',
 			}
 		},
 		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) {//一級分类
-			               var _this = this;
-			               _this.currentId = index;
-			               _this.tabTitleName = '二手仪器';
-			               if ( _this.currentId == '1'){
-			                    _this.mainflag = true;
-			               }else {
-			                    _this.mainflag=false;
-			                    _this.currentID2 = 0;
-			               }
-			               // _this.gettabList();
+				   const _this = this;
+				   _this.currentId = index;
+				   _this.tabTitleName = '二手仪器';
+				   this.listQuery.pageNum = 1
+				   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();
-			          },		  
+				const _this = this;
+			   _this.currentID2 = item.value;
+			   _this.tabTitleName = item.name;
+			   if (_this.currentID2==item.value){
+				   _this.mainflag=false;
+			   }
+		       _this.gettabList();
+			  },	
+							
+			gettabList:function (loadMore) {
+			                const _this = this;
+							this.showLoading = true;
+							this.loadingNow = true;
+							this.loadingText = '加载中';
+							this.isShowEmpty = false;				
+							if(loadMore) {this.listQuery.pageNum += 1;}
+			                const params = Object.assign({secondHandType: _this.currentId,instrumentType:_this.currentID2}, _this.listQuery);
+						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;
+			                               _this.hasNextPage = data.hasNextPage;
+			                               _this.listRecord = data.totalRecord;
+										   _this.tabchildList = data.results;
+			                           }
+									   // 防上拉暴滑
+									   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.searchKeyword != ''){
+					this.isShowClose = true
+				}else{					
+					this.isShowClose = false
+				}
+			  },
+			  searchOpertor(){//搜索商品
+				if(this.searchKeyword == ''){
+					this.$util.msg('请输入商品关键词',2000)
+					this.secondHandType = 1
+					this.instrumentType=''
+					this.gettabList();
+				}else{
+					this.listQuery.pageNum = 1
+					this.showSkeleton = true;
+					this.gettabList();
+					this.isFocus = false
+				}
+			  },
+				  
 				},
 			
 	}
@@ -149,7 +257,7 @@
 		height: 70rpx;
 		flex: 1;
 		margin: 32rpx auto;
-		}
+	}
 	.search-from{
 		width: 702rpx;
 		height: 66rpx;
@@ -157,81 +265,210 @@
 		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;
+	}
+	.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: 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;
 	}
-	.ListImg>img{
+	.banner-img{
 		width: 100%;
 		height: 100%;
 	}
 	.secondTitle {
-	    width: 100%;
-	    height:90rpx;
-	    background-color: #ffffff;
-	    border-bottom: 2rpx solid #F0F2F4;
-	    position: relative;
+		width: 100%;
+		height:90rpx;
+		background-color: #ffffff;
+		border-bottom: 2rpx solid #F0F2F4;
+		position: relative;
 	}
 	.ClassA.active {
-	    color: #E15621;
+		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;
-			}
+		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;
+		background: #fff;
+		width: 29vw;
+		position: absolute;
+		z-index: 1;
 	}
 	.mainTab li.addstyle {
-	    color: #e15616;
+		color: #e15616;
 	}
 	.mainTab li {
-	    height: 9.6vw;
-	    line-height: 9.6vw;
-	    text-align: center;
-	    color: #627386;
-	    cursor: pointer;
+		height: 9.6vw;
+		line-height: 9.6vw;
+		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: 20rpx;
+		border-bottom: 2rpx solid #F0F2F4;
+	}
+	.itemImg {
+		width: 180rpx;
+		height: 180rpx;
+		float: left;
+		background: #000;
+		position: relative;
+	}
+	.itemImg .bigImg {
+		width: 100%;
+		height: 100%;
+	}
+	.activeImg {
+		opacity: 0.5;
+	}
+	.ItemInfo {
+		float: right;
+		width:500rpx;
+	}
+	.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::before {
+		background-position: 20rpx;
+		width: 50rpx;
+		height: 50rpx;
+		position: absolute;
+		right: 2rpx;
+		top: -10rpx;
+	}
+	.shijian,.dizhi{
+		font-size: 20rpx;
+		color: #999999;
+		margin-top: 5rpx;
+	}
+	.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 a{
+		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
+	}
+	.fabu .intro{
+		background: #ffe6dc;
+		color: #e15616;
+	}
+	.fabu .release{
+		background-image: linear-gradient(315deg, 
+		#f28f31 0%, 
+		#e15616 100%);
+		color: #ffffff;
+		width: 402rpx;
+	}
+
 </style>

services/second.service.js

@@ -0,0 +1,11 @@
+// 二手商品
+export default class SecondApi {
+	constructor(AjaxService) {
+		Object.assign(this, { AjaxService })
+		this.name = 'SecondApi'
+	}
+	/*二手商品列表 */
+	SeconHandProductList (data = {}) {
+		return this.AjaxService.get({ url:'/product/getSecondHandProductList', data, isLoading: true })
+	}
+}