gubi/unimall-app/pages/tran/my_tran.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-deliver"></text> 货源信息
				</view>
				<view class="cu-item flex-sub" :class="1==TabCur?'text-orange cur':''" @tap="tabSelect" data-id="1">
					<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="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 == 30" 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 v-if='item.total' class="cu-tag line-orange">
										{{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==1">
						<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.carStatus" class="cu-capsule radius">
									<view  class="cu-tag bg-green">
										{{item.carStatus}}
									</view>
									<view class="cu-tag line-green">
										 <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.carNo}}
									</view>
									<view v-if='item.driver' class="cu-tag  line-orange">
										{{item.driver}}
									</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>
	import {
		mapState
	} from 'vuex';
	export default {
			name: "my",
			data() {
				return {
					tranInfo: [],
					carInfo:[],
					pages:1,//页数
					limit:10 ,//每次取条目数
					loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
					isLoadMore:false  ,//是否加载中
					PageCur: "tran",
					TabCur: 0
				};
			},
			computed: {
				...mapState(['hasLogin','userInfo'])
			},
			onShow() {
				this.PageCur = "my"
				uni.setStorageSync('PageCur', this.PageCur);
				this.loadData()
			},
			//下拉刷新
			onPullDownRefresh() {
				this.pages = 1
				this.isLoadMore = false
				this.loadStatus = 'loading'
				this.loadData()
			},
			onLoad(options) {
				this.TabCur = options.TabCur
			},
			// onPageScroll(e) {
			// 	//兼容iOS端下拉时顶部漂移
			// 	if (e.scrollTop >= 0) {
			// 		this.headerPosition = "fixed";
			// 	} else {
			// 		this.headerPosition = "absolute";
			// 	}
			// },
			onReachBottom(){  //上拉触底函数
			  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
					this.isLoadMore=true
					this.pages += 1
					if(this.TabCur == 0){
						this.getIndexTranData()
					}
					else{
						this.getIndexCarData()
					}
					
			  }
			},
			methods: {
				async loadData() {
					const that = this
					uni.showLoading({
						title: '正在加载',
						mask:true
					})
					if(this.TabCur == 0){
						that.$api.request('tran', 'getMyTranListInfo',{
							page: this.pages,
							limit:this.limit,
							phone:this.userInfo.phone
						}, 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{
						that.$api.request('tran', 'getMyCarListInfo',{
							page: this.pages,
							limit:this.limit,
							phone:this.userInfo.phone
						}, 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.carInfo){
								that.carInfo = data.carInfo
							}
							uni.hideLoading()
							uni.stopPullDownRefresh()
						})
					}
					if (!this.hasLogin||this.userInfo.phone == undefined) {
						uni.showModal({
							title: '登录提示',
							content: '您尚未登录，是否立即登录？',
							showCancel: true,
							confirmText: '登录',
							success: (e) => {
								if (e.confirm) {
									uni.navigateTo({
										url: '/pages/public/login'
									})
								}
							},
							fail: () => {},
							complete: () => {}
						})
					}
				},
				tabSelect(e) {
					if(e.currentTarget.dataset.id){
						this.TabCur = e.currentTarget.dataset.id;
					}
					else{
						this.TabCur = e.target.current;
					}
					this.pages = 1
					this.loadData()
				},
				//详情
				navToDetailPage(item) {
					let id = item.id;
					let sendCarNo = item.sendCarNo;
					if(this.TabCur == 0){
						uni.navigateTo({
							url: `/pages/tran/my_tran_detail?id=${id}`
						})
					}
					else{
						uni.navigateTo({
							url: `/pages/tran/my_car_detail?sendCarNo=${sendCarNo}`
						})
					}
				},
				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', 'getMyTranListInfo', {
						page: pages,
						limit:limit,
						phone:this.userInfo.phone
					},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', 'getMyCarListInfo', {
						page: pages,
						limit:limit,
						phone:this.userInfo.phone
					},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%;
	}
	.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;
	}
	.guess-item{
		/* margin-top: 50rpx; */
	}
	.btn-size{
		font-size: 28rpx;
	}
	.place-bottom{
		margin-top: 20rpx;
	}
	.swiper-box {
		height: 94vh;
	}
	.list-scroll-content {
		height: 100%;
	}
	.uni-swiper-item {
		height: auto;
	}
</style>