meishidaQS/pages/dache/kehuheyh/MyorderList.vue

<template>
	<view>
		<customNav :shownav="true" title="我的订单" tinColor="white" jiantou="1" ></customNav>
		
		<view v-if="orderList.length==0" class="contentColumnC">
			<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 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="contentInRowC">
						<text style="font-size: 28rpx;color:#1A1A1A;">{{stateName(item.state)}}</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="contentInRowL ItemmsgL" style="margin-bottom: 20rpx;">
					<view class="contentColumn">
						<view class="contentInRowL" style="align-items: center;width:600rpx;">
							<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:600rpx;">
							<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>
			</view>
		</view>
	</view>
</template>

<script>
import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				userInfo:'',
				page:1,
				orderList:[]
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo);
		},
		onShow() {
			this.getOrderlist();
		},
		methods: {
			stateName(state){
				console.log(state);
				state=state*1;
				var str='';
				switch(state){
					case 0:
						str= "待司机接单";
						break;
					case 1:
						str= "司机已接单";
						break;
					case 2:
						str= "乘客已上车";
						break;
					case 3:
						str= "待支付";
						break;
					case 4:
						str= "已支付";
						break;
					case 5:
						str= "用户投诉";
						break;
					case 6:
						return "订单取消";
						break;
					case 7:
						str= "修改取消";
						break;
					default:
						break;
				}
				return str;
			},
			chakanditu(obj){
				uni.setStorageSync('TaxiOrder',obj);
				uni.navigateTo({
					url:'/pages/dache/Chakanditu'
				})
			},
			//net work ----------------------------
			
			getOrderlist(){
				console.log('-----getOrderlist')
				api('getUsTxorder',{
					page:1,
					size:20,
					state:'',
					type:1
				},res=>{
					console.log('getUsTxorder-------',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
					})
				})
			},
		},
	}
</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>