ddcWechat/pages/rent/store/outBindCar.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='plate_number' 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' name='machine_no' v-model='carDateil.machine_no'
								placeholder="车牌号/车辆编号二选一" class='id'></input>
							<!-- #ifndef H5 -->
							<text @click='openQr' class=' iconfont icon-saoma'></text>
							<!-- #endif -->
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`类型`)}}</view>
						<view class='input'>
							<label class="radio" @click="type=0"><radio :checked="type==0"  />解绑</label>
											<label @click="type=1" class="radio"><radio  :checked="type==1"/>换绑</label>
						</view>
					</view>
					<view class='textarea'>
						<textarea v-model="carDateil.detail" :placeholder='$t(`请输入反馈内容`)' name="content"
							placeholder-class='placeholder'></textarea>
					</view>
					<view class='textarea'>
						<view class='list acea-row row-middle'>
							<view class='pictrue' v-for="(item,index) in pics" :key="index">
								<image :src='item'></image>
								<text class='iconfont icon-guanbi1 font-num' @click='DelPic(index)'></text>
							</view>
							<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic'
								v-if="pics.length < 8">
								<text class='iconfont icon-icon25201'></text>
								<view>{{$t(`上传图片`)}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<button class='modifyBnt bg-color' formType="submit">{{$t(`提交保存`)}}</button>
		</form>
		<canvas canvas-id="canvas" v-if="canvasStatus"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		postStoreApplyId,
	} from '@/api/rent.js';
	import {
		mapGetters
	} from "vuex";
	import colors from '@/mixins/color.js';
	export default {
		mixins: [colors],
		data() {
			return {
				type: 0, //0解绑1换绑
				pics: [],
				id: '',
				carDateil: {
					machine_no: '',
					name: '',
					code: '',
					detail: '', //反馈内容
					id:0
				},
				canvasWidth: '',
				canvasHeight: '',
				canvasStatus: false
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if(this.type){
				uni.setNavigationBarTitle({
					title: '车辆换绑'
				});
			}else{
				uni.setNavigationBarTitle({
					title: '车辆解绑'
				});
			}
			if (!this.isLogin) {
				toLogin();
			}
		},
		methods: {
			/**
			 * 删除图片
			 * 
			 */
			DelPic: function(index) {
				let that = this,
					pic = this.pics[index];
				that.pics.splice(index, 1);
				that.$set(that, 'pics', that.pics);
			},
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function() {
				let that = this;
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image', function(res) {
					that.pics.push(res.data.url);
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
			},

			// #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(data) {
				const value = data.detail.value
				uni.showLoading({
					title: '绑定中',
					mask: true
				});
				if(!value.machine_no&&!value.plate_number){
					uni.showToast({
						title: '车牌号或编号必须填一个',
						icon: 'error'
					});
					return
				}
				postStoreApplyId({
					machine_no: value.machine_no,
					content: value.content,
					images: this.pics,
					plate_number: value.plate_number,
					id: this.carDateil.id,
					type:this.type
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg
					});
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/rent/store/outBindCarList'
						})
					}, 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;
				.radio{
					margin-left: 20rpx;
				}
				.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;
	}

	.textarea {
		width: 690rpx;
		background-color: #fafafa;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;

		textarea {
			font-size: 28rpx;
			padding: 20rpx 8rpx 0 8rpx;
			width: 100%;
			box-sizing: border-box;
			height: 160rpx;
		}

		.placeholder {
			color: #bbb;
		}

		.list {
			padding-left: 5rpx;
			padding-bottom: 30rpx;

			.pictrue {
				width: 140rpx;
				height: 140rpx;
				position: relative;
				font-size: 22rpx;
				color: #bbb;
				margin-right: 30rpx;

				&:nth-last-child(1) {
					border: 1rpx solid #ddd;
					box-sizing: border-box;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 3rpx;
				}

				.icon-guanbi1 {
					font-size: 45rpx;
					position: absolute;
					top: -20rpx;
					right: -20rpx;
				}

				.icon-icon25201 {
					color: #bfbfbf;
					font-size: 50rpx;
				}
			}
		}
	}
</style>