|
|
|
@ -17,11 +17,11 @@ |
|
|
|
]" |
|
|
|
@click="show = !show" |
|
|
|
> |
|
|
|
{{ $t("Purchaser Info") }} |
|
|
|
{{ $t("Ordering person") }} |
|
|
|
</h3> |
|
|
|
<div class="element content-status xl:tw-ml-[20px]"> |
|
|
|
<span |
|
|
|
v-if="purchaserValidation == true" |
|
|
|
v-if="orderingPersonValidation == true" |
|
|
|
class="status-check-icon tw-inline-block tw-w-[30px] tw-h-[30px]" |
|
|
|
></span> |
|
|
|
</div> |
|
|
|
@ -31,47 +31,12 @@ |
|
|
|
<div v-show="show"> |
|
|
|
<div class="tw-mt-[32px] md:tw-ml-[60px]"> |
|
|
|
<div class="element element-tabs tw-mb-[20px]"> |
|
|
|
<button |
|
|
|
:class="[ |
|
|
|
'tw-transition', |
|
|
|
'tw-btn-md', |
|
|
|
'tw-border', |
|
|
|
'tw-border-solid', |
|
|
|
'tw-border-neutrals-300', |
|
|
|
'tw-px-[30px]', |
|
|
|
' tw-py-[9.5px]', |
|
|
|
' tw-rounded-2xl', |
|
|
|
infoType == 'Company' |
|
|
|
? 'tw-bg-neutrals-800 tw-text-neutrals-0' |
|
|
|
: 'tw-bg-neutrals-0 tw-text-neutrals-300', |
|
|
|
]" |
|
|
|
@click="$emit('type', 'Company')" |
|
|
|
> |
|
|
|
{{ $t('Company')}} |
|
|
|
</button> |
|
|
|
<button |
|
|
|
:class="[ |
|
|
|
'tw-transition', |
|
|
|
'tw-btn-md', |
|
|
|
'tw-border', |
|
|
|
'tw-border-solid', |
|
|
|
'tw-border-neutrals-300', |
|
|
|
'tw-px-[30px]', |
|
|
|
' tw-py-[9.5px]', |
|
|
|
' tw-rounded-2xl', |
|
|
|
infoType == 'Individual' |
|
|
|
? 'tw-bg-neutrals-800 tw-text-neutrals-0' |
|
|
|
: 'tw-bg-neutrals-0 tw-text-neutrals-300', |
|
|
|
]" |
|
|
|
@click="$emit('type', 'Individual')" |
|
|
|
> |
|
|
|
{{ $t('Individual')}} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div v-show="infoType == 'Individual'"> |
|
|
|
|
|
|
|
<div |
|
|
|
class="element element-form tw-grid tw-grid-cols-1 tw-gap-[10px] md:tw-grid-cols-2 md:tw-gap-x-[60px] md:tw-gap-y-[20px] md:tw-max-w-[580px]" |
|
|
|
class="element element-form tw-grid tw-grid-cols-1 tw-gap-[10px] md:tw-grid-cols-2 md:tw-gap-x-[60px] md:tw-gap-y-[20px] md:tw-max-w-[580px]" |
|
|
|
> |
|
|
|
|
|
|
|
<!-- first name --> |
|
|
|
<div class="element"> |
|
|
|
<elementInput |
|
|
|
:input="{ |
|
|
|
@ -85,6 +50,8 @@ |
|
|
|
@change="userData.first_name = $event" |
|
|
|
></elementInput> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- last name --> |
|
|
|
<div class="element"> |
|
|
|
<elementInput |
|
|
|
:input="{ |
|
|
|
@ -98,6 +65,8 @@ |
|
|
|
@change="userData.last_name = $event" |
|
|
|
></elementInput> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Email --> |
|
|
|
<div class="element"> |
|
|
|
<elementInput |
|
|
|
:input="{ |
|
|
|
@ -112,22 +81,29 @@ |
|
|
|
> |
|
|
|
</elementInput> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- phoneNumber --> |
|
|
|
<div class="element"> |
|
|
|
<label class="tw-block tw-mb-[10px]" |
|
|
|
><span |
|
|
|
>{{ $t("Phone") }}<span class="required">*</span></span |
|
|
|
></label |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="tw-grid tw-grid-cols-[120px_auto] tw-gap-[5px]"> |
|
|
|
<elementCountryCodeSelect :select="{ |
|
|
|
required: true, |
|
|
|
}" :userCodeSelect="userData.phone_code" :validation="validation.phone_code" @returnCode = "getReturnCode"></elementCountryCodeSelect> |
|
|
|
<vue-phone-number-input v-model="userData.phone_number" :validation="validation.phone_number" color="#E5e5e5" error-color="#ef5a5a" |
|
|
|
valid-color="#e5e5e5" |
|
|
|
:error="error" :border-radius="5" |
|
|
|
no-flags :no-country-selector="true" no-example @update="getPhoneData" :translations="translateOption"> |
|
|
|
</vue-phone-number-input></div> |
|
|
|
<elementCountryCodeSelect :select="{ |
|
|
|
required: true, |
|
|
|
}" :userCodeSelect="userData.phone_code" :validation="validation.phone_code" @returnCode = "getReturnCode" |
|
|
|
> |
|
|
|
</elementCountryCodeSelect> |
|
|
|
<vue-phone-number-input v-model="userData.phone_number" :validation="validation.phone_number" color="#E5e5e5" error-color="#ef5a5a" |
|
|
|
valid-color="#e5e5e5" |
|
|
|
:error="error" :border-radius="5" |
|
|
|
no-flags :no-country-selector="true" no-example @update="getPhoneData" :translations="translateOption"> |
|
|
|
</vue-phone-number-input> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- country --> |
|
|
|
<div class="element"> |
|
|
|
<elementSelect |
|
|
|
:select="{ |
|
|
|
@ -141,15 +117,9 @@ |
|
|
|
@change="userData.country = $event" |
|
|
|
></elementSelect> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="element tw-mt-[40px] tw-text-right"> |
|
|
|
<button |
|
|
|
class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[9.5px] tw-rounded-2xl hover:tw-bg-primary-2" |
|
|
|
@click="updatePurchaserInfo(false)" |
|
|
|
> |
|
|
|
{{ $t("Next") }} |
|
|
|
</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -167,6 +137,11 @@ import is from "is_js"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "OrderingPersonInfo", |
|
|
|
props: { |
|
|
|
countryOptions: { |
|
|
|
type: Array, |
|
|
|
}, |
|
|
|
}, |
|
|
|
components: { |
|
|
|
elementInput, |
|
|
|
elementSelect, |
|
|
|
@ -176,6 +151,18 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
show: false, |
|
|
|
disabled: false, |
|
|
|
orderingPersonValidation: false, |
|
|
|
userData: { |
|
|
|
first_name: "", |
|
|
|
last_name: "", |
|
|
|
email: "", |
|
|
|
phone_number: "", |
|
|
|
country: "0", |
|
|
|
phone_code: "", |
|
|
|
UserCompany: [], |
|
|
|
}, |
|
|
|
validation: { |
|
|
|
first_name: true, |
|
|
|
last_name: true, |
|
|
|
@ -186,12 +173,124 @@ export default { |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
created() {}, |
|
|
|
created() { |
|
|
|
this.getUser() |
|
|
|
}, |
|
|
|
watch: {}, |
|
|
|
methods: {} |
|
|
|
methods: { |
|
|
|
async getUser() { |
|
|
|
await this.$axios |
|
|
|
.get(`/trending/api/Onsite/MemberInfo`) |
|
|
|
.then((res) => { |
|
|
|
|
|
|
|
if(res && res.data && res.data.DATA && res.data.DATA.rel){ |
|
|
|
const data = res.data.DATA.rel |
|
|
|
if(data){ |
|
|
|
this.userData.first_name = data.FirstName; |
|
|
|
this.userData.last_name = data.LastName; |
|
|
|
this.userData.email = data.Email; |
|
|
|
this.userData.phone_number = data.Phone; |
|
|
|
this.userData.country = data.CountryID; |
|
|
|
this.userData.phone_code = data.PhoneCode; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
getReturnCode(code){ |
|
|
|
this.userData.phone_code = code; |
|
|
|
}, |
|
|
|
getPhoneData(phoneData) { |
|
|
|
this.validation.phone_number = phoneData.isValid; |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.collapse { |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
display: inline-block; |
|
|
|
position: relative; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
background-image: url("~/assets/svg/down-arrow.svg"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
background-size: 100%; |
|
|
|
width: 16px; |
|
|
|
height: 10px; |
|
|
|
margin-right: 40px; |
|
|
|
transform: rotate(-90deg); |
|
|
|
transition: all 0.2s linear; |
|
|
|
} |
|
|
|
|
|
|
|
&.disabled { |
|
|
|
pointer-events: none; |
|
|
|
|
|
|
|
&::before { |
|
|
|
background-image: url("~/assets/svg/down-arrow-disabled.svg"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&.show { |
|
|
|
&::before { |
|
|
|
transform: rotate(0); |
|
|
|
transition: all 0.2s linear; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btn-add-icon { |
|
|
|
background-image: url("~/assets/svg/plus-blue.svg"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: left 12px center; |
|
|
|
background-size: 16px 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-edit-icon { |
|
|
|
background-image: url("~/assets/svg/edit-info.svg"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
background-size: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.bounce-enter-active { |
|
|
|
animation: bounce-in 0.3s ease-out; |
|
|
|
} |
|
|
|
|
|
|
|
.bounce-leave-active { |
|
|
|
animation: bounce-in 0.3s cubic-bezier(1, 0.5, 0.8, 1) reverse; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes bounce-in { |
|
|
|
0% { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(-10px); |
|
|
|
} |
|
|
|
|
|
|
|
50% { |
|
|
|
opacity: 0.5; |
|
|
|
transform: translateY(-5px); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
opacity: 1; |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.status-check-icon { |
|
|
|
background-image: url("~/assets/svg/status-check.svg"); |
|
|
|
background-size: 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.input-tel__input) { |
|
|
|
height: 44px !important; |
|
|
|
padding-left: 13px !important; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
