cte-share/pages/dache/Dacheshouye.nvue

<template>
	<view>
		<view class="topContentV">
			<view class="contentInRowS" style="width:700rpx">
				<image style="width: 56rpx;height: 56rpx;" src="/static/images/fanhuiy@3x.png" mode="scaleToFill" @click="fanhui"></image>
				<image style="width: 44rpx;height: 44rpx;" src="/static/images/dache/546@3x.png" mode="scaleToFill" @click="navbarsel(0)"></image>
			</view>
		</view>
		<view class="leftpopo">
			<uni-drawer ref="showLeft" mode="left" :width="250" @change="change($event,'showLeft')">
				<view class="leftpopo">
					<view class="contentInRowR" style="margin-top: 100rpx;margin-right: 16rpx;" @click="closeDrawer('showLeft')">
						<image style="width: 60rpx;height: 60rpx;" src="/static/images/dache/dacha@3x.png" mode="scaleToFill"></image>
					</view>
					<view class="contentInRowL" style="margin-top: 20rpx;margin-bottom: 30rpx;margin-left: 30rpx;align-items: center;" @click="gotousercenter">
						<netImage class="iconImg" width="120" height="120" bradius="60" :mysrc="userInfo.avatar" mymode="scaleToFill"></netImage>
						<view v-if="userInfo!=''" class="contentColumn" style="padding-left: 20rpx;">
							<text class="nameText">{{userInfo.nickName}}</text>
							<text class="phoneText">{{userInfo.userName}}</text>
						</view>
					</view>
					<view class="contentInRowL drawerlist" @click="gotochezhurz(1)">
						<image class="drawerlistIcon" src="/static/images/dache/xingchengjil.png" mode="scaleToFill"></image>
						<text class="drawerlisttext">{{i18n('dache.xingchengjl')}}</text>
					</view>
					<view class="contentInRowL drawerlist" @click="gotochezhurz(2)">
						<image class="drawerlistIcon" src="/static/images/dache/kfzx@3x.png" mode="scaleToFill"></image>
						<text class="drawerlisttext">{{i18n('dache.lianxikefu')}}</text>
					</view>
				</view>
				
			</uni-drawer>
		</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="bottomfloatV">
			<dachexingcheng v-if="actIndex==0" :xiugai="xiugaimdd" :weizhifu="wzfState" v-on:EXCactSelect="XCactSelect"></dachexingcheng>
			<dachexuancx v-if="actIndex==1" :XChengObj="XChengObj" v-on:EQuerenhj="Querenhj"></dachexuancx>
			<dachedengdai v-if="actIndex==2" :timeInde="dengdai" v-on:EddSelect="dengdaiSel"></dachedengdai>
			<dachesijijied v-if="actIndex==3" :XChengObj="XChengObj" v-on:EJDactSelect="JDactSelect"></dachesijijied>
			<dachejiesuan v-if="actIndex==4" :XChengObj="XChengObj" :qibuf="qibuf"></dachejiesuan>
		</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;">订单已超5分钟，此时取消 需支付一定的费用</text>
				<view class="contentInRowS" style="width: 80%;">
					<text class="quxiaoBt" @click="popQueren(0)">取消</text>
					<text class="querenBt" @click="popQueren(1)">确认</text>
				</view>
				
			</view>
		</uni-popup>
		<!-- <view class="querenBt" style="margin-left: 200rpx;margin-top: 300rpx;">
			<text  @click="popQueren(3)">确认</text>
		</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,
				
				showLeft: false,
				userInfo:'',
				tableList:[],
				toptableindex:0,
				actIndex:0,
				xiugaimdd:0,
				wzfState:0,
				
				TPricesObj:'',
				XChengObj:'',
				qibuf:0,
				dengdai:0,
				timer:''
			}
		},
		onLoad() {
			var token = getApp().globalData.token;
			this.getUserMsg(token);
			var info = uni.getSystemInfoSync();
			this.mapHeight=info.screenHeight;
			this.getTaxiPrices();
			this.getOrderlist();
		},
		onUnload() {
			clearInterval(this.timer);
		},
		onReady() {
			this.mapContext = uni.createMapContext("map",this); 
			console.log('---------1')
			// if(!this.isAndroid){
			// 	this.setCenter();
			// }
			
			this.gotoLocat();
		},
		onShow() {
			this.tableList=[
				{ value: -1, text: this.i18n('order.quanbudd') },
				{ value: 0, text: this.i18n('order.daifukuan') },
				{ value: 5, text: this.i18n('order.yiwancheng')},
			];
			
		},
		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;
				
			},
			navbarsel(index){
				this.$refs.showLeft.open()
			},
			closeDrawer(e){
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				//console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			fanhui(){
				uni.navigateBack();
			},
			gotousercenter(){
				uni.navigateTo({
					url:'/pages/UserCenter/UserCenter'
				})
			},
			gotochezhurz(index){
				if(index==1){
					uni.navigateTo({
						url:'/pages/dache/XingchengList'
					})
				}
				if(index==2){//联系客服，直接打电话
					uni.navigateTo({
						url:'/pages/dache/Xiaoxijiaohu'
					})
				}
			},
			getUserMsg(token){
				//console.log('getUserMsg')
				api('getUserMsg',{
				},res=>{
					//console.log(res.data)
					if(res.data.code==200){
						console.log('this.userInfo',res.data)
						this.userInfo=res.data.data;
						uni.setStorageSync('userInfo',res.data.data);
						if(res.data.data.userType==1){
							this.isShangjia=true;
						}
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			tableselct(value,index){
				this.toptableindex = index;
			},
			popQueren(index){
				if(index==0){
					this.$refs.popMsg.close();
					return;
				}
				if(index==1){
					this.$refs.popMsg.close();
					console.log('确认')
					return;
				}
				if(index==3){
					this.$refs.popMsg.open('center');
				}
			},
			XCactSelect(index,mdaddr){
				if(index==0){//处理未完成订单
					uni.navigateTo({
						url:'/pages/dache/XingchengList'
					})
					return;
				}
				if(index==1){//刷新定位
					this.gotoLocat();
				}
				if(index==2){//我要叫车
					this.actIndex=1;
					this.jisuanxingcheng();
				}
				if(index==3){//确认修改目的地
					this.actIndex=0;
				}
				if(index==4){//输入目的地
					
				}
			},
			Querenhj(obj){
				var distance=obj.distance;
				var fare = (distance-this.TPricesObj.startingDistance)*this.TPricesObj.skipPrice;
				var amount=fare+this.TPricesObj.startingPrice;
				obj.fare = fare;
				obj.amount = amount;
				this.addTxorder(obj);
			},
			JDactSelect(index){
				if(index==0){//取消订单
					var that = this;
					uni.showModal({
					    title:'取消行程',
					    content:'确认取消行程吗？',
						cancelText:that.i18n('order.quxiao'),
						confirmText:that.i18n('comp.queren'),
					    success: function (res) {
							if (res.confirm) { //这里是点击了确定以后
								var data = {
									id:that.XChengObj.id,
									state:6
								}
								that.SetTxorder(data,0);
							} else { //这里是点击了取消以后
							  console.log('用户点击取消')
							}
							
					    }
					})
				}
				if(index==1){//打电话
					
				}
				if(index==2){//司机聊天
					uni.navigateTo({
						url:'/pages/dache/Xiaoxijiaohu?id='+this.XChengObj.id
					})
				}
				if(index==3){//一键报警
					
				}
				if(index==4){//客服中心,直接电话联系
					
				}
				if(index==5){//申请修改目的地
					this.actIndex=0;
					this.xiugaimdd=1;
				}
				if(index==6){//语音留言
					
				}
			},
			
			startTime(){
				this.dengdai=0;
				this.timer = setInterval(() => {
					this.dengdai=this.dengdai+1;
				}, 1000);
			},
			endTime(){
				this.dengdai=0;
				clearInterval(this.timer);
			},
			
			dengdaiSel(index){
				//取消订单
				var that = this;
				uni.showModal({
				    title:'取消行程',
				    content:'确认取消行程吗？',
					cancelText:that.i18n('order.quxiao'),
					confirmText:that.i18n('comp.queren'),
				    success: function (res) {
						if (res.confirm) { //这里是点击了确定以后
							var data = {
								id:that.XChengObj.id,
								state:6
							}
							that.SetTxorder(data,0);
						} else { //这里是点击了取消以后
						  console.log('用户点击取消')
						}
						
				    }
				})
			},
			//data ready--------------------
			jisuanxingcheng(){
				var distance=20.5;
				var fare = (distance-this.TPricesObj.startingDistance)*this.TPricesObj.skipPrice;
				var amount=fare+this.TPricesObj.startingPrice;
				this.XChengObj={
					"fare":fare, //路程车费
					"taxiType": "0", //订单类型(0快车，1顺风车)
					"amount": amount, //订单实制金额
					"intoLongitude":this.longitude, //上车经度
					"intoLatitude":this.latitude, //上车纬度
					"notes": "", //备注
					"coupon": 0, //优惠金额
					"distance":distance, //路程距离
					"boardingAddress": "衡阳路112号栖木咖啡", //上车地址
					"estimatedDuration": "56分钟", //路上预计用时
					"userId": this.userInfo.userId, 
					"downLatitude": 108.562067, //下车维度
					"downLongitude": 22.745051, //下车经度
					"downAddress": "民族大道民歌湖广场" //下车地址
				}
			},
			//net work---------------------------------
			getTaxiPrices(){
				api('getTaxiPrices',{
				},res=>{
					console.log('getTaxiPrices-------',res)
					if(res.data.code==200){
						this.TPricesObj=res.data.data;
					}
					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
					})
				})
			},
			addTxorder(data){
				api('addTxorder',data,res=>{
					console.log('addTxorder-------',res)
					if(res.data.code==200){
						this.actIndex=2;
						this.XChengObj=res.data.data;
						this.startTime();
						uni.setStorageSync('dachexiaoxi','');
					}
					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
					})
				})
			},
			SetTxorder(data,index){
				api('SetTxorder',data,res=>{
					console.log('SetTxorder------',res)
					if(res.data.code==200){
						this.actIndex=index;
						if(index==0){//取消成功
							uni.showToast({
								title:'取消成功',//that.i18n('api.wangluoshibai'),
								icon: 'none',
								duration: 2500
							})
							this.XChengObj = '';
							this.endTime();
							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
					})
				})
			},
			getOrderlist(){
				console.log('-----getOrderlist')
				api('getUsTxorder',{
					page:1,
					size:20,
					state:'',
					type:0
				},res=>{
					console.log('getUsTxorder-------',res)
					if(res.data.code==200){
						for(var i=0;i<res.data.data.length;i++){
							var tempObj = res.data.data[i];
							if(tempObj.state<4){
								this.XChengObj = tempObj;
								this.qibuf=this.TPricesObj.startingPrice;
								if(tempObj.state==0){
									this.actIndex=2
									this.startTime();
								}
								if(tempObj.state==1||tempObj.state==2){
									this.actIndex=3
								}
								if(tempObj.state==3){
									
									this.actIndex=4
								}
								this.wzfState=1;
								return;
							}
						}
					}
					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
					})
				})
			},
		},
		
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showLeft) {
				this.$refs.showLeft.close()
				return true
			}
		},
	}
</script>

<style lang="scss">

.mapbody{
	position: absolute;
	width: 750rpx;
}
.mapcontentV{
	position: absolute;
	width: 750rpx;
	background-color:deeppink;
}
.leftpopo{
	z-index: 9999;
}
.topContentV{
	position: fixed;
	justify-content: center;
	align-items: center;
	padding-top: 100rpx;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999;
}

.iconImg{
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	width: 110rpx;
	height: 110rpx;
	border-radius: 55rpx;
	background-color: #1A1A1A;
}
.nameText{
	font-size: 32rpx;
	color: black;
}
.phoneText{
	font-size: 26rpx;
	color: black;
}
.drawerlist{
	width: 400rpx;
	height: 100rpx;
	align-items: center;
	border: solid lavender;
	border-width: 0px 0px 1rpx 0px;
}
.drawerlistIcon{
	margin-left: 30rpx;
	width: 60rpx;
	height: 60rpx;
}
.drawerlisttext{
	font-size: 26rpx;
	margin-left: 8rpx;
	width: 280rpx;
}

.popviewContent{
	width:80vw;
	background-color: white;
	border-radius: 10rpx;
}
.quxiaoBt{
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	padding-left: 50rpx;
	padding-right: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	line-height: 60rpx;
	border-radius: 30rpx;
	text-align: center;
	background-color: #E86E48;
	color: white;
}

.querenBt{
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	padding-left: 50rpx;
	padding-right: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	border: 1rpx solid darkgray;
	line-height: 60rpx;
	border-radius: 30rpx;
	text-align: center;
	background-color: white;
	color: #1A1A1A;
}


.bottomfloatV{
	position: fixed;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	left: 0;
	right: 0;
	bottom: 80rpx;
	z-index: 999;
}

</style>