wangluohuoyun-huozhuapp/pages/release/lookRelease.vue

<template>
	<view class="content">
		<view class="content1">
			<view v-if="dataObj.status=='已通过'" class="row1">
				<image class="jt-icon" src="@/static/images/common/tg.png" mode='widthFix'>
					<view class="title">任务已通过</view>
			</view>
			<view v-if="dataObj.status=='已过期'" class="row1">
				<image class="jt-icon" src="@/static/images/common/sx.png" mode='widthFix'>
					<view class="title">任务已失效</view>
			</view>
			<view v-if="dataObj.status=='未通过'" class="row1">
				<image class="jt-icon" src="@/static/images/common/wtg.png" mode='widthFix'>
					<view class="title">任务未通过</view>
			</view>
			<view v-if="dataObj.status=='审核中'" class="row1">
				<image class="jt-icon" src="@/static/images/common/sh.png" mode='widthFix'>
					<view class="title">任务审核中</view>
			</view>
		</view>
		<view class="flex place">
			<view class="left flex">
				<view class="flex">
					<view class="ssx">
						{{$helper.getProvinceAbbreviation(dataObj.sendPrivate?dataObj.sendPrivate:dataObj.sendCity)}}
					</view>
					<view class="level2-title">{{dataObj.sendCity}}</view>
				</view>
				<view class="level2-title">{{dataObj.sendArea}}</view>
			</view>
			<image class="jt" src="@/static/images/order/jt.png" mode='widthFix'></image>
			<view class="right flex">
				<view class="flex">
					<view class="ssx">
						{{$helper.getProvinceAbbreviation(dataObj.unloadPrivate?dataObj.unloadPrivate:dataObj.unloadCity)}}
					</view>
					<view class="level2-title">{{dataObj.unloadCity}} </view>
				</view>
				<view class="level2-title">{{dataObj.unloadArea}}</view>
			</view>
		</view>
		<view class="content2">
			<view class="row">
				<view class="left">货主</view>
				<view class="right">{{dataObj.cargoOwner}}</view>
			</view>
			<view class="row">
				<view class="left">发货地区</view>
				<view class="right">{{dataObj.sendPrivate}}{{dataObj.sendCity}}{{dataObj.sendArea}}</view>
			</view>
			<view class="row">
				<view class="left">发货详细地址</view>
				<view class="right">{{dataObj.sendDetailedAddress}}</view>
			</view>
			<view class="row">
				<view class="left">收货地区</view>
				<view class="right">{{dataObj.unloadPrivate}}{{dataObj.unloadCity}}{{dataObj.unloadArea}}</view>
			</view>
			<view class="row">
				<view class="left">收货详细地址</view>
				<view class="right">{{dataObj.unloadDetailedAddress}}</view>
			</view>
			<view class="row">
				<view class="left">距离（km）</view>
				<view class="right">{{dataObj.distance}}</view>
			</view>
			<view class="row">
				<view class="left">货名</view>
				<view class="right">{{dataObj.goodsName}}</view>
			</view>
			<view class="flex row">
				<view class="left">运费计算方式</view>
				<view class="right">{{dataObj.billingMethod=='0'?'元/吨':'元/车'}}</view>
			</view>
			<view class="row">
				<view class="left">运费单价（{{dataObj.billingMethod=='0'?'元/吨':'元/车'}}）</view>
				<view class="right">{{dataObj.freightPrice}}</view>
			</view>
			<view class="row">
				<view class="left">该任务申请运费垫付</view>
				<view class="right">{{dataObj.freightAdvance=='0'?'否':'是'}}</view>
			</view>
		</view>
		<view class="content5">
			<view class="row">
				<view class="left">发货联系人</view>
				<view class="right">{{dataObj.sender}}</view>
			</view>
			<view class="row">
				<view class="left">发货人手机号</view>
				<view class="right">{{dataObj.senderPhone}}</view>
			</view>
			<view class="row">
				<view class="left">收货方</view>
				<view class="right">{{dataObj.receiver}}</view>
			</view>
			<view class="row">
				<view class="left">收货方手机号</view>
				<view class="right">{{dataObj.receiverPhone}}</view>
			</view>
			<view class="row">
				<view class="left">收货方身份证号</view>
				<view class="flex">
					{{dataObj.receiverIdcard}}
				</view>
			</view>
			<view class="row">
				<view class="left">收货方信用代码</view>
				<view class="right flex">
					{{dataObj.receiverCreditCode}}
				</view>
			</view>
			<view class="row">
				<view class="left">重量（吨）</view>
				<view class="right">{{dataObj.weight}}</view>
			</view>
			<view class="flex row">
				<view class="left">预计装车日期起</view>
				<view class="right">{{dataObj.loadingDateStart}}</view>
			</view>
			<view class="flex row">
				<view class="left">预计装车日期止</view>
				<view class="right">{{dataObj.loadingDateEnd}}</view>
			</view>
			<view class="row">
				<view class="left">车长要求（米）</view>
				<view class="right">{{dataObj.carLengthSmall}}~{{dataObj.carLength}}</view>
			</view>
			<view class="row">
				<view class="left">载重要求（吨）</view>
				<view class="right">{{dataObj.loadWeightSmall}}~{{dataObj.loadWeight}}</view>
			</view>
			<view class="row">
				<view class="left">车型要求</view>
				<view class="right">{{carType()}}</view>

			</view>
			<view class="row">
				<view class="left">任务描述</view>
			</view>
			<view class="row">
				<u--textarea v-model="dataObj.taskDescription" placeholder="请输入内容" disabled></u--textarea>
			</view>


			<view class="flex row noborder">
				<view class="left">任务有效期</view>
				<view class="right">{{dataObj.taskValidity}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				dataObj: {
					cargoOwner: '',
					sendPrivate: '',
					sendCity: '',
					sendArea: '',
					sendDetailedAddress: '',
					unloadPrivate: '',
					unloadCity: '',
					unloadArea: '',
					unloadDetailedAddress: '',
					distance: '',
					goodsName: '',
					billingMethod: '',
					freightPrice: '',
					freightAdvance: '',
					sender: '',
					senderPhone: '',
					receiver: '',
					receiverPhone: '',
					weight: '',
					loadingDateStart: '',
					loadingDateEnd: '',
					carLengthSmall: '',
					carLength: '',
					loadWeightSmall: '',
					loadWeight: '',
					carModel: '',
					taskDescription: '',
					taskValidity: '',
					sendLongitude: '',
					sendLatitude: '',
					unsendLongitude: '',
					unsendLatitude: '',
				},
			}
		},
		onLoad(options) {
			_this = this;
			this.id = options.id
			this.getDetails()
		},
		methods: {
			carType() {
				let good = this.dataObj
				let _val = '';
				if (good.carModel == 1) {
					_val = '不限'
				} else {
					if (good.carModel.includes(2)) {
						_val += '高栏/'
					}
					if (good.carModel.includes(3)) {
						_val += '集装箱/'
					}
					if (good.carModel.includes(4)) {
						_val += '自卸车'
					}
				}
				return _val
			},
			getDetails() {
				this.$request.baseRequest('get', '/publishTaskInfo/seeTask', {
						id: this.id,
					}).then(res => {
						if (res.code == 200) {
							this.dataObj = res.data
						}


					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			// changeHandler(e) {
			// 	const {
			// 		columnIndex,
			// 		value,
			// 		values,
			// 		index,
			// 		picker = this.$refs.uPicker
			// 	} = e

			// 	// if (columnIndex === 0) {
			// 	// 	
			// 	// 	if (e.index != 0) {
			// 	// 		picker.setColumnValues(1, this.validityPeriod[1].shift())
			// 	// 	}

			// 	// } else if (columnIndex === 1) {
			// 	// 	if (e.index != 0) {
			// 	// 		picker.setColumnValues(2, this.validityPeriod[2].shift())
			// 	// 	}
			// 	// }
			// },
			// selectCargoOwnerClose() {
			// 	this.show = false
			// },
			// confirmSelectCargoOwner(e) {
			// 	
			// 	this.dataObj.cargoOwner = e.value[0]
			// 	this.show = false
			// },
			// selectCargoOwner() {
			// 	this.show = true
			// },
			// selectAddress(type) {
			// 	uni.$u.route('/pages/release/selectAddress', {
			// 		type: type,
			// 	});
			// },
			// checkboxChange(n) {
			// 	console.log('change', n);
			// },
			// selectValidityPeriodcq() {
			// 	this.isShowcardValidity = true
			// },
			// confirmValidityPeriod(e) {
			// 	console.log('confirm', e)
			// 	switch (this.ValidityPeriodType) {
			// 		case 0:
			// 			this.dataObj.loadingDateStart = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
			// 			break
			// 		case 1:
			// 			this.dataObj.loadingDateEnd = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
			// 			break

			// 	}
			// 	this.isShowValidity = false
			// },
			// confirmValidityPeriodcq(e) {
			// 	console.log('confirm', e)
			// 	this.dataObj.taskValidity = e.value[0] + '-' + e.value[1] + '-' + e.value[2]

			// 	this.isShowcardValidity = false
			// },
			// selectValidityPeriod(type) {
			// 	this.ValidityPeriodType = type
			// 	this.isShowValidity = true
			// },
			// change(e) {
			// 	console.log('change', e);
			// },
			// back() {
			// 	uni.navigateBack()
			// },
			// goToRecord() {
			// 	uni.$u.route('/pages/release/record');
			// },
			// radioChange(n) {
			// 	console.log('radioChange', n);
			// 	this.dataDetails.type = n
			// },
			// submit() {
			// 	
			// 	// 校验没写
			// 	if (this.dataObj.billingMethod == '元/吨') {
			// 		this.dataObj.billingMethod = 0
			// 	} else {
			// 		this.dataObj.billingMethod = 1
			// 	}
			// 	if (this.dataObj.freightAdvance) {
			// 		this.dataObj.freightAdvance = 1
			// 	} else {
			// 		this.dataObj.freightAdvance = 0
			// 	}
			// 	let _list = []
			// 	for (let i = 0; i < this.checkboxValue1.length; i++) {
			// 		if (this.checkboxValue1 == '不限') {
			// 			_list.push(1)
			// 		} else if (this.checkboxValue1 == '高栏') {
			// 			_list.push(2)
			// 		} else if (this.checkboxValue1 == '集装箱') {
			// 			_list.push(3)
			// 		} else if (this.checkboxValue1 == '自卸车') {
			// 			_list.push(4)
			// 		}
			// 	}
			// 	this.dataObj.carModel = _list.toString()
			// 	this.$request.baseRequest('post', '//publishTaskInfo/api/addTask', this.dataObj).then(res => {
			// 			


			// 		})
			// 		.catch(res => {
			// 			uni.showToast({
			// 				title: res.message,
			// 				icon: 'none',
			// 				duration: 2000
			// 			})
			// 		});
			// },
		}
	}
</script>

<style scoped lang="scss">
	.jt {
		width: 60rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
	}

	.content1 {
		padding: 20rpx 40rpx;

		.jt-icon {
			width: 46rpx;
			margin-right: 20rpx;
		}

		.title {
			font-size: 46rpx;
			font-weight: 700;
			color: #333333;
		}

		.row1 {
			display: flex;
			align-items: center;
		}
	}

	.content2,
	.content3,
	.content5 {
		box-sizing: border-box;
		background: white;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: 20rpx;

		.row1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left .top {
				display: flex;
			}
			
		}
	}

	.content2,
	.content5 {
		.row {
			margin: 20rpx 0;
		}

		.left {
			color: #8F8F8F;width: calc(50% - 25rpx);
		}
		.right {
			color: #333333;
			text-align: right;
		}
	}

	.content4 {
		margin: 20rpx;

		.mr20 {
			color: #999999;
		}

		.btn-text {
			color: #2772FB;
			border: 1px solid #2772FB;
			border-radius: 20rpx;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
		}
	}

	.place {
		margin: 20rpx;
		background: white;
		padding: 20rpx 0;
		border-radius: 20rpx;


		.left {
			width: calc(50% - 25rpx);
			align-items: center;
			flex-direction: column;
			justify-content: center;
		}

		.right {
			width: calc(50% - 25rpx);
			align-items: center;
			justify-content: flex-end;
			flex-direction: column;
		}
	}
</style>