wangluohuoyun-app/pages/goodSource/shippingDetails.vue

<!-- 发运详情 -->
<template>
	<view class="content">
		<!-- <u-navbar title="发运详情" :bgColor="bgColor" @leftClick='back' :placeholder='true' leftIconColor="#fff" titleStyle='color:#fff'
			:rightText='caseText' @rightClick="rightClick">
		</u-navbar> -->
		<!-- <u-navbar leftText="发运详情" height="50" :bgColor="bgColor" @leftClick='back' :placeholder='true'
			leftIconColor="#fff" :titleStyle='titleStyle' leftIconSize='38rpx' rightIcon>
		</u-navbar> -->
		<u-navbar :placeholder='true' :bgColor="bgColor" @leftClick='back'>
			<view class="u-nav-slot nav-left" slot="left">
				<u-icon name="arrow-left" size="19" color="#fff"></u-icon>
				<text style="margin-left:20rpx;">发运详情</text>
				<!-- <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="20"></u-icon> -->
			</view>
			<view class="u-nav-slot nav-right" slot="right">
				<!-- <text class="case-style" @click="rightClick">已关注</text>
				<image src="../../static/fenxiang.png" mode="widthFix" style="width: 40rpx;" @click="share"></image> -->
			</view>
		</u-navbar>
		<view class="top-bgc"></view>
		<view class="content-move">
			<view class="content1">
				<view class="row1 flex flex-space-between">
					<view class="left flex">
						<u--image
							:src="detailData.cargoOwnerPortrait?detailData.cargoOwnerPortrait:'../../static/images/mine/tx.png'"
							width='122rpx' height='122rpx' shape="circle">
						</u--image>
						<view class="fontsize-46 ml20">{{detailData.cargoOwnerCall}}</view>
					</view>
					<view class="right">
						<view class="flex">
							<view class="call fontsize-28"
								@click="$helper.contactCustomerService(detailData.cargoOwnerPhone)">
								<image style='width:12px;height:12px;margin-right:4px;'
									src="../../static/images/goodSource/dianhua.png" mode=""></image>联系货主
							</view>
						</view>
					</view>
				</view>
				<view class="row hztype-style">
					{{detailData.cargoOwner}}
				</view>
				<!-- 当前版本不做 -->
				<view class="row3 flex fontsize-24">
					<!-- <view class="item flex">
						<view class="gray">好评率</view>
						<view class="number-color">99%</view>
					</view> -->
					<!-- 	<view class="item flex">
						<view class="gray">发运次数</view>
						<view class="number-color">106</view>
					</view> -->
					<!-- <view class="item flex">
						<view class="gray">评价</view>
						<view class="number-color">10</view>
					</view> -->
				</view>
				<view class="row4">
					<view class="flex fontsize-26">
						<view class="left">装</view>
						<view class="right flex align-center">
							{{detailData.sendPrivate}}{{detailData.sendCity}}{{detailData.sendArea}}{{detailData.sendDetailedAddress}}
						</view>
					</view>
					<u-line class="line" margin="20rpx 0"></u-line>
					<view class="flex fontsize-26">
						<view class="left-x">卸</view>
						<view class=" right align-center">
							{{detailData.unloadPrivate}}{{detailData.unloadCity}}{{detailData.unloadArea}}{{detailData.unloadDetailedAddress}}
						</view>
					</view>
				</view>
			</view>
			<view class="content2">
				<view class="flex align-center">
					<view class="left">货物</view>
					<view class="right flex">
						<view>{{detailData.goodsName}}</view>
						<view style='margin: 0 10rpx;'>|</view>
						<view v-if='detailData.weight'>{{detailData.weight}}吨</view>
						<view v-else>无</view>
					</view>

				</view>
				<view class="flex align-center msx20">
					<view class="left">距离</view>
					<view class="right flex align-center">
						<view>运输距离约{{detailData.distance}}公里</view>
						<image @click="toMap()" style='width:14px;height:14px;margin-left:4px;'
							src="../../static/images/goodSource/dituzuobiao.png" mode=""></image>
					</view>
				</view>
				<view class="flex align-center">
					<view class="left">运费</view>
					<view class="right">{{detailData.freightPrice}}元/吨</view>
				</view>
				<view class="flex msx20">
					<view class="left">日期</view>
					<view class="right">
						<view class="in-row flex">
							<text style="margin-right: 40rpx;">发布</text>
							<view class="time">{{detailData.createDate}}</view>
						</view>
					</view>
				</view>
				<view class="flex msx20">
					<view class="left"></view>
					<view class="right">
						<view class="in-row flex">
							<text style="margin-right: 40rpx;">装车</text>
							<view class="time"
								v-if='detailData.loadingDateStart=="随时"&&detailData.loadingDateEnd=="随时"'>
								{{detailData.loadingDateStart}}
							</view>
							<view class="time" v-else>{{detailData.loadingDateStart}}~{{detailData.loadingDateEnd}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-center">
					<view class="left">车型</view>
					<view v-if='carLength!=""&&carType!="不限"&&carWeight!=""' class="right">
						{{carLength}} |
						<text v-if='carType!="不限"'> {{carType}} </text>
						| {{carWeight}}
					</view>
					<view class="right" v-else>不限</view>
				</view>
				<view class="flex mt20">
					<view class="left">描述</view>
					<view class="right">
						{{detailData.taskDescription?detailData.taskDescription:'无'}}
					</view>
				</view>
			</view>
			<view class="content3">
				<view class="left">运费<view class="text">{{detailData.freightPrice}}元/吨</view>
				</view>
				<view class="right">
					<view class="btn" @click.stop="grabOrders()">立即抢单</view>
				</view>
				<!-- <view class="right">
					<u-button type="error" text="已抢单" disabled></u-button>
				</view> -->
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
				confirmColor='#2772FB' @confirm="$u.throttle(confirmClick(), 1000)" @close="cancelClick"
				@cancel="cancelClick"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				titleStyle: {
					"fontSize": "38rpx",
					"fontWeight": 500,
					"color": "#FFFFFF"
				},
				isShowAlert: false,
				alertTitle: '确定抢单？',
				caseText: '关注',
				bgColor: '#317AFE',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				id: '',
				detailData: {},
			};
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.init()

		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication']),
			carLength() {
				let length = ''
				if (this.detailData.carLengthSmall && this.detailData.carLength) {
					length = this.detailData.carLengthSmall + '~' + this.detailData.carLength + '米'
				} else if (this.detailData.carLengthSmall) {
					length = "大于" + this.detailData.carLengthSmall + '米'
				} else if (this.detailData.carLength) {
					length = "小于" + this.detailData.carLength + '米'
				}
				console.log(length)
				return length
			},
			carType() {
				let _val = '';
				if (!this.detailData.carModel) this.detailData.carModel = ''
				if (this.detailData.carModel == 1) {
					_val = '不限'
				} else {
					if (this.detailData.carModel.includes(2)) {
						_val += '高栏/'
					}
					if (this.detailData.carModel.includes(3)) {
						_val += '集装箱/'
					}
					if (this.detailData.carModel.includes(4)) {
						_val += '自卸车'
					}
				}
				console.log(_val)
				return _val
			},
			carWeight() {
				this.detailData.loadWeightSmall
				this.detailData.loadWeight
				let weight = ''
				if (this.detailData.loadWeightSmall && this.detailData.loadWeight) {
					weight = this.detailData.loadWeightSmall + '~' + this.detailData.loadWeight + '吨'
				} else if (this.detailData.loadWeightSmall) {
					weight = "大于" + this.detailData.loadWeightSmall + '吨'
				} else if (this.detailData.loadWeight) {
					weight = "小于" + this.detailData.loadWeight + '吨'
				}
				console.log(weight)
				return weight
			},
		},
		methods: {
			share() {
				console.log('share')
			},
			rightClick() {
				uni.$u.toast('后台接口未写');
				// 关注
				// console.log(123)
				// this.$request.baseRequest('get', '/publishTaskInfo/seeTask', {
				// 		reCommonId: this.userInfo.id,
				// 	}).then(res => {
				// 		this.mescroll.resetUpScroll()
				// 	})
				// 	.catch(res => {
				// 		uni.$u.toast(res.message);
				// 	});
			},
			async init() {
				await this.$request.baseRequest('get', '/publishTaskInfo/seeTask', {
						id: this.id,
						// id: '8f1f3c624d7946d79a9d44a4057d9623',
					}).then(res => {
						if (res.code == 200) {
							this.detailData = res.data
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			toMap() {
				uni.setStorageSync('sendaddress', {
					sendLatitude: this.detailData.sendLatitude,
					sendLongitude: this.detailData.sendLongitude,
				})
				uni.setStorageSync('unsendaddress', {
					unsendLatitude: this.detailData.unsendLatitude,
					unsendLongitude: this.detailData.unsendLongitude,
				})
				uni.setStorageSync('distance', this.detailData.distance, )
				uni.$u.route('/pages/goodSource/map', {
					id: 1,
				});
			},
			back() {
				uni.navigateBack({

				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			grabOrders() {
				this.isShowAlert = true

			},
			confirmClick() {
				let item = this.detailData
				console.log(item)
				var that = this
				this.$request.baseRequest('get', '/driverInfo/firstAuthentication', {
					driverPhone: this.userInfo.phone,
				}).then(res2 => {
					if (res2.data.authenticationStatus == '已过期') {
						that.$refs.uToast.show({
							type: 'error',
							message: '证件已过期,请上传新证件！',
						})
						return
					} else if (res2.data.authenticationStatus == '未认证' || res2.data.authenticationStatus ==
						'已驳回') {
						that.$refs.uToast.show({
							type: 'error',
							message: '请先完成司机认证！',
						})
						return
					} else if (res2.data.authenticationStatus == '审核中') {
						that.$refs.uToast.show({
							type: 'error',
							message: '司机审核中！',
						})
						return
					}
					let _obj = {
						driverCommonId: res2.data.commonId,
						commonId: item.commonId,
						id: item.id,
						compId: item.compId,
						cargoOwnerName: item.cargoOwnerName,
						cargoOwner: item.cargoOwner,
						sendPrivate: item.sendPrivate,
						sendCity: item.sendCity,
						sendArea: item.sendArea,
						sendDetailedAddress: item.sendDetailedAddress,
						unloadPrivate: item.unloadPrivate,
						unloadCity: item.unloadCity,
						unloadArea: item.unloadArea,
						unloadDetailedAddress: item.unloadDetailedAddress,
						goodsName: item.goodsName,
						goodsType:item.goodsType,
						distance: item.distance,
						freightPrice: item.freightPrice,
						driverName: res2.data.driverName,
						driverPhone: res2.data.driverPhone,
						cargoOwnerPhone: item.cargoOwnerPhone
					}

					that.$request.baseRequest('post', '/publishTaskInfo/api/addOrder', _obj).then(res => {
							if (res.code == 200) {
								that.$refs.uToast.show({
									type: 'success',
									message: "抢单成功！",
									complete() {
										uni.switchTab({
											url: "/pages/order/index"
										})
									}
								})

							} else {
								that.$refs.uToast.show({
									type: 'error',
									message: res.message,
								})
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				}).catch(res => {
					uni.$u.toast(res.message);
				});
				this.isShowAlert = false
			},
			cancelClick() {
				this.isShowAlert = false
			},
		}
	}
</script>

<style lang="scss">
	/deep/.u-navbar__content__right__text {
		background: rgba(255, 255, 255, 0.2);
		padding: 3px 10px;
		border-radius: 16px;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.top-bgc {
		padding-top: 30rpx;
		position: relative;
		width: 100%;
		height: 519rpx;
		background: linear-gradient(180deg, #317AFE 0%, #F8F9FC 100%);

	}

	.content-move {
		position: relative;
		top: -460rpx;
	}

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

		// padding: 0 46rpx;
		.hztype-style {
			width: 100%;
			font-size: 28rpx;
			color: #121212;
			padding: 0 0 20rpx 46rpx;
			font-weight: 700;
			border-bottom: 2px dotted #ccc
		}

		.row1 {
			padding: 0 46rpx;

			.left {
				position: relative;
				top: -50rpx;
				align-items: flex-end;
			}
		}

		.row3 {
			margin: 20rpx 0;

			.item {
				margin-right: 40rpx;
			}
		}

		.row4 {
			align-items: center;
			padding: 0 46rpx 46rpx 46rpx;
			margin-top: 20rpx;

			.left {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 30rpx;
				background: #2772FB;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				border-radius: 8rpx;
				color: #FFFFFF;
			}

			.left-x {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 30rpx;
				background: #FE6300;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				border-radius: 8rpx;
				color: #FFFFFF;
			}

			.right {
				color: #666666;
				margin-left: 20rpx;
			}

		}
	}

	.call {
		display: flex;
		align-items: center;
		background: #E5F0FE;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		color: #2772FB;
	}

	.number-color {
		margin-left: 20rpx;
	}

	.content2 {
		background: white;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 30rpx;
		font-size: 26rpx;

		.left {
			color: #666666;
			margin-right: 20rpx;
			box-sizing: border-box;
			width: 8vw;

		}

		.right {
			width: 90%;
		}

		.in-row {
			.text {
				margin-right: 60rpx;
			}
		}
	}

	.content3 {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background: white;
		justify-content: space-between;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		align-items: center;

		.left {
			display: flex;

			.text {
				color: #FE6300;
				margin-left: 20rpx;
			}
		}
	}

	.btn {
		background: #2772FB;
		color: white;
		font-size: 28rpx;
		border-radius: 40rpx;
		padding: 20rpx 40rpx;
	}

	.nav-left {
		display: flex;
		color: #fff;
		font-size: 38rpx;
		padding-top: 60rpx;
		box-sizing: border-box;
	}

	.nav-right {
		display: flex;
		align-items: center;
		padding-top: 60rpx;
		box-sizing: border-box;

		.case-style {
			margin-right: 20rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 32rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding: 6rpx 28rpx;
		}
	}
</style>