meishidaQS/pages/dache/Dachedingdan.vue

<template>
	<view>
		<customNav :shownav="true" rightBTimg1="/static/imags/dache/546@3x.png" :title="$t('order.xinrenwu')" tinColor="white" jiantou="1" rightBT1="1" v-on:Enavbarsel="navbarsel"></customNav>
		<view >
			<uni-drawer ref="showLeft" mode="left" :width="250" @change="change($event,'showLeft')">
				<view class="contentInRowR" style="margin-top: 100rpx;margin-right: 16rpx;" @click="closeDrawer('showLeft')">
					<image style="width: 60rpx;height: 60rpx;" src="/static/imags/dache/dacha@3x.png" mode="scaleToFill"></image>
				</view>
				<view class="contentInRowL" style="margin-top: 20rpx;margin-bottom: 30rpx;margin-left: 30rpx;" @click="gotousercenter">
					<myImage class="iconImg" :isIcon="true" :mysrc="userInfo.avatar" mymode="scaleToFill"></myImage>
					<view 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/imags/dache/sfcxl@3x.png" mode=""></image>
					<text class="drawerlisttext">{{$t('dache.fabushunfc')}}</text>
				</view>
				<view class="contentInRowL drawerlist" @click="gotochezhurz(2)">
					<image class="drawerlistIcon" src="/static/imags/dache/qianbao@3x.png" mode=""></image>
					<text class="drawerlisttext">{{$t('dache.qianbao')}}</text>
				</view>
				<view class="contentInRowL drawerlist" @click="gotochezhurz(3)">
					<image class="drawerlistIcon" src="/static/imags/dache/rzxx@3x.png" mode=""></image>
					<text class="drawerlisttext">{{$t('dache.renzhengxx')}}</text>
				</view>
				<view class="contentInRowL drawerlist"  @click="gotochezhurz(5)">
					<image class="drawerlistIcon" src="/static/imags/dache/kfzx@3x.png" mode=""></image>
					<text class="drawerlisttext">我的订单</text>
				</view>
				<view class="contentInRowL drawerlist"  @click="gotochezhurz(4)">
					<image class="drawerlistIcon" src="/static/imags/dache/kfzx@3x.png" mode=""></image>
					<text class="drawerlisttext">{{$t('user.kefuzhongxin')}}</text>
				</view>
			</uni-drawer>
		</view>
		<view v-if="orderList.length==0" class="contentColumnC" @click="gotochezhurz(3)">
			<image class="weishimingImage" src="/static/imags/dingdan.png" mode="widthFix"></image>
			<!-- <text class="meiyouText">{{$t('dache.yaoqingcwcz')}}</text> -->
			<text  class="meiyouDDText">{{$t('order.dangqmydd')}}</text>
		</view>
		<view v-if="zhengzfuw!=0" class="contentColumnC" style="margin-top: 40rpx;margin-bottom: 40rpx;">
			<view class="contentInRowS zhengzaijdV" @click="zhengzaifwdd">
				<view class="contentColumn">
					<text class="zhengzaijdT">{{$t('dache.zhengzjsdd')}}</text>
					<text class="zhengzaijdD">{{$t('dache.tongshiyigedd')}}</text>
				</view>
				<image style="width: 46rpx;height: 46rpx;" src="/static/imags/fanhui1@3x.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="contentColumnC" v-for="(item,index) in orderList">
			<view class="contentColumnC ItemcentianV">
				<view class="contentInRowS" style="width: 100%;" @click="chakanditu(item)">
					<view class="contentInRowC sstibjv">
						<text class="shishiT">{{$t('dache.shishi')}}</text>
					</view>
					<view class="contentInRowR" style="align-items: center;">
						<text style="color: darkgray;font-size: 28rpx;">{{$t('dache.chakandit')}}</text>
						<image style="width: 30rpx;height: 30rpx;margin-right: 30rpx;" src="/static/imags/youjian@3x.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="contentInRowS ItemmsgL" @click="chakanditu(item)">
					<view class="contentColumnC">
						<view class="contentInRowL">
							<text style="font-size: 40rpx;color:#1A1A1A;font-weight: bold;">{{item.distance}}</text>
							<text style="font-size: 28rpx;color:#1A1A1A;padding-top: 16rpx;">Km</text>
						</view>
						<text style="font-size: 28rpx;color:#1A1A1A;">{{$t('dache.quancheng')}}</text>
					</view>
					<!-- <view class="contentColumnC">
						<view class="contentInRowL">
							<text style="font-size: 40rpx;color:#1A1A1A;font-weight: bold;">10.3</text>
							<text style="font-size: 28rpx;color:#1A1A1A;padding-top: 16rpx;">Km</text>
						</view>
						<text style="font-size: 28rpx;color:#1A1A1A;">{{$t('dache.jiejiajuli')}}</text>
					</view> -->
					<view class="contentColumnC">
						<view class="contentInRowL">
							<text style="font-size: 40rpx;color:#E86E48;font-weight: bold;">{{item.amount}}</text>
							<text style="font-size: 28rpx;color:#E86E48;padding-top: 16rpx;">{{$t('api.huobidanwei')}}</text>
						</view>
						<text style="font-size: 28rpx;color:#E86E48;">{{$t('dache.yugudingdje')}}</text>
					</view>
					
				</view>
				<view class="contentInRowS ItemmsgL" style="margin-bottom: 20rpx;">
					<view class="contentColumn">
						<view class="contentInRowL" style="align-items: center;width:560rpx;">
							<text style="width: 16rpx;height: 16rpx;background-color:#54B798;"></text>
							<text class="text2row" style="font-size: 28rpx;color:#1A1A1A;padding-left: 6rpx;width: 520rpx;">{{item.boardingAddress}}</text>
						</view>
						<view class="contentInRowL" style="align-items: center;width:560rpx;">
							<text style="width: 16rpx;height: 16rpx;background-color:#E86E48;"></text>
							<text class="text2row" style="font-size: 28rpx;color:#1A1A1A;padding-left: 6rpx;width: 520rpx;">{{item.downAddress}}</text>
						</view>
					</view>
					<view class="contentInRowR" style="width: 140rpx;">
						<text class="qushcBt" @click="qiangdan(item)">{{$t('order.qiangdan')}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				showLeft: false,
				userInfo:'',
				latitude: 22.84585,
				longitude:108.324762,
				page:1,
				orderList:[],
				zhengzfuw:0,
				timer:null
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo);
		},
		onShow() {
			this.gotoLocat();
			this.getOrderlist();
			this.timerAct();
		},
		onHide() {
			this.clearTimer();
		},
		methods: {
			navbarsel(index){
				this.$refs.showLeft.open()
			},
			closeDrawer(e){
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				//console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			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);
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.getFjorder();
					},
					fail(err) {
						console.log('--------getLocation',err)
					}
				});
			},
			timerAct(){
				this.clearTimer();
				var that = this;
				that.timer = setInterval(() => {
					//console.log('setInterval',that.toptableindex)
					that.getFjorder();
				}, 20000);
			},
			clearTimer() {
				// clearTime
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			gotousercenter(){
				uni.navigateTo({
					url:'/pages/user/UserCenter'
				})
			},
			gotochezhurz(index){
				if(index==2){
					uni.navigateTo({
						url:'/pages/dache/kehuheyh/Qianbao'
					})
				}
				if(index==3){
					uni.navigateTo({
						url:'/pages/dache/Chezhurenzheng?state='+index
					})
				}
				if(index==4){//客服电话
					
				}
				if(index==5){//我的订单
					uni.navigateTo({
						url:'/pages/dache/kehuheyh/MyorderList'
					})
				}
			},
			chakanditu(obj){
				if(this.zhengzfuw!=0){
					uni.showToast({
						title:'上单未完成',//that.i18n('api.wangluoshibai'),
						icon: 'none',
						duration: 2500
					})
					return;
				}
				uni.setStorageSync('TaxiOrder',obj);
				uni.navigateTo({
					url:'/pages/dache/Chakanditu'
				})
			},
			zhengzaifwdd(){
				uni.navigateTo({
					url:'/pages/dache/Zhengzaijiesong'
				})
			},
			qiangdan(obj){
				if(this.zhengzfuw!=0){
					uni.showToast({
						title:'上单未完成',//that.i18n('api.wangluoshibai'),
						icon: 'none',
						duration: 2500
					})
					return;
				}
				var data={
					id:obj.id,
					state:1,
					driverId:this.userInfo.userId
				}
				this.SetTxorder(data,obj);
			},
			//net work ----------------------------
			getFjorder(){
				api('getFjorder',{
					page:1,
					juli:20,
					latitude:this.latitude,
					longitude:this.longitude
				},res=>{
					console.log('getFjorder-------',res)
					if(res.data.code==200){
						this.orderList= 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
					})
				})
			},
			SetTxorder(data,obj){
				api('SetTxorder',data,res=>{
					console.log('SetTxorder------',res)
					if(res.data.code==200){
						obj.state=1;
						uni.setStorageSync('TaxiOrder',obj);
						uni.setStorageSync('dachexiaoxi','');
						this.pushMsg(obj.user.cid,this.userInfo.phone,'司机接单了');
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/dache/Zhengzaijiesong'
							});
						},1000);
					}
					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:1
				},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<3){
								this.zhengzfuw=1;
								uni.setStorageSync('TaxiOrder',tempObj);
								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
					})
				})
			},
			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)
				})
			},
		},
		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">
	@import '@/common/common.scss';
	page{
		background-color: #F4F4F4;
	}
.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: 100%;
	height: 100rpx;
	align-items: center;
	border: solid lavender;
	border-width: 0px 0px 1rpx 0px;
}
.drawerlistIcon{
	padding-left: 30rpx;
	width: 60rpx;
	height: 60rpx;
}
.drawerlisttext{
	font-size: 26rpx;
	padding-left: 8rpx;
}
.weishimingImage{
	width: 30%;
	margin-top: 80rpx;
}
.meiyouText{
	margin-top: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
	color:darkmagenta;
}
.meiyouDDText{
	margin-top: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
	color:#1A1A1A;
}
.zhengzaijdV{
	border-radius: 20rpx;
	padding: 16rpx;
	width: 90%;
	background-color: #E86E48;
}
.zhengzaijdT{
	font-size: 32rpx;
	font-weight: bold;
	color:white;
}
.zhengzaijdD{
	font-size: 28rpx;
	color:lightgrey;
}

.ItemcentianV{
	margin-top: 20rpx;
	margin-bottom: 10rpx;
	width: 100%;
	background-color: white;
	border-radius: 20rpx;
}
.ItemmsgL{
	margin-top: 30rpx;
	width: 90%;
}
.sstibjv{
	min-width: 100rpx;
	height: 50rpx;
	background-size: 100% 100%;
	background-image: url('/static/imags/dache/ssbj@3x.png');
}
.shishiT{
	padding-left: 4rpx;
	padding-right: 4rpx;
	font-size: 24rpx;
	color: white;
}
.qushcBt{
	font-size: 32rpx;
	font-weight: bold;
	color: white;
	line-height: 60rpx;
	border-radius: 30rpx;
	padding-left: 22rpx;
	padding-right: 22rpx;
	text-align: center;
	background-color: #E86E48;
}
</style>