wangluohuoyun-huozhuapp/pages/release/release.vue

<template>
	<view class="content">
		<view class="fixed1"></view>
		<view class='title flex'>
			<u-icon class="back" name="arrow-left" color="" size="20" @click="back"></u-icon>
			<view class="nav-title">发布</view>
			<view class="search" @click="goToRecord">
				<u-icon class="" name="order" color="" size="28"></u-icon>
				<view>
					记录
				</view>
			</view>
		</view>
		<view class="content1">
			<view class="row" @click="selectCargoOwner" v-if="!dataObj.cargoOwner">
				<view class="left select-sf">选择货主身份</view>
				<view class="right">></view>
			</view>
			<view class="row" @click="selectCargoOwner" v-if="dataObj.cargoOwner">
				<view class="left">{{dataObj.cargoOwner}}</view>
				<view class="right">></view>
			</view>
			<u-picker :show="show" :columns="columns" :closeOnClickOverlay='true' @close='selectCargoOwnerClose'
				@cancel='selectCargoOwnerClose' @confirm='confirmSelectCargoOwner'></u-picker>
		</view>
		<view class="content2">
			<view class="row1">
				<view class="left">
					<view class="top" @click="selectAddress(0)">
						<view class="send">寄</view>
						<view class="title">
							{{dataObj.sendArea?(dataObj.sendPrivate + dataObj.sendCity+dataObj.sendArea):'选择发货地区'}}
						</view>
					</view>
					<view class="bottom">
						<input type="text" value="" placeholder="输入详细地址" v-model="dataObj.sendDetailedAddress" />
					</view>
				</view>
				<view class="right" @click="selectAddress(0)" v-if="!dataObj.sendArea">
					<view class="right">{{dataObj.sendArea?'':'>'}}</view>
				</view>
			</view>
			<view class="row2">
				<view class="left">
					<view class="top" @click="selectAddress(1)">
						<view class="collect">收</view>
						<view class="title">
							{{dataObj.unloadArea?(dataObj.unloadPrivate + dataObj.unloadCity+dataObj.unloadArea):'选择收货地区'}}
						</view>
					</view>
					<view class="bottom">
						<input type="text" value="" placeholder="输入详细地址" v-model="dataObj.unloadDetailedAddress" />
					</view>
				</view>
				<view class="right" @click="selectAddress(1)" v-if="!dataObj.unloadArea">
					<view class="right">{{dataObj.unloadArea?(dataObj.unloadCity+dataObj.unloadArea):'>'}}</view>
				</view>
			</view>
		</view>
		<view class="content3">
			<view class="row">
				<view class="left">距离</view>
				<input type="text" value="" class="input" placeholder="自动计算" v-model="dataObj.distance" disabled="" />
				<view>公里</view>
			</view>
			<view class="row">
				<view class="left">货名</view>
				<view class="right"><input type="text" class="input" value="" placeholder="输入货物名称"
						v-model="dataObj.goodsName" /></view>
			</view>
			<view class="flex row">
				<view class="left-text">运费计算方式</view>
				<!-- <u-radio-group v-model="dataDetails.driverSex" placement="row"> -->
				<u-radio-group placement="row" v-model="dataObj.billingMethod" class="select-type">
					<u-radio :customStyle="radioCustomStyle" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="row">
				<view class="left">运费单价</view>
				<view class="right"><input type="number" value="" placeholder="输入运费单价" class="input"
						v-model="dataObj.freightPrice" /></view>
			</view>
			<view class="row">
				<view class="left">该任务申请运费垫付</view>
				<view class="right">
					<u-switch v-model="dataObj.freightAdvance" @change="change" size="20"></u-switch>
				</view>
			</view>
		</view>
		<view class="content4 flex">
			<view class="title">以下为附加信息</view>
			<view class="btn-text">选填</view>
		</view>
		<view class="content5">
			<view class="row">
				<view class="left">发货联系人</view>
				<view class="right flex">
					<input type="text" value="" placeholder="输入发货联系人姓名" class="input" v-model="dataObj.sender" />
				</view>
			</view>
			<view class="row">
				<view class="left">发货联系人电话</view>
				<view class="right flex">
					<input type="text" value="" placeholder="输入发货联系人手机号" class="input" v-model="dataObj.senderPhone" />
				</view>
			</view>
			<view class="row">
				<view class="left">收货联系人</view>
				<view class="right flex">
					<input type="text" value="" placeholder="输入收货联系人姓名" class="input" v-model="dataObj.receiver" />
				</view>
			</view>
			<view class="row">
				<view class="left">收货联系人电话</view>
				<view class="right flex">
					<input type="text" value="" placeholder="输入收货联系人手机号" class="input"
						v-model="dataObj.receiverPhone" />
				</view>
			</view>
			<view class="row">
				<view class="left">重量（吨）</view>
				<view class="right flex">
					<input type="text" value="" placeholder="输入预计发运重量" class="number" v-model="dataObj.weight" />
				</view>
			</view>
			<view class="flex row">
				<view class="left-text">预计装车日期起</view>
				<view :class="!dataObj.loadingDateStart?'select-data':''" @click="selectValidityPeriod(0)">
					{{dataObj.loadingDateStart?dataObj.loadingDateStart:'选择有效截止日期>'}}
				</view>
			</view>
			<view class="flex row">
				<view class="left-text">预计装车日期止</view>
				<view :class="!dataObj.loadingDateEnd?'select-data':''" @click="selectValidityPeriod(1)">
					{{dataObj.loadingDateEnd?dataObj.loadingDateEnd:'选择有效截止日期>'}}
				</view>
			</view>
			<view class="row">
				<view class="left">车长要求（米）</view>
			</view>
			<view class="row flex-space-between row-bgc">
				<view class="car-row">
					<input type="number" value="" placeholder="最短不限" class="" v-model="dataObj.carLengthSmall"
						class="car-input" />
					<view>m</view>
				</view>

				<view class="car-line">-</view>
				<view class="car-row">
					<input type="number" value="" placeholder="最长不限" class="" v-model="dataObj.carLength"
						class="car-input" />
					<view>m</view>
				</view>

			</view>
			<view class="row">
				<view class="left">载重要求（吨）</view>
			</view>
			<view class="row flex-space-between row-bgc">
				<view class="car-row">
					<input type="number" value="" placeholder="最小不限" class="car-input"
						v-model="dataObj.loadWeightSmall" />
					<view>吨</view>
				</view>
				<view class="car-line">-</view>
				<view class="car-row">
					<input type="number" value="" placeholder="最大不限" class="car-input" v-model="dataObj.loadWeight" />
					<view>吨</view>
				</view>
			</view>
			<view class="row">
				<view class="left">车型要求</view>
			</view>
			<view class="row">
				<u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange">
					<u-checkbox :customStyle="radioCustomStyle" v-for="(item, index) in checkboxList1" :key="index"
						:label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="row">
				<view class="left">任务描述</view>
			</view>
			<view class="row">
				<u--textarea v-model="dataObj.taskDescription" placeholder="请输入内容"></u--textarea>
			</view>


			<view class="flex row noborder">
				<view class="left-text">任务有效期</view>
				<view :class="dataObj.taskValidity?'':'select-data'" @click="selectValidityPeriodcq">
					{{dataObj.taskValidity?dataObj.taskValidity:'选择任务有效期>'}}
				</view>
			</view>
			<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriodcq"
				@confirm="confirmValidityPeriodcq" @change="changeHandler" @close='isShowcardValidity=false'
				@cancel='isShowcardValidity=false' :closeOnClickOverlay='true'>
			</u-picker>
		</view>
		<view class="submit" @click="submit">立即发布</view>
		<u-picker :show="isShowValidity" ref="uPicker" :columns="validityPeriod" @confirm="confirmValidityPeriod"
			:closeOnClickOverlay='true' @close='isShowValidity=false' @cancel='isShowValidity=false'>
		</u-picker>
		<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>
	var _this;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isShowAlert:false,
				alertTitle:'确定发布运输任务？',
				alertContent:null,
				radioCustomStyle: {
					margin: '0 0 0 20rpx'
				},
				show: false,
				columns: [
					['个人货主', '黑龙江中天昊元贸易有限公司', '黑龙江利润元贸易有限公司']
				],
				dataObj: {
					commonId: '',
					cargoOwner: '',
					sendPrivate: '',
					sendCity: '',
					sendArea: '',
					sendDetailedAddress: '',
					unloadPrivate: '',
					unloadCity: '',
					unloadArea: '',
					unloadDetailedAddress: '',
					distance: '',
					goodsName: '',
					billingMethod: '元/吨',
					freightPrice: '',
					freightAdvance: true,
					sender: '',
					senderPhone: '',
					receiver: '',
					receiverPhone: '',
					weight: '',
					loadingDateStart: '',
					loadingDateEnd: '',
					carLengthSmall: '',
					carLength: '',
					loadWeightSmall: '',
					loadWeight: '',
					carModel: '',
					taskDescription: '',
					taskValidity: '',
					sendLongitude: '',
					sendLatitude: '',
					unsendLongitude: '',
					unsendLatitude: '',
				},
				checkboxValue1: ['不限'],
				checkboxList1: [{
						name: '不限',
						disabled: false
					},
					{
						name: '高栏',
						disabled: false
					},
					{
						name: '集装箱',
						disabled: false
					},
					{
						name: '自卸车',
						disabled: false
					}
				],
				value: true,
				isShowcardValidity: false,
				ValidityPeriodType: '',
				validityPeriod: [],
				validityPeriodcq: [],
				isShowValidity: false,
				dataDetails: {
					type: '元/车'
				},
				radiolist1: [{
						name: '元/吨',
						disabled: false
					},
					{
						name: '元/车',
						disabled: false
					},

				],
			}
		},
		onShow() {

		},
		 onLoad(options) {
			_this = this;
			this.validityPeriod = this.$helper.makeValidityPeriod()
			this.validityPeriodcq = this.$helper.makeValidityPeriod(0,'长期')
			let _faddress = uni.getStorageSync('storage_faddress');
			let _saddress = uni.getStorageSync('storage_saddress');
			if (_faddress) {
				this.dataObj.sendCity = _faddress.city
				this.dataObj.sendArea = _faddress.area
				this.dataObj.sendPrivate = _faddress.province
				this.dataObj.sendDetailedAddress = _faddress.detailedAddress
				this.dataObj.sendLongitude = _faddress.longitude
				this.dataObj.sendLatitude = _faddress.latitude
			} else {
				this.getDefaultPlace(0)
			}
			if (_saddress) {
				this.dataObj.unloadDetailedAddress = _saddress.detailedAddress
				this.dataObj.unloadCity = _saddress.city
				this.dataObj.unloadArea = _saddress.area
				this.dataObj.unloadPrivate = _saddress.province
				this.dataObj.unsendLongitude = _saddress.longitude
				this.dataObj.unsendLatitude = _saddress.latitude
			} else {
				this.getDefaultPlace(1)
			}
			if(this.dataObj.sendLatitude&&this.dataObj.sendLongitude&&this.dataObj.unsendLatitude&&this.dataObj.unsendLongitude){
				this.dataObj.distance=this.$helper.getDistance(this.dataObj.unsendLatitude,this.dataObj.unsendLongitude,this.dataObj.sendLatitude,this.dataObj.sendLongitude)
			}


		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			confirmClick(){
				
				// 校验没写
				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[i] == '不限') {
						_list.push(1)
					} else if (this.checkboxValue1[i] == '高栏') {
						_list.push(2)
					} else if (this.checkboxValue1[i] == '集装箱') {
						_list.push(3)
					} else if (this.checkboxValue1[i] == '自卸车') {
						_list.push(4)
					}
				}
				this.dataObj.carModel = _list.toString()
				this.dataObj.commonId = this.userInfo.id
				this.$request.baseRequest('post', '/publishTaskInfo/api/addTask', this.dataObj).then(res => {
						
						this.$refs.uToast.show({
							type: 'success',
							message: "发布成功",
							complete() {
								_this.isShowAlert = false
								_this.dataObj={
									commonId: '',
									cargoOwner: '',
									sendPrivate: '',
									sendCity: '',
									sendArea: '',
									sendDetailedAddress: '',
									unloadPrivate: '',
									unloadCity: '',
									unloadArea: '',
									unloadDetailedAddress: '',
									distance: '',
									goodsName: '',
									billingMethod: '元/吨',
									freightPrice: '',
									freightAdvance: true,
									sender: '',
									senderPhone: '',
									receiver: '',
									receiverPhone: '',
									weight: '',
									loadingDateStart: '',
									loadingDateEnd: '',
									carLengthSmall: '',
									carLength: '',
									loadWeightSmall: '',
									loadWeight: '',
									carModel: '',
									taskDescription: '',
									taskValidity: '',
									sendLongitude: '',
									sendLatitude: '',
									unsendLongitude: '',
									unsendLatitude: '',
								}
								_this.checkboxValue1=['不限']
							}
						})
				
					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
				
			},
			cancelClick(){
				this.isShowAlert = false
			},
			//获取默认发货地、收货地
			getDefaultPlace(type) {
				// 0时获取默认发货地址,1时获取默认收货地址 通过选择获取的地址无需获取默认地址
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				this.$request.baseRequest('get', '/cargoOwnerAddressInfo/addressList', {
						commonId: this.userInfo.id
					}).then(res => {
						for (let i = 0; i < res.data.length; i++) {
							if (res.data[i].defaultShipment == 1 && type == 0) {
								this.dataObj.sendCity = res.data[i].city
								this.dataObj.sendArea = res.data[i].area
								this.dataObj.sendPrivate = res.data[i].province
								this.dataObj.sendDetailedAddress = res.data[i].detailedAddress
								this.dataObj.sendLongitude = res.data[i].longitude
								this.dataObj.sendLatitude = res.data[i].latitude
							}
							if (res.data[i].defaultReceipt == 1 && type == 1) {
								this.dataObj.unloadDetailedAddress = res.data[i].detailedAddress
								this.dataObj.unloadCity = res.data[i].city
								this.dataObj.unloadArea = res.data[i].area
								this.dataObj.unloadPrivate = res.data[i].province
								this.dataObj.unsendLongitude = res.data[i].longitude
								this.dataObj.unsendLatitude = res.data[i].latitude
							}
						}
						if(this.dataObj.sendLatitude&&this.dataObj.sendLongitude&&this.dataObj.unsendLatitude&&this.dataObj.unsendLongitude){
							this.dataObj.distance=this.$helper.getDistance(this.dataObj.unsendLatitude,this.dataObj.unsendLongitude,this.dataObj.sendLatitude,this.dataObj.sendLongitude)
						}
						uni.hideLoading()


					})
					.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.removeStorage({
				// 	key: 'storage_faddress'
				// });
				uni.removeStorage({
					key: 'storage_saddress'
				});
				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() {
				this.isShowAlert = true;
			},
		}
	}
</script>

<style scoped lang="scss">
	.input {
		text-align: right;
	}

	.title {
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		position: relative;

		.nav-title {
			font-size: 32rpx;
		}

		.back {
			position: absolute;
			left: 20rpx;
		}

		.search {
			display: flex;
			align-items: center;
			position: absolute;
			right: 20rpx;
		}

	}


	.fixed1 {
		height: var(--status-bar-height);
	}

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

	.content1 {
		background: white;
		margin: var(--status-bar-height) 20rpx 0 20rpx;
		border-radius: 20rpx;
		padding: 40rpx;

		.select-sf {
			color: #999999;
		}

		.right {
			color: #CBCBCB
		}
	}

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

		.row {
			margin: 30rpx;
		}

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

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

	.select-type {
		display: flex;
		justify-content: flex-end;
	}

	.content2 {
		padding: 40rpx;

		.row1,
		.row2 {
			.left {
				width: 100%;
			}

			.right {
				color: #CBCBCB
			}
		}

		.row2 {
			margin-top: 40rpx;
		}

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

		.bottom {
			margin-top: 10rpx;
			padding-left: 72rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: 700;
			color: #171717;
		}

		.collect {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #2772FB;
			color: white;
			padding: 6rpx;
			border-radius: 50%;
			text-align: center;
		}

		.send {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #101010;
			color: white;
			padding: 6rpx;
			border-radius: 50%;
			text-align: center;
		}
	}

	.content3 {}

	.content4 {
		margin: 20rpx;
		padding-left: 20rpx;

		.title {
			color: #999999;
		}

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

	.submit {
		width: 90%;
		margin: 100rpx auto;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		background: #2772FB;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 50rpx;
	}

	.select-data {
		color: #999999;
	}

	.row-bgc {
		background: #F7F8FA;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.car-input {

		// padding:20rpx;
		// box-sizing: border-box;
		// border-radius: 10px;
	}

	.car-line {
		margin: 0 20rpx;

	}

	.car-row {
		display: flex;
		background: white;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
</style>