CTEQishou/pages/dache/Chakanditu.nvue

<template>
	<view>
		<customNav :shownav="true" :title="i18n('dache.chakandit')" tinColor="#006AFF" jiantou="0" ></customNav>
		<!-- <view class="mapcontentV" :style="'height:'+mapHeight+'px;'">
			<map id="map" class="mapbody" scale="18" show-location="true" :style="'height:'+mapHeight+'px;'" :latitude="latitude" :longitude="longitude">
			</map>
		</view> -->
		<view class="" v-if="isShow">
			<web-view style="background-color: #fafafa;" ref="webview" :style="{ height: statusBarHeight + 'px' }" @onPostMessage="getMessage" :src="webUrl"></web-view>
		</view>
		<view class="bottomfloatV">
			<view v-if="obj!=''" class="floatView">
				<view class="contentInRowS bottomborder">
					<view class="contentInRowC">
						<image class="userIconm" src="/static/imags/dache/yhtoux@3x.png" mode="scaleToFill"></image>
						<text style="padding-left: 10rpx;font-size: 38rpx;font-weight: bold;">{{obj.user.phone.slice(-4)}}</text>
					</view>
					<view class="contentColumnC" style="margin-right: 20rpx;">
						<text style="font-size: 34rpx;font-weight:bold;color:#E86E48;">{{obj.amount}}{{i18n('api.huobidanwei')}}</text>
						<text class="notetextst">{{i18n('dache.juninjuli')}}{{jiejia}}</text>
					</view>
				</view>
				<view class="contentColumn rowContentVst">
					<text class="notetextst">{{i18n('dache.qidian')}}</text>
					<text class="addrTextst">{{obj.boardingAddress}}</text>
				</view>
				<view class="contentColumn rowContentVst">
					<view class="contentInRowS">
						<text class="notetextst">{{i18n('dache.zhongdian')}}</text>
						<text class="notetextst">{{i18n('dache.quancheng')}}{{obj.distance}}Km</text>
					</view>
					<text class="addrTextst">{{obj.downAddress}}</text>
				</view>
				<view v-if="obj.state==0" class="contentInRowC">
					<text class="qushcBt" @click="qiangdan(obj)">{{i18n('order.qiangdan')}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				mapHeight:0,
				latitude: 22.84585,
				longitude:108.324762,
				mapContext:Object,
				userInfo:'',
				obj:'',
				jiejia:0,
				
				statusBarHeight: 0, //可视屏幕的高度
				webUrl: '',
				isShow: false,
				lat: '',
				lng: '',
				
			}
		},
		onLoad() {
			var info = uni.getSystemInfoSync();
			this.mapHeight=info.screenHeight;
			this.userInfo = uni.getStorageSync('userInfo');
			this.obj = uni.getStorageSync('TaxiOrder');
			
			
			this.computedScreenHeight();
			// #ifdef APP-PLUS
			//this.getlocetion();
			// #endif
			// #ifdef H5
			this.lng = 113.64360881345777;
			this.lat = 34.738282020827825;
			//this.webUrl = '/hybrid/html/maps/mapindex.html?lat=' + this.lat + '&lng=' + this.lng+'&nlng=0&nlat=0';
			this.isShow = true;
			// #endif
		},
		onReady() {
			//this.mapContext = uni.createMapContext("map",this); 
			console.log('---------1')
			// if(!this.isAndroid){
			// 	this.setCenter();
			// }
			//this.isReady=true;
			//this.gotoLocat();
			if(this.obj.state>1){
				this.setRouteSN();
			}
			else{
				this.gotoLocat();
			}
		},
		methods: {
			i18n(str){
				return getApp().globalData.$t(str);
			},
			gotoLocat(){
				var that = this;
				uni.getLocation({
					type: "wgs84", //默认为 wgs84 返回 gps 坐标//谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标
					geocode: "true",
					isHighAccuracy: "true",
					accuracy: "best", // 精度值为20m
					success: function (res) {
						console.log(res);
						var latlon= res.latitude+','+res.longitude;
						that.movetoCenter(res.latitude,res.longitude,false);
					},
					fail(err) {
						console.log('--------getLocation',err)
					}
				});
			},
			movetoCenter(latitude,longitude,sLb){
				console.log(longitude)
				
				this.latitude=latitude-0.001;
				this.longitude=longitude;
				this.setRouteSN();
			},
			//net work ------------------
			qiangdan(obj){
				var data={
					id:obj.id,
					state:1,
					driverId:this.userInfo.userId
				}
				this.SetTxorder(data,1);
			},
			SetTxorder(data,index){
				api('SetTxorder',data,res=>{
					console.log('SetTxorder------',res)
					if(res.data.code==200){
						if(index==1){//抢单成功
							uni.setStorageSync('TaxiOrder',this.obj);
							uni.navigateTo({
								url:'/pages/dache/Zhengzaijiesong'
							})
							return;
						}
						uni.showToast({
							title:'修改成功',//that.i18n('api.wangluoshibai'),
							icon: 'none',
							duration: 2500
						})
					}
					else{
						uni.showToast({
							title:'修改失败',//that.i18n('api.wangluoshibai'),
							icon: 'none',
							duration: 2500
						})
					}
				},failc=>{
					//console.log('getTaxiPrices----',failc)
					uni.showToast({
						title:'网络错误',//that.i18n('api.wangluoshibai'),
						icon: 'none',
						duration: 2500
					})
				})
			},
			//-----------------
			/**
			 设置起点和终点
			 **/
			setRouteSN(){
				var slat,slng,jlat,jlng,nlat,nlng;
				if(this.obj.state>1){
					slat=this.obj.intoLatitude;
					slng=this.obj.intoLongitude;
					nlat=this.obj.downLatitude;
					nlng=this.obj.downLongitude;
					//this.webUrl = '/hybrid/html/maps/mapindex.html?lat='+slat+'&lng='+slng+'&nlat='+nlat+'&nlng='+nlng;
				}
				else{
					slat=this.latitude;
					slng=this.longitude;
					jlat=this.obj.intoLatitude;
					jlng=this.obj.intoLongitude;
					nlat=this.obj.downLatitude;
					nlng=this.obj.downLongitude;
					//this.webUrl = '/hybrid/html/maps/mapindex.html?lat='+slat+'&lng='+slng+'&jlat='+jlat+'&jlng='+jlng+'&nlat='+nlat+'&nlng='+nlng;
				}
				this.isShow = true;
			},
			
			/**
			 * 特别注意这里 nvue和vue页面 web-view---->vue  ||nvue方式不一样 详情请查看官网 https://uniapp.dcloud.net.cn/component/web-view.html#web-view
			 *
			 * */
			getMessage(e) {
				console.log("--getMessage--",e.detail.data[0]);
				var msgObj=e.detail.data[0];
				if(msgObj.type==2){
					this.jiejia = msgObj.distance;
				}
			},
			// 计算屏幕的高度
			computedScreenHeight() {
				uni.getSystemInfo({
					success: function(e) {
						// #ifndef MP
						Vue.prototype.StatusBar = e.statusBarHeight;
						if (e.platform == 'android') {
							Vue.prototype.CustomBar = e.statusBarHeight + 50;
						} else {
							Vue.prototype.CustomBar = e.statusBarHeight + 45;
						}
						// #endif
						// #ifdef MP-WEIXIN
						Vue.prototype.StatusBar = e.statusBarHeight;
						let custom = wx.getMenuButtonBoundingClientRect();
						Vue.prototype.Custom = custom;
						Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
						// #endif
						// #ifdef MP-ALIPAY
						Vue.prototype.StatusBar = e.statusBarHeight;
						Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
						// #endif
						let unitRatio = 750 / uni.getSystemInfoSync().windowWidth;
						Vue.prototype.StatusBarRpx = Vue.prototype.StatusBar * unitRatio;
						Vue.prototype.CustomBarRpx = Vue.prototype.CustomBar * unitRatio;
						Vue.prototype.unitRatio = unitRatio;
						Vue.mixin({
							data() {
								return {
									StatusBar: Vue.prototype.StatusBar, //状态栏高度(px)
									CustomBar: Vue.prototype.CustomBar, //整个标题栏高度(px)
									StatusBarRpx: Vue.prototype.StatusBarRpx, //状态栏高度(rpx)
									CustomBarRpx: Vue.prototype.CustomBarRpx //整个标题栏高度(rpx)
								};
							}
						});
					}
				});
				// 状态栏高度 导航高度  tab切换的高度 底部导航的高度
				this.statusBarHeight = uni.getSystemInfoSync().screenHeight;
			},
		}
	}
</script>

<style lang="scss">


.mapbody{
	position: absolute;
	width: 750rpx;
}
.mapcontentV{
	position: absolute;
	width: 750rpx;
	background-color:deeppink;
}
.bottomfloatV{
	position: fixed;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	left: 0;
	right: 0;
	bottom: 80rpx;
	z-index: 999;
	//background-color: white;
}

.floatView{
	display: flex;
	flex-direction: column;
	width: 700rpx;
	background-color: white;
	border-radius: 20rpx;
}
.userIconm{
	width: 100rpx;
	height: 100rpx;
	margin-left:4rpx;
	margin-top: 4rpx;
}
.bottomborder{
	padding-bottom: 16rpx;
	border: solid lavender;
	border-width: 0px 0px 1rpx 0px;
}
.rowContentVst{
	width:660rpx;
	margin-top: 10rpx;
	padding-bottom: 10rpx;
	border: solid lavender;
	border-width: 0px 0px 1rpx 0px;
	
}
.addrTextst{
	width:660rpx;
	font-size: 32rpx;
}
.notetextst{
	font-size: 28rpx;
	color: darkgray;
}
.qushcBt{
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	font-size: 32rpx;
	padding-left: 42rpx;
	padding-right: 42rpx;
	font-weight: bold;
	color: white;
	line-height: 60rpx;
	border-radius: 30rpx;
	text-align: center;
	background-color: #E86E48;
}
</style>