count-pass-app/subpages/order/orderInfo.vue

<template>
	<view class="order-infos">
		<!-- #ifdef MP-WEIXIN -->
		<view class="topbar"
		:style="rect?'height:'+rect.height+'px;line-height:'+rect.height+'px;margin-top:'+rect.top+'px':''">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="topbar" :style="statusBarHeight?'margin-top:'+statusBarHeight+'px':''">
			<!-- #endif -->
			<view class="back-icon" :style="rect?'padding:'+(rect.height-24)+'rpx 20rpx':''">
				<u-icon name="arrow-left" size="24" color="#ffffff" @click="pageBack"></u-icon>
			</view>
			订单详情
		</view>
			<view class="after">
				<view class="order-info-card">
					<view class="order-card">
						<view class="order-info-title">
							<image class="img" src="../../subpages/static/czzn-img/order/orderInfo-tenant.png"
								mode="scaleToFill" />
							<view class="mid">
								<view class="info">
									<span class="label">
										{{$t('spare.orderCode')}}
									</span>
									<span class="type" v-if="orderInfo.orderType == '1'">{{ $t('order.temp') }}</span>
									<span class="type" v-if="orderInfo.orderType == '2'">{{ $t('order.fixed') }}</span>
									<view class="order-type" v-if="orderInfo.isMain==2">
										<u-tag :text="$t('order.mainOrder')" type="success"></u-tag>
									</view>
								</view>
								<text class="code">{{ orderInfo.code || '' }}</text>
							</view>
							<view class="orderStatus-info" v-if="orderInfo.orderType != '4'">
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 0"
									src="/subpages/static/czzn-img/state/not-factory.png"></u--image>
								<u--image width="100rpx" height="88rpx"
									v-if="orderInfo.orderStatus == 1 && orderInfo.weighingStatus == 0"
									src="/subpages/static/czzn-img/state/in-factory.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 2"
									src="/subpages/static/czzn-img/state/completed.png"></u--image>
								<u--image width="100rpx" height="88rpx"
									v-if="orderInfo.orderStatus == 1 && orderInfo.weighingStatus != 0"
									src="/subpages/static/czzn-img/state/weighed.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 4"
									src="/subpages/static/czzn-img/state/cancellation.png"></u--image>
							</view>
							<!-- <span class="type" v-if="orderInfo.orderType == '1'">{{ $t('order.temp') }}</span>
						<span class="type" v-if="orderInfo.orderType == '2'">{{ $t('order.fixed') }}</span> -->
							<view class="orderStatus-info" v-if="orderInfo.orderType == '4'">
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 0"
									src="/subpages/static/czzn-img/state/no-take-order.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 1"
									src="/subpages/static/czzn-img/state/start-take-order.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 2"
									src="/subpages/static/czzn-img/state/completed.png"></u--image>
								<u--image width="100rpx" height="88rpx"
									v-if="orderInfo.enabledMarkType == 1 || orderInfo.orderStatus == 4"
									src="/subpages/static//czzn-img/state/cancellation.png"></u--image>
							</view>
						</view>
						<view class="order-card-info">
					
							<p class="cell">
								<text class="label">{{ $t('order.orderDate') }}</text>
								<text class="info">{{ orderInfo.setDate || '' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.vehicleType') }}</text>
								<text class="info"
									v-if="orderInfo.vehicleType == '101'">{{ $t('order.saleOrder') }}</text>
								<text class="info"
									v-if="orderInfo.vehicleType == '102'">{{ $t('order.purchaseOrder') }}</text>
								<text class="info"
									v-if="orderInfo.vehicleType == '103'">{{ $t('order.materialsOrder') }}</text>
								<text class="info"
									v-if="orderInfo.vehicleType == '104'">{{ $t('order.transferOrder') }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.companyName') }}</text>
								<text class="info">{{ orderInfo.companyName || '' }}</text>
							</p>
							<view class="cell">
								<text class="label">{{ $t('order.materialName') }}</text>
								<text class="info">{{ orderInfo.materialName || '' }}</text>
							</view>
							<view class="cell">
								<text class="label">{{ $t('order.orderNumber') }}</text>
							<!-- 	<text class="info">{{ orderInfo.orderNumber || '0' }}{{orderInfo.orderType ==
											'4' ? $t('customer_meter.unitN') : $t('customer_meter.unitT')  }}</text> -->
								<text class="info"  :style="'font-size: 9pt;font-weight: bold;'+(orderInfo.companyClientType=='109'?'color: green;':'color: red;')">
								{{ orderInfo.orderNumber || '0' }}{{ orderInfo.materialKind=='101' && orderInfo.companyClientType=='109'?$t('customer_meter.unitB')  :(orderInfo.orderType ==
									'4' ? $t('customer_meter.unitN') : $t('customer_meter.unitT')) }}</text>
							</view>
							<p class="cell">
								<text class="label">{{ $t('order.driver') }}</text>
								<text class="info">{{ orderInfo.driver || '' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.vehicle') }}</text>
								<text class="info">{{ orderInfo.vehicle || '' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.phone') }}</text>
								<text class="info">{{ orderInfo.phone || '' }}</text>
							</p>

							<template
								v-if="orderInfo.orderStatus != 0 && orderInfo.weighingStatus != 0 && orderInfo.materialKind!='101'">
								<p class="cell">
									<text class="label">{{ $t('order.tareWeight') }}</text>
									<text class="info">{{ orderInfo.tareWeight || '0' }}</text>
								</p>
								<p class="cell">
									<text class="label">{{ $t('order.grossWeight') }}</text>
									<text class="info">{{ orderInfo.grossWeight || '0' }}</text>
								</p>
							</template>
							<template
								v-if="orderInfo.orderStatus != 0 && orderInfo.weighingStatus != 0 && orderInfo.materialKind!='101'">
								<p class="cell">
									<text class="label">{{ $t('order.netWeight') }}</text>
									<text class="info">{{ orderInfo.netWeight || '0' }}</text>
								</p>
							</template>
							<template v-if="orderInfo.orderStatus != 0 && orderInfo.weighingStatus == 1">
								<p class="cell">
									<text class="label">{{ $t('order.inTime') }}</text>
									<text class="info">{{ orderInfo.inTime || '' }}</text>
								</p>
							</template>
							<template v-if="orderInfo.orderStatus != 0 && orderInfo.weighingStatus == 2">
								<p class="cell">
									<text class="label">{{ $t('order.outTime') }}</text>
									<text class="info">{{ orderInfo.outTime || '' }}</text>
								</p>
							</template>
							<template v-if="orderInfo.orderStatus == 2">
								<p class="cell">
									<text class="label">{{ $t('order.outDate') }}</text>
									<text class="info">{{ orderInfo.outDoorTime || '' }}</text>
								</p>
							</template>
							<template v-if="orderInfo.orderStatus == 2">
								<p class="cell" v-if="orderInfo.vehicleType=='101'||orderInfo.vehicleType=='102'">
									<text class="label" v-if="orderInfo.vehicleType=='101'">{{ $t('order.isBack') }}</text>
									<text class="label" v-if="orderInfo.vehicleType=='102'">{{ $t('order.isReturn') }}</text>
									<text class="info" :style="orderInfo.backFlag&&orderInfo.backFlag=='1'?'color:#3275F5;font-weight:bold':''">{{ orderInfo.backFlag&&orderInfo.backFlag=='1'?$t('driver.yes'):$t('driver.no') }}</text>
								</p>
							</template>
							<template>
								<p class="cell">
									<text class="label">{{ $t('order.endDate') }}</text>
									<text class="info">{{ orderInfo.orderValidDate || '永久' }}</text>
								</p>
							</template>
							<view class="btn" v-if="orderInfo.orderStatus!=4">
									<button class="oper-btn" type='primary' shape="circle" color='#4680F9' size="small"
										@click="onElectronicClick(orderInfo)">
										{{ $t('mine.electronic') }}
									</button>
							</view>
						</view>
						
					</view>
					<view class="order-card" v-for="(item, index) in orderHaxMixedList" :key="index">
						<view class="order-info-title">
							<image class="img" src="../../subpages/static/czzn-img/order/orderInfo-tenant.png"
								mode="scaleToFill" />
							<view class="mid">
								<view class="info">
									<span class="label">
										{{$t('spare.orderCode')}}
									</span>
									<span class="type" v-if="item.orderType == '1'">{{ $t('order.temp') }}</span>
									<span class="type" v-if="item.orderType == '2'">{{ $t('order.fixed') }}</span>
									<view class="order-type">
										<u-tag :text="$t('spare.suppOrder')" type="error"></u-tag>
									</view>
								</view>
								<text class="code">{{ item.code || '' }}</text>
							</view>
							<view class="orderStatus-info" v-if="item.orderType != '4'">
								<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 0"
									src="/subpages/static/czzn-img/state/not-factory.png"></u--image>
								<u--image width="100rpx" height="88rpx"
									v-if="item.orderStatus == 1 && item.weighingStatus == 0"
									src="/subpages/static/czzn-img/state/in-factory.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 2"
									src="/subpages/static/czzn-img/state/completed.png"></u--image>
								<u--image width="100rpx" height="88rpx"
									v-if="item.orderStatus == 1 && item.weighingStatus != 0"
									src="/subpages/static/czzn-img/state/weighed.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 4"
									src="/subpages/static/czzn-img/state/cancellation.png"></u--image>
							</view>
							<view class="orderStatus-info" v-if="item.orderType == '4'">
								<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 0"
									src="/subpages/static/czzn-img/state/no-take-order.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 1"
									src="/subpages/static/czzn-img/state/start-take-order.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 2"
									src="/subpages/static/czzn-img/state/completed.png"></u--image>
								<u--image width="100rpx" height="88rpx"
									v-if="item.enabledMarkType == 1 || item.orderStatus == 4"
									src="/subpages/static/czzn-img/state/cancellation.png"></u--image>
							</view>
						</view>
						<view class="order-card-info">
							
							<p class="cell">
								<text class="label">{{ $t('order.orderDate') }}</text>
								<text class="info">{{ item.setDate || '' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.vehicleType') }}</text>
								<text class="info" v-if="item.vehicleType == '101'">{{ $t('order.saleOrder') }}</text>
								<text class="info"
									v-if="item.vehicleType == '102'">{{ $t('order.purchaseOrder') }}</text>
								<text class="info"
									v-if="item.vehicleType == '103'">{{ $t('order.materialsOrder') }}</text>
								<text class="info"
									v-if="item.vehicleType == '104'">{{ $t('order.transferOrder') }}</text>
			<!-- 					<span class="tag tag-ls" v-if="item.orderType == '1'">{{ $t('order.temp') }}</span>
								<span class="tag tag-gd" v-if="item.orderType == '2'">{{ $t('order.fixed') }}</span> -->
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.companyName') }}</text>
								<text class="info">{{ item.companyName || '' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.materialName') }}</text>
								<text class="info">{{ item.materialName || '' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.orderNumber') }}</text>
								<text class="info">{{ item.orderNumber || '0' }}{{ item.orderType ==
									'4' ? $t('customer_meter.unitN') : $t('customer_meter.unitT') }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.driver') }}</text>
								<text class="info">{{ item.driver || '' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.vehicle') }}</text>
								<text class="info">{{ item.vehicle || '' }}</text>
							</p>
							<template v-if="item.orderStatus != 0 && item.weighingStatus != 0">
								<p class="cell">
									<text class="label">{{ $t('order.tareWeight') }}</text>
									<text class="info">{{ item.tareWeight || '0' }}</text>
								</p>
								<p class="cell">
									<text class="label">{{ $t('order.grossWeight') }}</text>
									<text class="info">{{ item.grossWeight || '0' }}</text>
								</p>
							</template>
							<template>
								<p class="cell">
									<text class="label">{{ $t('order.netWeight') }}</text>
									<text class="info">{{ item.netWeight || '0' }}</text>
								</p>
							</template>
							<template v-if="item.orderStatus != 0 && item.weighingStatus == 1">
								<p class="cell">
									<text class="label">{{ $t('order.inTime') }}</text>
									<text class="info">{{ item.inTime || '' }}</text>
								</p>
							</template>
							<template v-if="item.orderStatus != 0 && item.weighingStatus == 2">
								<p class="cell">
									<text class="label">{{ $t('order.outTime') }}</text>
									<text class="info">{{ item.outTime || '' }}</text>
								</p>
							</template>
							<template v-if="item.orderStatus == 2">
								<p class="cell">
									<text class="label">{{ $t('order.outDate') }}</text>
									<text class="info">{{ item.outDoorTime || '' }}</text>
								</p>
							</template>
							
							
						</view>
					</view>
				</view>
			</view>

		</view>
</template>

<script>
	import {
		getOrderInfo,
		getOrderMixedInfo,
		getElectronicInfo
	} from '../../api/order'
	export default {
		data() {
			return {
				orderInfo: {},
				orderHaxMixedList: [],
				rect: undefined,
				statusBarHeight: null,
			}
		},
		onLoad(options) {
			this.bindOrderInfo(options)
			let sysInfo = uni.getSystemInfoSync(); //状态栏的高度
			this.statusBarHeight = sysInfo.statusBarHeight;
			// #ifdef MP-WEIXIN
			this.rect = wx.getMenuButtonBoundingClientRect();
			// #endif
			console.log(this.rect, this.statusBarHeight);
		},
		methods: {
			bindOrderInfo(data) {
				getOrderInfo(data).then(res => {
					if (res.statusCode == 200) {
						this.orderInfo = res.data.data
						console.log("当前订单信息、", this.orderInfo);
						this.bindMixedOrderInfo(data);
					}
				})
			},
			bindMixedOrderInfo(data) {
				getOrderMixedInfo(data).then(res => {
					if (res.statusCode == 200) {
						this.orderHaxMixedList = res.data.data
						console.log("获取到已拼车订单信息、", this.orderHaxMixedList);
					}
				})
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onElectronicClick(item){
				console.log(item,'----item-----------');
				
				let data={
					type:'weight',
					orderId:item.id
				}
				getElectronicInfo(data).then(res => {
					console.log(res,'------data--------');
					if (res.data.code == 0) {
					uni.downloadFile({
						url:res.data.data.replace('http://localhost:9000/','http://5.63.101.254:3689/admin/sys-file/getPDFFile/'),
						success: function (res) {
						console.log('downloadFile', res);
						const filePath =res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							fileType: 'pdf',
							showMenu: true,
							success: function (res) {
							console.log(res);
							console.log('打开文档成功')
							uni.hideLoading()
							},
							fail: function (res) { 
							console.log(res)
							console.log('打开失败')
							},
						})
						}
					})
					} else {
						uni.showToast({
						title: '生成PDF文件出错 ' + res.msg,
						icon: 'none'
					})
					}
				})
			}
		}
	}
</script>
<style>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	page {
		box-sizing: border-box;
		/* padding: 40rpx 40rpx 80rpx; */
		height: 100%;
		background: url('../../subpages/static/czzn-img/order/orderInfo-bg.jpg') no-repeat;
		background-size: 750rpx auto;
		background-color: #f5f7fa;
	}
	.cell .info {
    display: block; /* 确保 text 使用块级显示，有助于控制布局 */
    white-space: normal; /* 允许文本自然换行 */
    word-break: break-word; /* 在长单词或 URL 地址内部进行断行 */
    overflow-wrap: break-word; /* 当整个单词不能在一行显示时将其断开 */
}

	/* #endif*/
</style>
<style lang="scss" scoped>
	@import '../../common/css/public.scss';
</style>