wangluohuoyun-app/pages/order/confirmUnloading.vue

<!-- 确认装车 -->
<template>
	<view class="content">
		<view class="content2">
			<view class="level2-title">基本信息</view>
			<view class='row-between'>
				<view class="row-left-text">订单编号</view>
				<view class="row-right-text">{{detailData.orderNo}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">货主</view>
				<view class="row-right-text">{{detailData.cargoOwner}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">货主单位</view>
				<view class="row-right-text">{{detailData.compName?detailData.compName:'个人货主'}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">发货地</view>
				<view class="row-right-text place">
					{{detailData.sendPrivate}}{{detailData.sendCity}}{{detailData.sendArea}}{{detailData.sendDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">卸货地</view>
				<view class="row-right-text place">
					{{detailData.unloadPrivate}}{{detailData.unloadCity}}{{detailData.unloadArea}}{{detailData.unloadDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">货名</view>
				<view class="row-right-text">{{detailData.goodsName}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">运费</view>
				<view class="row-right-text">{{detailData.freight}}{{detailData.illingMethod==0?'元/吨':'元/车'}}</view>
			</view>

		</view>
		<view class="content2">
			<view class="level2-title">卸车信息</view>
			<view class='row-between'>
				<view class="row-left-text">车牌号</view>
				<view class="row-right-text">{{detailData.carrierInfo.carNo}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">卸车日期</view>
				<view class="row-right-text">{{detailData.carrierInfo.unloadingDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text">合计应付运费（元）</view>
				<input type="text" value="" placeholder="输入合计应付运费" v-model="detailData.carrierInfo.totalFreight" />
			</view>
			<view class='row-between'>
				<view class="row-left-text">定位</view>
				<view>{{detailData.carrierInfo.unloadCity}}{{detailData.carrierInfo.unloadArea}}</view>
				<!-- <view class="row-right-text place">去授权</view> -->
				<!-- <view class="row-right-text place">刷新</view> -->
			</view>
			<view class='s-flex'>
				<view class="row-left-text">上传卸车照片（1-3张）</view>
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="3"
					:size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" @on-progress="onProgress"></upload>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="store" @click="submit(1)">暂存</view>
			<view class="submit" @click="submit(3)">提交</view>
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
			:showCancelButton='true' confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick"
			@cancel="cancelClick"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	export default {
		components: {
			upload
		},
		data() {
			return {
				detailData: {
					addressUrl: ''
				},
				action: this.$helper.ossUploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				isAdd: true,
				isShowAlert: false,
				alertContent: '',
				alertTitle: '',
			}
		},
		onLoad(options) {
			console.log(options)
			this.detailData = options;
			this.detailData.contractNo = 'CYHT20220317000001'
			this.detailData.carrierInfo = {
				carNo: '123',
				unloadingDate: '2022-03-17',
				estimatedFreight: '100',
				unloadingAreaLongitude: '',
				unloadingAreaLatitude: '',
				unloadCity: '沈阳',
				unloadArea: '大东',
				unloadingImg: '',
				totalFreight: '100'

			}
		},
		methods: {
			alertBtn() {
				// uni.navigateTo({
				// 	url: '/pages/public/login'
				// })
			},
			cancelClick() {
				this.isShowAlert = false
			},
			getImgUrl(res) {
				this.detailData.carrierInfo.unloadingImg += res + ','
				console.log(res)
				console.log('------------res-----------')
			},
			onError(error) {
				alert(error)
				console.log('------------error-----------')
				console.log(error)
			},
			onRemove(index) {},
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			onProgress(e) {
				console.log(e)
			},
			submit(type) {
				console.log(type)
				let params = {
					type: 'success',
					title: '成功主题(带图标)',
					message: "庄生晓梦迷蝴蝶",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				}
				if (type == 1) {

				} else {
					this.alertContent = '确定提交卸车信息？'
					this.alertTitle = '提示'
					this.isShowAlert = true
					this.detailData.statusFlag = type
				}
				// this.$refs.uToast.show({
				// 	...params,
				// 	complete() {
				// 		params.url && uni.navigateTo({
				// 			url: params.url
				// 		})
				// 	}
				// })
			},
			confirmClick() {
				this.$request.baseRequest('post', '/carrierInfo/unLoadingAdd', this.detailData).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "提交成功！",
								complete() {
									uni.switchTab({
										url:'/pages/order/index'
									})
								}
							})
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
				console.log('提交')
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		.row-left-text {
			color: #333333;
		}
	}

	.level2-title {
		margin: 0 0 20rpx 0;
	}

	.content1,
	.content2 {
		background: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;

		.place {
			width: 80%;
			text-align: right;
		}
	}

	.upload {}

	.bottom-btn {
		display: flex;
		justify-content: space-around;
		margin-bottom: 50rpx;
		background: #FFFFFF;
		padding: 40rpx 0;
	}

	.store {
		padding: 20rpx 30rpx;
		color: #2772FB;
		width: 40%;
		background: #EEF4FF;
		border-radius: 40rpx;
		font-size: 36rpx;
		text-align: center;
	}

	.submit {
		font-size: 36rpx;
		padding: 20rpx 30rpx;
		color: white;
		width: 40%;
		background: #2772FB;
		border-radius: 40rpx;
		text-align: center;
	}
</style>