CTEQishou/pages/index/index.vue

<template>
	<view class="contentColumn">
		<customNav :shownav="false" title="" titledetl="" tinColor="#006AFF"></customNav>
		<view class="topContentV">
			<view style=" padding-top: 40rpx; width: 100%;;background-color: #006AFF;">
				<view class="contentInRowS" style="padding-left: 30rpx;">
					<view class="">
						<view class="contentInRowL" style="padding-left: 3%;">
							<view class="IconImgV" @click="gotoUserCenter">
								<image class="IconImg" src="/static/imags/geren@3x.png" mode="scaleToFill"></image>
							</view>
							<view v-if="isOnline" class="stateView" @click="changeState">
								<image class="dgImg" src="/static/imags/dagou@3x.png" mode="scaleToFill"></image>
								<text style="color: white;font-size: 28rpx;">{{$t('user.shangxianzh')}}</text>
							</view>
							<view v-if="!isOnline" class="stateView"  @click="changeState">
								<image class="dgImg" src="/static/imags/xiaxian@3x.png" mode="scaleToFill"></image>
								<text style="color: white;font-size: 28rpx;">{{$t('user.xiaxianzh')}}</text>
							</view>
						</view>
					</view>
					<!-- <view class="contentInRowR" style="margin-right: 3%;">
						<view class="contentColumnC">
							<view class="IconImgVC" @click="gotoxiaoxi">
								<image class="IconImgC" src="/static/imags/dache/dache@3x.png" mode="scaleToFill"></image>
							</view>
							<text style="color: white;font-size: 24rpx;">专车订单</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="toptalbarCT">
				<view class="toptalbar">
					<view v-for="(item,index) in tableList">
						<image v-if="index==4" :class="index==toptableindex?'luxianImagSele':'luxianImag'" src="/static/imags/luxian@3x.png" mode=""></image>
						<text :class="index==toptableindex?'tableLab tableselect':'tableLab'" :style="" @click="tableselct(item.value,index)">{{item.text}}</text>
						<image v-if="index==0" :class="index==toptableindex?'luxianImagSele':'luxianImag'" src="/static/imags/faburenwu@3x.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 240rpx;">
			<view v-if="!isLogin" class="contentColumn weidenglu">
				<view class="contentColumnC" style="width: 90%;margin-left: 5%;">
					<text class="xuacyuA"> </text>
				</view>
				
				<view class="texing" style="justify-content: flex-start;">
					<view class="contentInRowL" style="align-items: center;">
						<uni-icons custom-prefix="custom-icon" color="#006AFF" type="checkbox" size="22"></uni-icons>
						<text>{{$t('user.hailiangdd')}}</text>
					</view>
					<view class="contentInRowL" style="align-items: center;margin-top: 20rpx;">
						<uni-icons custom-prefix="custom-icon" color="#006AFF" type="checkbox" size="22"></uni-icons>
						<text>{{$t('user.caozuojid')}}</text>
					</view>
					<view class="contentInRowL" style="align-items: center;margin-top: 20rpx;">
						<uni-icons custom-prefix="custom-icon" color="#006AFF" type="checkbox" size="22"></uni-icons>
						<text>{{$t('user.shirkek')}}</text>
					</view>
					
				</view>
				
			</view>
			<view v-if="!isLogin">
				<view class="contentColumnC" style="margin-top: 40rpx;width: 90%;margin-left: 5%;font-size: 30rpx;">
					<text>CTE.partner</text>
					<text>{{$t('user.chengyaojm')}}</text>
				</view>
			</view>
			<view v-if="isLogin" style="width: 100%;margin-bottom: 160rpx;">
				<orderItem v-if="toptableindex==0" :qsId="userInfo.userId" :orderList="orderList" v-on:ErefleshList="refleshList"></orderItem>
				<orderItemA v-if="toptableindex==1" :qsId="userInfo.userId" :orderList="orderList" v-on:ErefleshList="refleshList"></orderItemA>
				<orderItemB v-if="toptableindex==2" :qsId="userInfo.userId" :orderList="orderList" v-on:ErefleshList="refleshList"></orderItemB>
				<orderItemC v-if="toptableindex==3" :qsId="userInfo.userId" :orderList="orderList" v-on:ErefleshList="refleshList"></orderItemC>
			</view>
			<view  class="bottomfloatV">
				<view class="contentInRowL">
					<!-- <view class="contentColumnC" style="margin:20rpx;" @click="gotojiedanshez">
						<image class="setImg" src="/static/imags/setImg@3x.png" mode="scaleToFill"></image>
						<label class="jiedanText">{{$t('user.jiedanshezhi')}}</label>
					</view> -->
					<view class="contentInRowC" @click="refleshdata" style="width:80%;height: 76rpx;border-radius: 10rpx;border: 2rpx solid darkgray;margin-bottom: 20rpx;margin-top: 20rpx;margin-left: 10%;">
						<image class="shuxinImg" src="/static/imags/shuaxin@3x.png" mode="scaleToFill"></image>
						<label class="shuaxinBT">{{$t('order.shuaxinList')}}</label>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="orderList.length==0&&isLogin" class="contentColumnC">
			<image class="weishimingImage" src="/static/imags/dingdan.png" mode="widthFix"></image>
			<text class="meiyouText">{{$t('order.dangqmydd')}}</text>
		</view>
		
		
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="NOMLE" :cancelText="$t('index.quxiao')" :confirmText="$t('index.queren')" :title="noteMsg.title" :content="noteMsg.msg" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getqishouorderlist,
		getqsorderlist
	} from '@/pages/api/basic';
	import {
		getUserMsg,
		refreshToken,
		updataUserMsg,
		getversion
	} from '@/pages/api/login';
	
	export default {
		data() {
			return {
				tableList:[],
				toptableindex:0,
				state:2,
				isLogin:false,
				isOnline:true,
				show:false,
				juliL:10,
				orderList:[],
				noteMsg:{
					title:'',
					msg:''
				},
				latitude:'',
				longitude:'',
				userInfo:'',
				timer:null
			}
		},
		
		onShow() {
			
			this.getVersion();
			this.tableList=[];
			this.tableList=[
				{ value: 0, text: this.$t('order.xinrenwu') },
				{ value: 1, text: this.$t('order.daiquhuo')},
				{ value: 2, text: this.$t('order.peisongzh')},
				{ value: 3, text: this.$t('order.shouhou') },
			];
			var that =this;
			that.token = uni.getStorageSync("token");
			console.log('2222',that.token)
			if(that.token == '' || that.token == undefined || that.token == null){
				that.isLogin=false;
				// uni.reLaunch({
				// 	url:'/pages/user/LoginView'
				// })
				return;
			}
			else{
				that.isLogin=true;
				getApp().globalData.isOnline = this.isOnline;
				that.getUserMsg(that.token);
			}
			
			var tempjuli=uni.getStorageSync('FuWujuli');
			if(''==tempjuli||null==tempjuli||undefined==tempjuli){
				this.juli=10;
			}
			else{
				this.juli=tempjuli;
			}
			if(this.toptableindex==0){
				this.MYgetLocation();
			}
			this.timerAct();
			
		},
		onHide() {
			this.clearTimer();
		},
		onBackPress() {
			this.clearTimer();
		},
		methods: {
			MYgetLocation(){
				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;
					  uni.setStorageSync("latitude",that.latitude);
					  uni.setStorageSync("longitude",that.longitude);
					  that.getorderList(1,that.state);
			 		},
					fail(err) {
						var latitude = uni.getStorageSync('latitude');
						var longitude = uni.getStorageSync('longitude');
						uni.showToast({
						    title: that.$t('api.dingweishibai'),
						    icon: 'none',
						    duration: 2500
						})
					}
			 	});
			},
			tableselct(id,index){
				if(!this.isLogin){
					uni.navigateTo({
						url:'/pages/user/LoginView'
					})
					return;
				}
				if(this.toptableindex!=index){
					this.orderList=[];
				}
				this.toptableindex=index;
				if(index==0){
					this.getorderList(1,2);
					//this.getUorderList(1,4);
				}
				if(index==1){
					this.getUorderList(1,3);
					//this.getUorderList(1,4);
				}
				if(index==2){
					this.getUorderList(1,4);
				}
				if(index==3){
					this.getUorderList(1,'z678911');
					//this.getUorderList(1,4);
				}
				console.log('this.toptableindex',this.toptableindex)
			},
			gotoUserCenter(){
				uni.navigateTo({
					url:'/pages/user/UserCenter'
				})
			},
			gotoxiaoxi(){
				if(!this.isLogin){
					uni.navigateTo({
						url:'/pages/user/LoginView'
					})
					return;
				}
				// uni.navigateTo({
				// 	url:'/pages/dache/Dachedingdan'
				// })
			},
			gotoshiming(){
				uni.navigateTo({
					url:'/pages/user/zhanghu/Shimingrenzheng'
				})
			},
			changeState(){
				console.log('changeState')
				//this.gotoNav();
				
				if(this.isOnline){
					this.noteMsg.title=this.$t('shouye.querenxiax');
					this.noteMsg.msg=this.$t("shouye.querenxiaxN");
				}
				else{
					this.noteMsg.title=this.$t('shouye.querenkaig');
					this.noteMsg.msg=this.$t('shouye.querenkaigN');
				}
				
				
				this.$refs.alertDialog.open('center');
				
				//this.isOnline = !this.isOnline;
				
			},
			dialogConfirm() {
				console.log('点击确认')
				this.isOnline = !this.isOnline;
				getApp().globalData.isOnline = this.isOnline;
			},
			dialogClose() {
				console.log('点击关闭')
			},
			gotojiedanshez(){
				uni.navigateTo({
					url:'/pages/index/Jiedanset'
				})
			},
			
			timerAct(){
				this.clearTimer();
				var that = this;
				that.timer = setInterval(() => {
					//console.log('setInterval',that.toptableindex)
					if(that.toptableindex==0){
						that.refleshdata();
					}
				}, 20000);
			},
			clearTimer() {
				// clearTime
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			refleshdata(){
				if(!this.isLogin){
					uni.navigateTo({
						url:'/pages/user/LoginView'
					})
					return;
				}
				this.toptableindex=0;
				this.state = 2;
				//this.orderList=[];
				this.MYgetLocation();
			},
			
			refleshList(){
				if(this.toptableindex==0){
					this.getorderList(1,2);
				}
				if(this.toptableindex==1){
					this.getUorderList(1,3);
				}
				if(this.toptableindex==2){
					this.getUorderList(1,4);
				}
				if(this.toptableindex==3){
					this.getUorderList(1,'z678911');
				}
			},
			getorderList(page,state){
				uni.showLoading({
					title:'Loading...',
					mask:true
				})
				this.state = state;
				var that = this;
				this.$http.get(`${getqishouorderlist}`,{
					page:page,
					size:20,
					state:'z02',
					longitude:that.longitude,
					latitude:that.latitude,
					juli:3000//that.juli
				},false)
				.then(r => {
					uni.hideLoading();
					// console.log('qs',r);
					if(this.toptableindex==0&&state==2){
						this.orderList=r.data.data;
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err)
				})
			},
			getUorderList(page,state){
				uni.showLoading({
					title:'Loading...',
					mask:true
				})
				this.state = state;
				console.log(state)
				var that = this;
				this.$http.get(`${getqsorderlist}`,{
					page:page,
					size:20,
					state:state,
				},true)
				.then(r => {
					uni.hideLoading();
					console.log('1231',r);
					this.orderList=r.data.data;
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err)
				})
			},
			async getUserMsg(token){
				//console.log('getUserMsg')
				await this.$http.get(`${getUserMsg}`, {
				},true)
				.then(async r => {
					console.log('-----',r.data)
					if(r.data.code!=200){
						uni.setStorageSync('userInfo','');
						this.isLogin=false;
						uni.setStorageSync("token",'');
						uni.navigateTo({
							url:'/pages/user/LoginView'
						})
						return
					}
					this.userInfo=r.data.data;
					getApp().globalData.auditStatus=this.userInfo.auditStatus;
					uni.setStorageSync('userInfo',this.userInfo);
					this.isLogin=true;
					this.gengxintoken(token);
				})
				.catch(err => {
					console.log(err)
				})
			},
			async gengxintoken(token){
				await this.$http.get(`${refreshToken}`, {
					},true)
				.then(async r => {
					//console.log('gengxintoken',r);
					if(r.data.code==200){
						uni.setStorageSync("token",r.data.data);
						getApp().globalData.token=r.data.data;
						this.getCID();
					}
					
				})
				.catch(err => {
					console.log(err)
				})
			},
			getCID(){
				 var cid = uni.getStorageSync("cid");
				 console.log(cid);
				 if(cid==''||cid==null||cid==undefined){
					 var that = this;
					 uni.getPushClientId({
						success: (res) => {
							console.log('客户端推送标识:',res.cid)
							uni.setStorageSync("cid",res.cid);
							var usdata = {
							 	"cid":res.cid,
							};
							that.updataUserMsg(usdata);
						 },
						 fail(err) {
						  console.log('获取推送标识失败',err)
						  uni.showToast({
						  	title:'获取推送标识失败',
						  	icon: 'none',
						  	duration: 4000
						  })
						 }
					 });
				 }
				 else{
					var usdata = {
					 	"cid":cid,
					};
					 this.updataUserMsg(usdata)
				 }
					 
			},
			async updataUserMsg(data){
				await this.$http.post(`${updataUserMsg}`,data,true)
				.then(async r => {
					console.log('updataUserMsg',r)
				})
				.catch(err => {
					console.log(err)
				})
			},
			//自动更新
			getVersion(){
				// return;
				var info = uni.getSystemInfoSync();
				console.log(info);
				if(info.platform.toLowerCase() != 'android'){
					return;
				}
				var appVersionCode = info.appVersionCode;
				var that = this;
				this.$http.get(`${getversion}`,{
					platform:'0',
					name:'CTE.partner'
				},false)
				.then(res => {
					console.log(res);
					if(res.data.data){
						var versionMSG=res.data.data;
						if(appVersionCode<versionMSG.version){
							that.gengxincaozuo(versionMSG.renew);
						}
					}
				})
				.catch(err => {
					console.log(err)
				})
				
			},
			
			gengxincaozuo(state){
				 var that = this;
				 var content="";
				 
				 var info = uni.getSystemInfoSync();
		
				 if(state==0){
					content=that.$t('index.qiangzhiyiyouxinban');
				 }
				 else{
					 content=that.$t('index.yiyouxinban');
				 }
				 uni.showModal({
					cancelText: that.$t('index.quxiao'), // 取消按钮的文字
					confirmText: that.$t('index.shengji'), // 确认按钮的文字 
					 title: that.$t('api.message'),
					 content: that.$t('index.yiyouxinban'),
					 success: function (res) {
						if (res.confirm) { //这里是点击了确定以后
							var updateUrl='http://backend.cityexpress168.com.vn/androidApk/CTE.partner.apk';
							that.gengxinApp(updateUrl);
						} else { //这里是点击了取消以后
						  console.log('用户点击取消')
						  if(state==0){
						  	plus.runtime.quit(); // 强制更新，App端退出应用
						  }
						}
						
					 }
				 })
			},
			
			gengxinApp(url){
				console.log(url);
				var that = this;					
				var dtask = plus.downloader.createDownload(
					url,
					{
						method: "GET"
					}, (d, status) => {
						console.log(status,d);
						if (status == 200) {
							plus.runtime.install(d.filename)
						} else {
							plus.nativeUI.alert('fail！' + status)
						}
				});
				dtask.start();
				var prg = 0;//进度数字化
				var show= plus.nativeUI.showWaiting("Loading...");
				var percentVal;
				dtask.addEventListener('statechanged',function(task,status){
					//console.log(task);
					switch(task.state){//根据下载状态调整其显示内容
						case 1:
							percentVal = "Loading……";
							show.setTitle("Loading……");
							break;
						case 2:
							percentVal = "Connected";
							show.setTitle("Connected");
							break;
						case 3:
							percentVal = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100);
							show.setTitle("Loading：" + percentVal + "%");
							break;
						case 4:
							plus.nativeUI.closeWaiting();
							
							break;
					}
				});
			},
			//导航测试用
			gotoNav(){
				
				var navData={
					latitude:parseFloat(10.715641),
					longitude:parseFloat(106.739320),
					address:"我的目的地"
				}
				console.log(navData)
				var temp = JSON.stringify(navData);
				uni.navigateTo({
					url:'/pages/map/mapboxView?navdata='+temp
				})
				//this.handlePosition(store.latitude,store.longitude,store.address);
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/common.scss';
	@font-face {
		font-family: zrht;
		src: url('/uni_modules/font/zrht.otf');
	}
	page{
		background-color: whitesmoke;
	}
	
	.weidenglu{
		width: 750rpx;
		height: 600rpx;
		background-size: 100% 100%;
		background-image: url('/static/defimags/xuanchuan.png');
	}
	.xuacyuA{
		font-size: 26rpx;
		font-family: 'zrht';
		font-weight: bold;
		//letter-spacing: 2rpx;
		margin-top: 70rpx;
	}
	.texing{
		font-size: 20rpx;
		font-weight: bold;
		font-family: 'zrht';
		margin-left: 320rpx;
		width: 420rpx;
		//letter-spacing: 6rpx;
		margin-top: 40rpx;
		color: #006AFF;
		align-items: center;
		justify-content: flex-start;
	}
	.topContentV{
		position: fixed;
		padding-top: 40rpx;
		width: 750upx;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
	}
	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}
		
	.IconImgV{
		width: 80rpx;
		height: 80rpx;
		border-radius:40rpx;
		background-color: #107BFF;
	}
	.IconImg{
		width: 40rpx;
		height: 40rpx;
		padding: 20rpx;
	}
	.IconImgVC{
		width: 60rpx;
		height: 60rpx;
		border-radius:30rpx;
		background-color: #107BFF;
	}
	.IconImgC{
		width: 40rpx;
		height: 40rpx;
		padding: 10rpx;
	}
	.luxianImag{
		width: 30rpx;
		height: 30rpx;
	}
	.luxianImagSele{
		width: 40rpx;
		height: 40rpx;
	}
	.stateView{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 20rpx;
		padding: 10rpx;
		height: 60rpx;
		width: 260rpx;
		border-radius:30rpx;
		background-color: #107BFF;
	}
	.dgImg{
		width: 40rpx;
		height: 40rpx;
	}
	.toptalbarCT{
		width: 100%;
		display: flex;
		justify-content:center;
		background-color:#006AFF;
		padding-top: 10rpx;
		height: 106rpx;
	}
	.toptalbar{
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items:center;
		background-color:#006AFF;
		padding-top: 0rpx;
		height: 106rpx;
	}
	.tableLab{
		width: 20%;
		text-align:center;
		margin-left: 16rpx;
		margin-right: 16rpx;
		font-size: 26rpx;
		color: whitesmoke;
		
	}
	.tableselect{
		border-bottom-width: 6rpx;
		border-bottom-style:solid;
		border-bottom-color:white;
		color: white;
		font-size: 30rpx;
	}
	.tableLabS{
		width: 20%;
		text-align:center;
		font-size: 26rpx;
		color: whitesmoke;
	}
	.tableselectS{
		color: white;
		font-size: 32rpx;
	}
	.weishimingImage{
		width: 30%;
		margin-top: 40rpx;
	}
	.bottomfloatV{
		position: fixed;
		flex-direction: row;
		align-items: center;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background-color: white;
		height: 140rpx;
	}
	
	.setImg{
		width: 44rpx;
		height: 44rpx;
	}
	.shuxinImg{
		width: 30rpx;
		height: 30rpx;
	}
	.jiedanText{
		font-size: 26rpx;
		color: darkgray;
	}
	.meiyouText{
		font-size: 28rpx;
		font-weight: bold;
		color: black;
	}
	.shuaxinBT{
		font-weight: bold;
		font-size: 32rpx;
		color: black;
		border-radius: 8rpx;
		padding: 6rpx;
		margin-right: 30rpx;	
	}
	
	
</style>