book/unimall-app/pages/tran/tran.vue

<template>
	<view class="content">
		<scroll-view scroll-x class="nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="0==TabCur?'text-white':''" @tap="tabSelect" data-id="0">
					<text>货源找车</text>
				</view>
				<view class="cu-item flex-sub" :class="1==TabCur?'text-white':''" @tap="tabSelect" data-id="1">
					<text>
						车队找粮</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="cu-bar search">
							<view class="search-form round" @click="naviageToPage('/pageA/product/search?TabCur=2')">
								<text class="cuIcon-search"></text>
								<input type="text" placeholder="搜索" confirm-type="search"></input>
							</view>
						</view>
						<view class="guess-section">
							<view 
								v-for="(item , index) in tranInfo" :key="index"
								class="guess-item guess-item-warp bg-white"
								@click="navToDetailPage(item.id)"
							>
							<view style='margin:5px 0;diaplay:inline-block;font-weight:900;' class="flex justify-between">
								<text>{{item.startPlace }}</text>
								<image class='carIcon' src='https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/car.png'></image>
								<text>{{item.endPlace }}</text>
							</view>
							<view style='margin:5px 0;diaplay:inline-block;' class="flex justify-between">
								<view>
									<text class='status' v-if="item.status == 30">可承运</text>
									<text class='status' v-if="item.status == 40">已结束</text>
									<view class='goods'><text>{{item.goodsName}}</text><text>{{numFilter(item.total - item.tranCount) }}吨</text></view>
								</view>
								
								<text v-if='item.price' class="text-price">{{item.price }}/吨</text>
								<text v-if='item.inPrice' class="text-price">{{item.inPrice }}/吨</text>
							</view>
							<view style='margin:5px 0;diaplay:inline-block;' class="flex justify-between">
								<text></text>
								<text class='gmtUpdate'>{{item.gmtUpdate}}</text>
							</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==1">
						<view class="cu-bar search">
							<view class="search-form round" @click="naviageToPage('/pageA/product/search?TabCur=3')">
								<text class="cuIcon-search"></text>
								<input type="text" placeholder="搜索" confirm-type="search"></input>
							</view>
						</view>
						<view class="guess-section">
							<view 
								v-for="(item, index) in carInfo" :key="index"
								class="guess-item  guess-item-warp bg-white"
								@click="navToDetailPage(item.id)"
							>
							<view style='margin:5px 0;diaplay:inline-block;font-weight:900;' class="flex justify-between">
								<text>{{item.startPlace }}</text>
								<image class='carIcon' src='https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/car.png'></image>
								<text>{{item.endPlace }}</text>
							</view>
							<view style='margin:5px 0;diaplay:inline-block;' class="flex justify-between">
								<view>
									<text class='status' v-if="item.status == 2">可委托</text>
									<text class='status' v-else>已承运</text>
									<view class='goods'><text>{{item.driver}}</text><text>{{item.carNo}}</text></view>
								</view>
								
								<text v-if='item.price' class="text-price">{{item.price }}/吨</text>
							</view>
							<view style='margin:5px 0;diaplay:inline-block;' class="flex justify-between">
								<text></text>
								<text class='gmtUpdate'>{{item.gmtUpdate}}</text>
							</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>
	import {
		mapState
	} from 'vuex';
	export default {
			name: "tran",
			data() {
				return {
					tranInfo: [],
					carInfo:[],
					pages:1,//页数
					limit:10 ,//每次取条目数
					loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
					isLoadMore:false  ,//是否加载中
					TabCur:0
				};
			},
			computed: {
				...mapState(['hasLogin','userInfo'])
			},
			onShow() {
				uni.showTabBar()
				this.loadData()
			},
			//下拉刷新
			onPullDownRefresh() {
				this.pages = 1
				this.isLoadMore = false
				this.loadStatus = 'loading'
				this.loadData()
			},
			onLoad() {
			},
			onReachBottom(){  //上拉触底函数
			  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
					this.isLoadMore=true
					this.pages += 1
					if(this.TabCur == 0){
						this.getIndexTranData()
					}
					else{
						this.getIndexCarData()
					}
					
			  }
			},
			methods: {
				numFilter (value) {
					if(!value){
						return 0
					}
					// 截取当前数据到小数点后两位
					let realVal = parseFloat(value).toFixed(2)
					return realVal
				},
				naviageToPage(page) {
					uni.navigateTo({
						url: page,
						fail() {
							uni.switchTab({
								url: page
							})
						}
					})
				},
				async loadData() {
					const that = this
					uni.showLoading({
						title: '正在加载',
						mask:true
					})
					if(this.TabCur == 0){
						that.$api.request('tran', 'getTranListInfo',{
							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(res)
							//销售信息
							if(res.data.tranInfo){
								console.log(res.data.tranInfo)
								that.tranInfo = res.data.tranInfo
								
							}
							uni.hideLoading()
							uni.stopPullDownRefresh()
						})
					}
					else{
						that.$api.request('tran', 'getCarListInfo',{
							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(res.data.carInfo){
								that.carInfo = res.data.carInfo
							}
							uni.hideLoading()
							uni.stopPullDownRefresh()
						})
					}
				},
				tabSelect(e) {
					if(e.currentTarget.dataset.id){
						this.TabCur = e.currentTarget.dataset.id;
					}
					else{
						this.TabCur = e.target.current;
					}
					this.pages = 1
					console.log(this.TabCur)
					this.loadData()
				},
				//详情
				navToDetailPage(item) {
					let id = item;
					if(this.TabCur == 0){
						uni.navigateTo({
							url: `/pages/tran/tran_detail?id=${id}`
						})
					}
					else{
						uni.navigateTo({
							url: `/pages/tran/car_detail?id=${id}`
						})
					}
				},
				onReachBottomTmp(){  //上拉触底函数
				  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
						this.isLoadMore=true
						this.pages += 1
						if(this.TabCur == 0){
							this.getIndexTranData()
						}
						else{
							this.getIndexCarData()
						}
						
				  }
				},
				getIndexTranData(){
					const that = this
					var pages=that.pages
					var limit=that.limit
				   
					uni.showLoading({
						title: '正在加载',
						mask:true
					})
					that.$api.request('tran', 'getTranListInfo', {
						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()
					})
				},
				getIndexCarData(){
					const that = this
					var pages=that.pages
					var limit=that.limit
				   
					uni.showLoading({
						title: '正在加载',
						mask:true
					})
					that.$api.request('tran', 'getCarListInfo', {
						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>
	.cu-tag.badge {
	    right: 26rpx;
	}
	.text-white text{
		position: relative;
		z-index: 2;
		background: linear-gradient(45deg, #3DC146, #B2D612);
		padding: 5px 10px;
		border-radius: 38rpx;
	}
	.guess-item-warp{
		padding:15px;
		border-radius: 5px;
		color:#000;
		box-shadow: 0 2px 2px rgba(0,0,0,0.1);
		margin:5px 0;
	}
	.cu-bar .search-form {
    background-color: #ffff;
	}
	.status{
		font-weight:900;
		display:inline-block;
		margin-right:15px;
	}
	.gmtUpdate{
		color:rgba(0,0,0,0.5);
	}
	.goods{
		display:inline-block;
		background:#F5F5F5;
		font-size:12px;
		padding:5px 10px;
		color:#585858;
		border-radius: 3px;
	}
	.text-price{
		color:#E63113;
	}
	.goods text{
		display: inline-block;
		padding:0 5px;
	}
	.goods text:first-child{
		border-right:1px solid #737373;
	}
	.carIcon{
		width: 68px;
		height: 14px;
		position: relative;
		top: 4px;
	}
	.guess-section{
		background:transparent;
	}
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}
	/* .container{
		padding-bottom: 100upx;
	} */
	.cu-form-group input {
		text-align: right;
	}
	.cu-form-group textarea {
		text-align: right;
	}
	.place{
		font-size: 40rpx;
		line-height: 1;
		padding-right: 10upx;
	}
	.place-center{
		font-size: 28rpx;
	}
	.btn-size{
		font-size: 28rpx;
	}
	.place-bottom{
		margin-top: 20rpx;
	}
	.swiper-box {
		height: 85vh;
	}
	.list-scroll-content {
		height: 100%;
	}
	.uni-swiper-item {
		height: auto;
	}
</style>