ddcWechat/pages/rent/order/onBindCar.vue

<template>
	<view>
		<form @submit="formSubmit">
			<view class='personal-data' :style="colorStyle">
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`创建时间`)}}</view>
						<view class='input'>
							{{carDateil.add_time}}
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`类型`)}}</view>
						<view class='input' v-if="carDateil.car_lease==1">
							以租代购
						</view>
						<view class='input' v-if="carDateil.car_lease==0">
							月租
						</view>
					</view>
					<view class='item acea-row row-between-wrapper' v-if="carDateil.car_lease==1">
						<view>{{$t(`总月份`)}}</view>
						<view class='input'>
							{{carDateil.several_months}}
						</view>
					</view>
					<view class='item acea-row row-between-wrapper' v-if="carDateil.car_lease==1">
						<view>{{$t(`已付月份`)}}</view>
						<view class='input'>
							{{carDateil.months}}
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`月租`)}}</view>
						<view class='input'>
							{{carDateil.pay_price}}
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`绑定人`)}}</view>
						<view class='input'>
							{{carDateil.real_name}}
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>绑定车辆编号</view>
						<view class='input acea-row row-between-wrapper'>
							<input type='text' placeholder="请输入车辆编号" v-model='carDateil.machine_no' class='id'></input>
							<!-- #ifndef H5 -->
							<text @click="openQr" class='iconfont icon-saoma'></text>
							<!-- #endif -->
						</view>
					</view>
				</view>

				<button class='modifyBnt bg-color' formType="submit">{{$t(`绑定车辆`)}}</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getRentOrderDteail,
		rentSetcar
	} from '@/api/rent.js';
	import {
		mapGetters
	} from "vuex";
	import colors from '@/mixins/color.js';
	export default {
		mixins: [colors],
		data() {
			return {
				id: '',
				carDateil: {
					machine_no: '',
				}

			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getRentOrderDteail();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			this.id = options.id
			if (this.isLogin) {
				this.getRentOrderDteail();
			} else {
				toLogin();
			}
		},
		methods: {
			// #ifndef APP-PLUS
			// 打开二维码
			openQr() {
				const that = this;
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
					success(res) {
						that.carDateil.machine_no = res.result;
					}
				})
			},
			// #endif
			// 提交绑定
			formSubmit() {
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				rentSetcar({
					id: this.carDateil.id,
					machine_no: this.carDateil.machine_no
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: '绑定成功'
					});
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/rent/order/orderList?status=1'
						})
					},1000)
				}).catch((res) => {
					console.log(res);
					uni.hideLoading()
					uni.showToast({
						title: res,
						icon:'error'
					});
					console.log(res);
				})
			},
			// 查询车辆详情
			getRentOrderDteail() {
				getRentOrderDteail(this.id).then((res) => {
					console.log(res, 'fh');
					this.carDateil = res.data;
				}).catch((res) => {
					console.log(res);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.icon-saoma {
		font-size: $uni-font-size-lg !important;
	}

	.personal-data .list {
		/* #ifndef H5 */
		margin-top: 15rpx;
		/* #endif */
		background-color: #fff;
	}

	.personal-data .list .item {
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #282828;
	}

	.personal-data .list .item .input {
		max-width: 400rpx;
		text-align: right;
		color: #868686;

		.icon-suozi {
			margin-left: 10rpx;
		}
	}

	.personal-data .list .item .input .id {
		// width: 180rpx;
	}

	.personal-data .list .item .input .iconfont {
		font-size: 24rpx;
	}

	.personal-data .modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}
</style>