unimall/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 class="cu-bar tabbar bg-white shadow foot">
			<view :class="PageCur=='sale'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="sale">
				<view><image style='width:21px;height:23px;' :src="PageCur=='sale'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun.png'"></image></view> 资讯
			</view>
			<view :class="PageCur=='buy'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="buy">
				<view><image style='width:25px;height:25px;' :src="PageCur=='buy'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi.png'"></image></view>交易
			</view>
			<view :class="PageCur=='trust'?'action text-pink add-action':'action text-gray add-action'" @click="NavChange"
			 data-cur="trust">
				<button :class="PageCur=='trust'?'cuIcon-group':'cu-btn cuIcon-group bg-white '">
					<view v-if="liangxinTip" class="cu-tag badge">{{liangxinTip}}</view>
				</button>
				粮信
			</view>
			<view  :class="PageCur=='tran'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="tran">
				<view><image style='width:25px;height:20px;' :src="PageCur=='tran'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu.png'"></image></view> 物流
			</view>
			<view :class="PageCur=='my'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="my">
				<view>
				<view v-if="myTip" class="cu-tag badge">{{myTip}}</view>
				<image style='width:21px;height:21px;' :src="PageCur=='my'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode.png'"></image>
				</view>
				 我的
			</view>
		</view> -->
		
		<u-tabbar v-model="current" :list="listTab" :mid-button="true"></u-tabbar>
	</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  ,//是否加载中
					PageCur: "tran",
					TabCur: 0,
					listTab: [
						{
							iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun.png",
							selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun_check.png",
							text: '资讯',
							count: 0	,
							isDot: true,
							customIcon: false,
							pagePath:'/pages/sale/information'
						},
						{
							iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi.png",
							selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi_check.png",
							text: '交易',
							customIcon: false,
							pagePath:'/pages/buy/transaction'
						},
						{
							iconPath: "chat",
							selectedIconPath: "chat",
							text: '粮信',
							midButton: true,
							customIcon: false,
							// pagePath:'/pages/home/home'
						},
						{
							iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu.png",
							selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu_check.png",
							text: '物流',
							customIcon: false,
							pagePath:'/pages/tran/tran'
						},
						{
							iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode.png",
							selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode_check.png",
							text: '我的',
							count: this.myTip,
							isDot: false,
							customIcon: false,
							pagePath:'/pages/user/user'
						},
					],
					current: 3
				};
			},
			computed: {
				...mapState(['hasLogin','userInfo'])
			},
			onShow() {
				uni.hideTabBar()
				this.PageCur = "tran"
				uni.setStorageSync('PageCur', this.PageCur);
				this.loadData()
			},
			//下拉刷新
			onPullDownRefresh() {
				this.pages = 1
				this.isLoadMore = false
				this.loadStatus = 'loading'
				this.loadData()
			},
			onLoad() {
				uni.hideTabBar()
			},
			// 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: {
				numFilter (value) {
					// 截取当前数据到小数点后两位
					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: '正在加载'
					})
					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()
						})
					}
					// if (!this.hasLogin) {
					// 	uni.showModal({
					// 		title: '登录提示',
					// 		content: '您尚未登录，是否立即登录？',
					// 		showCancel: true,
					// 		confirmText: '登录',
					// 		success: (e) => {
					// 			if (e.confirm) {
					// 				uni.navigateTo({
					// 					url: '/pages/public/login'
					// 				})
					// 			}
					// 		},
					// 		fail: () => {},
					// 		complete: () => {}
					// 	})
					// }
				},
				NavChange: function(e) {
					var preCur = this.PageCur
					this.PageCur = e.currentTarget.dataset.cur
					uni.setStorageSync('PageCur', this.PageCur);
					switch (this.PageCur) {
						case "sale":
							uni.switchTab({
								url: '/pages/sale/information'
							});
							// uni.switchTab({
							// 	url: '/pages/sale/sale'
							// });
							break;
						case "buy":
							uni.switchTab({
								url: '/pages/buy/transaction'
							});
							break;
						case "tran":
							uni.switchTab({
								url: '/pages/tran/tran'
							});
							break;
						case "trust":
							// uni.showModal({
							// 	title: '温馨提示',
							// 	content: '此功能正在开发中',
							// 	showCancel: false,
							// 	confirmText: '确定',
							// 	success: (e) => {
							// 	},
							// 	fail: () => {},
							// 	complete: () => {}
							// })
							// this.PageCur = preCur
							// uni.setStorageSync('PageCur', this.PageCur);
							uni.setTabBarItem({
							  index: 0,
							  pagePath:'pages/home/home'
							})
							uni.switchTab({
								url: '/pages/home/home'
							});
							break;
						case "my":
							uni.switchTab({
								url: '/pages/user/user'
							});
							break;
					};
					
				},
				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: '正在加载'
					})
					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: '正在加载'
					})
					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>