ddcWechat/pages/rent/store/changeBindCar.vue

<template>
	<view :style="colorStyle">
		<form @submit="formSubmit">
			<view class='personal-data'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`车辆名称`)}}</view>
						<view class='input'>
							<input type='text' name='phone' v-model='carDateil.name' placeholder="请输入车辆名称"
								class='id'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`车牌号`)}}</view>
						<view class='input'>
							<input type='text' name='phone' v-model='carDateil.code' placeholder="请输入车牌号"
								class='id'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>车辆编号</view>
						<view class='input acea-row row-between-wrapper'>
							<input type='text' v-model='carDateil.machine_no' placeholder="请输入车辆编号" class='id'></input>
							<!-- #ifndef H5 -->
							<text @click='openQr' class=' iconfont icon-saoma'></text>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</view>
			<button class='modifyBnt bg-color' formType="submit">{{$t(`提交保存`)}}</button>
		</form>
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		postSetCarCode,
	} from '@/api/rent.js';
	import {
		mapGetters
	} from "vuex";
	import colors from '@/mixins/color.js';
	export default {
		mixins: [colors],
		data() {
			return {
				id: '',
				carDateil: {
					machine_no: '',
					name: '',
					code: '',
				}
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			this.id = options.id
			if (!this.isLogin) {
				toLogin();
			}
		},
		methods: {
			// #ifndef H5
			// 打开二维码
			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
				});
				postSetCarCode({
					machine_no: this.carDateil.machine_no,
					machine_name: this.carDateil.name,
					plate_number: this.carDateil.code,
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: '绑定成功'
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/user/index'
						})
					}, 1000);
				}).catch((res) => {
					uni.hideLoading()
					uni.showToast({
						title: res,
						icon: 'error'
					});
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.personal-data .list {
		/* #ifndef H5 */
		margin-top: 15rpx;
		/* #endif */
		background-color: #fff;

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

			.input {
				text-align: right;
				color: #868686;

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

				.id {
					// width: 180rpx;
				}

				.iconfont {
					font-size: 36rpx;
					padding-left: 10rpx;
				}
			}
		}
	}

	.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>