aircraft-pilot/aircraft/server/order/add.vue

<template>
	<view class="order-add">
		<Topnav :topLevel="topLevel" title="新增订单" defaultBackColor="#333333"
		 defaultNavTextColor="#333333" showBack :fixed="false" />
		 <view class="order-form">
		 	<view class="order-field">
				<u-form ref="uForm" :model="form" label-position="top"
				:label-style="{fontFamily: 'PingFang SC, PingFang SC',
				fontWeight: 'bold',fontSize: '32rpx',color: '#000000'}">
					<u-form-item label="订单类型：" :border-bottom="false">
						<u-input class="field-input" placeholder="请选择订单类型" v-model="form.orderTypeName" type="select" disabled/>
					</u-form-item>
					<u-form-item prop="customerName" required label="客户名称：" :border-bottom="false">
						<u-input class="field-input" placeholder="请输入客户名称" v-model="form.customerName" />
					</u-form-item>
					<u-form-item prop="phone" required label="手机号码：" :border-bottom="false">
						<u-input type="number" class="field-input" placeholder="请输入手机号码" v-model.number="form.phone" />
					</u-form-item>
					<u-form-item prop="attractionName" label="景区：" required :border-bottom="false">
						<u-input class="field-input" placeholder="请选择景区" v-model="form.attractionName" 
						@click="showScenics=true" type="select"/>
					</u-form-item>
					<u-form-item prop="cargoWeight" required label="货物重量：" :border-bottom="false">
						<u-input type="number" class="field-input" placeholder="请输入货物重量（最多保留两位小数）" v-model.number="form.cargoWeight" />
					</u-form-item>
					<u-form-item prop="surchargeAmount" required label="附加费：" :border-bottom="false">
						<u-input type="number" class="field-input" placeholder="请输入附加费（最多保留两位小数）" v-model.number="form.surchargeAmount" />
					</u-form-item>
				</u-form>
		 	</view>
		 </view>
		 <u-picker mode="selector" v-model="showScenics" :range="scenics" :default-selector="getDefaultSelector" 
		 range-key="name" confirm-color="#f7c04d" title="景区选择" @confirm="handleScenics"/>
		 <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import Topnav from '@/components/topnav/index.vue';
import configService from '@/common/config.service.js';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	components: { Topnav },
	data(){
		return{
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			CustomBar: this.CustomBar || 0,
			// #endif
			// 页面是否滚动到顶
			topLevel: 0,
			// 订单类型
			form:{
				orderType: 1,
				orderTypeName: '载物订单',
				customerName: '',
				phone: '',
				attractionName: '',
				attractionId: '',
				surchargeAmount:'',
				cargoWeight: '',
				operatorIds: '',
				routeIds: ''
			},
			// 订单类型
			orderTypes:[],
			// 校验规则
			rules:{
				customerName: [{
					required: true,
					message: '请输入客户名称',
					trigger: ['change','blur']
				}],
				phone: [{
					required: true,
					message: '请输入手机号',
					trigger: ['change','blur']
				},
				{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						return this.$u.test.mobile(value);
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}],
				attractionName: [{
					required: true,
					message: '请选择景区',
					trigger: ['change','blur']
				}],
				cargoWeight: [{
					required: true,
					message: '请输入货物重量',
					trigger: ['change','blur']
				},
				{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						return this.$u.test.amount(value);
					},
					message: '货物重量格式不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}],
				surchargeAmount: [{
					required: true,
					message: '请输入附加费',
					trigger: ['change','blur']
				},
				{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						return this.$u.test.amount(value);
					},
					message: '附加费格式不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}],
			},
			// 景区列表
			scenics: [],
			// 用户信息
			userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
			isPilot: this.$store.state.user_type == 1,
			// 景区选择弹窗
			showScenics: false,
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onPageScroll(e) {
		const level = e.scrollTop/60;
		if(level<=1) this.topLevel = level;
		else this.topLevel = 1;
		this.scrollTop = e.scrollTop;
	},
	computed:{
		// 获取选择器默认值
		getDefaultSelector(){
			const arr = this.scenics;
			const index = this.form['attractionId'];
			return index?[arr.findIndex(item=>item.id === index)]:[0];
		}
	},
	created() {
		this.$nextTick(()=>{
			this.init();
		});
	},
	methods: {
		// 初始化
		async init(){
			let resp = await this.$api.aSelfDetail(this.userMessage.id);
			if(!resp){
				this.$refs.uToast.show({type: 'error',title: "个人信息获取失败!"});
			}else{
				if(resp.areaId){
					let resx = await this.$api.allScenicsByAreaId({areaId: resp.areaId});
					this.scenics = resx || [];
				}
			}
		},
		// 选择景区
		handleScenics(index){
			const val = this.scenics[index[0]];
			this.form.attractionName = val.name;
			this.form.attractionId = val.id;
		}
	}
}
</script>

<style scoped lang="scss">
.order-add{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	.order-form{
		padding: 30rpx 32rpx 52rpx;
		display: flex;
		flex-direction: column;
		.order-field{
			&::v-deep .u-form-item--left__content--required{
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FE020E;
				margin-right: 8rpx !important;
			}
			&::v-deep .u-input{
				padding: 12rpx 32rpx !important;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 40rpx;
				background: #F8F9FB;
				border-radius: 4rpx;
			}
		}
	}
}
</style>