<modal
title="Added confirmation"
btnType="1"
:showModal="showEditModal"
@cancel="showEditModal=false"
@submit="submitAddress"
>
<template v-slot:body>
<div class="edit-wrap">
<div class="item">
<input type="text" class="input" placeholder="Name" v-model="">
<input type="text" class="input" placeholder="Phone number" v-model="">
</div>
<div class="item">
<select name="province" v-model="">
<option value="Beijing">Beijing</option>
<option value="Tianjin">Tianjin</option>
</select>
<select name="city" v-model="">
<option value="Beijing">Beijing</option>
</select>
<select name="district" v-model="">
<option value="Beijing">Changping District</option>
<option value="Tianjin">Haidian District</option>
</select>
</div>
<div class="item">
<textarea name="street" v-model=""></textarea>
</div>
<div class="item">
<input type="text" class="input" placeholder="post code" v-model="">
</div>
</div>
</template>
</modal>
<script>
export default{
data(){
return {
showDelModal:false, //Is the window pop-up
}
},
methods:{
submitAddress() {
let {checkedItem, userAction} = this;
let method, url,params = {};
if (userAction == 0) {
method = 'post', url = '/shippings';
} else if (userAction == 1) {
method = 'put', url = `/shippings/${checkedItem.id}`;
} else {
method = 'delete', url = `/shippings/${checkedItem.id}`
}
if (userAction == 0 || userAction == 1) {
let { receiverName, receiverMobile, receiverProvince, receiverCity, receiverDistrict, receiverAddress, receiverZip } = checkedItem;
let errMsg;
if(!receiverName) {
errMsg="Please enter the name of the consignee";
} else if (!receiverMobile || !/\d{11}/.test(receiverMobile)) {
errMsg="Please enter the correct formatted mobile number";
} else if(!receiverProvince) {
errMsg="Please select a province";
} else if (!receiverCity) {
errMsg="Please select the corresponding city";
} else if (!receiverDistrict || !receiverAddress) {
errMsg="Please enter the delivery address";
} else if (/\d{6}/.test(receiverZip)) {
errMsg="Please enter the zip code";
}
if (errMsg) {
this.$message.error(errMsg)
return;
}
params = {
receiverName,
receiverMobile,
receiverProvince,
receiverCity,
receiverDistrict,
receiverAddress,
receiverZip
}
}
this.axios[method](url, params).then(() => {
this.closeModal();
this.getAddressList();
this.$message.success('The operation was successful');
});
},
// Open the new address pop-up box
openAddressModal(){
this.showEditModal = true;
this.checkedItem = {};
this.showEditModal = true;
},
// Close the pop-up box
closeModal(){
this.showEditModal = false;
this.checkedItem = {};
this.userAction = '';
this.showDelModal = false;
}
}
}
</script>
