|
@@ -8,6 +8,8 @@ import NotShipment from './images/default_no_shipment@2x.png'
|
|
|
import submitsucessful from './images/icon_success_big@2x.png'
|
|
import submitsucessful from './images/icon_success_big@2x.png'
|
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
|
import { useRouter } from 'vue-router'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
+import { length } from '@turf/turf'
|
|
|
|
|
+
|
|
|
|
|
|
|
|
const userStore = useUserStore()
|
|
const userStore = useUserStore()
|
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
@@ -79,6 +81,16 @@ const ModeType = ref([
|
|
|
}
|
|
}
|
|
|
])
|
|
])
|
|
|
|
|
|
|
|
|
|
+const leftAsideWidth = ref(sessionStorage.getItem('leftAsideWidth') || '')
|
|
|
|
|
+const isWide = computed(() => {
|
|
|
|
|
+ return leftAsideWidth.value === '232px'
|
|
|
|
|
+})
|
|
|
|
|
+const handleStorageChange = (event: StorageEvent) => {
|
|
|
|
|
+ if (event.key === 'leftAsideWidth') {
|
|
|
|
|
+ leftAsideWidth.value = event.newValue || ''
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
// 设置无法点击
|
|
// 设置无法点击
|
|
|
const isNotClickAddress = computed(() => {
|
|
const isNotClickAddress = computed(() => {
|
|
|
if(a == undefined) {
|
|
if(a == undefined) {
|
|
@@ -268,7 +280,7 @@ const querySearchCity = (query: string) => {
|
|
|
// 特殊日期样式
|
|
// 特殊日期样式
|
|
|
const getCurrentStyle = (current: any) => {
|
|
const getCurrentStyle = (current: any) => {
|
|
|
const dateString = current.format('YYYY.MM.DD')
|
|
const dateString = current.format('YYYY.MM.DD')
|
|
|
- if (specialDates.value.includes(dateString)) {
|
|
|
|
|
|
|
+ if (specialDates.value != undefined && specialDates.value.includes(dateString)) {
|
|
|
return {
|
|
return {
|
|
|
background: '#b3e5d4',
|
|
background: '#b3e5d4',
|
|
|
borderRadius: '6px',
|
|
borderRadius: '6px',
|
|
@@ -360,6 +372,8 @@ const SaveNewAddress = () => {
|
|
|
updateAddressList(addressData)
|
|
updateAddressList(addressData)
|
|
|
} else {
|
|
} else {
|
|
|
ManageAddressList.value.push(addressData)
|
|
ManageAddressList.value.push(addressData)
|
|
|
|
|
+ const index = ManageAddressList.value.findIndex(item => item.address_1 === addressData.address_1);
|
|
|
|
|
+ Addressradio.value = index
|
|
|
updateAddressList(addressData)
|
|
updateAddressList(addressData)
|
|
|
}
|
|
}
|
|
|
if(isAddNewAddressVisible.value) {
|
|
if(isAddNewAddressVisible.value) {
|
|
@@ -685,12 +699,25 @@ const SubmitBooking = () => {
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
getInitBookingData()
|
|
getInitBookingData()
|
|
|
|
|
+ window.addEventListener('storage', handleStorageChange)
|
|
|
|
|
+
|
|
|
|
|
+ // 添加自定义事件监听器(用于同页面内的变化)
|
|
|
|
|
+ window.addEventListener('leftAsideWidthChange', ((event: CustomEvent) => {
|
|
|
|
|
+ leftAsideWidth.value = event.detail
|
|
|
|
|
+ }) as EventListener)
|
|
|
|
|
+})
|
|
|
|
|
+onUnmounted(() => {
|
|
|
|
|
+ // 移除事件监听器
|
|
|
|
|
+ window.removeEventListener('storage', handleStorageChange)
|
|
|
|
|
+ window.removeEventListener('leftAsideWidthChange', ((event: CustomEvent) => {
|
|
|
|
|
+ leftAsideWidth.value = event.detail
|
|
|
|
|
+ }) as EventListener)
|
|
|
})
|
|
})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
- <div class="Title">
|
|
|
|
|
|
|
+ <div class="Title" :style="{width: isWide? 'calc(100% - 232px)' : 'calc(100% - 64px)'}" >
|
|
|
<div v-if="a == undefined">Create New Booking</div>
|
|
<div v-if="a == undefined">Create New Booking</div>
|
|
|
<div v-else>Modify Booking</div>
|
|
<div v-else>Modify Booking</div>
|
|
|
<div class="flex">
|
|
<div class="flex">
|
|
@@ -879,6 +906,10 @@ onMounted(() => {
|
|
|
class="ManageDialog"
|
|
class="ManageDialog"
|
|
|
:show-close="false"
|
|
:show-close="false"
|
|
|
>
|
|
>
|
|
|
|
|
+ <div class="manage_empty_address" v-if="ManageAddressList.length == 0">
|
|
|
|
|
+ <img :src="AddNewAddress" width="48" style="margin-bottom: 8px;" />
|
|
|
|
|
+ <el-button :disabled="isNotClickAddress" class="el-button--main" @click="AddNewAddressDelivery"> + Add New Address</el-button>
|
|
|
|
|
+ </div>
|
|
|
<el-radio-group v-model="Addressradio">
|
|
<el-radio-group v-model="Addressradio">
|
|
|
<el-radio v-for="(item, index) in ManageAddressList" :key="index" :value="index">
|
|
<el-radio v-for="(item, index) in ManageAddressList" :key="index" :value="index">
|
|
|
<div class="addressradio">
|
|
<div class="addressradio">
|
|
@@ -908,7 +939,7 @@ onMounted(() => {
|
|
|
<template #footer>
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
<div class="dialog-footer">
|
|
|
<el-button class="el-button--default dialog-button" @click="ManageVisible = false">Cancel</el-button>
|
|
<el-button class="el-button--default dialog-button" @click="ManageVisible = false">Cancel</el-button>
|
|
|
- <el-button class="el-button--dark dialog-button" @click="changeAddressRadio">
|
|
|
|
|
|
|
+ <el-button :disabled="ManageAddressList.length == 0" class="el-button--dark dialog-button" @click="changeAddressRadio">
|
|
|
OK
|
|
OK
|
|
|
</el-button>
|
|
</el-button>
|
|
|
</div>
|
|
</div>
|
|
@@ -1175,16 +1206,21 @@ onMounted(() => {
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.Title {
|
|
.Title {
|
|
|
|
|
+ position: fixed;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- height: 68px;
|
|
|
|
|
border: 1px solid var(--color-border);
|
|
border: 1px solid var(--color-border);
|
|
|
border-top: none;
|
|
border-top: none;
|
|
|
border-width: 1px 0 1px 0;
|
|
border-width: 1px 0 1px 0;
|
|
|
font-size: var(--font-size-6);
|
|
font-size: var(--font-size-6);
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
- padding: 0 24px;
|
|
|
|
|
|
|
+ padding: 0 37px 0 24px;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
|
+ height: 68px;
|
|
|
|
|
+ top: 48px;
|
|
|
|
|
+ z-index: 1000;
|
|
|
|
|
+ background-color: var(--color-mode);
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
.flex {
|
|
.flex {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -1204,7 +1240,7 @@ onMounted(() => {
|
|
|
}
|
|
}
|
|
|
.select_shipments {
|
|
.select_shipments {
|
|
|
border: 1px solid var(--color-border);
|
|
border: 1px solid var(--color-border);
|
|
|
- margin: 17px 24px 12px 24px;
|
|
|
|
|
|
|
+ margin: 80px 24px 12px 24px;
|
|
|
padding: 9px 16px 16px 16px;
|
|
padding: 9px 16px 16px 16px;
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
position: relative;
|
|
position: relative;
|
|
@@ -1222,7 +1258,7 @@ onMounted(() => {
|
|
|
}
|
|
}
|
|
|
.delivery_address {
|
|
.delivery_address {
|
|
|
border: 1px solid var(--color-border);
|
|
border: 1px solid var(--color-border);
|
|
|
- margin: 0 24px 12px 24px;
|
|
|
|
|
|
|
+ margin: 0 24px 48px 24px;
|
|
|
padding: 9px 16px 16px 16px;
|
|
padding: 9px 16px 16px 16px;
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
}
|
|
}
|
|
@@ -1276,9 +1312,16 @@ onMounted(() => {
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
- border: 2px dashed #ED6D00;
|
|
|
|
|
|
|
+ border: 1px dashed #ED6D00;
|
|
|
background: rgba(237, 109, 0, 0.05);
|
|
background: rgba(237, 109, 0, 0.05);
|
|
|
}
|
|
}
|
|
|
|
|
+.manage_empty_address {
|
|
|
|
|
+ height: 122px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
.delivery_type {
|
|
.delivery_type {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
margin: 16px 0;
|
|
margin: 16px 0;
|