You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
4.6 KiB
226 lines
4.6 KiB
<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>
|