mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
Jia Sheng
116 lines
4.9 KiB
Vue
116 lines
4.9 KiB
Vue
<template>
|
||
<div class="row bg-white padding-25">
|
||
<div class="col" v-if="step === 1">
|
||
<loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
|
||
<div class="row justify-content-center" v-show="!isLoading">
|
||
<div class="col">
|
||
<div class="row">
|
||
<div class="col">
|
||
<h3>Please provide your Whatsapp phone number:</h3>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row m-t-20 m-b-15">
|
||
<div class="col-12">
|
||
<validation-wrapper-component :validator="$v.parameters.name">
|
||
<label>Name</label>
|
||
<input class="form-control" v-model="parameters.name">
|
||
</validation-wrapper-component>
|
||
</div>
|
||
<div class="col-12 p-t-15">
|
||
<validation-wrapper-component :validator="$v.parameters.phone">
|
||
<label>Phone</label>
|
||
<input class="form-control" v-model="parameters.phone">
|
||
</validation-wrapper-component>
|
||
</div>
|
||
</div>
|
||
<div class="row p-t-15">
|
||
<div class="col p-r-5">
|
||
<div class="btn btn-lg block btn m-b-5 no-border bg-master-lighter" data-dismiss="modal">Cancel</div>
|
||
</div>
|
||
<div class="col p-l-5">
|
||
<div class="btn btn-lg block btn m-b-5 no-border text-white bg-primary pointer" @click="nextStep">Confirm</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col" v-if="step === 2">
|
||
<loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
|
||
<div class="row justify-content-center" v-show="!isLoading">
|
||
<div class="col">
|
||
<div class="row">
|
||
<div class="col">
|
||
<h3>欲知更多详情，请浏览 <a href="https://bit.ly/4a5v34p" target="_blank" class="text-underline">https://bit.ly/4a5v34p</a> 或联系 Whatsapp: <a href="https://wa.me/601136814520" target="_blank" class="text-underline text-success">+6011-36814520</a></h3>
|
||
</div>
|
||
</div>
|
||
<div class="row p-t-15">
|
||
<div class="col p-r-5">
|
||
<div class="btn btn-lg block btn m-b-5 no-border bg-master-lighter" @click="previousStep">Cancel</div>
|
||
</div>
|
||
<div class="col p-l-5">
|
||
<div class="btn btn-lg block btn m-b-5 no-border text-white bg-primary pointer" @click="activateService">Confirm</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { required } from 'vuelidate/lib/validators';
|
||
import componentHandler from '../../../general/mixins/componentHandler';
|
||
import modalFormHandler from '../../../general/mixins/modalFormHandler';
|
||
export default {
|
||
props: {
|
||
company:{
|
||
type: Object,
|
||
required: true
|
||
},
|
||
segmentId:{
|
||
type: Number,
|
||
required: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
step: 1,
|
||
parameters: {
|
||
name: '',
|
||
phone: '',
|
||
}
|
||
}
|
||
},
|
||
validations: {
|
||
parameters: {
|
||
name: { required },
|
||
phone: { required },
|
||
}
|
||
},
|
||
methods: {
|
||
previousStep() {
|
||
this.step = 1;
|
||
},
|
||
nextStep() {
|
||
if (this.parameters.name && this.parameters.phone) {
|
||
this.step = 2;
|
||
} else {
|
||
this.parameters = {};
|
||
this.submit(this.route('api.company.connection.assign', this.company.id, this.company.company_module.connections[0].id), 'post', 'activateService', true, false);
|
||
}
|
||
},
|
||
activateService(){
|
||
this.parameters.segment_id = this.segmentId
|
||
|
||
this.submit(this.route('api.company.connection.assign', this.company.id, this.company.company_module.connections[0].id), 'post', 'activateService', true, false);
|
||
},
|
||
successHandler(){
|
||
location.reload();
|
||
}
|
||
},
|
||
mixins: [componentHandler, modalFormHandler]
|
||
|
||
}
|
||
</script>
|