wangluohuoyun-app/pages/cargoTerminal/cargoTerminal.vue

<!-- 货源 -->
<template>
	<view :class="{popupShow:isShowAlert}" class="content">
		<view class="banner">
			<view class="head flex">
				<view class="text flex" @click="goCity(0)">{{startPlace.sendCity}} {{startPlace.sendArea}}
					<u-icon name="arrow-down" color="##fff" size="20"></u-icon>
				</view>
				<image class="jt-icon item2" src="@/static/images/goodSource/jt.png" mode='widthFix'>
				</image>
				<view class="text flex" @click="goCity(1)">{{endPlace.unloadCity}} {{endPlace.unloadArea}}
					<u-icon name="arrow-down" color="#fff" size="20"></u-icon>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption">
			<view v-for="(good,index) in goods" :key="index" @click="toDetail(good.id)">
				<view v-if="good.peripheralInfo==1&&isFirstIndex==index" class="other-goods">周边货源</view>
				<view class="good-list">
					<view class="good-view">
						<!-- 			<image src="@/static/images/goodSource/xf.png" mode="widthFix" class="xf-iamge"
							v-if="good.freightAdvance==1"></image> -->
						<view class="list-left">
							<view class="flex align-center">
								<view class="item1">
									<!-- <view class="ssx">
										{{$helper.getProvinceAbbreviation(good.sendPrivate?good.sendPrivate:good.sendCity)}}
									</view> -->
									<view class="level2-title">{{$helper.filterUrban(good.sendCity)}}
										{{$helper.filterArea(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?good.unloadPrivate:good.unloadCity)}}
									</view> -->
									<view class="level2-title">{{$helper.filterUrban(good.unloadCity)}}
										{{$helper.filterArea(good.unloadArea)}}
									</view>
								</view>
							</view>

							<view class="flex flex-space-between row row2">
								<view class="left">
									距离约{{good.cargoDistance}}公里
								</view>
								<view class="right">
									{{good.updateDate}}发布
								</view>
							</view>
							<view class="flex flex-space-between row row3">
								<view class="left">
									<text>￥{{good.freightPrice}}</text>
									<text v-if="good.billingMethod==0">元/吨</text>
									<text v-if="good.billingMethod==1">元/车</text>
									<text v-if="good.billingMethod==2">元/方</text>
								</view>
								<view class="right">
									{{good.packageType}}{{good.goodsName}}
								</view>
							</view>
							<view class="row-content">
								{{good.content}}
							</view>
						</view>
					</view>
					<view class="flex flex-space-between item-bottom">
						<view class="left flex row">
							<u--image :src="good.headSculpture?good.headSculpture:'../../static/images/mine/tx.png'"
								width='57rpx' height='57rpx' shape="circle">
							</u--image>
							<view class="name">{{good.freightStationName}}·{{good.contacts}}</view>
						</view>
						<view class="right">
							<view @click.native.stop="toCaLL(good)" class="qd" v-if='hasLogin'><u-icon name="phone-fill"
									color="#F5BA3C"></u-icon>去电</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	var that
	import permision from "@/js_sdk/wa-permission/permission.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				isToday: false,
				downOption: {
					auto: false,
					textColor: '#bbb'
				},
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					auto: false,
					noMoreSize: 1,
					textNoMore: '没有更多了~',
					textColor: '#bbb'
				},
				confirmText: '确定',
				showCancelButton: true,
				isFirstIndex: null,
				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,
				isdblclick: 0,
				count: 0,
				lng: '',
				lat: '',
				bool: false,
				showMenu: false,
				driverCommonId: "",
				driverPhone: "",
				driverName: ""
			}
		},
		onTabItemTap(e) {
			this.isdblclick++
			// tab 点击时执行，此处直接接收单击事件
			if (this.scrollTop > 1200) {
				if (this.isdblclick > 1) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				}
			}
		},
		created() {

		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		watch: {
			// startPlace(){
			// 	console.log(this.startPlace)
			//              this.upCallback({page});
			//          },
		},
		onLoad() {
			that = this
			// this.checkOpenGPSServiceByAndroidIOS()
		},
		onHide() {
			this.isdblclick = 0
		},
		async onShow() {
			// if (this.scrollTop > 1200) {
			// 	uni.setTabBarItem({
			// 		index: 0,
			// 		text: '返回顶部',
			// 		iconPath: 's',
			// 		selectedIconPath: 'static/images/common/top@2x.png'
			// 	})
			// }
			uni.setTabBarItem({
				index: 2,
				text: '订单',
				iconPath: 'static/images/common/dingdan@2x(1).png',
				selectedIconPath: 'static/images/common/dingdan@2x.png'
			})
			var that = this
			//获取上一次起始位置
			if (uni.getStorageSync('fHzPlaceObj')) {
				that.startPlace = uni.getStorageSync('fHzPlaceObj');
			} else {

				that.startPlace = {
					sendPrivate: '辽宁省',
					sendCity: '营口市',
					sendArea: '鲅鱼圈区',
					selected: '营口市'
				}

			}
			if (uni.getStorageSync('sHzPlaceObj')) {
				that.endPlace = uni.getStorageSync('sHzPlaceObj');
			} else {
				that.endPlace = {
					unloadPrivate: '吉林省',
					unloadCity: '齐齐哈尔市',
					unloadArea: '富拉尔基',
					selected: '齐齐哈尔市'
				}
				// uni.setStorageSync('sPlaceObj', {
				// 	schoosearea: '请选择区',
				// 	schoosecity: '请选择市',
				// 	schooseprovince: '全国',
				// 	selected: '全国'
				// })
			}
			that.upCallback({
				size: 10,
				num: 1
			})

			that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
				reCommonId: this.userInfo.id,
			}).then(res3 => {
				if (res3.data || res3.data == 0) {
					let name = 'myTip';
					let value = res3.data
					if (value == 0) {
						uni.removeTabBarBadge({
							index: 3
						})
					}
					that.$store.commit('$uStore', {
						name,
						value
					});
					if (value != 0 && value) {
						uni.setTabBarBadge({
							index: 3,
							text: value + ""
						})
					}
				}
			})
			// this.mescroll.resetUpScroll()

		},
		// async onLoad() {
		// 	that = this
		// 	// #ifdef APP-PLUS
		// 	let _status = await that.$request.baseRequest('get', '/driverInfo/firstAuthentication', {
		// 		driverPhone: this.userInfo.phone,
		// 	}).then(res => {
		// 		return res.data.authenticationStatus
		// 	})
		// 	// if (_status == '已禁用') {
		// 	// 	this.isShowAlert = true
		// 	// 	this.alertTitle = '账号审核中'
		// 	// 	this.confirmText = '退出APP'
		// 	// 	this.showCancelButton = false
		// 	// } else {
		// 	// 	console.log(1231233212332312312213)
		// 	// }
		// 	// #endif

		// },

		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: {
			stopRoll() {

			},
			async get_localtion_permission() {
				var photol = await permision.checkSystemEnableLocation()
				if (photol == true) {
					this.getLngLat()
				} else {
					// that.$refs.uToast.show({
					// 	type: 'error',
					// 	message: "未获取定位权限！",
					// })
					this.checkOpenGPSServiceByAndroidIOS()
				}
			},
			async getLngLat() {
				await uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						if (res.latitude) {
							if (res.address.city) {
								if (res.address.city.indexOf('市') != -1) {
									res.address.city = res.address.city.substring(0, res.address.city
										.length - 1)
								}
							}
							if (res.address.province) {
								if (res.address.province.indexOf('省') != -1) {
									res.address.province = res.address.province.substring(0, res.address
										.province.length - 1)
								}
							}
							uni.setStorageSync('fPlaceObj', {
								fchoosearea: '全部',
								fchoosecity: res.address.city,
								fchooseprovince: res.address.province,
								selected: res.address.city
							})
							uni.setStorageSync('sPlaceObj', {
								schoosearea: '请选择区',
								schoosecity: '请选择市',
								schooseprovince: '全国',
								selected: '全国'
							})
							uni.setStorageSync('longitudeAndLatitude', res.longitude + ',' + res.latitude)
							that.upCallback({
								size: 10,
								num: 1
							})
						}
					}
				})
			},
			checkOpenGPSServiceByAndroidIOS() {
				let system = uni.getSystemInfoSync(); // 获取系统信息
				// console.log(system);
				if (system.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);
					if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
						uni.showModal({
							title: '提示',
							content: '请打开定位服务功能',
							// showCancel: false, // 不显示取消按钮
							success(res) {
								if (res.confirm) {
									uni.setStorageSync('confirm_location', 1)
									if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {

										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);
										main.startActivity(intent); // 打开系统设置GPS服务页面
										console.log()
									}
									// else {
									// 	uni.setStorageSync('fPlaceObj', {
									// 		fchoosearea: '全部',
									// 		fchoosecity: '市辖区',
									// 		fchooseprovince: '北京',
									// 		selected: '东城'
									// 	})
									// 	uni.setStorageSync('sPlaceObj', {
									// 		schoosearea: '请选择区',
									// 		schoosecity: '请选择市',
									// 		schooseprovince: '全国',
									// 		selected: '全国'
									// 	})
									// 	uni.setStorageSync('longitudeAndLatitude', '116.3972,39.9096')
									// }
								} else {
									// uni.setStorageSync('fPlaceObj', {
									// 	fchoosearea: '全部',
									// 	fchoosecity: '市辖区',
									// 	fchooseprovince: '北京',
									// 	selected: '东城'
									// })
									// uni.setStorageSync('sPlaceObj', {
									// 	schoosearea: '请选择区',
									// 	schoosecity: '请选择市',
									// 	schooseprovince: '全国',
									// 	selected: '全国'
									// })
									// uni.setStorageSync('longitudeAndLatitude', '116.3972,39.9096')
								}
							}
						});
						// uni.setStorageSync('fPlaceObj', {
						// 	fchoosearea: '全部',
						// 	fchoosecity: '市辖区',
						// 	fchooseprovince: '北京',
						// 	selected: '东城'
						// })
						// uni.setStorageSync('sPlaceObj', {
						// 	schoosearea: '请选择区',
						// 	schoosecity: '请选择市',
						// 	schooseprovince: '全国',
						// 	selected: '全国'
						// })
						if (uni.getStorageSync('fPlaceObj')) {
							that.startPlace = uni.getStorageSync('fPlaceObj');
						}
						if (uni.getStorageSync('sPlaceObj')) {
							that.endPlace = uni.getStorageSync('sPlaceObj');
						}
						uni.setStorageSync('longitudeAndLatitude', '116.3972,39.9096')
					} else {
						this.getLngLat()
					}
				} else if (system.platform === 'ios') {
					// console.log("苹果");
					var cllocationManger = plus.ios.import("CLLocationManager");
					var enable = cllocationManger.locationServicesEnabled();
					var status = cllocationManger.authorizationStatus();
					plus.ios.deleteObject(cllocationManger);
					if (enable && status != 2) {
						this.getLngLat()
						console.log("手机系统的定位已经打开");
					} else {
						console.log("手机系统的定位没有打开");
						uni.showModal({
							title: '提示',
							content: '请前往设置-隐私-定位服务打开定位服务功能',
							// showCancel: false, // 不显示取消按钮
							success(res) {
								if (res.confirm) {
									var UIApplication = plus.ios.import("UIApplication");
									var application2 = UIApplication.sharedApplication();
									var NSURL2 = plus.ios.import("NSURL");
									// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
									// var setting2 = NSURL2.URLWithString("App-Prefs:root=LOCATION_SERVICES");
									// var setting2 = NSURL2.URLWithString("app-settings");
									var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION");
									// var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION_SERVICES");
									application2.openURL(setting2);
									plus.ios.deleteObject(setting2);
									plus.ios.deleteObject(NSURL2);
									plus.ios.deleteObject(application2);
									this.getLngLat()
								}
							}
						});
					}
				}
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			cancelClick() {
				this.isShowAlert = false
			},
			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)
			},
			toCaLL(item) {
				let that = this
				this.$request.baseRequest('get', '/driverInfo/firstAuthentication', {
					driverPhone: this.userInfo.phone,
				}).then(res2 => {
					if (res2.data.authenticationStatus == '已过期') {
						that.$refs.uToast.show({
							type: 'error',
							message: '证件已过期,请上传新证件！',
						})
						return
					} else if (res2.data.authenticationStatus == '未认证' || res2.data.authenticationStatus ==
						'已驳回') {
						that.$refs.uToast.show({
							type: 'error',
							message: '请先完成司机认证！',
						})
						return
					} else if (res2.data.authenticationStatus == '审核中') {
						that.$refs.uToast.show({
							type: 'error',
							message: '司机审核中！',
						})
						return
					} else if (res2.data.authenticationStatus == '已认证') {
						uni.makePhoneCall({
							phoneNumber: item.contactsPhone
						});
					}
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/cargoTerminal/cargoTerminalDetail?id=" + id
				})
			},
			getData(time) {
				let _todayDate = new Date().setHours(0, 0, 0, 0)
				if (_todayDate == time) return true
				return false
			},
			upCallback(page) {
				console.log(this.startPlace)
				console.log(this.endPlace)
				this.$request.baseRequest('get', '/hyReleaseGoodsInfo/selectTask', {
						currentPage: page.num,
						pageSize: page.size,
						searchType: this.tabIndex + 1,
						loadingPlaceCity: this.startPlace.sendCity,
						unLoadingPlaceCity: this.endPlace.unloadCity,
						driverFlag: 1
					}).then(res => {
						uni.hideLoading()
						let curPageData = res.data.records;
						let totalPage = res.data.total;
						let curPageLen = curPageData.length;
						this.mescroll.endByPage(curPageLen, totalPage);
						console.log(res.data)
						if (page.num == 1) this.goods = [];
						this.goods = this.goods.concat(curPageData);
						for (let i = 0; i < this.goods.length; i++) {
							let _updateDate = new Date(this.goods[i].updateDate.split(' ')[0]).setHours(0, 0, 0, 0)
							this.isToday = this.getData(_updateDate)
							console.log("this.isToday",this.isToday)
							if(this.isToday){
								this.goods[i].updateDate=this.goods[i].updateDate.split(' ')[1]
							}else{
								this.goods[i].updateDate=this.goods[i].updateDate.split(' ')[0]
							}
							let _text3 = ''
							let _textList = this.goods[i].measuringMethod.split(',')
							for (let i = 0; i < _textList.length; i++) {
								if (_textList[i] == '重量（吨）') {
									_text3 += this.goods[i].weight + '吨/'
								} else {
									_text3 += this.goods[i].weight + '方/'
								}
							}
							_text3 = _text3.substring(0, _text3.length - 1)
							this.goods[i].content = this.goods[i].carModel.replace(',', '/') + '、' + this
								.goods[i].carLength.replace(',', '/') + '米、' + _text3 + '、' + this.goods[i]
								.expectedNum + '车、' + this.goods[i].goodsName + '、' + this.goods[i]
								.packageType + '、' + this.goods[i].cargoDistance + 'km'
						}

						for (let i = 0; i < that.goods.length; i++) {
							if (that.goods[i].peripheralInfo == 1) {
								that.isFirstIndex = i
								return
							}
						}

					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
						this.mescroll.endErr();
					});
			},
			goCity(type) {
				uni.$u.route('/pages/cargoTerminal/hzSelectCity', {
					startPlace: JSON.stringify(this.startPlace),
					endPlace: JSON.stringify(this.endPlace),
					type: type
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.popupShow {
		overflow: hidden;
		position: fixed;
		height: 100vh;
		width: 100%;
	}

	.content {
		background: #F2F4F7;
	}

	.banner {
		width: 100%;
		position: relative;
	}

	.u-flex-wrap {
		flex-wrap: wrap;
	}

	.fixed,
	.fixed1 {
		background: linear-gradient(97deg, #F5BA3C 0%, #F5BA3C 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, #F5BA3C 0%, #F5BA3C 100%);
	}

	.banner-img {
		width: 100%;
	}

	.head {
		background: #F5BA3C;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;

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

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

	.good-list {
		background-color: white;
		margin: 10px 10px 15px 10px;
		// padding: 10px 0px 0px 0;
		border-radius: 30rpx;
		box-shadow: 0px 5rpx 20rpx #E3E3E3;

		.good-view {
			padding: 10rpx 35rpx 10rpx 35rpx;
			position: relative;
		}

		.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;
		}

		.row2 {
			color: rgb(153, 153, 153)
		}

		.row3 {
			.left {
				color: rgb(255, 134, 0);
			}

			.right {
				color: rgb(153, 153, 153)
			}
		}
	}

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

	}

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

	.item-bottom {
		// background: #F0F5FF;
		padding: 23rpx 30rpx;
		border-radius: 0px 0px 18px 18px;

		.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, #F5BA3C 0%, #F5BA3C 100%);
			border-radius: 13rpx;
			font-size: 29rpx;
			font-weight: 400;
			color: #F5BA3C;
			padding: 15rpx 35rpx;
			display: flex;
			align-items: center;
			border: 1px solid #F5BA3C;
		}
	}

	.dw {
		align-items: center;
	}

	.place {
		height: var(--status-bar-height);
	}

	.tab-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding-left: 20rpx;
	}

	.tab-right {
		display: flex;
		margin-right: 39rpx;
		align-items: center;
	}

	.other-goods {
		// background: red;
		color: #999999;
		margin: 40rpx 0;
		display: flex;
		justify-content: center;
		font-size: 36rpx;
	}

	.level2-title {
		// font-size: 28rpx;
	}

	.yf-style {
		position: relative;

		.left {
			font-size: 25.39rpx;

			.text-space {
				margin-right: 20rpx;
			}

			.line {
				margin: 0 10rpx;
			}
		}

		.h-color {
			// position: absolute;
			// right: 0;
			// top: -30rpx;
		}
	}

	.xf-iamge {
		width: 74rpx;
		height: 43rpx;
		position: absolute;
		top: -20rpx;
		right: 0;
	}

	.place-title {
		margin-bottom: 11rpx;
	}

	.btn-color {
		margin-top: 52rpx;
		padding: 30rpx 0;
	}

	.row-content {
		color: rgb(153, 153, 153);
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>