unimall/unimall-app/pageA/product/list.vue

<template>
	<view class="content">
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="0==TabCur?'text-orange cur':''" @tap="tabSelect" data-id="0">
					<text class="cuIcon-text"></text> 销售信息
				</view>
				<view class="cu-item flex-sub" :class="1==TabCur?'text-orange cur':''" @tap="tabSelect" data-id="1">
					<text class="cuIcon-cartfill"></text> 采购信息
				</view>
				<view  v-if="showTran" class="cu-item flex-sub" :class="2==TabCur?'text-orange cur':''" @tap="tabSelect" data-id="2">
					<text class="cuIcon-deliver"></text> 货源信息
				</view>
				<view v-if="showTran" class="cu-item flex-sub" :class="3==TabCur?'text-orange cur':''" @tap="tabSelect" data-id="3">
					<text class="cuIcon-group"></text> 车辆信息
				</view>
			</view>
		</scroll-view>
		<swiper :current="TabCur" class="swiper-box" duration="300" @change="tabSelect">
			<swiper-item class="tab-content" data-id="1">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="onReachBottomTmp">
					<block v-if="TabCur==0">
						<view class="introduce-section">
							<view v-for="(item, index) in saleInfo" :key="index" class="guess-item" @click="navToDetailPage(item)">
								<view class="price-box">
									<view class="title">{{item.title}}</view>
									<view class="title-tip" v-if='item.isFutures==0'>
										<text class="price-tip">¥</text>
										<text class="price">{{item.price}}</text>
										<text class="price-tip">元/吨</text>
									</view>
									<view class="title-tip" v-if='item.isFutures==1'>
										<text class="price-tip">今日基差</text>&nbsp;
										<text class="price-tip">¥</text>
										<text class="price">{{item.basis}}</text>
									</view>
								</view>
								<view class='cu-tag radius line-pink' v-if='item.isFutures==0'>现货</view>
								<view class='cu-tag radius line-pink' v-if='item.isFutures==1'>期货</view>
								<view class='cu-tag radius line-green'>{{item.goodsName}}</view>
								<view class='cu-tag radius line-yellow'>易粮易运</view>
							</view>
							<view v-show="isLoadMore">
								<uni-load-more :status="loadStatus"></uni-load-more>
							</view>
						</view>
					</block>
					</scroll-view>
			</swiper-item>
			<swiper-item class="tab-content" data-id="2">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="onReachBottomTmp">
					<block v-if="TabCur==1">
					<view class="introduce-section">
						<view v-for="(item, index) in buyInfo" :key="index" class="guess-item" @click="navToDetailPage(item)">
							<view class="price-box">
								<view class="title">{{item.title}}</view>
								<template v-if='item.isFutures==0'>
									<view v-if="item.price !== 0" class="title-tip">
										<text class="price-tip">¥</text>
										<text class="price">{{item.price}}</text>
										<text class="price-tip">元/吨</text>
									</view>
									<view v-else class="title-tip">
										<text>市场价</text>
									</view>
								</template>
								<view class="title-tip" v-if='item.isFutures==1'>
									<text class="price-tip">今日基差</text>&nbsp;
									<text class="price-tip">¥</text>
									<text class="price">{{item.basis}}</text>
								</view>
								
							</view>
							<view class='cu-tag radius line-pink' v-if='item.isFutures==0'>现货</view>
							<view class='cu-tag radius line-pink' v-if='item.isFutures==1'>期货</view>
							<view class='cu-tag radius line-green'>{{item.goodsName}}</view>
							<view class='cu-tag radius line-yellow'>易粮易运</view>
						</view>
						<view v-show="isLoadMore">
							<uni-load-more :status="loadStatus"></uni-load-more>
						</view>
					</view>
					
				</block>
				</scroll-view>
			</swiper-item>
			<swiper-item class="tab-content" data-id="3">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="onReachBottomTmp">
					<block v-if="TabCur==2">
					<view class="guess-section">
						<view 
							v-for="(item, index) in tranInfo" :key="index"
							class="guess-item"
							@click="navToDetailPage(item)"
						>
						<view class="flex justify-between padding-xs ">
						  <view class="flex-sub padding-xs">
							  <view class="cu-capsule radius">
							  	<view class="cu-tag bg-blue">
							  		{{item.startPlace }}
							  	</view>
							  	<view class="cu-tag line-blue">
							  		{{item.endPlace }}
							  	</view>
							  </view>
						  </view>
						 
						  <view class=" padding-xs">
							  <view v-if="item.status == 0" class="cu-capsule radius">
								<view  class="cu-tag bg-green">
									可承运
								</view>
								<view class="cu-tag line-green">
									 <text class="text-price">{{item.price }}</text>
								</view>
							  </view>
							  <view v-else class="cu-capsule radius">
							  	<view  class="cu-tag bg-red">
							  		已结束
							  	</view>
							  	<view class="cu-tag line-red">
							  		 <text class="text-price">{{item.price }}</text>
							  	</view>
							  </view>
						  </view>
						</view>
						<view class="flex justify-between padding-xs">
							<view class="flex-sub padding-xs">
							  <view class="cu-capsule radius">
								<view class="cu-tag bg-orange">
									{{item.goodsName}}
								</view>
								<view class="cu-tag line-orange">
									{{numFilter(item.total - item.tranCount) }}吨
								</view>
							  </view>
							</view>
							<view class=" text-sm padding-xs">
								<view class=" text-sm padding-xs">
									<text class="text-gray  text-sm text-right padding-xs-tmp ">{{item.gmtUpdate}}</text>
								</view>
							</view>
						</view>
						</view>
						<view v-show="isLoadMore">
						    <uni-load-more :status="loadStatus" ></uni-load-more>
						</view>
					</view>
				</block>
				</scroll-view>
			</swiper-item>
			<swiper-item class="tab-content" data-id="0">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="onReachBottomTmp">
					<block v-if="TabCur==3">
					<view class="guess-section">
						<view 
							v-for="(item, index) in carInfo" :key="index"
							class="guess-item"
							@click="navToDetailPage(item)"
						>
						<view class="flex justify-between padding-xs ">
						  <view class="flex-sub padding-xs">
							  <view class="cu-capsule radius">
							  	<view class="cu-tag bg-blue">
							  		{{item.startPlace }}
							  	</view>
							  	<view class="cu-tag line-blue">
							  		{{item.endPlace }}
							  	</view>
							  </view>
						  </view>
						 
						  <view class=" padding-xs">
							  <view v-if="item.status == 2" class="cu-capsule radius">
								<view  class="cu-tag bg-green">
									可委托
								</view>
								<view class="cu-tag line-green">
									 <text class="text-price">{{item.price }}</text>
								</view>
							  </view>
							  <view v-else class="cu-capsule radius">
							  	<view  class="cu-tag bg-red">
							  		已承运
							  	</view>
							  	<view class="cu-tag line-red">
							  		 <text class="text-price">{{item.price }}</text>
							  	</view>
							  </view>
						  </view>
						</view>
						<view class="flex justify-between padding-xs">
							<view class="flex-sub padding-xs">
							  <view class="cu-capsule radius">
								<view class="cu-tag bg-orange">
									{{item.driver}}
								</view>
								<view class="cu-tag line-orange">
									{{item.carNo}}
								</view>
							  </view>
							</view>
							<view class=" text-sm padding-xs">
								<view class=" text-sm padding-xs">
									<text class="text-gray  text-sm text-right padding-xs-tmp ">{{item.gmtUpdate}}</text>
								</view>
							</view>
						</view>
						</view>
						<view v-show="isLoadMore">
						    <uni-load-more :status="loadStatus" ></uni-load-more>
						</view>
					</view>
				</block>
				
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				windowSpuList: [],
				categoryPickList: [],
				categoryButtomList: [],
				salesTop: [],
				saleInfo: [],
				buyInfo: [],
				tranInfo:[],
				carInfo:[],
				banner: undefined,
				isVip: false,
				pages:1,//页数
				limit:10 ,//每次取条目数
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false  ,//是否加载中
				TabCur: 0,
				swiperHeight:'',
				showTran:true
			};
		},
		onShow() {
			this.showTran = uni.getStorageSync("showTran")
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pages = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.loadData()
		},
		onLoad(options) {
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
			// #endif
			this.cateId = options.tid ? options.tid : 0;
			this.keywords = options.keywords ? options.keywords : ''
			this.TabCur = options.TabCur
			this.loadData();
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pages = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.loadData()
		},
		onReachBottom(){  //上拉触底函数
		  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
				this.isLoadMore=true
				this.pages += 1
				this.getIndexSaleData()
		  }
		},
		methods: {
			numFilter (value) {
				if(!value){
					return 0
				}
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			},
			tabSelect(e) {
				if(e.currentTarget.dataset.id){
					this.TabCur = e.currentTarget.dataset.id;
				}
				else{
					this.TabCur = e.target.current;
				}
				this.pages = 1
				this.isLoadMore = false
				this.loadData()
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData() {
				uni.setNavigationBarTitle({
					title:"搜索关键字:"+this.keywords
				});
				const that = this
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				if(this.TabCur == 0){
					that.$api.request('goods', 'getSaleInfo',{
						keywords: this.keywords,
						page: this.pages,
						limit:this.limit
					}, failres => {
						that.$api.msg(failres.errmsg)
						this.isLoadMore = false
						this.loadStatus = 'nomore'
						if(this.pages>1){this.pages=1}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}).then(res => {
						let data = res.data
						//销售信息
						if(data.saleInfo){
							that.saleInfo = data.saleInfo
						}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
				}
				else if(this.TabCur == 1){
					that.$api.request('buy', 'getBuyListInfo',{
						keywords: this.keywords,
						page: this.pages,
						limit:this.limit
					}, failres => {
						that.$api.msg(failres.errmsg)
						this.isLoadMore = false
						this.loadStatus = 'nomore'
						if(this.pages>1){this.pages=1}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}).then(res => {
						let data = res.data
						//销售信息
						if(data){
							that.buyInfo = data
						}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
				}
				else if(this.TabCur == 2){
					that.$api.request('tran', 'getTranListInfo',{
						keywords: this.keywords,
						page: this.pages,
						limit:this.limit
					}, failres => {
						that.$api.msg(failres.errmsg)
						this.isLoadMore = false
						this.loadStatus = 'nomore'
						if(this.pages>1){this.pages=1}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}).then(res => {
						let data = res.data
						console.log(data.tranInfo)
						//销售信息
						if(data.tranInfo){
							that.tranInfo = data.tranInfo
						}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
				}
				else if(this.TabCur == 3){
					that.$api.request('tran', 'getCarListInfo',{
						keywords: this.keywords,
						page: this.pages,
						limit:this.limit
					}, failres => {
						that.$api.msg(failres.errmsg)
						this.isLoadMore = false
						this.loadStatus = 'nomore'
						if(this.pages>1){this.pages=1}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}).then(res => {
						let data = res.data
						console.log(data.carInfo)
						//销售信息
						if(data.carInfo){
							that.carInfo = data.carInfo
						}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
				}
				
			},
			//详情
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.id;
				if(this.TabCur == 0){
					uni.navigateTo({
						url: `/pageA/product/detail?id=${id}`
					})
				}
				else if(this.TabCur == 1){
					uni.navigateTo({
						url: `/pageA/product/detail_buy?id=${id}`
					})
				}
				else if(this.TabCur == 2){
					uni.navigateTo({
						url: `/pages/tran/tran_detail?id=${id}`
					})
				}
				else if(this.TabCur == 3){
					uni.navigateTo({
						url: `/pages/tran/car_detail?id=${id}`
					})
				}
				
			},
			onReachBottomTmp(){  //上拉触底函数
			  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
					this.isLoadMore=true
					this.pages += 1
					this.getIndexSaleData()
			  }
			},
			getIndexSaleData(){
				const that = this
			    var pages=that.pages
			    var limit=that.limit
			   
			    uni.showLoading({
			    	title: '正在加载',
					mask:true
			    })
				if(this.TabCur == 0){
					that.$api.request('goods', 'getSaleListInfo', {
						keywords: this.keywords,
						page: pages,
						limit:limit
					},failres => {
						that.$api.msg(failres.errmsg)
						that.isLoadMore=false
						that.loadStatus = 'nomore'
						if(that.pages>1){that.pages-=1}
						uni.hideLoading()
					}).then(res => {
						let data = res.data
						//销售信息
						if(data.saleInfo.length > 0){
							that.saleInfo = that.saleInfo.concat(data.saleInfo)
							that.isLoadMore=false
						}
						else{
							if(that.pages>1){that.pages-=1}						
							that.isLoadMore=true
							that.loadStatus = 'nomore'
						}
						uni.hideLoading()
					})
				}
				else if(this.TabCur == 1){
					that.$api.request('buy', 'getBuyListInfo', {
						keywords: this.keywords,
						page: pages,
						limit:limit
					},failres => {
						that.$api.msg(failres.errmsg)
						that.isLoadMore=false
						that.loadStatus = 'nomore'
						if(that.pages>1){that.pages-=1}
						uni.hideLoading()
					}).then(res => {
						let data = res.data
						//销售信息
						if(data.length > 0){
							that.buyInfo = that.buyInfo.concat(data)
							that.isLoadMore=false
						}
						else{
							if(that.pages>1){that.pages-=1}						
							that.isLoadMore=true
							that.loadStatus = 'nomore'
						}
						uni.hideLoading()
					})
				}
				else if(this.TabCur == 2){
					that.$api.request('tran', 'getTranListInfo', {
						keywords: this.keywords,
						page: pages,
						limit:limit
					},failres => {
						that.$api.msg(failres.errmsg)
						that.isLoadMore=false
						that.loadStatus = 'nomore'
						if(that.pages>1){that.pages-=1}
						uni.hideLoading()
					}).then(res => {
						let data = res.data
						//销售信息
						if(data.tranInfo.length > 0){
							that.tranInfo = that.tranInfo.concat(data.tranInfo)
							that.isLoadMore=false
						}
						else{
							if(that.pages>1){that.pages-=1}						
							that.isLoadMore=true
							that.loadStatus = 'nomore'
						}
						uni.hideLoading()
					})
				}
				else if(this.TabCur == 3){
					that.$api.request('tran', 'getCarListInfo', {
						keywords: this.keywords,
						page: pages,
						limit:limit
					},failres => {
						that.$api.msg(failres.errmsg)
						that.isLoadMore=false
						that.loadStatus = 'nomore'
						if(that.pages>1){that.pages-=1}
						uni.hideLoading()
					}).then(res => {
						let data = res.data
						//销售信息
						if(data.carInfo.length > 0){
							that.carInfo = that.carInfo.concat(data.carInfo)
							that.isLoadMore=false
						}
						else{
							if(that.pages>1){that.pages-=1}						
							that.isLoadMore=true
							that.loadStatus = 'nomore'
						}
						uni.hideLoading()
					})
				}
			    
			}
		},
	}
</script>

<style lang="scss" scoped>
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}
	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;

		.goods-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $font-color-light;
		}

		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26upx;
			}
		}
		
	}
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 98%;
			border-bottom:1px solid #ccc;
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: #121212;
		}
		.price-orther{
			font-size: $font-sm;
			color:$font-color-base;
		}
		.price{
			font-size: 64rpx;
			color: #39b54a;
			line-height: 1;
			padding-right: 10upx;
		}
		
		.goods1{
			font-size: $font-sm;
			color: $font-color-base;
		}
		.goods2{
			font-size: $font-sm;
			color: $font-color-base;
			padding-left: 10%;
		}
		.goods3{
			font-size: $font-sm;
			color: $font-color-base;
			padding-left: 10%;
		}
		.goods4{
			font-size: $font-sm;
			color: #ff5500;
		}
		.goods5{
			font-size: $font-sm;
			color: $font-color-base;
		}
		.view-item{
			width: 100%;
			// line-height: 40upx;
			padding-top: 10upx;
		}
		.confirm-btn {
			margin-left: 20%;
		}
		.date-time {
			margin-left: 30%;
		}
		.padding-xs-tmp {
			padding: 15upx 10upx 10upx 10upx;
		}
		
	}
	.swiper-box {
		height: calc(100% - 40px);
	}
	.list-scroll-content {
		height: 100%;
	}
	.uni-swiper-item {
		height: auto;
	}
	/* 销售信息 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;
		padding-bottom: 100upx;
		.guess-item {
			padding-bottom: 20upx;
			border-bottom: 1px solid #ccc;
		}
		.title {
			font-size: 28upx;
			color: $font-color-dark;
			font-weight:bold;
			height: 50upx;
			line-height: 50upx;
			flex:2.5;
		}
		.title-tip {
			flex:1;
		}
		.price-box {
			display: flex;
			align-items: baseline;
			height: 70upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}
	
		.price {
			font-size: $font-lg + 2upx;
		}
	
		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}
	
		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}
	
		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;
	
			view {
				flex: 1;
			}
		}
	}
</style>