pco/app/pages/business-entering/business-entering.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title">业务录入</text>
			</view>
			<view class="item">
				<view class="l">企业名称：</view>
				<view class="r">
					<u-input placeholder="输入企业名称"/>
				</view>
			</view>
			<view class="item">
				<view class="l">车牌号：</view>
				<view class="r">
					<u-input placeholder="输入车牌号"/>
				</view>
			</view>
			<view class="item">
				<view class="l">车型：</view>
				<view class="r">
					<picker class="p-picker" id="chexing" @change="bindPickerChange($event)" :value="chexingIndex" :range="chexing">
						<text class="p-text">{{chexing[chexingIndex]}}</text>
						<u-icon class="p-icon" name="arrow-down-fill" color="#999" size="20"></u-icon>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="l">载重：</view>
				<view class="r">
					<u-input placeholder="输入载重"/>
					<view class="unit">吨</view>
				</view>
			</view>
			<view class="item">
				<view class="l">商品分类：</view>
				<view class="r">
					<picker class="p-picker" id="spfl" @change="bindPickerChange($event)" :value="spflIndex" :range="spfl">
						<text class="p-text">{{spfl[spflIndex]}}</text>
						<u-icon class="p-icon" name="arrow-down-fill" color="#999" size="20"></u-icon>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="l">商品名称：</view>
				<view class="r">
					<u-input placeholder="输入商品名称"/>
				</view>
			</view>
			<view class="item">
				<view class="l">商品重量：</view>
				<view class="r">
					<u-input placeholder="输入商品重量"/>
					<view class="unit">KG</view>
				</view>
			</view>
			<view class="item">
				<view class="l">商品数量：</view>
				<view class="r">
					<u-input placeholder="输入商品数量"/>
					<view class="unit">个</view>
				</view>
			</view>
		</view>
		<view class="common-btn2">+增加商品</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chexingIndex: 0,
				chexingShow:false,
				chexing: ['车型1', '车型2' , '车型3'],
				
				spflIndex: 0,
				spflShow:false,
				spfl: ['商品类型1', '商品类型2' , '商品类型3'],
			}
		},
		methods: {
			bindPickerChange: function(e) {
				var nowId = e.target.id;//当前picker的ID id需要自己设置 在picker中
				var value = e.detail.value;//当前picker选中的值
				switch (nowId) {//根据ID判断是哪个picker
					case "chexing"://picker的ID
						this.chexingIndex = value;
						break;
					case "spfl"://picker的ID
						this.spflIndex = value;
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	@import '@/common/common.scss'
</style>