count-pass-app/substaticpages/cargoOperator/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="../../../substaticpages/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.vehicleType=='101'">
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.loadFlag == 2"
									src="/substaticpages/static/czzn-img/state/deliver.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.loadFlag != 2"
									src="/substaticpages/static/czzn-img/state/not-deliver.png"></u--image>
							</view>
							<view class="orderStatus-info" v-if="orderInfo.vehicleType=='102'">
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.isCheck == 1"
									src="/substaticpages/static/czzn-img/state/accept.png"></u--image>
								<u--image width="100rpx" height="88rpx" v-if="orderInfo.isCheck != 1"
									src="/substaticpages/static/czzn-img/state/not-accept.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>

							<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" v-if="orderInfo.loadFlag==2">
									<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' && orderInfo.loadFlag==2">
								<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> -->
							<template v-if="orderInfo.vehicleType=='101' && orderInfo.loadFlag==2">
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('deliver.deliverUserName') }}</text>
										<text class="info">{{ orderInfo.loadUserName || '' }}</text>
									</p>
								</view>
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('deliver.deliverTime') }}</text>
										<text class="info">{{ orderInfo.loadTime || '' }}</text>
									</p>
								</view>
							</template>
							<template v-if="orderInfo.vehicleType=='102' && orderInfo.isCheck==1">
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('accept.acceptUserName') }}</text>
										<text class="info">{{ orderInfo.checkUserName || '' }}</text>
									</p>
								</view>
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('accept.acceptTime') }}</text>
										<text class="info">{{ orderInfo.checkDate || '' }}</text>
									</p>
								</view>
							</template>
							<template v-if="operationType==1 || operationType==2">
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('deliver.shipNumber') }}</text>
										<u-input v-model="orderInfo.shipNumber" border="none"
											inputAlign="right"
											:placeholder="$t('base.common.placeholderI')+$t('deliver.shipNumber')"
											@focus="onShipNumberFocus">
										</u-input>
									</p>
								</view>
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('deliver.orderNumber') }}</text>
										<u-input v-model="orderInfo.orderNumber" border="none" type='digit'
											inputAlign="right"
											:placeholder="$t('base.common.placeholderI')+$t('deliver.orderNumber')"
											@focus="onActualNumberFocus">
										</u-input>
									</p>
								</view>
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('deliver.tonBales') }}</text>
										<u-input v-model="orderInfo.tonBales" border="none" type='digit'
											inputAlign="right"
											:placeholder="$t('base.common.placeholderI')+$t('deliver.tonBales')"
											@focus="onTonBalesFocus">
										</u-input>
									</p>
								</view>
								<p class="cell">
									<u--textarea class="info" v-model="orderInfo.remark" :height="50"
										placeholder="请输入备注"></u--textarea>
								</p>
							</template>
							<template v-else>
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('deliver.shipNumber') }}</text>
										<text class="info">{{ orderInfo.shipNumber || '' }}</text>
									</p>
								</view>
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('deliver.tonBales') }}</text>
										<text class="info">{{ orderInfo.tonBales || '' }}</text>
									</p>
								</view>
								<view class="row">
									<p class="cell">
										<text class="label">{{ $t('deliver.orderNumber') }}</text>
										<text class="info">{{ orderInfo.orderNumber || '' }}</text>
									</p>
								</view>
								<p class="cell deliver" >
									<text class="label">{{ $t('order.remark') }}</text>
									<text
										class="info">{{ (orderInfo.vehicleType=='102'?orderInfo.checkRemark:orderInfo.remark) || '' }}</text>
								</p>
								<p class="cell deliver">
									<text class="label">{{ $t('deliver.deliverRemark') }}</text>
									<text
										class="info">{{ orderInfo.loadRemark|| '' }}</text>
								</p>
							</template>
						</view>
						<template v-if="(operationType==1 || operationType==2) && isOperate==true">
							<template v-if="orderInfo.vehicleType=='102'">
								<p class="cell">
									<u-button type="primary" @click="$noMultipleClicks(onOrderAcceptClick)"
										:text="$t('order.accept')"></u-button>
								</p>
							</template>
							<template v-if="orderInfo.vehicleType=='101'">
								<p class="cell">
									<u-button type="primary" @click="$noMultipleClicks(onOrderDeliverClick)"
										:text="$t('order.deliver')"></u-button>
								</p>
							</template>
						</template>
					</view>
				</view>
			</view>
			<u-toast ref="loadingToast"></u-toast>
		</view>
</template>

<script>
	import {
		getOrderInfo,
		acceptOrder,
		deliverOrder
	} from '../../../api/order'
	import {
		isPermission
	} from '../../../utils/util.js'
	export default {
		data() {
			return {
				noClick: true,
				orderInfo: {},
				operationType: '', //0 查看，1，验收或发货列表里验收，2：扫码里验收或发货
				view: '1',
				rect: undefined,
				statusBarHeight: null,
				isOperate: false,
			}
		},
		onLoad(options) {
			this.operationType = options.operationType
			this.bindOrderInfo(options)
			// #ifdef APP-PLUS || MP-WEIXIN
			let sysInfo = uni.getSystemInfoSync(); //状态栏的高度
			this.statusBarHeight = sysInfo.statusBarHeight;
			// #endif

			// #ifdef MP-WEIXIN
			this.rect = wx.getMenuButtonBoundingClientRect();
			// #endif
			console.log(this.rect, this.statusBarHeight);
		},
		methods: {
			onShipNumberFocus() {
				if (this.orderInfo.shipNumber == 0) {
					this.orderInfo.shipNumber = null
				}
			},
			onActualNumberFocus() {
				if (this.orderInfo.orderNumber == 0) {
					this.orderInfo.orderNumber = null
				}
			},
			onTonBalesFocus(){
				if (this.orderInfo.orderNumber == 0) {
					this.orderInfo.tonBales = null
				}
			},
			onOrderAcceptClick() {
				this.$refs.loadingToast.show({
					type: "loading",
					message: this.$t('base.common.loading'),
					duration: "1000000"
				})
				let data = {
					orderId: this.orderInfo.id,
					tenantId: this.orderInfo.tenantId,
					remark: this.orderInfo.remark
				}
				acceptOrder(data).then(res => {
					this.$refs.loadingToast.hide()
					if (res.statusCode == 200 && res.data.code == 0) {
						console.log("验收成功、", this.orderInfo);
						uni.redirectTo({
							url: '/substaticpages/cargoOperator/accept/orderAcceptList?isCheck=1'
						})
					}
				}).catch(err => {
					console.log('err', err);
					this.$refs.loadingToast.hide()
				})
			},
			onOrderDeliverClick() {
				this.$refs.loadingToast.show({
					type: "loading",
					message: this.$t('base.common.loading'),
					duration: "1000000"
				})
				let data = {
					orderId: this.orderInfo.id,
					tenantId: this.orderInfo.tenantId,
					remark: this.orderInfo.remark,
					shipNumber: this.orderInfo.shipNumber,
					orderNumber: this.orderInfo.orderNumber,
					tonBales:this.orderInfo.tonBales,
				}
				deliverOrder(data).then(res => {
					this.$refs.loadingToast.hide()
					if (res.statusCode == 200 && res.data.code == 0) {
						uni.redirectTo({
							url: '/substaticpages/cargoOperator/deliver/orderDeliverList?isDeliver=1'
						})
						console.log("验收成功、", this.orderInfo);
					}
				}).catch(err => {
					console.log('err', err);
					this.$refs.loadingToast.hide()
				})
			},
			bindOrderInfo(data) {
				if (!data.tenantId) {
					console.log("订单业务租户信息");
					return;
				}
				getOrderInfo(data).then(res => {
					if (res.statusCode == 200) {
						this.orderInfo = res.data.data
						console.log("当前订单信息、", this.orderInfo);
						var permissionKey = "none";
						if (this.orderInfo.vehicleType == "101") {
							permissionKey = "app_home_enterprise_deliver";
						} else if (this.orderInfo.vehicleType == "102") {
							permissionKey = "app_home_enterprise_accept";
						}
						debugger
						this.isOperate = isPermission(permissionKey);
						console.log("当前判断的key和结果值，", permissionKey, this.isOperate);
						if (this.isOperate == false) {
							uni.showModal({
								showCancel: false,
								// title: '提示',
								content: this.$t("base.common.noOperatePermission"),
								success: function(res) {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}
					}
				})
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</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;
	}

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

.deliver{
	.info{
		white-space: normal;
		word-wrap: break-word;
		max-width: 100%; /* Adjust as needed */
	}
}
</style>