meishidaQS/pages/dache/Zhengzaijiesong.nvue

<template>
	<view>
		<customNav :shownav="true" :title="i18n('dache.zhengzaifuw')" tinColor="white" jiantou="1" rightBT1='1' rightBTimg1="/static/imags/dache/baojing@2x.png" v-on:Enavbarsel="navbarsel"></customNav>
		<view class="topfloatV">
			<view v-if="obj!=''" class="floatView">
				<view class="contentInRowS topnoteView">
					<view class="contentColumn" style="margin-left: 10rpx;margin-bottom: 10rpx;">
						<view class="contentInRowL" style="align-items: center;">
							<text class="noteTxtstB">去</text>
							<text class="noteTxtstY">{{obj.downAddress}}</text>
						</view>
						<text class="noteTxtstD">{{i18n('dache.quancheng')}}{{obj.distance}}Km  {{obj.estimatedDuration}}</text>
						<text v-if="obj.state==1" class="noteTxtst">{{i18n('dache.chengkeshcd')}}</text>
					</view>
					<view class="contentColumnC">
						<uni-icons custom-prefix="custom-icon" color="#006AFF" type="navigate-filled" size="34"></uni-icons>
						<text style="font-size: 30rpx;">{{i18n('dache.daohang')}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <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 rowContentVst">
					<view class="contentInRowL" style="align-items: center;">
						<view class="contentColumnC">
							<text style="padding-left: 16rpx;font-size: 38rpx;font-weight: bold;">{{obj.user.phone.slice(-4)}}</text>
							<text style="font-size: 30rpx;">{{i18n('dache.weihao')}}</text>
						</view>
						<view class="contentColumn" style="margin-left: 16rpx;">
							<view class="contentInRowL" style="align-items: center;">
								<text style="width: 16rpx;height: 16rpx;background-color:#54B798;"></text>
								<text class="addrTextst">{{obj.boardingAddress}}{{obj.boardingAddress}}{{obj.boardingAddress}}</text>
							</view>
							<view class="contentInRowL" style="align-items: center;">
								<text style="width: 16rpx;height: 16rpx;background-color:#E86E48;"></text>
								<text class="addrTextst">{{obj.downAddress}}</text>
							</view>
						</view>
					</view>
					<view class="contentInRowR">
						<image class="actImagevst" src="/static/imags/dache/msgcm@3x.png" mode="scaleToFill" @click="gotomsg"></image>
						<image class="actImagevst" src="/static/imags/dache/phonecall@3x.png" mode="scaleToFill" @click="callPhone(obj.user.phone)"></image>
					</view>
				</view>
				<view class="contentInRowC">
					<text v-if="obj.state==1" class="bottomBt" @click="luchengAct(1)">{{i18n('dache.jiedaochk')}}</text>
					<text v-if="obj.state==2" class="bottomBt" @click="luchengAct(2)">{{i18n('dache.daodajiesuan')}}</text>
					<text v-if="obj.state==3" class="bottomBt" >{{i18n('dache.daizhifu')}}</text>
					<text v-if="obj.state==4" class="bottomBt" @click="luchengAct(3)">{{i18n('dache.yizhifu')}}</text>
				</view>
			</view>
			
		</view>
		<uni-popup style="z-index: 9999;" ref="popMsg" type="center" :isMaskClick="true" :safeArea="true">
			<view class="contentColumnC popviewContent">
				<text style="text-align: center;font-size: 32rpx;margin-top: 80rpx;">弹框信息</text>
				<text class="querenBt" @click="popQueren">{{i18n('index.queren')}}</text>
			</view>
		</uni-popup>
		
		<uni-popup style="z-index: 9999;" ref="popBjsl" type="bottom" :isMaskClick="true" :safeArea="true">
			<view class="contentColumn popviewContentBJ">
				<view class="contentInRowS bottomLine" style="margin-top: 20rpx;">
					<text style="font-size: 32rpx;margin-left: 20rpx;">一键求助</text>
					<image style="width: 60rpx;height: 60rpx;margin-right: 20rpx;" src="/static/imags/dache/dacha@3x.png" mode="scaleToFill"></image>
				</view>
				<view class="contentInRowL bottomLine" style="height: 100rpx;align-items: center;">
					<image style="width: 60rpx;height: 60rpx;margin-left: 20rpx;" src="/static/imags/dache/baojing@2x.png" mode="scaleToFill"></image>
					<text style="font-size: 32rpx;margin-left: 20rpx;">一键报警</text>
				</view>
				<view class="contentInRowL bottomLine" style="height: 100rpx;align-items: center;">
					<image style="width: 60rpx;height: 60rpx;margin-left: 20rpx;" src="/static/imags/dache/kefu@2x.png" mode="scaleToFill"></image>
					<text style="font-size: 32rpx;margin-left: 20rpx;">一键联系客服</text>
				</view>
				<view class="contentInRowL bottomLine" style="height: 100rpx;align-items: center;">
					<image style="width: 60rpx;height: 60rpx;margin-left: 20rpx;" src="/static/imags/dache/liuyan@2x.png" mode="scaleToFill"></image>
					<text style="font-size: 32rpx;margin-left: 20rpx;">一键语音留言</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				mapHeight:0,
				latitude: 22.84585,
				longitude:108.324762,
				mapContext:Object,
				
				obj:'',
				
				statusBarHeight: 0, //可视屏幕的高度
				webUrl: '',
				isShow: false,
				lat: '',
				lng: '',
			}
		},
		onLoad() {
			var info = uni.getSystemInfoSync();
			this.mapHeight=info.screenHeight;
			this.obj = uni.getStorageSync('TaxiOrder');
			console.log(this.obj);
			uni.onPushMessage((res) => {
				console.log('onPushMessage',res);
				if(null==res.data.payload||undefined==res.data.payload||''==res.data.payload){
					return;
				}
				this.getObjDetail(this.obj.id);
			});
			
			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();
			// }
			if(this.obj.state==1){
				this.gotoLocat();
			}
			else{
				this.setRouteSN();
			}
		},
		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;
				this.longitude=longitude;
				this.setRouteSN();
			},
			gotomsg(){
				uni.navigateTo({
					url:'/pages/dache/kehuheyh/Xiaoxijiaohu?id='+this.obj.id
				})
			},
			luchengAct(index){
				console.log('luchengAct')
				if(index==1){//接到乘客
					var data={
						id:this.obj.id,
						state:2,
					}
					this.SetTxorder(data,2);
				}
				else if(index==2){//到达目的地，发起收款
					var data={
						id:this.obj.id,
						state:3,
					}
					this.SetTxorder(data,3);
				}
				else if(index==3){
					uni.navigateBack();
				}
			},
			
			popQueren(){
				//this.$refs.popMsg.open('center');
				this.$refs.popMsg.close();
			},
			navbarsel(index){
				this.$refs.popBjsl.open('bottom');
			},
			
			callPhone(telphone){
				var that = this;
				uni.showModal({
				    title: that.i18n('api.message'),
				    content:that.i18n('api.nqdbddh'),
					confirmText:that.i18n('index.queren'),
					cancelText:that.i18n('index.quxiao'),
				    success: function (res) {
				        if (res.confirm) { //这里是点击了确定以后
							console.log('打电话')
							plus.device.dial(telphone, false );
				        } else { //这里是点击了取消以后
				          console.log('点击取消')
				        }
				    }
				})
			},
			
			//net work ---------------------------
			getObjDetail(id){
				api('getTxorder',{
					id:id,
				},res=>{
					console.log(res)
					if(res.data.code==200){
						this.obj=res.data.data;
						this.setRouteSN();
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			SetTxorder(data,index){
				api('SetTxorder',data,res=>{
					console.log('SetTxorder------',res)
					if(res.data.code==200){
						this.obj.state=index;
						uni.setStorageSync('TaxiOrder',this.obj);
						uni.showToast({
							title:'修改成功',//that.i18n('api.wangluoshibai'),
							icon: 'none',
							duration: 2500
						})
						if(index==2){
							this.pushMsg(this.obj.user.cid,this.obj.user.phone,'乘客上车了');
						}
						else if(index==3){
							this.pushMsg(this.obj.user.cid,this.obj.user.phone,'发起结算');
						}
						this.getObjDetail(this.obj.id);
					}
					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
					})
				})
			},
			pushMsg(cid,phone,msg){//消息推送
				var time=new Date();
				var n,y,r,h,m,s;
				n=time.getFullYear();
				y=time.getMonth()+1;
				r=time.getDate();
				h=time.getHours();
				m=time.getMinutes();
				s=time.getSeconds();
				
				var timsStr = n+'-'+y+'-'+r+' '+h+':'+m+':'+s;
				var payloadData={
					rcuser:'尾号：'+phone.slice(-4),
					time:timsStr,
					msg:msg,
					type:2
				}
				api('pushMsgYH',{
					cid:cid,
					title:'您有新消息了',
					content:msg,
					payload:payloadData
				},res=>{
					console.log(res)
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			//-----------------
			/**
			 设置起点和终点
			 **/
			setRouteSN(){
				var slat,slng,nlat,nlng;
				if(this.obj.state==1){
					slat=this.latitude;
					slng=this.longitude;
					nlat=this.obj.intoLatitude;
					nlng=this.obj.intoLongitude;
				}
				else{
					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;
				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]);
			},
			// 计算屏幕的高度
			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;
}
.topnoteView{
	margin-top: 12rpx;
	width: 680rpx;
}

.noteTxtstB{
	font-size: 40rpx;
	font-weight: bold;
	color: #1A1A1A;
}
.noteTxtstY{
	font-size: 38rpx;
	color: #E86E48;
	width: 540rpx;
}
.noteTxtstD{
	font-size: 30rpx;
	color: darkgray;
}
.noteTxtst{
	font-size: 30rpx;
	padding-bottom: 30rpx;
}

.floatView{
	display: flex;
	flex-direction: column;
	width: 700rpx;
	background-color: white;
	border-radius: 20rpx;
}

.topfloatV{
	position: fixed;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	left: 0;
	right: 0;
	top: 220rpx;
	z-index: 999;
}

.bottomfloatV{
	position: fixed;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	left: 0;
	right: 0;
	bottom: 80rpx;
	z-index: 999;
}
.rowContentVst{
	width: 660rpx;
	margin-top: 10rpx;
	padding-bottom: 10rpx;
	border-radius: 20rpx;
	border: solid lavender;
	border-width: 0px 0px 1rpx 0px;
	background-color: white;
}
.addrTextst{
	width: 340rpx;
	font-size: 28rpx;
	color:#1A1A1A;
	padding-left: 6rpx;
}
.actImagevst{
	width: 50rpx;
	height: 50rpx;
	margin-right: 20rpx;
}

.bottomBt{
	width:600rpx;
	text-align: center;
	line-height: 86rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: white;
	border-radius: 20rpx;
	background-color: #E86E48;
	margin-top: 30rpx;	
	margin-bottom: 30rpx;
}


.popviewContent{
	width:680rpx;
	background-color: white;
	border-radius: 10rpx;
}

.popviewContentBJ{
	width:750rpx;
	background-color: white;
	border-radius: 10rpx 10rpx 0rpx 0rpx;
}

.bottomLine{
	padding-bottom: 10rpx;
	border: solid lavender;
	border-width: 0px 0px 1rpx 0px;
}

.querenBt{
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	font-size: 32rpx;
	font-weight: bold;
	width: 240rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
	text-align: center;
	background-color: #E86E48;
	color: white;
}

</style>