添加新增订单页面,调整topnav组件

This commit is contained in:
Double-_-Z 2025-07-29 18:42:49 +08:00
parent 0cb68fb371
commit 5ae934cf16
4 changed files with 234 additions and 9 deletions

View 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: '手机号码不正确',
// blurchange
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: '货物重量格式不正确',
// blurchange
trigger: ['change','blur'],
}],
surchargeAmount: [{
required: true,
message: '请输入附加费',
trigger: ['change','blur']
},
{
//
validator: (rule, value, callback) => {
return this.$u.test.amount(value);
},
message: '附加费格式不正确',
// blurchange
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>

View File

@ -86,7 +86,9 @@
}, },
// //
handleClickAdd(){ handleClickAdd(){
uni.navigateTo({
url: '/aircraft/server/order/add'
})
} }
} }
} }

View File

@ -1,13 +1,16 @@
<template> <template>
<view class="nav-top" :style="{ height: CustomBar+'px', <view>
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"> <view class="nav-top" :style="{ height: CustomBar+'px',
<view class="nav-content" :style="{ paddingTop: StatusBar+'px' }"> background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }">
<u-icon v-if="showBack" name="arrow-left" size="36" @click="back" <view class="nav-content" :style="{ paddingTop: StatusBar+'px' }">
:color="topLevel===0? defaultBackColor : `rgba(51, 51, 51,${topLevel})`"></u-icon> <u-icon v-if="showBack" name="arrow-left" size="36" @click="back"
<view style="width: 35rpx;height: 35rpx;" v-else /> :color="topLevel===0? defaultBackColor : `rgba(51, 51, 51,${topLevel})`"></u-icon>
<text :style="{ color: topLevel===0? defaultNavTextColor : `rgba(51, 51, 51,${topLevel})` }">{{ title }}</text> <view style="width: 35rpx;height: 35rpx;" v-else />
<view style="width: 35rpx;height: 35rpx;" /> <text :style="{ color: topLevel===0? defaultNavTextColor : `rgba(51, 51, 51,${topLevel})` }">{{ title }}</text>
<view style="width: 35rpx;height: 35rpx;" />
</view>
</view> </view>
<view v-if="!fixed" :style="{height: CustomBar+'px'}" />
</view> </view>
</template> </template>
@ -40,6 +43,11 @@ export default {
defaultNavTextColor:{ defaultNavTextColor:{
type: String, type: String,
default: '#ffffff00' default: '#ffffff00'
},
// fixed
fixed:{
type: Boolean,
default: true
} }
}, },
data(){ data(){

View File

@ -61,6 +61,12 @@
"navigationBarTitleText": "订单详情" "navigationBarTitleText": "订单详情"
} }
}, },
{
"path": "order/add",
"style": {
"navigationBarTitleText": "新增订单"
}
},
{ {
"path": "my/child_pages/history", "path": "my/child_pages/history",
"style": { "style": {