281 lines
8.2 KiB
Vue
281 lines
8.2 KiB
Vue
<template>
|
|
<view class="order-add">
|
|
<Topnav :topLevel="1" 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"
|
|
type="select" @click="handleSelectScenOrCus('客户')"/>
|
|
</u-form-item>
|
|
<u-form-item prop="phone" required label="手机号码：" :border-bottom="false">
|
|
<u-input class="field-input" placeholder="请选择客户" v-model.number="form.phone"
|
|
type="select" @click="handleSelectScenOrCus('客户')" />
|
|
</u-form-item>
|
|
<u-form-item prop="attractionName" label="景区：" required :border-bottom="false">
|
|
<u-input class="field-input" placeholder="请选择景区" v-model="form.attractionName"
|
|
@click="handleSelectScenOrCus('景区')" type="select"/>
|
|
</u-form-item>
|
|
<u-form-item prop="routeIds" label="路线：" required :border-bottom="false">
|
|
<!-- <u-input class="field-input" placeholder="请选择路线" v-model="form.routeIds"
|
|
type="select"/> -->
|
|
<w-select class="field-w-select" v-model="form.routeIds" multiple
|
|
:list="routes" valueName="content" keyName="id" @change="changeRoute"
|
|
placeholder="请选择路线" width="100%" bgColor="#f8f9fb">
|
|
</w-select>
|
|
</u-form-item>
|
|
<u-form-item prop="cargoWeight" required label="货物重量：" :border-bottom="false">
|
|
<u-input class="field-ninput" type="number" placeholder="请输入货物重量（最多保留两位小数）" v-model.number="form.cargoWeight" />
|
|
<view slot="right" class="field-input-right">KG</view>
|
|
</u-form-item>
|
|
<u-form-item prop="surchargeAmount" required label="附加费：" :border-bottom="false">
|
|
<u-input type="number" class="field-ninput" placeholder="请输入附加费（最多保留两位小数）" v-model.number="form.surchargeAmount" />
|
|
<view slot="right" class="field-input-right">元</view>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
</view>
|
|
<u-picker mode="selector" v-model="showScenOrCus" :range="scenOrCusType==='景区'?scenics:customers"
|
|
:default-selector="getDefaultSelector" range-key="name" confirm-color="#f7c04d"
|
|
:title="scenOrCusType+'选择'" @confirm="handleConfirmScenOrCus"/>
|
|
<u-toast ref="uToast"></u-toast>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Topnav from '@/components/topnav/index.vue';
|
|
import configService from '@/common/config.service.js';
|
|
import WSelect from '@/components/w-select/w-select.vue'
|
|
export default {
|
|
// #ifdef MP
|
|
options: {
|
|
styleIsolation: 'shared'
|
|
},
|
|
// #endif
|
|
components: { Topnav, WSelect },
|
|
data(){
|
|
return{
|
|
// #ifdef MP
|
|
// 微信小程序自定义导航栏参数
|
|
CustomBar: this.CustomBar || 0,
|
|
// #endif
|
|
// 订单类型
|
|
form:{
|
|
orderType: 1,
|
|
orderTypeName: '载物订单',
|
|
customerName: '',
|
|
customerId: '',
|
|
phone: '',
|
|
attractionName: '',
|
|
attractionId: '',
|
|
surchargeAmount:'',
|
|
cargoWeight: '',
|
|
operatorIds: '',
|
|
routeIds: []
|
|
},
|
|
// 订单类型
|
|
orderTypes:[],
|
|
// 校验规则
|
|
rules:{
|
|
customerName: [{
|
|
required: true,
|
|
message: '请选择客户',
|
|
trigger: ['change','blur']
|
|
}],
|
|
phone: [{
|
|
required: true,
|
|
message: '请选择客户',
|
|
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: [],
|
|
// 客户列表
|
|
customers: [],
|
|
// 路线列表
|
|
routes: [{
|
|
id: 1,
|
|
content: "张三",
|
|
},
|
|
{
|
|
id: 2,
|
|
content: "李四",
|
|
},],
|
|
// 用户信息
|
|
userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
|
|
isPilot: this.$store.state.user_type == 1,
|
|
// 景区/客户选择弹窗
|
|
showScenOrCus: false,
|
|
// 当前景区/客户选择类型
|
|
scenOrCusType: ''
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs.uForm.setRules(this.rules);
|
|
},
|
|
computed:{
|
|
// 获取选择器默认值
|
|
getDefaultSelector(){
|
|
const isScen = this.scenOrCusType === '景区';
|
|
const arr = isScen ? this.scenics : this.customers;
|
|
const index = this.form[isScen?'attractionId':'customerId'];
|
|
return index?[arr.findIndex(item=>item.id === index)]:[0];
|
|
}
|
|
},
|
|
created() {
|
|
this.$nextTick(()=>{
|
|
this.init();
|
|
});
|
|
},
|
|
methods: {
|
|
// 初始化
|
|
async init(){
|
|
let res = await this.$api.allCustomers();
|
|
let resp = await this.$api.aSelfDetail(this.userMessage.id);
|
|
if(!res){
|
|
this.$refs.uToast.show({type: 'error',title: "客户获取失败!"});
|
|
}else{
|
|
this.customers = res || [];
|
|
}
|
|
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 || [];
|
|
}
|
|
}
|
|
},
|
|
// 选择路线
|
|
changeRoute(e){
|
|
console.log(this.form.routeIds);
|
|
},
|
|
// 点击打开景区/客户选择弹窗
|
|
handleSelectScenOrCus(type){
|
|
this.scenOrCusType = type;
|
|
this.showScenOrCus = true;
|
|
},
|
|
// 选择景区
|
|
handleConfirmScenOrCus(index){
|
|
if(this.scenOrCusType === '景区'){
|
|
const val = this.scenics[index[0]];
|
|
this.form.attractionName = val.name;
|
|
this.form.attractionId = val.id;
|
|
}else{
|
|
const val = this.customers[index[0]];
|
|
this.form.customerId = val.id;
|
|
this.form.customerName = val.name;
|
|
this.form.phone = val.phone;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
.field-ninput{
|
|
&::v-deep .u-input{
|
|
padding: 12rpx 80rpx 12rpx 32rpx !important;
|
|
}
|
|
}
|
|
.field-w-select{
|
|
&::v-deep .w-select{
|
|
.select-wrap{
|
|
border: none !important;
|
|
min-height: var(--select-wrap-height);
|
|
height: inherit;
|
|
}
|
|
padding: 12rpx 32rpx !important;
|
|
background: #F8F9FB;
|
|
border-radius: 4rpx;
|
|
}
|
|
&::v-deep .select-options{
|
|
.item-active{
|
|
color: #f7c04d !important;
|
|
background-color: #f5f5f5 !important;
|
|
}
|
|
}
|
|
&::v-deep .select-content-item-default{
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
color: #c0c4cc;
|
|
}
|
|
}
|
|
.field-input-right{
|
|
font-family: Source Han Sans SC;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
margin-left: -80rpx;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |