添加新增订单页面,调整topnav组件
This commit is contained in:
parent
0cb68fb371
commit
5ae934cf16
209
aircraft/server/order/add.vue
Normal file
209
aircraft/server/order/add.vue
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
<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>
|
@ -86,7 +86,9 @@
|
|||||||
},
|
},
|
||||||
// 点击新增
|
// 点击新增
|
||||||
handleClickAdd(){
|
handleClickAdd(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/aircraft/server/order/add'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<view>
|
||||||
<view class="nav-top" :style="{ height: CustomBar+'px',
|
<view class="nav-top" :style="{ height: CustomBar+'px',
|
||||||
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }">
|
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }">
|
||||||
<view class="nav-content" :style="{ paddingTop: StatusBar+'px' }">
|
<view class="nav-content" :style="{ paddingTop: StatusBar+'px' }">
|
||||||
@ -9,6 +10,8 @@
|
|||||||
<view style="width: 35rpx;height: 35rpx;" />
|
<view style="width: 35rpx;height: 35rpx;" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view v-if="!fixed" :style="{height: CustomBar+'px'}" />
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -40,6 +43,11 @@ export default {
|
|||||||
defaultNavTextColor:{
|
defaultNavTextColor:{
|
||||||
type: String,
|
type: String,
|
||||||
default: '#ffffff00'
|
default: '#ffffff00'
|
||||||
|
},
|
||||||
|
// 是否fixed,决定是否有留空
|
||||||
|
fixed:{
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
|
@ -61,6 +61,12 @@
|
|||||||
"navigationBarTitleText": "订单详情"
|
"navigationBarTitleText": "订单详情"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "order/add",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "新增订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "my/child_pages/history",
|
"path": "my/child_pages/history",
|
||||||
"style": {
|
"style": {
|
||||||
|
Loading…
Reference in New Issue
Block a user