yiliangyiyun-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>
		<u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
			showCancelButton='false' :content="content" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
	</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: {
			isShowAlert: false,
			content: '您尚未登录，是否立即登录？',
			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) {
					this.isShowAlert = true;
					// uni.showModal({
					// 	title: '提示',
					// 	content: '您尚未登录，是否立即登录？',
					// 	showCancel: true,
					// 	confirmText: '登录',
					// 	success: (e) => {
					// 		if (e.confirm) {
					// 			uni.navigateTo({
					// 				url: '/pages/public/login'
					// 			})
					// 		}
					// 	},
					// 	fail: () => {},
					// 	complete: () => {}
					// })
				}
			},
			alertBtn() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			cancelClick() {
				this.isShowAlert = false
			},
			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>