car-system-app/pages/driver/mine/my_order/rentCars/in_advance.vue

<template>
	<view>
		<view class="submit-ok" v-if="isOkFlag==true">
			<image src="@/static/images/app/serve/real_result_submit.png" mode=""></image>
			<view>您的订单已提交成功，请等待审核</view>
			<view>
				<u-button type="primary" color="#13AFA8" shape="circle" @click="zuCarOrderFn"
					:customStyle="{width:'264rpx',height:'80rpx',marginTop:'96rpx',marginBottom:'32rpx'}">租车订单</u-button>
			</view>
			<view @click="returnIndexFn">返回首页</view>
		</view>
		<view class="in-adv" v-else>
			<view class="in-adv-hint">需要填写提前还车的原因</view>
			<view class="in-adv-data">
				<view class="in-adv-data-list f-a-i">
					<view class="in-adv-data-title">司机姓名</view>
					<view class="in-adv-data-cont">{{orderData.realName}}</view>
				</view>
				<view class="in-adv-data-list f-a-i">
					<view class="in-adv-data-title">车牌号码</view>
					<view class="in-adv-data-cont">{{orderData.carNo}}</view>
				</view>
				<view class="in-adv-data-list f-a-i">
					<view class="in-adv-data-title">租赁时间</view>
					<view class="in-adv-data-cont">{{orderData.monthRent}}个月</view>
				</view>
				<view class="in-adv-data-list f-a-i">
					<view class="in-adv-data-title">租赁期间</view>
					<view class="in-adv-data-cont">{{orderData.takeTime}} 至{{orderData.giveTime}} </view>
				</view>
				<view class="in-adv-data-list">
					<view class="in-adv-data-cause">提前还车原因</view>
					<u--textarea border="none" height="125" v-model="giveCause" placeholder="请输入还车原因"
						:placeholderStyle="{paddingLift:'0',fontSize:'28rpx'}"></u--textarea>
				</view>
				<view class="in-adv-data-list">
					<view class="in-adv-data-cause">上传附件(选填)</view>
					<view class="up_down">
						<view class="content flex-wrap align-center">
							<view class="image-box rel" v-for="(item,index) in imageList" :key="index">
								<image :src="item" mode="" class="upload-bg"></image>
								<image @click="DelPic(index)" class="reduce abs" :src="clearIcon" mode=""></image>
							</view>
							<image :src="uploadIcon" mode="" class="upload-bg" @click="getImage"></image>
						</view>
					</view>
				</view>
				<view class="in-adv-butt">
					<u-button type="primary" color="#13AFA8" shape="circle" @click="changeNickname">提交</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInformationOrderDealer,
		getInformationGiveCar
	} from "@/api/myOrder/index.js"
	export default {
		data() {
			return {
				orderData:{},
				//提交状态
				isOkFlag: false,
				giveCause: '',
				imageList: [],
				uploadIcon: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/images/order_upLoadbg.png',
				clearIcon: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/images/order_close.png',

			}
		},
		onLoad(options) {
			getInformationOrderDealer(options.id).then(res => {
				this.orderData=res.data
			})
		},
		methods: {
			//租车订单
			zuCarOrderFn() {
				uni.redirectTo({
					url: '/pages/driver/mine/my_order/rentCars/rent_order'
				})
			},
			//返回首页
			returnIndexFn() {
				uni.switchTab({
					url: '/pages/driver/home/home'
				});
			},
			//提交
			changeNickname() {
				let obj={
					orderId:this.orderData.id,
					giveCause:this.giveCause,
					giveImage:this.imageList.join(',')
				}
				console.log(obj,'啊山东快书');
				getInformationGiveCar(obj).then(res=>{
					uni.showToast({
						title: '提交成功',
						duration: 2000,
						success: res => {
							this.isOkFlag = true
							uni.setNavigationBarTitle({
								title: '申请成功'
							});
						}
					})
				})
			},
			//传图片
			getImage() {
				this.$util.uploadImageOne({
					count: 9,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					dir: 'crmebimage/public/product/'
				}, null, res => {
					this.imageList.push(res.data)
					this.videoOrImage = false
					uni.hideLoading();
				});
			},
			/**删除图片*/
			DelPic(key) {
				this.imageList.splice(key, 1)
			},
		}
	}
</script>

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

	.submit-ok {
		text-align: center;

		image {
			width: 148rpx;
			height: 148rpx;
			margin-top: 136rpx;
			margin-bottom: 24rpx;
		}
	}

	.in-adv-butt {
		margin-top: 124rpx;
		padding-bottom: 48rpx;
	}

	.in-adv-hint {
		margin: 32rpx 0 16rpx 24rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #444444;
	}

	.in-adv-data {
		background: #fff;
		padding: 0 32rpx;

		.in-adv-data-list {
			padding: 40rpx 0 16rpx 0;
			border-bottom: 1rpx solid #efefef;

			.in-adv-data-cause {
				font-size: 28rpx;
				font-weight: 400;
				color: #444444;
			}

			.in-adv-data-title {
				width: 184rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #444444;
			}

			.in-adv-data-cont {
				font-size: 28rpx;
				font-weight: 400;
				color: #111111;
			}
		}
	}

	.up_down {
		.upload-bg {
			width: 170rpx;
			height: 170rpx;
			margin: 16rpx;
		}
	}

	.image-box {
		position: relative;
		margin: 16rpx;

		.upload-bg {
			width: 170rpx;
			height: 170rpx;
			border-radius: 8rpx;
		}

		.reduce {
			position: absolute;
			top: -6rpx;
			right: -6rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>