shunfengche-sfd/my/order/editDetail.vue

<template>
	<view style="padding-bottom: 150rpx;" v-if="shangxian === '否'">
		<view class="center_view">
			<view class="center_name">行程地址</view>
			<view class="addbox">
				<view class="green"></view>
				<view class="center_name">{{order.shipAddress}}出发</view>
			</view>

			<view class="addbox">
				<view class="orgin"></view>
				<view class="center_name">{{order.deliveryAddress}}目的地</view>
			</view>

			<view class="center_name margin-top-lg">预约时间</view>

			<view class="addbox justify-between" @click="openTime()">
				<view class="flex align-center">
					<image src="/static/upload/time.png" style="width: 34rpx;height: 34rpx;"></image>
					<view class="center_name margin-left-xs" v-if="!order.startTime">选择预约时间</view>
					<view class="center_name margin-left-xs" v-else>{{order.startTime}}</view>
				</view>
				<view class="margin-left-xs">
					<image src="/static/image/right.png" style="width: 12rpx;height: 20rpx;">
					</image>
				</view>
			</view>


			<view class="center_name margin-top-lg">出行车辆</view>
			<view>
				<view class="bz_item_sel">
					{{driverPlate}}
				</view>

				<view class="center_name margin-top">乘车人数</view>
				<view class="flex">
					<view :class="order.seatNum === '1' ? 'bz_item_sel' : 'bz_item'" @tap="checkBZFB('1')">
						1座
					</view>
					<view :class="order.seatNum === '2' ? 'bz_item_sel' : 'bz_item'" @tap="checkBZFB('2')">
						2座
					</view>
					<view :class="order.seatNum === '3' ? 'bz_item_sel' : 'bz_item'" @tap="checkBZFB('3')">
						3座
					</view>
					<view :class="order.seatNum === '4' ? 'bz_item_sel' : 'bz_item'" @tap="checkBZFB('4')">
						4座
					</view>
				</view>

				<view class="center_name margin-top">是否有同行亲友</view>
				<view class="flex">
					<view :class="order.isFriends === '1' ? 'bz_item_sel' : 'bz_item'" @tap="checkBZQY('1')">
						是
					</view>
					<view :class="order.isFriends === '2' ? 'bz_item_sel' : 'bz_item'" @tap="checkBZQY('2')">
						否
					</view>
				</view>
				<view class="center_name margin-top">高速费用</view>
				<view class="flex">
					<view :class="order.isHighSpeedPrice == 1 ? 'bz_item_sel' : 'bz_item'" @tap="checkBZGS(1)">
						司机承担
					</view>
					<view :class="order.isHighSpeedPrice == 2 ? 'bz_item_sel' : 'bz_item'" @tap="checkBZGS(2)">
						乘客承担
					</view>
					<view :class="order.isHighSpeedPrice == 3 ? 'bz_item_sel' : 'bz_item'" @tap="checkBZGS(3)">
						费用AA
					</view>
				</view>
			</view>
		</view>

		<view class="flex justify-between margin-top padding-lr">
			<view class="remkbtnc" @tap="goBack">返回</view>
			<view class="remkbtn" @tap="goEdit">修改</view>
		</view>

		<u-picker v-model="Timeshow" mode="time" :params="params" @confirm="timeConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				driverPlate: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				Timeshow: false,
				order: {},
				driverRouteId: '',
				shangxian: '是'
			}
		},
		onLoad(d) {
			this.shangxian = uni.getStorageSync('shangxian')
			if (this.shangxian === '否') {
				uni.setNavigationBarTitle({
					title: '编辑行程'
				})
			}
			if (d.driverRouteId) {
				this.driverRouteId = d.driverRouteId;
				this.getDetail();
			}
		},
		methods: {
			checkBZGS(index) {
				this.order.isHighSpeedPrice = index;
			},
			goBack() {
				uni.navigateBack();
			},
			goEdit() {
				this.$queue.showLoading('修改中...')
				this.$Request.postJson('/app/driverRoute/updateDriverRoute', this.order).then(
					res => {
						uni.hideLoading();
						if (res.code == 0) {
							this.$queue.showToast('修改成功！');
							setTimeout(d => {
								uni.navigateBack();
							}, 1500)
						} else {
							this.$queue.showToast(res.msg);
						}
					})
			},
			checkBZQY(index) {
				this.order.isFriends = index;
			},
			checkBZFB(index) {
				this.order.seatNum = index;
			},
			timeConfirm(e) {
				this.order.startTime = e.month + '月' + e.day + '日' + ' ' + e.hour + ':' + e.minute
			},
			openTime() {
				this.Timeshow = true
			},
			getDetail() {
				this.$Request.getT('/app/driverRoute/selectDriverRouteById?driverRouteId=' + this.driverRouteId).then(
					res => {
						if (res.code == 0) {
							this.order = res.data;
						}
					});

				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/driver/selectDriverByUserId?userId=' + userId).then(res => {
					if (res.code == 0 && res.data) {
						this.driverPlate = res.data.driverPlate
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.center_view {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 40rpx 30rpx;
		margin: 0 auto;
		margin-top: 38rpx;

		.center_name {
			font-family: Source Han Sans CN;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
		}

		.addbox {
			width: 626rpx;
			height: 94rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 2rpx solid #CCCCCC;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 28rpx;
			color: #282828;
			line-height: 94rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			padding: 0rpx 30rpx;
		}

		.green {
			width: 16rpx;
			height: 16rpx;
			background: #1FC657;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.orgin {
			width: 16rpx;
			height: 16rpx;
			background: #FBAC04;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.bz_item {
			width: fit-content;
			padding: 18rpx 30rpx;
			// height: 71rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1px solid #CCCCCC;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #030303;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}

		.bz_item_sel {
			width: fit-content;
			padding: 18rpx 30rpx;
			// height: 71rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1px solid #346EF6;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #030303;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}
	}

	.remkbtnc {
		width: 333rpx;
		height: 98rpx;
		background: #CCCCCC;
		border-radius: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 98rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.remkbtn {
		width: 333rpx;
		height: 98rpx;
		background: #346EF6;
		border-radius: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		line-height: 98rpx;
		color: #FFFFFF;
	}
</style>