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 title="发运详情" :bgColor="bgColor" @leftClick='back' :placeholder='true' leftIconColor="#fff"
			titleStyle='color:#fff'>
		</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">
					<view class="flex">
						{{detailData.cargoOwner}}
					</view>
				</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="flex">
						<view>{{detailData.goodsName}}</view>
						<view style='margin: 0 10rpx;'>|</view>
						<view>{{detailData.weight}}吨</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">
							<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">
							<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}}
					</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(), 5000)" @close="cancelClick" @cancel="cancelClick"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				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: {
			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
				let _obj = {
					driverCommonId: this.firstAuthentication.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,
					distance: item.distance,
					freightPrice: item.freightPrice,
					driverName: this.firstAuthentication.driverName,
					driverPhone: this.firstAuthentication.driverPhone,
					cargoOwnerPhone: item.cargoOwnerPhone
				}

				this.$request.baseRequest('post', '/publishTaskInfo/api/addOrder', _obj).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);
					});
				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 {
		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 30rpx;

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

		.row3 {
			margin: 20rpx 0;

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

		.row4 {
			align-items: center;
			padding-bottom: 20rpx;
			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: 6rpx 30rpx;
		border-radius: 30rpx;
		color: #2772FB;
	}

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

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

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

		.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: 30rpx 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: 10rpx 30rpx;
	}
</style>