wangluohuoyun-app/pages/goodSource/index.vue

<!-- 货源 -->
<template>
	<view class="content">
		<view class="banner">
			<image class="banner-img" src="@/static/images/goodSource/banner@2x.png" mode='widthFix'></image>
			<view class="head flex s-row paddingr35">
				<view class="flex flex-space-between">
					<view class="flex s-row item1" @click="goCity(0)">
						<view class="fontsize-28 gray">装车</view>
						<view class="fontsize-46 fontweight-500 text">{{startPlace.selected}}</view>
					</view>
					<image class="change-btn item2" src="@/static/images/goodSource/change.png" mode='widthFix'
						@click="changeCity"></image>
					<view class="flex s-row item3" @click="goCity(1)">
						<view class="fontsize-28 gray text-align-right">卸车</view>
						<view class="fontsize-46 fontweight-500 text">{{endPlace.selected}}</view>
					</view>
				</view>
				<view>
					<u-button type="" class="btn-color fontsize-36 m-top20" @click="upCallback({size:10,num:1})"> 查询
					</u-button>
				</view>
			</view>
		</view>
		<view :class="scrollTop>1200?'fixed1':''"></view>
		<view class="tab-view">
			<u-tabs :list="tabList" @click="clickTab" :lineColor="scrollTop>1200?'white':'#303133'" :current='tabIndex'
				:inactiveStyle="{color: scrollTop>1200?'white':'',}" :activeStyle="{
							color: scrollTop>1200?'white':'',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}" :class="scrollTop>1200?'fixed':''"></u-tabs>
			<view class="tab-right" @click="selectType">
				<view>{{pickerSelect}}</view>
				<u-icon name="arrow-down" size="20"></u-icon>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" :closeOnClickOverlay='true' @close='selectTypeClose'
			@cancel='selectTypeClose' @confirm='confirmSelectType'></u-picker>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="good-list" v-for="(good,index) in goods" :key="index" @click="toDetail(good.id)">
				<view style="padding: 0 35rpx 20rpx 35rpx;">
					<view class="flex flex-space-between">
						<view class="item1">
							<view class="ssx">{{$helper.getProvinceAbbreviation(good.sendPrivate)}}</view>
							<view class="level2-title">{{good.sendCity}} {{good.sendArea}}</view>
						</view>

						<image class="jt-icon item2" src="@/static/images/goodSource/jt.png" mode='widthFix'></image>
						<view class="item3">
							<view class="ssx">{{$helper.getProvinceAbbreviation(good.unloadPrivate)}}</view>
							<view class="level2-title">{{good.unloadCity}} {{good.unloadArea}}</view>
						</view>
					</view>
					<view class="right gray">
						{{good.updateDate}}
					</view>
					<view class="flex flex-space-between">
						<view class="left">
							<view class="flex">
								<view class="fontsize-25 gray mr20">货距 {{good.cargoDistance}}km</view>
								<view class="fontsize-25 gray ">运距 {{good.distance}}km</view>
							</view>
							<view class="flex fontsize-25 gray row">
								<view>{{good.goodsName}} | </view>
								<view>{{carLength(good)}} | {{carType(good)}} | {{carWeight(good)}}</view>
							</view>
							<view class="flex row">
								<view class="row-tips">{{good.taskDescription}}</view>
							</view>
						</view>
						<view class="right flex h-color">
							<view class="fontsize-46">
								{{good.freightPrice}}
							</view>
							<view class="flex dw">元/吨</view>
						</view>
					</view>
				</view>
				<view class="flex flex-space-between item-bottom">
					<view class="left flex row">
						<u--image :src="good.cargoOwnerPortrait" width='122rpx' height='122rpx' shape="circle">
						</u--image>
						<view class="name">{{good.cargoOwnerName}}</view>
						<!-- <view class="hp flex fontsize-24">
							<view class="gray">评分</view>
							<view class="number-color">99%</view>
						</view>
						<view class="sum flex fontsize-24">
							<view class="gray">发运次数</view>
							<view class="number-color">106</view>
						</view> -->
					</view>
					<view class="right">
						<view @click.stop="grabOrders(good)" class="qd">抢单</view>
					</view>
				</view>
			</view>
			<view class="">
				周边货源
				<view class="good-list" v-for="(good,index) in otherGoods" :key="index" @click="toDetail(good.id)">
					<view style="padding: 0 35rpx 20rpx 35rpx;">
						<view class="flex flex-space-between">
							<view class="item1">
								<view class="ssx">{{$helper.getProvinceAbbreviation(good.sendPrivate)}}</view>
								<view class="level2-title">{{good.sendCity}} {{good.sendArea}}</view>
							</view>

							<image class="jt-icon item2" src="@/static/images/goodSource/jt.png" mode='widthFix'>
							</image>
							<view class="item3">
								<view class="ssx">{{$helper.getProvinceAbbreviation(good.unloadPrivate)}}</view>
								<view class="level2-title">{{good.unloadCity}} {{good.unloadArea}}</view>
							</view>
						</view>
						<view class="right gray">
							{{good.updateDate}}
						</view>
						<view class="flex flex-space-between">
							<view class="left">
								<view class="flex">
									<view class="fontsize-25 gray mr20">货距 {{good.cargoDistance}}km</view>
									<view class="fontsize-25 gray ">运距 {{good.distance}}km</view>
								</view>
								<view class="flex fontsize-25 gray row">
									<view>{{good.goodsName}} | </view>
									<view>{{carLength(good)}} | {{carType(good)}} | {{carWeight(good)}}</view>
								</view>
								<view class="flex row">
									<view class="row-tips">{{good.taskDescription}}</view>
								</view>
							</view>
							<view class="right flex h-color">
								<view class="fontsize-46">
									{{good.freightPrice}}
								</view>
								<view class="flex dw">元/吨</view>
							</view>
						</view>
					</view>
					<view class="flex flex-space-between item-bottom">
						<view class="left flex row">
							<u--image :src="good.cargoOwnerPortrait" width='122rpx' height='122rpx' shape="circle">
							</u--image>
							<view class="name">{{good.cargoOwnerName}}</view>
							<!-- <view class="hp flex fontsize-24">
								<view class="gray">评分</view>
								<view class="number-color">99%</view>
							</view>
							<view class="sum flex fontsize-24">
								<view class="gray">发运次数</view>
								<view class="number-color">106</view>
							</view> -->
						</view>
						<view class="right">
							<view @click.stop="grabOrders(good)" class="qd">抢单</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
	</view>
</template>
<script>
	var that
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex';
	import {
		apiGoods
	} from "@/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				ObjSelect: {},
				isShowAlert: false,
				alertTitle: '确定抢单？',
				show: false,
				columns: [
					['全部类型', '运费先付']
				],
				startPlace: {},
				endPlace: {},
				otherGoods: [], // 数据列表
				goods: [], // 数据列表
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				height: "", // 需要固定swiper的高度
				tabList: [
					// 	{
					// 	name: '全部'
					// }, 
					{
						name: '推荐'
					}, {
						name: '按时间'
					}, {
						name: '按距离'
					},
					// {
					// 	name: '运费先付'
					// },
				],
				pickerSelect: '全部类型',
				tabIndex: 0,
				scrollTop: 0,
				count: 0,
				lng: '',
				lat: ''
			}
		},
		onTabItemTap(e) {
			// tab 点击时执行，此处直接接收单击事件
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		created() {

		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		onShow() {debugger
			//获取上一次点击起装卸地
			if (uni.getStorageSync('fPlaceObj')) {
				this.startPlace = uni.getStorageSync('fPlaceObj');
			} else {
				// #ifdef APP-PLUS
				this.getLngLat();
				// #endif
			}
			if (uni.getStorageSync('sPlaceObj')) {
				this.endPlace = uni.getStorageSync('sPlaceObj');
			} else {
				this.endPlace.selected = '全国'
			}
// this.mescroll.resetUpScroll()

		},
		onLoad() {
			//#ifdef APP-PLUS
			// this.getLngLat();
			//#endif
			that = this
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
			// console.log("页面滚动了", res.scrollTop)
			if (this.scrollTop > 1200) {
				uni.setTabBarItem({
					index: 0,
					text: '返回顶部',
					iconPath: 'static/images/common/top@2x.png',
					selectedIconPath: 'static/images/common/top@2x.png'
				})
			} else {
				uni.setTabBarItem({
					index: 0,
					text: '货源',
					iconPath: 'static/images/common/huoyuan@2x(1).png',
					selectedIconPath: 'static/images/common/huoyuan@2x.png'
				})
			}

		},
		methods: {
			mescrollInit(mescroll) {debugger
				this.mescroll = mescroll;
			},
			confirmClick() {
				let item = this.ObjSelect
				let _obj = {
					driverCommonId: this.firstAuthentication.commonId,
					commonId: item.commonId,
					cargoOwnerName: item.cargoOwnerName,
					cargoOwner: item.cargoOwner,
					sendPrivate: item.sendPrivate,
					sendCity: item.sendCity,
					sendArea: item.sendArea,
					sendDetailedAddress: item.sendDetailedAddress,
					unloadPrivate: item.unloadPrivate,
					unloadCity: item.unloadCity,
					unloadArea: item.unloadArea,
					unloadDetailedAddress: item.unloadDetailedAddress,
					goodsName: item.goodsName,
					distance: item.distance,
					freightPrice: item.freightPrice,
					driverName: this.firstAuthentication.driverName,
					driverPhone: this.firstAuthentication.driverPhone,
					cargoOwnerPhone: item.cargoOwnerPhone
				}

				this.$request.baseRequest('post', '/publishTaskInfo/api/addOrder', _obj).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "抢单成功！",
								complete() {
									uni.switchTab({
										url: "/pages/order/index"
									})
								}
							})

						}


					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
				this.isShowAlert = false
			},
			cancelClick() {
				this.isShowAlert = false
			},
			carLength(good) {
				let length = ''
				if (good.carLengthSmall && good.carLength) {
					length = good.carLengthSmall + '~' + good.carLength + '米'
				} else if (good.carLengthSmall) {
					length = "大于" + good.carLengthSmall + '米'
				} else if (good.carLength) {
					length = "小于" + good.carLength + '米'
				}
				return length
			},
			carType(good) {
				// let _val = '';
				// if (good.carModel == 1) {
				// 	_val = '不限'
				// } else {
				// 	if (good.carModel.includes(2)) {
				// 		_val += '高栏/'
				// 	}
				// 	if (good.carModel.includes(3)) {
				// 		_val += '集装箱/'
				// 	}
				// 	if (good.carModel.includes(4)) {
				// 		_val += '自卸车'
				// 	}
				// }
				// return _val
			},
			carWeight(good) {
				good.loadWeightSmall
				good.loadWeight
				let weight = ''
				if (good.loadWeightSmall && good.loadWeight) {
					weight = good.loadWeightSmall + '~' + good.loadWeight + '吨'
				} else if (good.loadWeightSmall) {
					weight = "大于" + good.loadWeightSmall + '吨'
				} else if (good.loadWeight) {
					weight = "小于" + good.loadWeight + '吨'
				}
				return weight
			},
			getdate() {
				var date = new Date()
				var year = date.getFullYear() //获取完整的年份(4位)
				var mouth = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
				var datetime = date.getDate() //获取当前日(1-31)
				if (mouth < 10) {
					mouth = '0' + mouth
				}
				if (datetime < 10) {
					datetime = '0' + datetime
				}
				return String(year) + String(mouth) + String(datetime)
			},
			grabOrders(item) {
				this.isShowAlert = true
				this.ObjSelect = item

			},
			confirmSelectType(val) {
				this.pickerSelect = val.value[0]
				this.show = false
			},
			selectTypeClose() {
				this.show = false
			},
			selectType() {
				this.show = true
			},
			getLngLat() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						if (res.latitude) {
							that.startPlace.selected = res.address.city
							this.lng = res.longitude;
							this.lat = res.latitude;
						} else {
							if (uni.getSystemInfoSync().platform == 'android') {
								var context = plus.android.importClass("android.content.Context");
								var locationManager = plus.android.importClass(
									"android.location.LocationManager");
								var main = plus.android.runtimeMainActivity();
								var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
								this.bool = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)
							}
							if (this.bool === false) {
								uni.showModal({
									title: '提示',
									content: '请打开定位服务',
									success: ({
										confirm,
										cancel
									}) => {
										if (confirm) {
											if (uni.getSystemInfoSync().platform == 'android') {
												var Intent = plus.android.importClass(
													'android.content.Intent');
												var Settings = plus.android.importClass(
													'android.provider.Settings');
												var intent = new Intent(Settings
													.ACTION_LOCATION_SOURCE_SETTINGS);
												var main = plus.android.runtimeMainActivity();
												main.startActivity(intent); // 打开系统设置GPS服务页面
											}
										}
									}
								});
							}
						}
					}
				});
			},
			toDetail(id) {
				//司机是否认证身份
				if (this.firstAuthentication.authenticationStatus == '已认证') {
					uni.$u.route('/pages/goodSource/shippingDetails', {
						id: id,
					});
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: "请先完成司机认证！",
					})
				}

			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				debugger
				let _pickerSelect;
				if (this.pickerSelect == '运费先付') {
					_pickerSelect = 1
				} else {
					_pickerSelect = 0
				}
				//选择省市区
				let _data = {
					searchKeyWord: this.tabIndex + 1,
					searchType: _pickerSelect,
					// loadingPlace: this.startPlace.selected,
					// unLoadingPlace: this.endPlace.selected=="全国"?'':this.endPlace.selected,
					pageSize: page.size,
					currentPage: page.num,

					// loadingPlaceCity: this.startPlace.fchoosecity,
					// unLoadingPlaceCity: this.endPlace.schoosecity

				}
				if (this.tabIndex == 2) {
					// #ifdef APP-PLUS
					this.getLngLat();
					// #endif
					_data.driverLongitude = this.lng
					_data.driverLatitude = this.lat
				}
				console.log('------')
				console.log(_data)
				if (uni.getStorageSync('fPlaceObj')) {
					if (this.startPlace.fchoosearea && this.startPlace.fchoosearea == '全部' && this.startPlace
						.fchoosearea != '请选择区') {
						_data.loadingPlaceCity = this.startPlace.fchoosecity
					} else if (this.startPlace.fchoosecity == '全部') {
						_data.loadingPlace = this.startPlace.selected
					} else {
						_data.loadingPlaceCity = this.startPlace.fchoosecity
						_data.loadingPlace = this.startPlace.fchoosearea
					}

				} else {
					_data.loadingPlaceCity = this.startPlace.fchoosecity
				}
				if (uni.getStorageSync('sPlaceObj')) {
					if (this.endPlace.schoosearea && this.endPlace.schoosearea == '全部' && this.endPlace.schoosearea !=
						'请选择区') {
						_data.unLoadingPlaceCity = this.endPlace.schoosecity
					} else if (this.endPlace.schoosearea) {
						_data.unLoadingPlace = this.endPlace.selected == "全国" ? '' : this.endPlace.selected
					} else {
						_data.unLoadingPlace = this.endPlace.selected == "全国" ? '' : this.endPlace.selected
						_data.unLoadingPlaceCity = this.endPlace.schoosecity
					}
				} else {
					_data.unLoadingPlace = this.endPlace.selected == "全国" ? '' : this.endPlace.selected
				}



				this.$request.baseRequest('get', '/publishTaskInfo/selectGoodsSource', _data).then(res => {
						if (res.code == 200) {debugger
							this.mescroll.endBySize(res.data.records.length, res.data.total);
							if (page.num == 1) {
								this.goods = [];
								// this.otherGoods = []
							}; //如果是第一页需手动制空列表
							// if(!res.data.records[0].publishTaskInfoList) res.data.records[0].publishTaskInfoList = []
							// if(!res.data.records[0].publishTaskInfoLists) res.data.records[0].publishTaskInfoLists = []
							this.goods = this.goods.concat(res.data.records); //追加新数据
							// this.otherGoods = this.otherGoods.concat(res.data.records[0].publishTaskInfoLists);
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
						this.mescroll.endErr();
					});





				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }

				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.isInitxx){
				// 	apiGetxx().then(res=>{
				// 		this.isInitxx = true
				// 		this.mescroll.resetUpScroll() // 重新触发upCallback
				// 	}).catch(()=>{
				// 		this.mescroll.endErr()
				// 	})
				// 	return // 此处return,先获取xx
				// }

				// //联网加载数据
				// apiGoods(page.num, page.size).then(res => {
				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				// 	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

				// 	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
				// 	//this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)

				// 	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
				// 	this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

				// 	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
				// 	//this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

				// 	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
				// 	// this.mescroll.endSuccess(res.list.length);

				// 	//设置列表数据
				// 	if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
				// 	this.goods = this.goods.concat(res.list); //追加新数据
				// }).catch(() => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			},
			clickTab(val) {
				this.tabIndex = val.index
				this.upCallback({
					size: 10,
					num: 1,
				})
			},
			changeCity() {
				debugger
				if (this.endPlace == '全国') {
					this.$refs.uToast.show({
						type: 'error',
						message: "卸车地为全国不允许切换！",
					})
					return
				}

				[this.startPlace.fchooseprovince, this.endPlace.schooseprovince] = [this.endPlace.schooseprovince, this
					.startPlace.fchooseprovince
				];
				[this.startPlace.fchoosecity, this.endPlace.schoosecity] = [this.endPlace.schoosecity, this.startPlace
					.fchoosecity
				];
				[this.startPlace.fchoosearea, this.endPlace.schoosearea] = [this.endPlace.schoosearea, this.startPlace
					.fchoosearea
				];
				[this.startPlace.selected, this.endPlace.selected] = [this.endPlace.selected, this.startPlace.selected];
				// [this.startPlace, this.endPlace] = [this.endPlace, this.startPlace];
			},
			goCity(type) {
				uni.$u.route('/pages/goodSource/selectCity', {
					startPlace: JSON.stringify(this.startPlace),
					endPlace: JSON.stringify(this.endPlace),
					type: type
				});
			},
			swiperChange(e) {
				this.tabIndex = e.detail.current
			}
		}
	}
</script>

<style scoped lang="scss">
	.banner {
		width: 100%;
		position: relative;
	}

	.fixed,
	.fixed1 {
		background: linear-gradient(97deg, #4FABFD 0%, #2772FB 100%);
		position: fixed;
		top: var(--status-bar-height);
		z-index: 999;
		// width: calc(100% - 40rpx);
		width: 100%;
		// margin:0 20rpx;
	}

	.fixed1 {
		top: 0;
		height: var(--status-bar-height);
		background: linear-gradient(97deg, #4FABFD 0%, #2772FB 100%);
	}

	.banner-img {
		width: 100%;
	}

	.head {
		position: absolute;
		width: calc(100% - 108rpx);
		bottom: 0;
		background: white;
		margin: 0 20rpx;
		border-radius: 20rpx;

		.item1,
		.item3 {
			width: 40%;

			.text {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

		}

		.item1 .text {
			text-align: left;
		}

		.item3 .text {
			text-align: right;
		}
	}

	.change-btn {
		width: 86rpx;
		height: 86rpx;
	}

	.good-list {
		background-color: white;
		margin: 20rpx;
		padding: 20rpx 0rpx 0 0;
		border-radius: 20rpx;

		.item1,
		.item3 {
			width: 40%;
			display: flex;

			.text {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

		}

		.item1 .text {
			text-align: left;
		}

		.item3 .text {
			text-align: right;
		}
	}

	.jt-icon {
		position: relative;
		top: 6rpx;
		width: 60rpx;
		margin: 0 20rpx;

	}

	.row {
		margin: 10rpx 0;
		align-items: center;
	}

	.item-bottom {
		background: #F0F5FF;
		padding: 0 30rpx;

		.name {
			font-size: 26rpx;
			font-weight: 700;
			color: #000000;
			margin-left: 30rpx;
		}

		.hp {
			margin: 30rpx;
		}

		.number-color {
			margin: 0 10rpx;
		}

		.qd {
			background: linear-gradient(97deg, #4FABFD 0%, #2772FB 100%);
			border-radius: 13px;
			font-size: 29rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding: 10rpx 35rpx;
		}
	}

	.dw {
		align-items: center;
	}

	.place {

		height: var(--status-bar-height);
	}

	.tab-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tab-right {
		display: flex;
		margin-right: 20rpx;
		align-items: center;
	}
</style>