school-peisong/pages/Missionmap/index.nvue

<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>