Skip to content

S
SuperMan
Commit 653e956a authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent bdfc2f49
Hide whitespace changes
Inline Side-by-side
Showing with 1531 additions and 1434 deletions
src/components/Hotel/singleProduct/components/ListCar.vue
View file @ 653e956a
<template>
<div>
<div class="ListCar-form"></div>
<div class="ListCar-form-box">
<div class="ListCar-box">
<div class="normalBtn ListCar-close" @click="close">
<i class="el-icon-close"></i>
<div>
<div class="ListCar-form"></div>
<div class="ListCar-form-box">
<div class="ListCar-box">
<div class="normalBtn ListCar-close" @click="close">
<i class="el-icon-close"></i>
</div>
<div class="row-JCSB ListCar-header paddinglr15">
<span class="fz16 fbold">酒店采购单</span>
<div class="ListCar-header-right fz12">
本次行程
<span class="colore65100">{{cars&&cars.length}}</span>
天，入住
<span class="color009ef7">{{HotelLength}}</span>
個酒店
</div>
</div>
<div class="ListCar-content">
<div class="ListCar-list" v-for="(x,xi) in cars">
<div class="colorffffff list-time">{{ x.Date }}</div>
<div class="list-content-box" v-for="(y,i) in x.Hotels">
<div class="list-operation">
<div>
<button v-if="x.Date>=OptionalTime" class="hollowFixedBtn" type="primary"
@click="setEditorHandler(y)">
<i class="el-icon-edit"></i>
</button>
<button class="normalBtn" type="primary" @click="removeHotelHandler(xi,i)">
<i class="el-icon-delete"></i>
</button>
</div>
<div class="row-JCSB ListCar-header paddinglr15">
<span class="fz16 fbold">酒店采购单</span>
<div class="ListCar-header-right fz12">
本次行程
<span class="colore65100">{{cars&&cars.length}}</span>
天，入住
<span class="color009ef7">{{HotelLength}}</span>
個酒店
</div>
</div>
<div class="list-content">
<div class="color009ef7 row-JCSB list-content-title">
<span class="fbold content-title fz15">{{ y.HotelName }}</span>
<div class="fz12 fbold">
已选
<span class="coloref44336">{{ y.SumPeople }}</span>
人
<span class="coloref1416c">{{ y.Total }}</span>
间
</div>
</div>
<div class="ListCar-content">
<div class="ListCar-list" v-for="(x,xi) in cars">
<div class="colorffffff list-time">{{ x.Date }}</div>
<div class="list-content-box" v-for="(y,i) in x.Hotels">
<div class="list-operation">
<div>
<button v-if="x.Date>=OptionalTime" class="hollowFixedBtn" type="primary" @click="setEditorHandler(y)">
<i class="el-icon-edit"></i>
</button>
<button class="normalBtn" type="primary" @click="removeHotelHandler(xi,i)">
<i class="el-icon-delete"></i>
</button>
</div>
</div>
<div class="list-content">
<div class="color009ef7 row-JCSB list-content-title">
<span class="fbold content-title fz15">{{ y.HotelName }}</span>
<div class="fz12 fbold">
已选
<span class="coloref44336">{{ y.SumPeople }}</span>
人
<span class="coloref1416c">{{ y.Total }}</span>
间
</div>
</div>
<div class="list-content-rooms fz14">
<div v-for="z in y.DetailList">
<el-row :gutter="20">
<el-col :span="6">{{ z.RoomName }}</el-col>
<el-col :span="6">
{{ moneyFormat(z.Unit_Price) }}/人
</el-col>
<el-col :span="5">
{{ z.PeopleNumber }}人{{ z.Number }}间
</el-col>
<el-col :span="7" class="row-JCE">
<span>小计：{{ moneyFormat(z.Unit_Price * z.PeopleNumber) }}</span>
</el-col>
</el-row>
</div>
</div>
<div class="row-JCE color009ef7 fz14 list-content-num">
<span>合计：{{ moneyFormat(y.Money) }}</span>
</div>
</div>
</div>
</div>
<div v-if="cars.length==0" style="text-align: center;padding: 20px 0;">暂无数据</div>
<div class="list-content-rooms fz14">
<div v-for="z in y.DetailList">
<el-row :gutter="20">
<el-col :span="6">{{ z.RoomName }}</el-col>
<el-col :span="6">
{{ moneyFormat(z.Unit_Price) }}/人
</el-col>
<el-col :span="5">
{{ z.PeopleNumber }}人{{ z.Number }}间
</el-col>
<el-col :span="7" class="row-JCE">
<span>小计：{{ moneyFormat(z.Unit_Price * z.PeopleNumber) }}</span>
</el-col>
</el-row>
</div>
</div>
<div class="ListCar-bottom" v-if="cars.length>0">
<div v-if="crmOrderObj" style="margin-bottom: 10px;">
<span style="color: red;">引流人：{{crmOrderObj.LureEmpNmae}} </span>
<span style="color: #2AAEF2;">/客人：{{crmOrderObj.CRMGuestName}}</span>
</div>
<el-form label-width="60px" :model="parameters" :rules="rules" ref="parameters">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="类型" prop="OrderType">
<el-select v-model="parameters.OrderType">
<el-option v-for="item in cacheHotels" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</el-form-item>
</el-col>
<template v-if="parameters.OrderType==1">
<el-col :span="12">
<el-form-item label="姓名" prop="ContactName">
<el-input v-model="parameters.ContactName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电话" prop="ContactNumber">
<el-input v-model="parameters.ContactNumber"></el-input>
</el-form-item>
</el-col>
</template>
<el-col :span="12" v-else>
<el-form-item label="团号" prop="TCNum">
<el-input v-model="parameters.TCNum"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="">
<el-input type="textarea" :rows="1"
placeholder="请输入备注" v-model="parameters.Remark"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="row-JCSB bottom-num">
<div>
<span class="coloref1416c fz12">订单总金额：</span>
<span class="coloref1416c fbold">
<span class="fz18">{{parameters.Money}}</span>
<span class="fz13"><!-- ¥ -->{{cars[0].CurrencyName}}</span>
</span>
</div>
<div>
<button :class="{'normalBtn':!loading,'hollowFixedBtn':loading}" type="primary" @click="submit">
确认下单
</button>
</div>
</div>
<div class="row-JCE color009ef7 fz14 list-content-num">
<span>合计：{{ moneyFormat(y.Money) }}</span>
</div>
</div>
</div>
</div>
<div v-if="cars.length==0" style="text-align: center;padding: 20px 0;">暂无数据</div>
</div>
<div class="ListCar-bottom" v-if="cars.length>0">
<div v-if="crmOrderObj" style="margin-bottom: 10px;">
<span style="color: red;">引流人：{{crmOrderObj.LureEmpNmae}} </span>
<span style="color: #2AAEF2;">/客人：{{crmOrderObj.CRMGuestName}}</span>
</div>
<el-form label-width="60px" :model="parameters" :rules="rules" ref="parameters">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="类型" prop="OrderType">
<el-select v-model="parameters.OrderType">
<el-option v-for="item in cacheHotels" :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
</el-form-item>
</el-col>
<template v-if="parameters.OrderType==1">
<el-col :span="12">
<el-form-item label="姓名" prop="ContactName">
<el-input v-model="parameters.ContactName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电话" prop="ContactNumber">
<el-input v-model="parameters.ContactNumber"></el-input>
</el-form-item>
</el-col>
</template>
<el-col :span="12" v-else>
<el-form-item label="团号" prop="TCNum">
<el-input v-model="parameters.TCNum"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="">
<el-input type="textarea" :rows="1" placeholder="请输入备注" v-model="parameters.Remark"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="row-JCSB bottom-num">
<div>
<span class="coloref1416c fz12">订单总金额：</span>
<span class="coloref1416c fbold">
<span class="fz18">{{parameters.Money}}</span>
<span class="fz13">
<!-- ¥ -->{{cars[0].CurrencyName}}</span>
</span>
</div>
<div>
<button :class="{'normalBtn':!loading,'hollowFixedBtn':loading}" type="primary" @click="submit">
确认下单
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
// crmOrderObj: {
// type: Object,
// require: false
// },
HotelRow: {
type: Object,
require: false
},
hotelInfor: {
type: Object,
require: false
}
</div>
</template>
<script>
export default {
props: {
// crmOrderObj: {
// type: Object,
// require: false
// },
HotelRow: {
type: Object,
require: false
},
data() {
return {
crmOrderObj:null,
OptionalTime: this.getBeforeDate(0,new Date().Format('yyyy-MM-dd')),//可编辑时间
cars: [],
HotelLength: 0,
addNum: 1,
parameters: {
Money: 0,
DetailList: [],
Remark: '',
OrderType: 1, //订单类型 1散客 2团队
TCNum: '', //=团队时 传递 组团号
ContactName: '', //=散客时 传递 联系人
ContactNumber: '', //=散客时 传递 联系人电话
OrderId: 0,
LureEmpId: 0,
CRMGuestId: 0,
},
currentIndex: 0,
currentI: 0,
currentS: 0,
RemainingInventory: 0,
loading: false,
cacheHotels: [
{ Name: '散客', ID: 1 },
{ Name: '团队', ID: 2 }
],
rules:{
OrderType: [{
required: true,
message: '请选择类型',
trigger: 'change'
}],
ContactName: [{
required: true,
message: '请输入散客姓名',
trigger: 'blur'
}],
ContactNumber: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{
pattern: this.$commonUtils.Regex.el_ISphone,
message: "请输入正确的电话"
}
],
TCNum: [{
required: true,
message: '请输入团号',
trigger: 'blur'
}],
hotelInfor: {
type: Object,
require: false
}
},
data() {
return {
crmOrderObj: null,
OptionalTime: this.getBeforeDate(0, new Date().Format('yyyy-MM-dd')), //可编辑时间
cars: [],
HotelLength: 0,
addNum: 1,
parameters: {
Money: 0,
DetailList: [],
Remark: '',
OrderType: 1, //订单类型 1散客 2团队
TCNum: '', //=团队时 传递 组团号
ContactName: '', //=散客时 传递 联系人
ContactNumber: '', //=散客时 传递 联系人电话
OrderId: 0,
LureEmpId: 0,
CRMGuestId: 0,
},
currentIndex: 0,
currentI: 0,
currentS: 0,
RemainingInventory: 0,
loading: false,
cacheHotels: [{
Name: '散客',
ID: 1
},
{
Name: '团队',
ID: 2
}
],
rules: {
OrderType: [{
required: true,
message: '请选择类型',
trigger: 'change'
}],
ContactName: [{
required: true,
message: '请输入散客姓名',
trigger: 'blur'
}],
ContactNumber: [{
required: true,
message: "请输入联系电话",
trigger: "blur"
}
};
],
TCNum: [{
required: true,
message: '请输入团号',
trigger: 'blur'
}],
}
};
},
watch: {
// crmOrderObj: {
// handler: function (val, oldVal) {
// this.crmOrderObj = val
// if(this.crmOrderObj){
// this.parameters.LureEmpId = val.LureEmpId//引流id
// this.parameters.CRMGuestId = val.CRMGuestId //客人ID
// }
// },
// deep: true,
// immediate: true
// },
cars: {
handler: function (val, oldVal) {
this.HotelLength = this.cars.length
localStorage.setItem("HotelLength", this.HotelLength)
this.getMoney()
},
deep: true
},
watch: {
// crmOrderObj: {
// handler: function (val, oldVal) {
// this.crmOrderObj = val
// if(this.crmOrderObj){
// this.parameters.LureEmpId = val.LureEmpId//引流id
// this.parameters.CRMGuestId = val.CRMGuestId //客人ID
// }
// },
// deep: true,
// immediate: true
// },
cars: {
handler: function (val, oldVal) {
this.HotelLength = this.cars.length
localStorage.setItem("HotelLength",this.HotelLength)
this.getMoney()
},
deep: true
parameters: {
handler: function (val, oldVal) {
},
parameters: {
handler: function (val, oldVal) {
},
deep: true
}
deep: true
}
},
created() {
// crm自动登陆传过来的参数
if (this.$route.query.crmOrderObj) {
let crmOrderObj = JSON.parse(this.$route.query.crmOrderObj)
this.crmOrderObj = crmOrderObj
this.parameters.LureEmpId = crmOrderObj.LureEmpId //引流id
this.parameters.CRMGuestId = crmOrderObj.CRMGuestId //客人ID
}
this.cars = JSON.parse(localStorage.getItem("cars"))
this.HotelLength = localStorage.getItem("HotelLength")
},
mounted() {
},
methods: {
// 关闭购物车
close() {
localStorage.removeItem('editor')
this.$emit('close')
},
created() {
// crm自动登陆传过来的参数
if(this.$route.query.crmOrderObj){
let crmOrderObj = JSON.parse(this.$route.query.crmOrderObj)
this.crmOrderObj = crmOrderObj
this.parameters.LureEmpId = crmOrderObj.LureEmpId//引流id
this.parameters.CRMGuestId = crmOrderObj.CRMGuestId //客人ID
}
this.cars = JSON.parse(localStorage.getItem("cars"))
this.HotelLength = localStorage.getItem("HotelLength")
// 合计
getMoney() {
this.parameters.Money = 0
this.cars.forEach((item) => {
item.Hotels.forEach((t) => {
this.parameters.Money += t.Money
})
})
},
mounted() {
// 确定下单
submit() {
this.$refs['parameters'].validate((valid) => {
if (valid) {
this.setFormMsg()
} else {
return false;
}
});
},
methods: {
// 关闭购物车
close(){
localStorage.removeItem('editor')
this.$emit('close')
},
// 合计
getMoney() {
this.parameters.Money = 0
this.cars.forEach((item) => {
item.Hotels.forEach((t) => {
this.parameters.Money += t.Money
})
})
},
// 确定下单
submit() {
this.$refs['parameters'].validate((valid) => {
if (valid) {
this.setFormMsg()
} else {
return false;
}
});
},
setFormMsg(){
let temp = JSON.parse(JSON.stringify(this.cars))
if(this.loading||this.cars.length==0) return
this.loading = true
this.parameters.DetailList = []
temp.forEach((x)=>{
x.Hotels.forEach((y)=>{
y.RoomList = JSON.parse(JSON.stringify(y.DetailList))
delete y.DetailList
this.parameters.DetailList.push(y)
})
})
this.apipost("dict_post_SetSaleCustomerOrder", this.parameters,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success('下单成功');
localStorage.removeItem('cars')
localStorage.removeItem('editor')
localStorage.removeItem('HotelLength')
this.cars=[]
this.HotelLength = 0
this.$emit('success')
} else {
this.Error('下单失败')
}
},
err => {
this.Error(err.message)
this.loading = false
}
);
},
removeHotelHandler(x,y){
let that = this
that.$confirm('是否确定删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.cars[x].Hotels.length==1){
this.cars.splice(x,1)
}else{
this.cars[x].Hotels.splice(y,1)
}
this.HotelLength = this.cars.length
localStorage.removeItem('cars')
localStorage.setItem('cars',JSON.stringify(this.cars))
localStorage.removeItem('HotelLength')
localStorage.setItem('HotelLength',JSON.stringify(this.HotelLength))
}).catch(() => {
});
},
// 编辑
setEditorHandler(x){
localStorage.setItem('editor',JSON.stringify(x))
this.$emit('editor',x)
}
setFormMsg() {
let temp = JSON.parse(JSON.stringify(this.cars))
if (this.loading || this.cars.length == 0) return
this.loading = true
this.parameters.DetailList = []
temp.forEach((x) => {
x.Hotels.forEach((y) => {
y.RoomList = JSON.parse(JSON.stringify(y.DetailList))
delete y.DetailList
this.parameters.DetailList.push(y)
})
})
this.apipost("dict_post_SetSaleCustomerOrder", this.parameters,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success('下单成功');
localStorage.removeItem('cars')
localStorage.removeItem('editor')
localStorage.removeItem('HotelLength')
this.cars = []
this.HotelLength = 0
this.$emit('success')
} else {
this.Error('下单失败')
}
},
err => {
this.Error(err.message)
this.loading = false
}
);
},
removeHotelHandler(x, y) {
let that = this
that.$confirm('是否确定删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (this.cars[x].Hotels.length == 1) {
this.cars.splice(x, 1)
} else {
this.cars[x].Hotels.splice(y, 1)
}
this.HotelLength = this.cars.length
localStorage.removeItem('cars')
localStorage.setItem('cars', JSON.stringify(this.cars))
localStorage.removeItem('HotelLength')
localStorage.setItem('HotelLength', JSON.stringify(this.HotelLength))
}).catch(() => {
});
},
// 编辑
setEditorHandler(x) {
localStorage.setItem('editor', JSON.stringify(x))
this.$emit('editor', x)
}
};
</script>
<style scoped>
.fz12{
font-size: 12px;
}
.fz13{
font-size: 13px;
}
.fz14{
font-size: 14px;
}
.fz15{
font-size: 15px;
}
.fz16{
font-size: 16px;
}
.fz18{
font-size: 18px;
}
.fbold{
font-weight: bold;
}
.paddinglr15{
padding: 0 15px;
}
.row-JCSB{
display: flex;
justify-content: space-between;
}
.row-JCE{
display: flex;
justify-content: end;
}
.colorffffff{
color: #ffffff;
}
.color009ef7{
color: #009ef7;
}
.colore65100{
color: #e65100;
}
.coloref44336{
color: #f44336;
}
.coloref1416c{
color: #f1416c;
}
.ListCar-form{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(23,23,23,.5);
z-index: 3;
}
.ListCar-form-box{
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 550px;
background: #ffffff;
z-index: 100;
}
.ListCar-box{
width: 100%;
height: 100%;
position: relative;
}
.ListCar-close{
position: absolute;
left: -47px;
top: 20%;
line-height: 26px;
}
.ListCar-close i{
margin-left: 3px;
}
.normalBtn.ListCar-close{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: 0 8px !important;
}
.ListCar-box{
padding: 15px 0;
}
.ListCar-header{
border-bottom: -;
}
.ListCar-header-right{
border-radius: 3px;
padding: 5px 8px;
background: #fff3e0;
}
.ListCar-content{
padding: 20px 15px;
height: calc(100% - 230px);
overflow: auto;
}
.ListCar-list{
border-radius: 3px;
background: black;
padding: 0 10px 10px 10px;
margin: 0 0 10px 0;
}
.list-time{
padding: 10px 0 5px 0;
}
.list-content-box{
background: #e1f5fe;
position: relative;
border-radius: 3px;
cursor: pointer;
margin-bottom: 5px;
}
.list-content-box:last-child{
margin-bottom: 0;
}
.list-content{
padding: 8px 10px;
}
.list-content-title{
border-bottom: 1px dashed #009ef7;
padding: 0 0 8px 0;
}
.content-title{
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-content-rooms{
border-bottom: 1px dashed #009ef7;
padding: 6px 0;
}
.list-content-rooms>div{
margin-bottom: 5px;
}
.list-content-rooms>div:last-child{
margin-bottom: 0;
}
.list-content-num{
padding: 6px 0 0 0;
}
.list-operation{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(23,23,23,.5);
border-radius: 3px;
display: none;
z-index: 1;
}
.list-operation div{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-content-box:hover .list-operation{
display: block;
}
.ListCar-bottom{
padding: 15px 15px 0 15px;
}
.bottom-num{
align-items: center;
}
</style>
\ No newline at end of file
};
</script>
<style scoped>
.fz12 {
font-size: 12px;
}
.fz13 {
font-size: 13px;
}
.fz14 {
font-size: 14px;
}
.fz15 {
font-size: 15px;
}
.fz16 {
font-size: 16px;
}
.fz18 {
font-size: 18px;
}
.fbold {
font-weight: bold;
}
.paddinglr15 {
padding: 0 15px;
}
.row-JCSB {
display: flex;
justify-content: space-between;
}
.row-JCE {
display: flex;
justify-content: end;
}
.colorffffff {
color: #ffffff;
}
.color009ef7 {
color: #009ef7;
}
.colore65100 {
color: #e65100;
}
.coloref44336 {
color: #f44336;
}
.coloref1416c {
color: #f1416c;
}
.ListCar-form {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(23, 23, 23, .5);
z-index: 3;
}
.ListCar-form-box {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 550px;
background: #ffffff;
z-index: 100;
}
.ListCar-box {
width: 100%;
height: 100%;
position: relative;
}
.ListCar-close {
position: absolute;
left: -47px;
top: 20%;
line-height: 26px;
}
.ListCar-close i {
margin-left: 3px;
}
.normalBtn.ListCar-close {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: 0 8px !important;
}
.ListCar-box {
padding: 15px 0;
}
.ListCar-header {
border-bottom: -;
}
.ListCar-header-right {
border-radius: 3px;
padding: 5px 8px;
background: #fff3e0;
}
.ListCar-content {
padding: 20px 15px;
height: calc(100% - 230px);
overflow: auto;
}
.ListCar-list {
border-radius: 3px;
background: black;
padding: 0 10px 10px 10px;
margin: 0 0 10px 0;
}
.list-time {
padding: 10px 0 5px 0;
}
.list-content-box {
background: #e1f5fe;
position: relative;
border-radius: 3px;
cursor: pointer;
margin-bottom: 5px;
}
.list-content-box:last-child {
margin-bottom: 0;
}
.list-content {
padding: 8px 10px;
}
.list-content-title {
border-bottom: 1px dashed #009ef7;
padding: 0 0 8px 0;
}
.content-title {
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-content-rooms {
border-bottom: 1px dashed #009ef7;
padding: 6px 0;
}
.list-content-rooms>div {
margin-bottom: 5px;
}
.list-content-rooms>div:last-child {
margin-bottom: 0;
}
.list-content-num {
padding: 6px 0 0 0;
}
.list-operation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(23, 23, 23, .5);
border-radius: 3px;
display: none;
z-index: 1;
}
.list-operation div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list-content-box:hover .list-operation {
display: block;
}
.ListCar-bottom {
padding: 15px 15px 0 15px;
}
.bottom-num {
align-items: center;
}
</style>
src/components/busManagement/BookAcar/CharterPreview.vue
View file @ 653e956a
<style scoped>
.image-slot{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.time-box.time-box2 .time-box-width span{
width: auto;
}
.flexOne{
margin: auto;
width: 70%;
min-width: 1300px;
display: flex;
justify-content: space-between;
margin-top: 15px;
align-items: flex-start;
}
.flexOne-left{
flex-grow: 1;
}
.flexOne-form-bj{
border-radius: 5px;
background: #ffffff;
padding: 15px;
margin-bottom: 20px;
}
.flexOne-form-bj h3{
font-size: 18px;
color: black;
padding: 0 0 20px 0;
font-weight: 400;
}
.listone-form{
padding: 5px 0 15px 0;
border-radius: 5px;
background: #ffffff;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
overflow: hidden;
border-bottom: 1px solid #eeeeee;
}
.listone-img{
width: 130px;
flex-shrink: 0;
margin-right: 15px;
border-radius: 5px;
display: block;
}
.listone-list{
flex-grow: 1;
display: flex;
justify-content: space-between;
}
.list-left h6,.card-centent h6{
font-size: 16px;
margin-bottom: 5px;
cursor: pointer;
}
.list-left div{
color: #7E8299;
font-size: 13px;
margin-top: 7px;
}
.list-left div a{
color: #009EF7;
font-size: 12px;
margin-left: 15px;
cursor: pointer;
}
.flexOne-time{
padding: 20px;
}
.time-box{
display: flex;
flex-direction: row;
margin-bottom: 15px;
border: 0;
}
.time-box.center{
align-items: center;
}
.time-box>span{
/* width: 100px; */
flex-shrink: 0;
font-size: 13px;
color: #181C32;
margin-right: 40px;
}
.flexOne-type{
display: flex;
align-items: center;
padding: 0 0 20px 0;
}
.flexOne-type b{
font-size: 13px;
width: 100px;
flex-shrink: 0;
}
.flexOne-type div{
display: flex;
}
.flexOne-description{
padding: 15px 15px;
border-radius: 5px;
background: #E1F5FE;
margin-bottom: 20px;
}
.flexOne-description b{
font-size: 14px;
}
.flexOne-description p{
font-size: 12px;
color: #4C5759;
padding: 10px 0 0 0;
}
.flexOne-infor-box b{
font-size: 13px;
}
.infor-list{
display: flex;
flex-direction: column;
}
.list-title{
padding: 20px 0;
border-bottom: 1px dashed #eeeeee;
color: #7E8299;
font-size: 13px;
}
.list-title,.list-centent{
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.infor-list li{
position: relative;
width: 25%;
}
.list-centent li {
display: flex;
width: 33.33%;
}
.list-centent.active li {
width: 25%;
}
.list-centent.activeB li {
width: 20%;
}
.list-centent.activeC li {
width: 50%;
}
.bottom .el-form-item{
margin-bottom: 0;
}
.notice{
border-radius: 5px;
border: 1px dashed #FFA500;
background: #FFF3E0;
margin-bottom: 15px;
padding: 15px;
}
.notice b{
font-size: 13px;
}
.notice p{
color: #5E6278;
font-size: 12px;
padding: 10px 0 0 0;
}
.image-slot {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.flexOne-right{
width: 300px;
flex-shrink: 0;
margin-left: 20px;
border-radius: 5px;
background: #ffffff;
padding: 15px;
}
.flexOne-right h4{
padding: 10px 0 20px 0;
color: #181C32;
}
.right-text{
border: 1px dashed #F1416C;
padding: 15px 10px;
background: #FFEBEE;
font-size: 13px;
color: black;
margin-bottom: 20px;
border-radius: 5px;
}
.right-text p{
color: #6D6E83;
font-size: 12px;
padding: 10px 0 0 0;
}
.right-form{
border-top: 1px dashed #EEEEEE;
border-bottom: 1px dashed #EEEEEE;
padding: 20px 0;
}
.right-form h6{
font-size: 14px;
color: black;
}
.noData{
text-align: center;
color: #7E8299;
font-size: 14px;
}
.right-form-list{
display: flex;
flex-direction: column;
padding: 20px 0;
}
.right-list{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.right-list-left{
flex: 1;
display: flex;
flex-wrap: wrap;
}
.leftText{
width: 150px;
text-overflow: ellipsis;
overflow: hidden;
}
.right-list-right{
flex-shrink: 0;
font-size: 13px;
color: #181C32;
}
.right-Money{
padding: 20px 0;
font-size: 14px;
color: #181C32;
}
.right-Money b{
font-size: 18px;
color: #F1416C;
margin-left: 5px;
}
.right-Money,.right-Submit{
display: flex;
flex-direction: row-reverse;
}
/deep/.el-input-number{
width: 200px;
height: 32px;
line-height: 32px;
}
/deep/.el-input-number .el-input__inner{
text-align: center;
height: 34px;
}
/deep/.line-heigh .el-input-number{
line-height: 32px;
}
/deep/.el-date-editor.el-input, .el-date-editor.el-input__inner{
width: auto;
}
.time-box.time-box2 .time-box-width span {
width: auto;
}
.flexOne {
margin: auto;
width: 70%;
min-width: 1300px;
display: flex;
justify-content: space-between;
margin-top: 15px;
align-items: flex-start;
}
.flexOne-left {
flex-grow: 1;
}
.flexOne-form-bj {
border-radius: 5px;
background: #ffffff;
padding: 15px;
margin-bottom: 20px;
}
.flexOne-form-bj h3 {
font-size: 18px;
color: black;
padding: 0 0 20px 0;
font-weight: 400;
}
.listone-form {
padding: 5px 0 15px 0;
border-radius: 5px;
background: #ffffff;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
overflow: hidden;
border-bottom: 1px solid #eeeeee;
}
.listone-img {
width: 130px;
flex-shrink: 0;
margin-right: 15px;
border-radius: 5px;
display: block;
}
.listone-list {
flex-grow: 1;
display: flex;
justify-content: space-between;
}
.list-left h6,
.card-centent h6 {
font-size: 16px;
margin-bottom: 5px;
cursor: pointer;
}
.list-left div {
color: #7E8299;
font-size: 13px;
margin-top: 7px;
}
.list-left div a {
color: #009EF7;
font-size: 12px;
margin-left: 15px;
cursor: pointer;
}
.flexOne-time {
padding: 20px;
}
.time-box {
display: flex;
flex-direction: row;
margin-bottom: 15px;
border: 0;
}
.time-box.center {
align-items: center;
}
.time-box>span {
/* width: 100px; */
flex-shrink: 0;
font-size: 13px;
color: #181C32;
margin-right: 40px;
}
.flexOne-type {
display: flex;
align-items: center;
padding: 0 0 20px 0;
}
.flexOne-type b {
font-size: 13px;
width: 100px;
flex-shrink: 0;
}
.flexOne-type div {
display: flex;
}
.flexOne-description {
padding: 15px 15px;
border-radius: 5px;
background: #E1F5FE;
margin-bottom: 20px;
}
.flexOne-description b {
font-size: 14px;
}
</style>
<template>
<div class="flexOne">
<div class="flexOne-left">
<div class="flexOne-form-bj">
<h3>
<template v-if="detailsObj.CarType==1">接机</template><template v-if="detailsObj.CarType==2">送机</template><template v-if="detailsObj.CarType==3">包车</template>信息
</h3>
<div class="listone-form">
<el-image v-if="detailsObj.ImageList" class="listone-img" :src="detailsObj.ImageList[0]" fit="contain">
<div slot="placeholder" class="image-slot">
<span>
加载中<span class="dot">...</span>
</span>
</div>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="listone-list">
<div class="list-left">
<h6 @click="showCardHandler">{{detailsObj.Name}}</h6>
<p style="color: #9e9e9e;font-size: 13px;">请在出发前一天的23:00前完成预定</p>
<div v-if="crmOrderObj">
<span style="color: red;">引流人：{{crmOrderObj.LureEmpNmae}} </span>
<span style="color: #2AAEF2;">/客人：{{crmOrderObj.CRMGuestName}}</span>
</div>
<!-- <div>
.flexOne-description p {
font-size: 12px;
color: #4C5759;
padding: 10px 0 0 0;
}
.flexOne-infor-box b {
font-size: 13px;
}
.infor-list {
display: flex;
flex-direction: column;
}
.list-title {
padding: 20px 0;
border-bottom: 1px dashed #eeeeee;
color: #7E8299;
font-size: 13px;
}
.list-title,
.list-centent {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.infor-list li {
position: relative;
width: 25%;
}
.list-centent li {
display: flex;
width: 33.33%;
}
.list-centent.active li {
width: 25%;
}
.list-centent.activeB li {
width: 20%;
}
.list-centent.activeC li {
width: 50%;
}
.bottom .el-form-item {
margin-bottom: 0;
}
.notice {
border-radius: 5px;
border: 1px dashed #FFA500;
background: #FFF3E0;
margin-bottom: 15px;
padding: 15px;
}
.notice b {
font-size: 13px;
}
.notice p {
color: #5E6278;
font-size: 12px;
padding: 10px 0 0 0;
}
.flexOne-right {
width: 300px;
flex-shrink: 0;
margin-left: 20px;
border-radius: 5px;
background: #ffffff;
padding: 15px;
}
.flexOne-right h4 {
padding: 10px 0 20px 0;
color: #181C32;
}
.right-text {
border: 1px dashed #F1416C;
padding: 15px 10px;
background: #FFEBEE;
font-size: 13px;
color: black;
margin-bottom: 20px;
border-radius: 5px;
}
.right-text p {
color: #6D6E83;
font-size: 12px;
padding: 10px 0 0 0;
}
.right-form {
border-top: 1px dashed #EEEEEE;
border-bottom: 1px dashed #EEEEEE;
padding: 20px 0;
}
.right-form h6 {
font-size: 14px;
color: black;
}
.noData {
text-align: center;
color: #7E8299;
font-size: 14px;
}
.right-form-list {
display: flex;
flex-direction: column;
padding: 20px 0;
}
.right-list {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.right-list-left {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.leftText {
width: 150px;
text-overflow: ellipsis;
overflow: hidden;
}
.right-list-right {
flex-shrink: 0;
font-size: 13px;
color: #181C32;
}
.right-Money {
padding: 20px 0;
font-size: 14px;
color: #181C32;
}
.right-Money b {
font-size: 18px;
color: #F1416C;
margin-left: 5px;
}
.right-Money,
.right-Submit {
display: flex;
flex-direction: row-reverse;
}
/deep/.el-input-number {
width: 200px;
height: 32px;
line-height: 32px;
}
/deep/.el-input-number .el-input__inner {
text-align: center;
height: 34px;
}
/deep/.line-heigh .el-input-number {
line-height: 32px;
}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: auto;
}
</style>
<template>
<div class="flexOne">
<div class="flexOne-left">
<div class="flexOne-form-bj">
<h3>
<template v-if="detailsObj.CarType==1">接机</template><template
v-if="detailsObj.CarType==2">送机</template><template v-if="detailsObj.CarType==3">包车</template>信息
</h3>
<div class="listone-form">
<el-image v-if="detailsObj.ImageList" class="listone-img" :src="detailsObj.ImageList[0]" fit="contain">
<div slot="placeholder" class="image-slot">
<span>
加载中<span class="dot">...</span>
</span>
</div>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="listone-list">
<div class="list-left">
<h6 @click="showCardHandler">{{detailsObj.Name}}</h6>
<p style="color: #9e9e9e;font-size: 13px;">请在出发前一天的23:00前完成预定</p>
<div v-if="crmOrderObj">
<span style="color: red;">引流人：{{crmOrderObj.LureEmpNmae}} </span>
<span style="color: #2AAEF2;">/客人：{{crmOrderObj.CRMGuestName}}</span>
</div>
<!-- <div>
<span>地址： {{detailsObj.CityList2[0].CountryName }}{{detailsObj.CityList2[0].CityName}}</span>
<a @click="showCardHandler"><i class="el-icon-map-location"></i> 地图</a>
</div> -->
</div>
</div>
</div>
<div class="flexOne-time">
<div class="time-box center">
<span>包车日期：</span>
<div>
<el-date-picker class="w150" v-model='SetOutTime' format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date"
:picker-options="beforeCheck" laceholder="包车日期" @change="getQuotation">
</el-date-picker>
</div>
</div>
<div class="time-box time-box2 center" v-if="msg.OrderType!=3">
<span>选择机场：</span>
<div style="display: flex;">
<template v-for="x in AirportTypes">
<el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;cursor: pointer;"
@click="msg.OrderId?changeDetailListHandler():changeDetailListHandler(x,1,msg.OrderId)">
<a>{{ x.AirportName }}</a>
</el-tag>
</template>
</div>
</div>
<!-- v-if="msg.OrderType!=1" -->
<div class="time-box time-box2 center" v-if="msg.OrderType!=1">
<span>上车范围：</span>
<div style="display: flex;">
<template v-for="x in PlaceTypes">
<el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;cursor: pointer;"
@click="msg.OrderId?changeDetailListHandler(x,2,msg.OrderId):changeDetailListHandler(x,2,msg.OrderId)">
<a>{{ x.Address }}</a>
<span>{{ x.Range }}m范围</span>
</el-tag>
</template>
</div>
</div>
<!-- v-if="msg.OrderType!=2" -->
<div class="time-box time-box2 center" v-if="msg.OrderType!=2">
<span>下车范围：</span>
<div style="display: flex;">
<template v-for="x in PlaceTypes2">
<el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;cursor: pointer;"
@click="msg.OrderId?changeDetailListHandler(x,4,msg.OrderId):changeDetailListHandler(x,4,msg.OrderId)">
<a>{{ x.Address }}</a>
<span>{{ x.Range }}m范围</span>
</el-tag>
</template>
</div>
</div>
<div class="time-box time-box2 center">
<span>选择车型：</span>
<div style="display: flex;">
<template v-for="x in types">
<el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;cursor: pointer;"
@click="changeDetailListHandler(x,3)">
<a>{{ x.CarName }}</a>
<span v-if="x.B2BPrice>0">{{ x.B2BPrice.toFixed(2) }}</span>
</el-tag>
</template>
</div>
</div>
<div class="time-box">
<span>购买辆数：</span>
<div style="display: flex;flex-direction: column;">
<template v-for="x in types">
<el-input-number v-if="x.checked" v-model="x.num" @change="changePeople" :min="1" label="购买数量"
style="margin-bottom: 10px;"></el-input-number>
</template>
</div>
</div>
</div>
</div>
<div class="flexOne-time">
<div class="time-box center">
<span>包车日期：</span>
<div>
<el-date-picker class="w150" v-model='SetOutTime' format="yyyy-MM-dd" value-format="yyyy-MM-dd"
type="date" :picker-options="beforeCheck" laceholder="包车日期" @change="getQuotation">
</el-date-picker>
</div>
</div>
<div class="flexOne-form-bj">
<h3>订单信息</h3>
<div class="flexOne-type">
<b>訂單類型：</b>
<div>
<el-radio v-if="msg.OrderType==1" v-model="msg.OrderType" label="1">接机</el-radio>
<el-radio v-if="msg.OrderType==2" v-model="msg.OrderType" label="2" >送机</el-radio>
<el-radio v-if="msg.OrderType==3" v-model="msg.OrderType" label="3" >包车</el-radio>
</div>
<div class="time-box time-box2 center" v-if="msg.OrderType!=3">
<span>选择机场：</span>
<div style="display: flex;">
<template v-for="x in AirportTypes">
<el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;cursor: pointer;"
@click="msg.OrderId?changeDetailListHandler():changeDetailListHandler(x,1,msg.OrderId)">
<a>{{ x.AirportName }}</a>
</el-tag>
</template>
</div>
<div class="flexOne-description">
<b>产品详情</b>
<p>{{detailsObj.Description}}</p>
</div>
<!-- v-if="msg.OrderType!=1" -->
<div class="time-box time-box2 center" v-if="msg.OrderType!=1">
<span>上车范围：</span>
<div style="display: flex;">
<template v-for="x in PlaceTypes">
<el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;cursor: pointer;"
@click="msg.OrderId?changeDetailListHandler(x,2,msg.OrderId):changeDetailListHandler(x,2,msg.OrderId)">
<a>{{ x.Address }}</a>
<span>{{ x.Range }}m范围</span>
</el-tag>
</template>
</div>
<el-form label-width="80px" :model="msg" :rules="rules" ref="msg">
<div class="flexOne-infor-box" v-if="msg.OrderType!=3">
<b>航班信息</b>
<div class="infor-list">
<div class="list-centent active">
<li>
<el-form-item label="航厦" prop="AirportTerminal">
<el-input v-model="msg.AirportTerminal" placeholder="输入航厦"/>
</el-form-item>
</li>
<li>
<el-form-item label="航空公司" prop="AirLine">
<el-input v-model="msg.AirLine" placeholder="输入航空公司"/>
</el-form-item>
</li>
<li>
<el-form-item label="航班号" prop="FlightNumber">
<el-input v-model="msg.FlightNumber" placeholder="输入航班号"/>
</el-form-item>
</li>
<li class="bottom">
<el-form-item :label="msg.OrderType==1?'抵达时间':'出发时间'" prop="FlightTime">
<el-date-picker
v-model="msg.FlightTime"
type="datetime"
format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
:placeholder="msg.OrderType==1?'选择抵达时间':'选择送机时间'" :picker-options="beforeCheck">
</el-date-picker>
</el-form-item>
</li>
</div>
</div>
</div>
<!-- v-if="msg.OrderType!=2" -->
<div class="time-box time-box2 center" v-if="msg.OrderType!=2">
<span>下车范围：</span>
<div style="display: flex;">
<template v-for="x in PlaceTypes2">
<el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;cursor: pointer;"
@click="msg.OrderId?changeDetailListHandler(x,4,msg.OrderId):changeDetailListHandler(x,4,msg.OrderId)">
<a>{{ x.Address }}</a>
<span>{{ x.Range }}m范围</span>
</el-tag>
</template>
</div>
</div>
<div class="time-box time-box2 center">
<span>选择车型：</span>
<div style="display: flex;">
<template v-for="x in types">
<el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;cursor: pointer;"
@click="changeDetailListHandler(x,3)">
<a>{{ x.CarName }}</a>
<span v-if="x.B2BPrice>0">{{ x.B2BPrice.toFixed(2) }}</span>
</el-tag>
</template>
</div>
</div>
<div class="time-box">
<span>购买辆数：</span>
<div style="display: flex;flex-direction: column;">
<template v-for="x in types">
<el-input-number v-if="x.checked" v-model="x.num" @change="changePeople" :min="1" label="购买数量"
style="margin-bottom: 10px;"></el-input-number>
</template>
</div>
</div>
</div>
</div>
<div class="flexOne-form-bj">
<h3>订单信息</h3>
<div class="flexOne-type">
<b>訂單類型：</b>
<div>
<el-radio v-if="msg.OrderType==1" v-model="msg.OrderType" label="1">接机</el-radio>
<el-radio v-if="msg.OrderType==2" v-model="msg.OrderType" label="2">送机</el-radio>
<el-radio v-if="msg.OrderType==3" v-model="msg.OrderType" label="3">包车</el-radio>
</div>
</div>
<div class="flexOne-description">
<b>产品详情</b>
<p>{{detailsObj.Description}}</p>
</div>
<el-form label-width="80px" :model="msg" :rules="rules" ref="msg">
<div class="flexOne-infor-box" v-if="msg.OrderType!=3">
<b>航班信息</b>
<div class="infor-list">
<div class="list-centent active">
<li>
<el-form-item label="航厦" prop="AirportTerminal">
<el-input v-model="msg.AirportTerminal" placeholder="输入航厦" />
</el-form-item>
</li>
<li>
<el-form-item label="航空公司" prop="AirLine">
<el-input v-model="msg.AirLine" placeholder="输入航空公司" />
</el-form-item>
</li>
<li>
<el-form-item label="航班号" prop="FlightNumber">
<el-input v-model="msg.FlightNumber" placeholder="输入航班号" />
</el-form-item>
</li>
<li class="bottom">
<el-form-item :label="msg.OrderType==1?'抵达时间':'出发时间'" prop="FlightTime">
<el-date-picker v-model="msg.FlightTime" type="datetime" format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm" :placeholder="msg.OrderType==1?'选择抵达时间':'选择送机时间'"
:picker-options="beforeCheck">
</el-date-picker>
</el-form-item>
</li>
</div>
<div class="flexOne-infor-box">
<b><template v-if="msg.OrderType==1">接机</template><template v-if="msg.OrderType==2">送机</template><template v-if="msg.OrderType==3">包机</template>信息</b>
<div class="infor-list">
<div class="list-centent active">
<li v-if="msg.OrderType!=1">
<el-form-item label="上车地点" prop="GetonAddress">
<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="msg.GetonAddress"
placeholder="请输入上车地点">
</el-input>
<!-- <span @click="clickMapAddress(1,1,msg.GetonAddress)"
</div>
</div>
<div class="flexOne-infor-box">
<b><template v-if="msg.OrderType==1">接机</template><template v-if="msg.OrderType==2">送机</template><template
v-if="msg.OrderType==3">包机</template>信息</b>
<div class="infor-list">
<div class="list-centent active">
<li v-if="msg.OrderType!=1">
<el-form-item label="上车地点" prop="GetonAddress">
<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="msg.GetonAddress"
placeholder="请输入上车地点">
</el-input>
<!-- <span @click="clickMapAddress(1,1,msg.GetonAddress)"
class="el-icon-location" style="font-size: 16px;color: #E95252;position: absolute;right: 10px;top: 15px;"></span> -->
</el-form-item>
</li>
<li v-if="msg.OrderType!=2">
<el-form-item label="下车地点" prop="GetoffAddress" >
<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="msg.GetoffAddress"
placeholder="请输入下车地点">
</el-input>
<!-- <span @click="clickMapAddress(2,2,msg.GetoffAddress)"
</el-form-item>
</li>
<li v-if="msg.OrderType!=2">
<el-form-item label="下车地点" prop="GetoffAddress">
<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="msg.GetoffAddress"
placeholder="请输入下车地点">
</el-input>
<!-- <span @click="clickMapAddress(2,2,msg.GetoffAddress)"
class="el-icon-location" style="font-size: 16px;color: #E95252;position: absolute;right: 10px;top: 15px;"></span> -->
</el-form-item>
</li>
<li class="bottom">
<el-form-item label="预定时间" prop="OrderDate">
<el-date-picker
v-model="msg.OrderDate"
type="datetime"
format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
placeholder="选择预定时间" :picker-options="beforeCheck" @change="getTime">
</el-date-picker>
</el-form-item>
</li>
</div>
</div>
</el-form-item>
</li>
<li class="bottom">
<el-form-item label="预定时间" prop="OrderDate">
<el-date-picker v-model="msg.OrderDate" type="datetime" format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm" placeholder="选择预定时间" :picker-options="beforeCheck"
@change="getTime">
</el-date-picker>
</el-form-item>
</li>
</div>
<div class="flexOne-infor-box">
<b>乘客信息</b>
<div class="infor-list">
<!-- :class="{'activeB':msg.OrderType!=3}" -->
<div class="list-centent active">
<li>
<el-form-item label="成人数" prop="ManNum">
<el-input type="Number" v-model="msg.ManNum" placeholder="输入成人数"/>
</el-form-item>
</li>
<li>
<el-form-item label="儿童数" prop="">
<el-input type="Number" v-model="msg.ChildNum" placeholder="输入儿童数"/>
</el-form-item>
</li>
<li>
<el-form-item label="婴儿数" prop="">
<el-input type="Number" v-model="msg.BabyNum" placeholder="输入婴儿数"/>
</el-form-item>
</li>
<template v-if="msg.OrderType!=3">
</div>
</div>
<div class="flexOne-infor-box">
<b>乘客信息</b>
<div class="infor-list">
<!-- :class="{'activeB':msg.OrderType!=3}" -->
<div class="list-centent active">
<li>
<el-form-item label="成人数" prop="ManNum">
<el-input type="Number" v-model="msg.ManNum" placeholder="输入成人数" />
</el-form-item>
</li>
<li>
<el-form-item label="儿童数" prop="">
<el-input type="Number" v-model="msg.ChildNum" placeholder="输入儿童数" />
</el-form-item>
</li>
<li>
<el-form-item label="婴儿数" prop="">
<el-input type="Number" v-model="msg.BabyNum" placeholder="输入婴儿数" />
</el-form-item>
</li>
<template v-if="msg.OrderType!=3">
<li>
<el-form-item label="手提行李" prop="">
<el-input type="Number" v-model="msg.HandLuggageNum" placeholder="手提行李数"/>
<el-input type="Number" v-model="msg.HandLuggageNum" placeholder="手提行李数" />
</el-form-item>
</li>
<li>
<el-form-item label="托运行李" prop="">
<el-input type="Number" v-model="msg.RegisteredLuggageNum" placeholder="托运行李数"/>
<el-input type="Number" v-model="msg.RegisteredLuggageNum" placeholder="托运行李数" />
</el-form-item>
</li>
</template>
</div>
</div>
</div>
<div class="flexOne-infor-box">
<b>联络信息</b>
<div class="infor-list">
<div class="list-centent active">
<li>
<el-form-item label="姓" prop="SurName">
<el-input v-model="msg.SurName" placeholder="请输入姓"/>
</el-form-item>
</li>
<li>
<el-form-item label="名" prop="Name">
<el-input v-model="msg.Name" placeholder="请输入名"/>
</el-form-item>
</div>
</div>
<div class="flexOne-infor-box">
<b>联络信息</b>
<div class="infor-list">
<div class="list-centent active">
<li>
<el-form-item label="姓" prop="SurName">
<el-input v-model="msg.SurName" placeholder="请输入姓" />
</el-form-item>
</li>
<li>
<el-form-item label="名" prop="Name">
<el-input v-model="msg.Name" placeholder="请输入名" />
</el-form-item>
</li>
<li>
<el-form-item label="电话" prop="Mobile">
<el-input type="Number" v-model="msg.Mobile" placeholder="请输入电话" />
</el-form-item>
</li>
<li class="bottom">
<el-form-item label="性别" prop="Sex">
<el-radio v-model="msg.Sex" label="1">男</el-radio>
<el-radio v-model="msg.Sex" label="2">女</el-radio>
</el-form-item>
</li>
<li>
<el-form-item label="电话" prop="Mobile">
<el-input type="Number" v-model="msg.Mobile" placeholder="请输入电话"/>
</el-form-item>
</li>
<li class="bottom">
<el-form-item label="性别" prop="Sex">
<el-radio v-model="msg.Sex" label="1">男</el-radio>
<el-radio v-model="msg.Sex" label="2" >女</el-radio>
</el-form-item>
</li>
</div>
</div>
<div style="margin-top: 20px;">
<el-input style="width: 100%;" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
v-model="msg.Remark" placeholder="订单备注"/>
</div>
</div>
</el-form>
<div style="margin-top: 20px;">
<el-input style="width: 100%;" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="msg.Remark"
placeholder="订单备注" />
</div>
</div>
</el-form>
</div>
<div class="notice">
<b>预定须知</b>
<p>{{detailsObj.BuyNotes}}</p>
</div>
<div class="notice">
<b>预定须知</b>
<p>{{detailsObj.BuyNotes}}</p>
</div>
</div>
<div class="flexOne-right">
<h4>结算账单</h4>
<div class="right-text">
<b>取消限制</b>
<p>{{detailsObj.CancelPolicy}}</p>
</div>
<div class="right-form">
<h6>订单明细</h6>
<div class="right-form-list">
<template v-if="isCheck">
<template v-for="x in types">
<div class="right-list" v-if="x.checked">
<div class="right-list-left">
<el-tag class="leftText" size="mini" type="danger">{{x.CarName}}</el-tag>
</div>
<div class="right-list-right">
{{x.B2BPrice.toFixed(2)}} x {{x.num}} 辆
</div>
</div>
<div class="flexOne-right">
<h4>结算账单</h4>
<div class="right-text">
<b>取消限制</b>
<p>{{detailsObj.CancelPolicy}}</p>
</div>
<div class="right-form">
<h6>订单明细</h6>
<div class="right-form-list">
<template v-if="isCheck">
<template v-for="x in types">
<div class="right-list" v-if="x.checked">
<div class="right-list-left">
<el-tag class="leftText" size="mini" type="danger">{{x.CarName}}</el-tag>
</div>
</template>
</template>
<div v-else class="noData">没有选择车型</div>
</div>
</div>
<div class="right-Money">
<div>
<span>订单总金额：</span>
<b>{{ msg.Money.toFixed(2) }} <span class="fz12">{{detailsObj.CurrencyName}}</span></b>
</div>
</div>
<div class="right-Submit">
<!-- <el-button v-if="!isCheck" class="hollowFixedBtn" type="primary">
<div class="right-list-right">
{{x.B2BPrice.toFixed(2)}} x {{x.num}} 辆
</div>
</div>
</template>
</template>
<div v-else class="noData">没有选择车型</div>
</div>
</div>
<div class="right-Money">
<div>
<span>订单总金额：</span>
<b>{{ msg.Money.toFixed(2) }} <span class="fz12">{{detailsObj.CurrencyName}}</span></b>
</div>
</div>
<div class="right-Submit">
<!-- <el-button v-if="!isCheck" class="hollowFixedBtn" type="primary">
提交订单
</el-button> -->
<el-button :disabled="!isCheck"
:loading="loading"
class="normalBtn" type="primary" @click="submit">
提交订单
</el-button>
</div>
</div>
<!-- 选择地址 -->
<el-dialog custom-class="mapList" title="地图选址" center :visible.sync="selectAddress">
<Map @refList="selectAddress = false" v-on:headCallBack="headCall" v-bind:Address="Address"
:type="MapType" :index="index" :GetOff="MapType==1?GetOnTheBusObj:GetOffTheBusIdObj"></Map>
</el-dialog>
<!-- 包车产品详情信息 -->
<el-dialog custom-class="w1000" title="包车产品详情" :visible.sync="showDetails" center @close="showDetails=false">
<el-button :disabled="!isCheck" :loading="loading" class="normalBtn" type="primary" @click="submit">
提交订单
</el-button>
</div>
</div>
<!-- 选择地址 -->
<el-dialog custom-class="mapList" title="地图选址" center :visible.sync="selectAddress">
<Map @refList="selectAddress = false" v-on:headCallBack="headCall" v-bind:Address="Address" :type="MapType"
:index="index" :GetOff="MapType==1?GetOnTheBusObj:GetOffTheBusIdObj"></Map>
</el-dialog>
<!-- 包车产品详情信息 -->
<el-dialog custom-class="w1000" title="包车产品详情" :visible.sync="showDetails" center @close="showDetails=false">
<Details :detailsObj="detailsRow"></Details>
</el-dialog>
</div>
</template>
<script>
import Map from "../../public/Map.vue";
import Details from './components/Details.vue'
export default {
components: { Details,Map },
data() {
return {
index: 1,
Address: '',
selectAddress: false,
MapType: 1,
GetOnTheBusObj: '',
GetOffTheBusIdObj: '',
PlaceTypes2:[],
PlaceTypes:[],
AirportTypes:[],
isCheck:true,
showDetails: false,
loading: false,
msg: {
OrderId: 0,
OrderType: 0,
OrderDate:'',//预定日期
Unit_Price: '',//单价
Num: '',//数量
Money: 0.0,
Sex: '1',//1男2女
SurName: '',//姓
Name: '',//名
Remark: '',
AirportId: '',
AirportTerminal: '',//航厦
AirLine: '',//航空公司名称
FlightNumber: '',//航班号
FlightTime: '',//航班时间
GetonAddress: '',//上车点
GetoffAddress: '',//下车点
ManNum: null,//成人数
ChildNum: null,//儿童数
BabyNum: null,//婴儿数
HandLuggageNum: null,//手提行李数量
RegisteredLuggageNum: null,//托运行李数量
ContactWay: '',//联络方式 WeChat
Mobile:'',//电话
ProductId: '',
CarId: '',//产品类型ID
LureEmpId: 0,
CRMGuestId: 0,
},
types: [],
isCheck: false,
SetOutTime: '',
detailsObj: {},
beforeCheck: {
disabledDate: time => {
let endTime = new Date(this.getBeforeDate(1,new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime();
}
},
rules:{
AirportTerminal: [{
required: true,
message: '请输入航厦',
trigger: 'blur'
}],
AirLine: [{
required: true,
message: '请输入航空公司名称',
trigger: 'blur'
}],
FlightNumber: [{
required: true,
message: '请输入航班号',
trigger: 'blur'
}],
FlightTime: [{
required: true,
message: '请选择时间',
trigger: 'change'
}],
GetonAddress: [{
required: true,
message: '请输入上车地点',
trigger: 'blur'
}],
GetoffAddress: [{
required: true,
message: '请输入下车地点',
trigger: 'blur'
}],
OrderDate: [{
required: true,
message: '请选择预定时间',
trigger: 'blur'
}],
ManNum:[{
required: true,
message: '输入成人数',
trigger: 'blur'
}],
SurName: [{
required: true,
message: '请输入姓',
trigger: 'blur'
}],
Name: [{
required: true,
message: '请输入名',
trigger: 'blur'
}],
EName: [{
required: true,
message: '请输入英文名',
trigger: 'blur'
}],
Mobile: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{
pattern: this.$commonUtils.Regex.el_ISphone,
message: "请输入正确的电话"
}
],
</div>
</template>
<script>
import Map from "../../public/Map.vue";
import Details from './components/Details.vue'
export default {
components: {
Details,
Map
},
data() {
return {
index: 1,
Address: '',
selectAddress: false,
MapType: 1,
GetOnTheBusObj: '',
GetOffTheBusIdObj: '',
PlaceTypes2: [],
PlaceTypes: [],
AirportTypes: [],
isCheck: true,
showDetails: false,
loading: false,
msg: {
OrderId: 0,
OrderType: 0,
OrderDate: '', //预定日期
Unit_Price: '', //单价
Num: '', //数量
Money: 0.0,
Sex: '1', //1男2女
SurName: '', //姓
Name: '', //名
Remark: '',
AirportId: '',
AirportTerminal: '', //航厦
AirLine: '', //航空公司名称
FlightNumber: '', //航班号
FlightTime: '', //航班时间
GetonAddress: '', //上车点
GetoffAddress: '', //下车点
ManNum: null, //成人数
ChildNum: null, //儿童数
BabyNum: null, //婴儿数
HandLuggageNum: null, //手提行李数量
RegisteredLuggageNum: null, //托运行李数量
ContactWay: '', //联络方式 WeChat
Mobile: '', //电话
ProductId: '',
CarId: '', //产品类型ID
LureEmpId: 0,
CRMGuestId: 0,
},
types: [],
isCheck: false,
SetOutTime: '',
detailsObj: {},
beforeCheck: {
disabledDate: time => {
let endTime = new Date(this.getBeforeDate(1, new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime();
}
},
rules: {
AirportTerminal: [{
required: true,
message: '请输入航厦',
trigger: 'blur'
}],
AirLine: [{
required: true,
message: '请输入航空公司名称',
trigger: 'blur'
}],
FlightNumber: [{
required: true,
message: '请输入航班号',
trigger: 'blur'
}],
FlightTime: [{
required: true,
message: '请选择时间',
trigger: 'change'
}],
GetonAddress: [{
required: true,
message: '请输入上车地点',
trigger: 'blur'
}],
GetoffAddress: [{
required: true,
message: '请输入下车地点',
trigger: 'blur'
}],
OrderDate: [{
required: true,
message: '请选择预定时间',
trigger: 'blur'
}],
ManNum: [{
required: true,
message: '输入成人数',
trigger: 'blur'
}],
SurName: [{
required: true,
message: '请输入姓',
trigger: 'blur'
}],
Name: [{
required: true,
message: '请输入名',
trigger: 'blur'
}],
EName: [{
required: true,
message: '请输入英文名',
trigger: 'blur'
}],
Mobile: [{
required: true,
message: "请输入联系电话",
trigger: "blur"
},
detailsRow: null,
crmOrderObj: null
};
],
},
methods: {
clickMapAddress(type, index, Address) {
this.index = index
this.MapType = type
this.Address = Address
this.selectAddress = true
},
headCall(msg, type, index, address_detail) {
if(type==1){
this.msg.GetonAddress = address_detail
}else{
this.msg.GetoffAddress = address_detail
}
},
getTime(){
this.SetOutTime = this.msg.OrderDate
},
submit(){
this.$refs['msg'].validate((valid) => {
if (valid) {
this.setFormMsg()
} else {
return false;
}
detailsRow: null,
crmOrderObj: null
};
},
methods: {
clickMapAddress(type, index, Address) {
this.index = index
this.MapType = type
this.Address = Address
this.selectAddress = true
},
headCall(msg, type, index, address_detail) {
if (type == 1) {
this.msg.GetonAddress = address_detail
} else {
this.msg.GetoffAddress = address_detail
}
},
getTime() {
this.SetOutTime = this.msg.OrderDate
},
submit() {
this.$refs['msg'].validate((valid) => {
if (valid) {
this.setFormMsg()
} else {
return false;
}
});
},
setFormMsg() {
this.types.forEach(x => {
if (x.checked) {
this.msg.Unit_Price = x.B2BPrice
this.msg.Num = x.num
}
})
this.loading = true
this.apipost("CarSingle_post_SetSaleCarOrder", this.msg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success('下单成功');
this.$router.push({
path: `/CharterOrderList?Type=${this.msg.OrderType}`,
});
} else {
this.Error(res.data.message)
}
},
setFormMsg(){
this.types.forEach(x=>{
if(x.checked){
this.msg.Unit_Price = x.B2BPrice
this.msg.Num = x.num
}
})
this.loading = true
this.apipost("CarSingle_post_SetSaleCarOrder", this.msg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.Success('下单成功');
this.$router.push({
path: `/CharterOrderList?Type=${this.msg.OrderType}`,
});
} else {
this.Error(res.data.message)
}
},
err => {
this.Error(err.message)
});
},
changePeople(val) {
this.getNum()
},
getNum(){
this.types.forEach(x=>{
if(x.num>x.RemainingInventory){
x.num = x.RemainingInventory
}
})
setTimeout(()=>{
this.calcMoneyHandler()
},50)
},
calcMoneyHandler(){
this.msg.Money=0.0
this.types.forEach(x=>{
if(x.checked){
this.msg.Money+=x.B2BPrice*x.num
}
err => {
this.Error(err.message)
});
},
changePeople(val) {
this.getNum()
},
getNum() {
this.types.forEach(x => {
if (x.num > x.RemainingInventory) {
x.num = x.RemainingInventory
}
})
setTimeout(() => {
this.calcMoneyHandler()
}, 50)
},
calcMoneyHandler() {
this.msg.Money = 0.0
this.types.forEach(x => {
if (x.checked) {
this.msg.Money += x.B2BPrice * x.num
}
})
},
changeDetailListHandler(e, i, OrderId) {
if (i == 1) {
if (!OrderId) {
this.AirportTypes.forEach(x => {
x.checked = false
})
},
changeDetailListHandler(e,i,OrderId) {
if(i==1){
if(!OrderId){
this.AirportTypes.forEach(x=>{
x.checked = false
})
e.checked = !e.checked
let AirportTypes = this.AirportTypes.filter(x => x.checked)
if(AirportTypes&&AirportTypes[0]){
this.msg.AirportId = AirportTypes[0].AirportId
}
if(this.AirportTypes.findIndex(x => x.checked) > -1) this.getQuotation()
}
}
if(i==2){
// if(!OrderId){
this.PlaceTypes.forEach(x=>{
x.checked = false
})
e.checked = !e.checked
let PlaceTypes = this.PlaceTypes.filter(x => x.checked)
if(PlaceTypes&&PlaceTypes[0]){
this.GetOnTheBusObj = PlaceTypes[0]
}
// }
}
if(i==4){
// if(!OrderId){
this.PlaceTypes2.forEach(x=>{
x.checked = false
})
e.checked = !e.checked
let PlaceTypes2 = this.PlaceTypes2.filter(x => x.checked)
if(PlaceTypes2&&PlaceTypes2[0]){
this.GetOffTheBusIdObj = PlaceTypes2[0]
}
// }
e.checked = !e.checked
let AirportTypes = this.AirportTypes.filter(x => x.checked)
if (AirportTypes && AirportTypes[0]) {
this.msg.AirportId = AirportTypes[0].AirportId
}
if(i==3){
this.types.forEach(x=>{
if(x.Id!=e.Id){
x.checked = false
}
})
if (e.checked) {
e.num = 1
}
e.checked = !e.checked
let types = this.types.filter(x => x.checked)
if(types&&types[0]){
this.msg.CarId = types[0].Id
this.getQuotation()
}
this.isCheck = this.types.findIndex(x => x.checked) > -1
if (this.AirportTypes.findIndex(x => x.checked) > -1) this.getQuotation()
}
}
if (i == 2) {
// if(!OrderId){
this.PlaceTypes.forEach(x => {
x.checked = false
})
e.checked = !e.checked
let PlaceTypes = this.PlaceTypes.filter(x => x.checked)
if (PlaceTypes && PlaceTypes[0]) {
this.GetOnTheBusObj = PlaceTypes[0]
}
// }
}
if (i == 4) {
// if(!OrderId){
this.PlaceTypes2.forEach(x => {
x.checked = false
})
e.checked = !e.checked
let PlaceTypes2 = this.PlaceTypes2.filter(x => x.checked)
if (PlaceTypes2 && PlaceTypes2[0]) {
this.GetOffTheBusIdObj = PlaceTypes2[0]
}
// }
}
if (i == 3) {
this.types.forEach(x => {
if (x.Id != e.Id) {
x.checked = false
}
})
if (e.checked) {
e.num = 1
}
e.checked = !e.checked
let types = this.types.filter(x => x.checked)
if (types && types[0]) {
this.msg.CarId = types[0].Id
this.getQuotation()
}
this.isCheck = this.types.findIndex(x => x.checked) > -1
}
this.changePeople()
this.$forceUpdate()
this.changePeople()
this.$forceUpdate()
},
// 获取报价
getQuotation() {
this.apipost(
"CarSingle_post_GetSaleCarSingleProductMonthPrice", {
AirportId: this.msg.AirportId,
CarTypeId: this.msg.CarId,
Month: this.SetOutTime,
ProductId: this.msg.ProductId,
},
// 获取报价
getQuotation(){
this.apipost(
"CarSingle_post_GetSaleCarSingleProductMonthPrice",
{
AirportId: this.msg.AirportId,
CarTypeId: this.msg.CarId,
Month: this.SetOutTime,
ProductId: this.msg.ProductId,
},
res => {
if (res.data.resultCode == 1) {
let SetOutTime = this.SetOutTime.length>10?this.SetOutTime.slice(0,10):this.SetOutTime
let newData = res.data.data.filter(x=>x.Date==SetOutTime)
let types = this.types.filter(x => x.checked)
newData.length>0&&this.types.forEach((item,index) => {
if(this.msg.CarId==item.Id&&newData[0].Price){
item.B2BPrice = newData[0].Price
this.msg.Unit_Price = newData[0].Price
}else{
item.B2BPrice = 0.0
}
});
this.calcMoneyHandler()
res => {
if (res.data.resultCode == 1) {
let SetOutTime = this.SetOutTime.length > 10 ? this.SetOutTime.slice(0, 10) : this.SetOutTime
let newData = res.data.data.filter(x => x.Date == SetOutTime)
let types = this.types.filter(x => x.checked)
newData.length > 0 && this.types.forEach((item, index) => {
if (this.msg.CarId == item.Id && newData[0].Price) {
item.B2BPrice = newData[0].Price
this.msg.Unit_Price = newData[0].Price
} else {
item.B2BPrice = 0.0
}
});
this.calcMoneyHandler()
}
})
},
getInfo(){
this.apipost(
"CarSingle_post_GetSaleCarSingleProductInfo",
{
ProductId: this.msg.ProductId,
},
res => {
if (res.data.resultCode == 1) {
this.detailsObj = res.data.data
this.msg.OrderType = String(this.detailsObj.CarType)
let addList = function (arr) {
arr.forEach(item => {
item.checked = false
item.num = 1
item.B2BPrice = 0
});
};
addList(res.data.data.AirportList);
addList(res.data.data.PlaceList);
addList(res.data.data.CarTypeList);
this.AirportTypes = res.data.data.AirportList
if(this.AirportTypes.length>0){
this.changeDetailListHandler(this.AirportTypes[0],1,this.msg.OrderId)
}
this.PlaceTypes = JSON.parse(JSON.stringify(res.data.data.PlaceList))
if(this.PlaceTypes.length>0){
this.changeDetailListHandler(this.PlaceTypes[0],2,this.msg.OrderId)
}
this.PlaceTypes2 = JSON.parse(JSON.stringify(res.data.data.PlaceList))
if(this.PlaceTypes2.length>0){
this.changeDetailListHandler(this.PlaceTypes2[0],4,this.msg.OrderId)
}
this.types = res.data.data.CarTypeList
if(this.types&&this.types.length==0){
message.errorMsg(`${t('v102.ticket.nobj')}`)
}
}else{
this.Error(res.data.message)
}
},
err => {}
);
})
},
getInfo() {
this.apipost(
"CarSingle_post_GetSaleCarSingleProductInfo", {
ProductId: this.msg.ProductId,
},
// 获取订单详情
getOrderInfo(){
this.apipost(
"CarSingle_post_GetSaleMyCarOrderInfo",
{
OrderId: this.msg.OrderId,
},
res => {
if (res.data.resultCode == 1) {
this.SetOutTime = res.data.data.OrderDate.substr(0,10)
this.msg = {
OrderId: res.data.data.OrderId,
OrderType: String(res.data.data.OrderType),
OrderDate: res.data.data.OrderDate,//预定日期
Unit_Price: res.data.data.Unit_Price,//单价
Num: res.data.data.Num,//数量
Money: res.data.data.Money,
Sex: String(res.data.data.Sex),//1男2女
SurName: res.data.data.SurName,//姓
Name: res.data.data.Name,//名
Remark: res.data.data.Remark,
AirportId: res.data.data.AirportId,
AirportTerminal: res.data.data.AirportTerminal,//航厦
AirLine: res.data.data.AirLine,//航空公司名称
FlightNumber: res.data.data.FlightNumber,//航班号
FlightTime: res.data.data.FlightTime,//航班时间
GetonAddress: res.data.data.GetonAddress,//上车点
GetoffAddress: res.data.data.GetoffAddress,//下车点
ManNum: String(res.data.data.ManNum),//成人数
ChildNum: String(res.data.data.ChildNum),//儿童数
BabyNum: String(res.data.data.BabyNum),//婴儿数
HandLuggageNum: String(res.data.data.HandLuggageNum),//手提行李数量
RegisteredLuggageNum: String(res.data.data.RegisteredLuggageNum),//托运行李数量
ContactWay: res.data.data.ContactWay,//联络方式 WeChat
Mobile: res.data.data.Mobile,//电话
ProductId: res.data.data.ProductId,
CarId: res.data.data.CarId,//产品类型ID
}
this.getQuotation()
this.AirportTypes.forEach(x=>{
if(x.AirportId==res.data.data.AirportId){
this.changeDetailListHandler(x,1)
}
})
this.types.forEach(x=>{
if(x.Id==res.data.data.CarId){
x.num = res.data.data.Num
x.B2BPrice = res.data.data.Unit_Price
this.changeDetailListHandler(x,3)
}
})
}
res => {
if (res.data.resultCode == 1) {
this.detailsObj = res.data.data
this.msg.OrderType = String(this.detailsObj.CarType)
let addList = function (arr) {
arr.forEach(item => {
item.checked = false
item.num = 1
item.B2BPrice = 0
});
};
addList(res.data.data.AirportList);
addList(res.data.data.PlaceList);
addList(res.data.data.CarTypeList);
this.AirportTypes = res.data.data.AirportList
if (this.AirportTypes.length > 0) {
this.changeDetailListHandler(this.AirportTypes[0], 1, this.msg.OrderId)
}
this.PlaceTypes = JSON.parse(JSON.stringify(res.data.data.PlaceList))
if (this.PlaceTypes.length > 0) {
this.changeDetailListHandler(this.PlaceTypes[0], 2, this.msg.OrderId)
}
this.PlaceTypes2 = JSON.parse(JSON.stringify(res.data.data.PlaceList))
if (this.PlaceTypes2.length > 0) {
this.changeDetailListHandler(this.PlaceTypes2[0], 4, this.msg.OrderId)
}
this.types = res.data.data.CarTypeList
if (this.types && this.types.length == 0) {
message.errorMsg(`${t('v102.ticket.nobj')}`)
}
})
},
showCardHandler() {
this.detailsRow = JSON.parse(JSON.stringify(this.detailsObj))
this.showDetails = true
} else {
this.Error(res.data.message)
}
},
err => {}
);
},
// 获取订单详情
getOrderInfo() {
this.apipost(
"CarSingle_post_GetSaleMyCarOrderInfo", {
OrderId: this.msg.OrderId,
},
res => {
if (res.data.resultCode == 1) {
this.SetOutTime = res.data.data.OrderDate.substr(0, 10)
this.msg = {
OrderId: res.data.data.OrderId,
OrderType: String(res.data.data.OrderType),
OrderDate: res.data.data.OrderDate, //预定日期
Unit_Price: res.data.data.Unit_Price, //单价
Num: res.data.data.Num, //数量
Money: res.data.data.Money,
Sex: String(res.data.data.Sex), //1男2女
SurName: res.data.data.SurName, //姓
Name: res.data.data.Name, //名
Remark: res.data.data.Remark,
AirportId: res.data.data.AirportId,
AirportTerminal: res.data.data.AirportTerminal, //航厦
AirLine: res.data.data.AirLine, //航空公司名称
FlightNumber: res.data.data.FlightNumber, //航班号
FlightTime: res.data.data.FlightTime, //航班时间
GetonAddress: res.data.data.GetonAddress, //上车点
GetoffAddress: res.data.data.GetoffAddress, //下车点
ManNum: String(res.data.data.ManNum), //成人数
ChildNum: String(res.data.data.ChildNum), //儿童数
BabyNum: String(res.data.data.BabyNum), //婴儿数
HandLuggageNum: String(res.data.data.HandLuggageNum), //手提行李数量
RegisteredLuggageNum: String(res.data.data.RegisteredLuggageNum), //托运行李数量
ContactWay: res.data.data.ContactWay, //联络方式 WeChat
Mobile: res.data.data.Mobile, //电话
ProductId: res.data.data.ProductId,
CarId: res.data.data.CarId, //产品类型ID
}
this.getQuotation()
this.AirportTypes.forEach(x => {
if (x.AirportId == res.data.data.AirportId) {
this.changeDetailListHandler(x, 1)
}
})
this.types.forEach(x => {
if (x.Id == res.data.data.CarId) {
x.num = res.data.data.Num
x.B2BPrice = res.data.data.Unit_Price
this.changeDetailListHandler(x, 3)
}
})
},
mounted() {
// crm自动登陆传过来的参数
if(this.$route.query.crmOrderObj){
this.crmOrderObj = JSON.parse(this.$route.query.crmOrderObj)
this.msg.LureEmpId = this.crmOrderObj.LureEmpId//引流id
this.msg.CRMGuestId = this.crmOrderObj.CRMGuestId //客人ID
}
},
created() {
this.msg.OrderId = this.$route.query.OrderId
this.msg.ProductId = this.$route.query.id
this.SetOutTime = this.$route.query.OrderDate
// this.msg.OrderDate = this.$route.query.OrderDate+ ' 00:00'
this.getInfo()
if(this.msg.OrderId){
this.getOrderInfo()
}
}
};
}
})
},
showCardHandler() {
this.detailsRow = JSON.parse(JSON.stringify(this.detailsObj))
this.showDetails = true
},
},
mounted() {
// crm自动登陆传过来的参数
if (this.$route.query.crmOrderObj) {
this.crmOrderObj = JSON.parse(this.$route.query.crmOrderObj)
this.msg.LureEmpId = this.crmOrderObj.LureEmpId //引流id
this.msg.CRMGuestId = this.crmOrderObj.CRMGuestId //客人ID
}
},
created() {
this.msg.OrderId = this.$route.query.OrderId
this.msg.ProductId = this.$route.query.id
this.SetOutTime = this.$route.query.OrderDate
// this.msg.OrderDate = this.$route.query.OrderDate+ ' 00:00'
this.getInfo()
if (this.msg.OrderId) {
this.getOrderInfo()
}
}
};
</script>
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment