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.
535 lines
16 KiB
535 lines
16 KiB
<template>
|
|
<view class="page" :style="'height:' + windowHeight + 'px;'">
|
|
<map id="mymap" scale="14" :longitude="longitude" :latitude="latitude" :markers="markers" :polyline="polyline"
|
|
class="map" :style="'height:' + windowHeight + 'px;'">
|
|
<view class="tip column">
|
|
<view v-for="(item,index) in tiparray" class="tipsub row">
|
|
<image v-if="index == 0" class="tipimage" src="../../static/image/h.png"></image>
|
|
<image v-if="index == 1" class="tipimage" src="../../static/image/l.png"></image>
|
|
<image v-if="index == 2" class="tipimage" src="../../static/image/yiqujian.png"></image>
|
|
<image v-if="index == 3" class="tipimage" src="../../static/image/fuwu.png"></image>
|
|
<image v-if="index == 4" class="tipimage" src="../../static/image/weifuwu.png"></image>
|
|
<text class="tiptext">{{item}}</text>
|
|
</view>
|
|
</view>
|
|
</map>
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view id="drapview" ref="drapview" @touchstart="touchStart" class="drapview"
|
|
:style="'top:' + draptop +'px;'">
|
|
<view class="drapbtn">
|
|
<view class="drapbtnline"></view>
|
|
<text
|
|
class="drapbtntext">{{i18n.order.dangqiangongpeisong + list.length + i18n.order.dan}}</text>
|
|
</view>
|
|
<view class="scroll">
|
|
<!-- #endif -->
|
|
<view @click="gotomapdetail(item)" v-for="(item,index) in list" class="cell column">
|
|
<view class="section1 row">
|
|
<image v-if="item.ispre == 1" class="section1-image-yu "
|
|
src="../../static/image/yu.png"></image>
|
|
<image v-else class="section1-image" src="../../static/image/shijian.png"></image>
|
|
<block v-if="(item.type == 4 || item.type == 5) && item.status == 4">
|
|
<text class="section1-time">{{i18n.order.fuwuzhong}}</text>
|
|
</block>
|
|
<block v-if="(item.type == 4 || item.type == 5) && item.status == 3" class="row">
|
|
<text class="section1-time">{{item.service_time}}</text>
|
|
<text class="section1-times">{{i18n.order.daoda}}</text>
|
|
</block>
|
|
<block v-if="item.type == 1 || item.type == 2" class="row">
|
|
<text class="section1-time">{{item.service_time}}</text>
|
|
<text class="section1-times">{{i18n.order.qujian}}</text>
|
|
</block>
|
|
<block v-if="item.type == 3" class="row">
|
|
<text class="section1-time">{{item.service_time}}</text>
|
|
<text class="section1-times">{{i18n.order.songda}}</text>
|
|
</block>
|
|
</view>
|
|
<view class="section2 row">
|
|
<block v-if="item.type ==1 ||item.type == 2 ||item.type == 3">
|
|
<text v-if="item.status == 3" class="section2-left"
|
|
style="background-color: #FF5725;">{{index + 1}}</text>
|
|
<text v-if="item.status == 4" class="section2-left"
|
|
style="background-color: #CACACA;">{{index + 1}}</text>
|
|
</block>
|
|
<block v-else>
|
|
<text v-if="item.status == 3" class="section2-left"
|
|
style="background-color: rgba(63,184,253,1);">{{index + 1}}</text>
|
|
<text v-if="item.status == 4" class="section2-left"
|
|
style="background-color: rgba(253,174,33,1);">{{index + 1}}</text>
|
|
</block>
|
|
<view class="section2-right column">
|
|
<block v-if="item.type != 4 && item.type != 5">
|
|
<block v-if="item.type == 3">
|
|
<block v-if="item.extra.type == 2">
|
|
<text
|
|
class="section2-right-title oneline">{{i18n.order.jiujingoumai}}</text>
|
|
</block>
|
|
<block v-else>
|
|
<text class="section2-right-title oneline">{{item.f_name}}</text>
|
|
<text class="section2-right-des oneline">{{item.f_addr}}</text>
|
|
</block>
|
|
</block>
|
|
<block v-else>
|
|
<text class="section2-right-title oneline">{{item.f_name}}</text>
|
|
<text class="section2-right-des oneline">{{item.f_addr}}</text>
|
|
</block>
|
|
</block>
|
|
<block v-else>
|
|
<text class="section2-right-title oneline">{{item.t_name}}</text>
|
|
<text class="section2-right-des oneline">{{item.t_addr}}</text>
|
|
</block>
|
|
</view>
|
|
<image v-if="item.type == 4 || item.type == 5"
|
|
@tap.stop="qudaohang(item.t_lng,item.t_lat,item.t_name,$event)"
|
|
class="daohangimgage" src="../../static/image/daohang.png">
|
|
</image>
|
|
<image v-else @tap.stop="qudaohang(item.f_lng,item.f_lat,item.f_name,$event)"
|
|
class="daohangimgage" src="../../static/image/daohang.png">
|
|
</image>
|
|
</view>
|
|
<view v-if="item.type !=4 && item.type != 5" class="section3 row">
|
|
<text class="section2-left" style="background-color: #26CC91;">{{index + 1}}</text>
|
|
<view class="section2-right column">
|
|
<text class="section2-right-title oneline">{{item.t_name}}</text>
|
|
<text class="section2-right-des oneline">{{item.t_addr}}</text>
|
|
</view>
|
|
<image @tap.stop="qudaohang(item.t_lng,item.t_lat,item.t_name,$event)"
|
|
class="daohangimgage" src="../../static/image/daohang.png">
|
|
</view>
|
|
<view class="section4 row">
|
|
<text v-if="item.type_t" class="section4-type1">{{item.type_t}}</text>
|
|
<text v-if="item.tips" class="section4-type2"
|
|
:style="item.ispre == 1?'background-color: #FDC208;':''">{{item.tips}}</text>
|
|
</view>
|
|
<view v-if="item.des.length > 0" class="section6">
|
|
<text class="sectionbeizhu">{{item.des}}</text>
|
|
</view>
|
|
<image class="zhuandan" v-if="item.istrans == 1" src="../../static/image/zhuandan.png">
|
|
</image>
|
|
</view>
|
|
<view style="height: 20px"></view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
</scroll-view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// #ifdef APP-PLUS
|
|
const Binding = uni.requireNativePlugin('bindingx');
|
|
let obj = null
|
|
// #endif
|
|
const time = 460
|
|
export default {
|
|
components: {},
|
|
|
|
data() {
|
|
return {
|
|
drapbottom: 0,
|
|
latitude: '',
|
|
longitude: '',
|
|
polylines: [],
|
|
markers: [],
|
|
minheight: 60,
|
|
StartY: 0,
|
|
StartX: 0,
|
|
windowHeight: 0,
|
|
drapHeight: 0,
|
|
tiparray: ["取件点", "送件点", "已取件", '服务中', '未服务'],
|
|
list: [],
|
|
platform: '',
|
|
draptop: 0,
|
|
position: { // 记录小球当前位置
|
|
y: 0
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
polyline() {
|
|
return this.polylines.slice(0)
|
|
},
|
|
i18n() {
|
|
// return this.$t('index')
|
|
return getApp().globalData.$t('index') //当然页面中就是按Vue页面里那样使用了
|
|
}
|
|
},
|
|
onReady() {
|
|
this.tiparray = [
|
|
this.i18n.order.qujiandian,
|
|
this.i18n.order.songjiandian,
|
|
this.i18n.order.yiqujian,
|
|
this.i18n.order.fuwuzhong,
|
|
this.i18n.order.weifuwu
|
|
]
|
|
uni.setNavigationBarTitle({
|
|
title: this.i18n.order.renwuditu
|
|
})
|
|
},
|
|
mounted() {
|
|
// #ifdef APP-PLUS
|
|
const drapview = this.getEl(this.$refs.drapview)
|
|
obj = Binding.bind({
|
|
anchor: drapview,
|
|
eventType: 'pan',
|
|
props: [{
|
|
element: drapview,
|
|
property: 'transform.translateY',
|
|
expression: `y+${this.position.y}`,
|
|
}]
|
|
}, (e) => {
|
|
if (e.state === 'end') {}
|
|
})
|
|
// #endif
|
|
},
|
|
onLoad() {
|
|
var that = this
|
|
this.minheight = 60 + getApp().globalData.safeAreaBottom
|
|
this.windowHeight = getApp().globalData.windowHeight - getApp().globalData.top - 44
|
|
this.drapHeight = this.minheight
|
|
this.draptop = this.windowHeight / 1.5
|
|
|
|
uni.getStorage({
|
|
key: 'alltaskarray',
|
|
success(res) {
|
|
that.list = res.data
|
|
that.makeline(that.list)
|
|
console.log(that.list)
|
|
}
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
makeline(list) {
|
|
var mylocation = uni.getStorageSync('mylocation')
|
|
this.MapContext = uni.createMapContext("mymap", this)
|
|
var that = this
|
|
for (let i = 0; i < list.length; i++) {
|
|
var dic = list[i]
|
|
if (i == 0) {
|
|
if (dic.type == 4 || dic.type == 5) {
|
|
that.latitude = dic.t_lat
|
|
that.longitude = dic.t_lng
|
|
} else {
|
|
that.latitude = dic.f_lat
|
|
that.longitude = dic.f_lng
|
|
if (dic.type == 3 && dic.f_lng == '') {
|
|
that.latitude = dic.t_lat
|
|
that.longitude = dic.t_lng
|
|
}
|
|
}
|
|
}
|
|
that.getline(dic, mylocation)
|
|
}
|
|
that.addMarkers(list, mylocation)
|
|
},
|
|
getline(dic, mylocation) {
|
|
var that = this
|
|
setTimeout(() => {
|
|
var positions = []
|
|
if (dic.type == 4 || dic.type == 5) {
|
|
positions = [{
|
|
latitude: mylocation.latitude,
|
|
longitude: mylocation.longitude,
|
|
}, {
|
|
latitude: dic.t_lat,
|
|
longitude: dic.t_lng,
|
|
}]
|
|
} else {
|
|
positions = [{
|
|
latitude: dic.f_lat,
|
|
longitude: dic.f_lng,
|
|
}, {
|
|
latitude: dic.t_lat,
|
|
longitude: dic.t_lng,
|
|
}]
|
|
if (dic.type == 3 && dic.f_lng == '') {
|
|
positions = [{
|
|
latitude: mylocation.latitude,
|
|
longitude: mylocation.longitude,
|
|
}, {
|
|
latitude: dic.t_lat,
|
|
longitude: dic.t_lng,
|
|
}]
|
|
}
|
|
}
|
|
const taskLine = {
|
|
points: positions,
|
|
color: '#FF5725',
|
|
width: 4,
|
|
borderWidth: 2,
|
|
dottedLine: true,
|
|
}
|
|
that.polylines.push(taskLine)
|
|
}, 0)
|
|
},
|
|
wgs84togcj02(lng, lat) {
|
|
//定义一些常量
|
|
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
|
|
var PI = 3.1415926535897932384626;
|
|
var a = 6378245.0;
|
|
var ee = 0.00669342162296594323;
|
|
var dlat = this.transformlat(lng - 105.0, lat - 35.0);
|
|
var dlng = this.transformlng(lng - 105.0, lat - 35.0);
|
|
var radlat = lat / 180.0 * PI;
|
|
var magic = Math.sin(radlat);
|
|
magic = 1 - ee * magic * magic;
|
|
var sqrtmagic = Math.sqrt(magic);
|
|
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
|
|
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
|
|
var mglat = lat + dlat;
|
|
var mglng = lng + dlng;
|
|
return [mglng, mglat]
|
|
},
|
|
transformlat(lng, lat) {
|
|
//定义一些常量
|
|
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
|
|
var PI = 3.1415926535897932384626;
|
|
var a = 6378245.0;
|
|
var ee = 0.00669342162296594323;
|
|
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(
|
|
lng));
|
|
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
|
|
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
|
|
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
|
|
return ret
|
|
},
|
|
transformlng(lng, lat) {
|
|
//定义一些常量
|
|
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
|
|
var PI = 3.1415926535897932384626;
|
|
var a = 6378245.0;
|
|
var ee = 0.00669342162296594323;
|
|
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
|
|
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
|
|
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
|
|
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
|
|
return ret
|
|
},
|
|
qudaohang(l, t, name, e) {
|
|
// #ifdef APP-NVUE
|
|
e.stopPropagation();
|
|
// #endif
|
|
this.openLocation('__UNI__7350749', l, t, name)
|
|
},
|
|
openLocation(appid, lng, lat, name) {
|
|
var farray = this.wgs84togcj02(lng, lat)
|
|
lng = farray[0]
|
|
lat = farray[1]
|
|
uni.openLocation({
|
|
latitude: parseFloat(lat),
|
|
longitude: parseFloat(lng),
|
|
success: function() {
|
|
console.log('success');
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
}
|
|
});
|
|
},
|
|
getEl(el) {
|
|
if (typeof el === 'string' || typeof el === 'number') return el;
|
|
if (WXEnvironment) {
|
|
return el.ref;
|
|
} else {
|
|
return el instanceof HTMLElement ? el : el.$el;
|
|
}
|
|
},
|
|
gotomapdetail(item) {
|
|
uni.navigateTo({
|
|
url: '../detailmap/index?oid=' + item.id,
|
|
});
|
|
},
|
|
touchStart(e) {
|
|
// #ifdef MP-WEIXIN
|
|
this.StartY = e.changedTouches[0].pageY
|
|
this.StartX = e.changedTouches[0].pageX
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
this.bindstart(e)
|
|
// #endif
|
|
},
|
|
bindstart(e) {
|
|
const drapview = this.getEl(this.$refs.drapview)
|
|
obj = Binding.bind({
|
|
anchor: drapview,
|
|
eventType: 'pan',
|
|
props: [{
|
|
element: drapview,
|
|
property: 'transform.translateY',
|
|
expression: `y+${this.position.y}`,
|
|
}]
|
|
}, (e) => {
|
|
if (e.state === 'end') {
|
|
if (!e.deltaY) {
|
|
return
|
|
}
|
|
this.position.y += e.deltaY
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('#drapview').boundingClientRect(data => {
|
|
let moveY = 0
|
|
if (this.position.y < 0) {
|
|
if (data.bottom < this.windowHeight) {
|
|
moveY = -(this.position.y + data.height - this.windowHeight / 3)
|
|
}
|
|
} else {
|
|
if (this.position.y > 200) {
|
|
moveY = 0 - this.position.y
|
|
}
|
|
}
|
|
const expression_y =
|
|
`easeInOutCubic(t,${this.position.y},${moveY},${time})`
|
|
let result = Binding.bind({
|
|
eventType: 'timing',
|
|
exitExpression: `t>=${time}`,
|
|
props: [{
|
|
element: drapview,
|
|
property: 'transform.translateY',
|
|
expression: expression_y
|
|
}]
|
|
}, (e) => {
|
|
if (e.state === 'end' || e.state === 'exit') {
|
|
this.position.y += moveY
|
|
}
|
|
});
|
|
}).exec();
|
|
}
|
|
})
|
|
},
|
|
touchMove(e) {
|
|
// #ifdef MP-WEIXIN
|
|
var distanceY = e.changedTouches[0].pageY - this.StartY
|
|
var distanceX = e.changedTouches[0].pageX - this.StartX
|
|
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {} else if (Math.abs(distanceX) > Math
|
|
.abs(
|
|
distanceY) && distanceX < 0) {} else if (Math.abs(distanceX) < Math.abs(distanceY) &&
|
|
distanceY <
|
|
0) {
|
|
if (this.drapHeight == this.windowHeight || this.drapHeight > this.windowHeight) {
|
|
return
|
|
}
|
|
} else if (distanceY > 0) {
|
|
if (this.drapHeight == this.minheight || this.drapHeight < this.minheight) {
|
|
this.drapHeight = this.minheight
|
|
return
|
|
}
|
|
} else {
|
|
return
|
|
}
|
|
this.drapHeight = this.windowHeight - e.changedTouches[0].pageY
|
|
// #endif
|
|
},
|
|
addMarkers(list, mylocation) {
|
|
var that = this
|
|
setTimeout(() => {
|
|
let x = -4
|
|
// #ifdef MP-WEIXIN
|
|
x = 0
|
|
// #endif
|
|
for (let i = 0; i < list.length; i++) {
|
|
// #ifdef APP-PLUS
|
|
if ((i + 1) >= 10) {
|
|
x = -7
|
|
}
|
|
// #endif
|
|
var dic = list[i]
|
|
var latitude1
|
|
var latitude2
|
|
var longitude1
|
|
var longitude2
|
|
var content = i + 1
|
|
var img = '../../static/locationimage/cc.png'
|
|
var img2 = '../../static/locationimage/aa.png'
|
|
if (dic.type == 4 || dic.type == 5) {
|
|
latitude1 = mylocation.latitude
|
|
longitude1 = mylocation.longitude
|
|
latitude2 = dic.t_lat
|
|
longitude2 = dic.t_lng
|
|
} else {
|
|
latitude1 = dic.f_lat
|
|
longitude1 = dic.f_lng
|
|
latitude2 = dic.t_lat
|
|
longitude2 = dic.t_lng
|
|
}
|
|
if (dic.type == 1 || dic.type == 2 || dic.type == 3) {
|
|
if (dic.status == 3) {
|
|
img = '../../static/locationimage/bb.png'
|
|
}
|
|
if (dic.status == 4) {
|
|
img = '../../static/locationimage/cc.png'
|
|
}
|
|
} else {
|
|
if (dic.status == 3) {
|
|
img = '../../static/locationimage/dd.png'
|
|
img2 = '../../static/locationimage/dd.png'
|
|
}
|
|
if (dic.status == 4) {
|
|
img = '../../static/locationimage/ee.png'
|
|
img2 = '../../static/locationimage/ee.png'
|
|
}
|
|
}
|
|
const marker1 = {
|
|
iconPath: img,
|
|
label: {
|
|
content: String(i + 1),
|
|
fontSize: 12,
|
|
anchorX: x,
|
|
anchorY: -30,
|
|
textAlign: 'center',
|
|
color: '#FFFFFF',
|
|
bgColor: 'rgba(0,0,0,0)'
|
|
},
|
|
id: i + 100,
|
|
width: 40,
|
|
height: 40,
|
|
latitude: latitude1,
|
|
longitude: longitude1,
|
|
};
|
|
const marker2 = {
|
|
iconPath: img2,
|
|
label: {
|
|
content: String(i + 1),
|
|
fontSize: 12,
|
|
anchorX: x,
|
|
anchorY: -30,
|
|
textAlign: 'center',
|
|
color: '#FFFFFF',
|
|
bgColor: 'rgba(0,0,0,0)'
|
|
},
|
|
id: i + 200,
|
|
width: 40,
|
|
height: 40,
|
|
latitude: latitude2,
|
|
longitude: longitude2,
|
|
};
|
|
that.markers.push(marker1)
|
|
that.markers.push(marker2)
|
|
if (that.markers.length / 2 == list.length) {
|
|
that.MapContext.addMarkers({
|
|
markers: that.markers,
|
|
clear: false,
|
|
success(res) {
|
|
|
|
},
|
|
fail(err) {
|
|
|
|
},
|
|
complate(res) {
|
|
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}, 0)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style>
|
|
|