dnyAppTruck/pages/index/addTruck.vue

<template>
	<view>
		<u--form labelPosition="top" labelWidth="100" :model="truckInfo" :rules="rules" ref="uForm">
			<u-form-item label="货车类型" prop="truckInfo.idTruckType" borderBottom @click="showTruckType = true"
				ref="itemTruckType">
				<u--input v-model="truckInfo.truckTypeName" disabled disabledColor="#ffffff" placeholder="请选择货车类型"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="车牌号" prop="truckInfo.truckCode" borderBottom ref="itemTruckCode">
				<u--input v-model="truckInfo.truckCode" border="none"></u--input>
			</u-form-item>
			<u-form-item label="能源类型" prop="truckInfo.energyType" borderBottom ref="itemEnergyType">
				<u--input v-model="truckInfo.energyType" border="none"></u--input>
			</u-form-item>
			<u-form-item label="备注" prop="truckInfo.truckMemo" borderBottom ref="itemMemo">
				<u--textarea v-model="truckInfo.truckMemo" placeholder="请输入备注" border="none"></u--textarea>
			</u-form-item>
			
			<u-button type="primary" size="large" text="提交"></u-button>
		</u--form>
		<u-picker :show="showTruckType" :columns="pickerColumns" closeOnClickOverlay @close="onPickerClose" @cancel="onPickerClose" @confirm="onPickerConfirm"
			keyName="truckTypeName"></u-picker>
	</view>
</template>

<script>
	import request from '@/common/libs/request.js';

	export default {
		mounted() {
			this.initData()
		},
		data() {
			return {
				truckInfo: {
					id: 0,
					idTruckType: 0,
					truckTypeName: '',
					truckCode: '',
					energyType: '',
					truckMemo: ''
				},
				showTruckType: false,
				pickerColumns:[],
				truckTypes: []

			}
		},
		methods: {
			initData() {
				let _that = this;
				request.httpPost("/apis/dnyDriver/getTruckTypeList", {}).then(res => {
					if (res.httpCode == 200) {
						_that.truckTypes = res.data
						_that.pickerColumns.push(_that.truckTypes)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				});
			},
			onPickerClose() {
				this.showTruckType = false
			},
			onPickerConfirm(item) {
				console.log(item)
				this.truckInfo.idTruckType = item.value[0].id
				this.truckInfo.truckTypeName = item.value[0].truckTypeName
				this.showTruckType = false
			}
		}
	}
</script>