FleetManagement-MPWEIXIN/Order/pages/details/index.vue

<template>
	<view v-if="isLoad" class="details-body flex column">
		<!-- 第一个卡片 -->
		<view   class="details-top">
			<order-item  :order-data='orderData' type="card"></order-item>
		</view>
		<view    class="details-form">
			<view class="details-form-title">货物信息：</view>
			<view class="details-form-item flex ac noFormBorder">
				<view class="details-form-item-label"> 货物信息：</view>
				<view class="details-form-item-value oneflex">
					{{ dataMark.CARGO_TYPE[orderData.cargoType] }}
				</view>
			</view>
			<view class="details-form-item flex ac noFormBorder">
				<view class="details-form-item-label"> 货物重量：</view>
				<view class="details-form-item-value oneflex">
					{{Number(orderData.weight||0).toFixed(2)}}吨
				</view>
			</view>
			<view  class="details-form-item flex ac noFormBorder">
				<view class="details-form-item-label">
					  发货单：
				</view>
				<view class="details-form-item-value oneflex">
					<view  v-if="orderData.otherData.departureImges&&orderData.otherData.departureImges.length" class="upload-container flex warp ">
						<view v-for="(item,index) in orderData.otherData.departureImges" class="upload-item" :key='index'  >
							<image style="width: 100%; height: 100%;" @click="previewImage(orderData.otherData.departureImges.map(item=>item.imageUrl),index)"
								:src="item.imageUrl"> </image>
						</view>
					</view>
					<view v-else>
						暂无单据信息
					</view>
				</view>
			</view>
			 <view  class="details-form-item flex ac noFormBorder">
			 	<view class="details-form-item-label">
			 		  卸货单：
			 	</view>
			 	<view class="details-form-item-value oneflex">
			 		<view v-if="orderData.otherData.unloadingImges&&orderData.otherData.unloadingImges.length" class="upload-container flex warp "> 
			 			<view v-for="(item,index) in orderData.otherData.unloadingImges" class="upload-item" :key='index'  >
			 				<image    style="width: 100%; height: 100%;" @click="previewImage(orderData.otherData.unloadingImges.map(item=>item.imageUrl),index)"
			 					:src="item.imageUrl"> </image>
			 			</view>
			 		</view>
					<view v-else>
						暂无单据信息
					</view>
			 	</view>
			 </view>
		</view> 
		<view  v-if="orderData.otherData.outlayImagesList.length&&Number(orderData.outlay)" class="details-goods-information">
			<view class="details-form">
				<view class="details-form-title">支出费用：￥{{Number(orderData.outlay).toFixed(2)}}</view>
				<view v-for="(item,index) in orderData.otherData.outlayImagesList">
					<view class="details-form-item flex ac noFormBorder">
						<view class="details-form-item-label"> 
							{{dataMark.ORDER_EXPENSES[item.outlayType]}}
						</view>
						<view class="details-form-item-value oneflex">
							￥{{Number(item.expense).toFixed(2)}}
						</view>
					</view>
					<view class="details-form-item flex ac noFormBorder">
						<view class="details-form-item-label">
							  单据图片：
						</view>
						<view class="details-form-item-value oneflex">
							<view v-if="item.images&&item.images.length" class="upload-container flex warp ">
								<view class="upload-item" :key='index' v-for="(url,urlIndex) in item.images">
									<image style="width: 100%; height: 100%;"
										@click="previewImage(item.images,urlIndex)" :src="url"> </image>
								</view>
							</view>
							<view v-else>
								暂无单据信息
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import orderItem from "@/components/orderItem/orderItem.vue";
	import orderApi from '@/api/order.js'
	export default {
		components: {
			orderItem
		},
		data() {
			return {
				isLoad:false,
				dataMark: uni.getStorageSync('dataMark') || null,
				orderData: {
					"otherData": {
						outlayImagesList: [],
						unloadingImges:[],
						departureImges:[]
					}
				}
			}
		},
		onLoad(e) {
			if (e.orderData) {
				Object.assign(this.orderData, JSON.parse(decodeURIComponent(e.orderData))); 
				let {
					orderNumber  = ""
				} = this.orderData;
				this.isLoad = true
				this.getDetails(orderNumber);
			}
		},
		methods: {
			dataMarkHandle(dataMark = this.dataMark, type = 'ORDER_EXPENSES') {
				return this.tool.dataMarkHandle(dataMark, type);
			},
			previewImage(uploadImages = [], index = undefined) {
				if (index !== undefined && uploadImages[index] !== undefined) {
					uni.previewImage({
						current: index,
						urls: uploadImages,
						longPressActions: {
							success: function(data) {},
							fail: function(err) {}
						}
					});
				} else {
					console.log('数据错误=>', ...arguments)
				}
			},
			getDetails(id) {
				orderApi.getOrderInfo(id).then(res => {
					if (res.code == 20000) {
						let {
							data: otherData = null
						} = res;
						Object.assign(this.orderData, {
							otherData
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>