medicine-xcx/pagesC/receiving/receiving.vue

<template>
	<view class="receiving flex-1">
		<view class="receiving-container" v-if="addressData.length">
			<view v-for="item in addressData" :key="item.id">
				<receiving-item :list="item" active :type="type"  />
			</view>
		</view>
		<view class="vw-100 h-100" v-else>
			<u-empty icon-size="430" mode="" :src="IMG_URL + 'receiving-empty.png'"></u-empty>
		</view>
		<view class="receiving-footer position-fixed flex align-center justify-center" v-if="!addressData.length">
			<u-button type="primary" shape="circle" @click="toAdd">新增取货点</u-button>
		</view>
	</view>
</template>

<script>
	import { IMG_URL } from '@/env.js'
	export default{
		data(){
			return{
				IMG_URL,
				value:'',
				params:{
					pageNo:1,
					pageSize:10
				},
				addressData:[],
				pageNo: 1,
				pageSize: 10,
				total: null,
				isLock: true,
				type: ''
			}
		},
		computed: {
			userInfo () {
				return this.$store.state.userInfo
			},
			longitude () {
				console.log(this.userInfo)
				return this.userInfo?.longitude ||　0
			},
			latitude () {
				return this.userInfo?.latitude ||　0
			}
		},
		onLoad(options) {
			this.type = options?.type || ''
			this.getStationmasterList()
			// this.getLongitudeLatitude();
			uni.$on('delAddress', () => {
			})
		},
		onUnload() {
			uni.$off('delAddress');
		
		},
		onReachBottom() {
			if(this.isLock) {
				if(this.total !== null && this.pageNo * this.pageSize >= this.total){
					this.isLock = false;
					this.$Toast('没有更多数据了哦！');
					setTimeout(()=>{
						this.isLock = true;
					},3000)
					return
				}
				this.pageNo+=1;
				this.getStationmasterList();
			}
		},
		methods: {
			toAdd () {
				this.$tools.navigateTo({
					url: '/pagesC/receiving/receivingMap'
				})
			},

			getStationmasterList(){
				const params = {
					longitude: this.longitude,
					latitude: this.latitude
				}
				this.$api('getStationmasterList',params).then( res => {
					let { code, result, message } = res;
					if( code == 200) {
						result.forEach(item => {
							item.distance = this.GetDistance(item.latitude,item.longitude);
						})
						
						this.addressData = this.addressData.concat(result);
						console.log(this.addressData)
					} else {
						code !== 9001 && this.$Toast(message)
					}
				}).catch(err => {
					this.$Toast(err.message)
				})
			},
			Rad(d) {
					return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
			},

			GetDistance(lat1, lng1) {//传入两个点的经纬度
					let	lat2= this.latitude;
					let lng2 = this.longitude;
					let radLat1 = this.Rad(lat1);
					let radLat2 = this.Rad(lat2);
					let a = radLat1 - radLat2;
					let b = this.Rad(lng1) - this.Rad(lng2);
					let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
									Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
					s = s * 6378.137;// EARTH_RADIUS;
					s = Math.round(s * 10000) / 10000; //输出为公里
					s = s.toFixed(2);//保留小数点后两位小数
					return s;
			},
		
		}
	}
</script>

<style scoped lang="scss">
	
	.list-box{
		width: 750upx;
	}
	.u-radio-group{
		width: 100%;
	}
	.item{
		margin: 32upx;
		border: 1upx solid #707070;
		padding: 20upx;
		border-radius: 10upx;
		position: relative;
		width: 100%;
		.delete{
			position: absolute;
			right: 20upx;
			top: 20upx;
		}
		.header-box{
			display: flex;
			align-items: center;
			text{
				margin-left: 12upx;
				font-size: 26upx;
			}
			.phone-box{
				margin-left: 20upx;
			}
			.nickname{
				font-size: 28upx;
				font-weight: bold;
				color: #000000;
			}
			.tel{
				color: #707070;
				margin-left: 4upx;
			}
		}
		.content-box{
			padding: 20upx 10upx;
			display: flex;
			font-size: 28upx;
			color: #707070;
			text{
				margin-left: 8upx;
			}
		}
		.bottom-box{
			padding:10upx 10upx 10upx 10upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26upx;
			.text-orange-dark{
				color: #FFA206;
				font-size: 26upx;
			}
		}
	}
	.function-box{
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		height: 150upx;
		width: 750upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.create{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 670upx;
			height: 95upx;
			background-color: #000000;
			color: #FFFFFF;
		}
	}
	
	.receiving {
		padding-bottom: 120rpx;
		
		
		&-container {
			height: 100%;
			background: #fff;
			padding: 30rpx;
		}
		&-footer {
			height: 120rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			/deep/.u-btn {
				width: 600rpx;
				height: 80rpx;
			}
		}
	}
</style>