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">
						<view class="fontsize-28 gray">装车</view>
						<view class="fontsize-46 fontweight-500 text" @click="goCity(0)">{{startPlace}}</view>
					</view>
					<image class="change-btn item2" src="@/static/images/goodSource/change.png" mode='widthFix'
						@click="changeCity"></image>
					<view class="flex s-row item3">
						<view class="fontsize-28 gray text-align-right">卸车</view>
						<view class="fontsize-46 fontweight-500 text" @click="goCity(1)">{{endPlace}}</view>
					</view>
				</view>
				<view>
					<u-button type="" class="btn-color fontsize-36 m-top20"> 查询</u-button>
				</view>
			</view>
		</view>
		<view :class="scrollTop>1200?'fixed1':''"></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>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view :id="'good'+good.id" class="good-list" v-for="good in goods" :key="good.id"
				@click="toDetail(good.id)">
				<view style="padding: 0 35rpx 20rpx 35rpx;">
					<view class="flex flex-space-between">
						<view class="left flex flex-space-between">
							<view class="ssx">辽</view>
							<view class="level2-title">营口 鲅鱼圈</view>
							<view>
								<image class="jt-icon" src="@/static/images/goodSource/jt.png" mode='widthFix'></image>
							</view>
							<view class="ssx">
								京
							</view>
							<view class="level2-title">北京 通州</view>
						</view>
						<view class="right gray">
							01.10
						</view>
					</view>
					<view class="flex flex-space-between">
						<view class="left">
							<view class="flex">
								<view class="fontsize-25 gray mr20">货距 10km</view>
								<view class="fontsize-25 gray ">运距 35km</view>
							</view>
							<view class="flex fontsize-25 gray row">
								<view>玉米 | </view>
								<view>3.8-5米 | </view>
								<view>厢式/平板/高栏 | </view>
								<view>10吨</view>
							</view>
							<view class="flex row">
								<view class="row-tips">运输过程中其他费用，发货方承担。</view>
							</view>
						</view>
						<view class="right flex h-color">
							<view class="fontsize-46">
								300
							</view>
							<view class="flex dw">元/吨</view>
						</view>
					</view>
				</view>
				<view class="flex flex-space-between item-bottom">
					<view class="left flex row">
						<u--image :showLoading="true" :src="good.goodImg" width="70rpx" height="70rpx" shape="circle">
						</u--image>
						<view class="name">张颖</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.id)" class="qd">抢单</view>
					</view>
				</view>
			</view>
		</mescroll-body>
<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGoods
	} from "@/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				startPlace: '齐齐哈尔',
				endPlace: '全国',
				goods: [], // 数据列表
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				height: "", // 需要固定swiper的高度
				tabList: [{
					name: '全部'
				}, {
					name: '推荐'
				}, {
					name: '按时间'
				}, {
					name: '按距离'
				}, {
					name: '运费先付'
				}],
				tabIndex: 0,
				scrollTop: 0
			}
		},
		onTabItemTap(e) {
			// tab 点击时执行，此处直接接收单击事件
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			console.log(e)
		},
		created() {
		
		},
		onLoad() {
			//#ifdef APP-PLUS
			this.getLngLat();
			//#endif
			// let _isHave = this.$utils.getRoles('aaa')
			// console.log(_isHave)
			  // var Ip=returnCitySN['cip']
			  //     var cityname=returnCitySN['cname']
			  //     localStorage.setItem('Ip', Ip)
			  //     console.log(localStorage.getItem('Ip', Ip))
			  //     localStorage.setItem('cityname', cityname)
			  //     console.log(localStorage.getItem('cityname', cityname))
		},
		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: {
			getLngLat() {
				console.log(11111111111111111111111111111111111111111111111111111)
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						console.log('--------------------------------')
						console.log(res)
						if (res.latitude) {
							this.lat = res.latitude + ',' + res.longitude;
							this.startPlace = res.address.city
							// this.lng = res.longitude;
						} else {
							console.log(uni.getSystemInfoSync().platform)
							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) {
				uni.$u.route('/pages/goodSource/shippingDetails', {
					id: id,
				});
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// 此处可以继续请求其他接口
				// 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) {
				console.log(val)
			},
			changeCity() {
				if(this.endPlace=='全国') {
					this.$refs.uToast.show({
						type: 'error',
						message: "卸车地为全国不允许切换！",
					})
					return
				}
				[this.startPlace, this.endPlace] = [this.endPlace, this.startPlace];
			},
			goCity(type) {
				uni.$u.route('/pages/goodSource/selectCity', {
					startPlace: this.startPlace,
					endPlace: this.endPlace,
					type: type
				});
				console.log(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;
	}

	.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);
	}
</style>