siji/pages/order/addAlarm.vue

<template>
	<view class="container">
		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120">

			<u-form-item label="有无挂车" prop="form.has_mount" borderBottom ref="item1">
				<u-radio-group v-model="form.has_mount" placement="row" @change="groupChange">
					<u-radio shape="square" name="1" label="有"></u-radio>
					<span style="width: 40px;"></span>
					<u-radio shape="square" name="0" label="无"></u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="挂车车牌" prop="form.mount_license" borderBottom ref="item1">
				<car-number-input class="car-number-input" @numberInputResult="numberInputResult2"
					:defaultStr="form.mount_license"></car-number-input>
			</u-form-item>
			<u-form-item label="牵引车" prop="form.license" borderBottom ref="item1">
				<car-number-input class="car-number-input" @numberInputResult="numberInputResult"
					:defaultStr="form.license"></car-number-input>
			</u-form-item>
			<u-form-item label="手机号" prop="form.phone" borderBottom ref="item1">
				<u--input v-model="form.phone" border="none" placeholder="请输入手机号"></u--input>
			</u-form-item>

			<u-form-item label="位置" prop="form.perimeter_location" borderBottom ref="item1">
				<view class="input_sbtn" style="display: flex;">
					<u--input v-model="form.perimeter_location" border="none" placeholder="请输入位置"></u--input>
					<u-button text="定位" size="small" style="width: 80px;" @click="toMap"></u-button>
				</view>
			</u-form-item>

			<u-form-item label="身份证号" prop="form.id_card" borderBottom ref="item1">
				<u--input v-model="form.id_card" border="none" placeholder="请输入身份证号" maxLenght="18"></u--input>
			</u-form-item>

			<u-form-item label="事件类型" prop="name" borderBottom ref="item1">
				<view class="input_sbtn" style="display: flex;" @click="show_event = true">
					<u--input v-model="form.name" border="none" placeholder="请选择事件类型"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-form-item>

			<u-form-item label="其他情况说明" labelPosition="top" prop="describe" borderBottom ref="item1">
				<u--textarea style="margin-top: 10px;" v-model="form.describe" placeholder="请输入..."></u--textarea>
			</u-form-item>
		</u--form>

		<u-button type="primary" class="btn" text="提交信息" shape="circle" @click="add"></u-button>

		<u-picker :show="show_event" :columns="columns_event" keyName="name" @confirm="confirmEvent"
			@cancel="show_event = false"></u-picker>

	</view>

</template>

<script>
	import {
		get,
		post
	} from '@/common/request.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				show_event: false,
				columns_event: [
					['超速行驶', '禁行路段行驶', '禁停路段停车', '超最大可进入数', '未上报车辆进入', '车辆问题', 'GPS瞬移']
				],
				form: {
					has_mount: "0", //有无挂车
					mission: 0, //入园目的
					license: "", //牵引车牌号
					mount_license: "", //挂车车牌
					phone: "", //手机号
					name: "", //事件名称
					type: "", //事件类型
					id_card: "", //身份证
					describe: "", //事件描述
					perimeter_location: "", //位置
					perimeter_point: "" //经纬度
				},
				rules: {}
			}
		},
		onLoad() {
			this.getEarlyList()
		},
		methods: {
			async add() {
				if (this.has_mount == 1 && this.form.license.trim().length != 7 && this.form.license.trim().length !=
					8) {
					uni.showToast({
						title: '请输入挂车车牌',
						icon: 'none'
					})
					return false
				}
				await post('/myapi/api/yq_driver/troubleReport', {
					...this.form
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '上报成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/order/alarm'
							})
						}, 500)
					}
				})
			},
			groupChange(e) {
				this.has_mount = e
			},
			confirmEvent(e) {
				this.form.name = e.value[0]
				this.form.type = e.indexs[0] + 1
				this.show_event = false
			},
			numberInputResult(e) {
				this.form.license = e
			},
			numberInputResult2(e) {
				this.form.mount_license = e
			},
			toMap() {
				uni.showToast({
					title: '暂未开放！请手动输入位置！',
					icon: 'none'
				})
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			async getEarlyList(){
				await get.getEarlyList().then(res=>{
					this.columns_event = [
						res.data.map(item => ({
							id: item.id,
							name: item.name
						})),
					];
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.car-number-input {
		width: 100%;
	}

	.container {
		padding: 20px;

		.tag_title {
			width: 80px;
			height: 30px;
			display: flex;
			align-items: center;
		}

		.btn {
			margin-top: 20px;
		}
	}
</style>