Vue项目实战：订单确认页面实现
<modal
title="新增确认"
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="姓名" v-model="">
<input type="text" class="input" placeholder="手机号" v-model="">
</div>
<div class="item">
<select name="province" v-model="">
<option value="北京">北京</option>
<option value="天津">天津</option>
</select>
<select name="city" v-model="">
<option value="北京">北京</option>
</select>
<select name="district" v-model="">
<option value="北京">昌平区</option>
<option value="天津">海淀区</option>
</select>
</div>
<div class="item">
<textarea name="street" v-model=""></textarea>
</div>
<div class="item">
<input type="text" class="input" placeholder="邮编" v-model="">
</div>
</div>
</template>
</modal>
<script>
export default{
data(){
return {
showDelModal:false, //是否弹窗
}
},
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="请输入收货人名称";
} else if (!receiverMobile || !/\d{11}/.test(receiverMobile)) {
errMsg="请输入正确格式的手机号";
} else if(!receiverProvince) {
errMsg="请选择省份";
} else if (!receiverCity) {
errMsg="请选择对应的城市";
} else if (!receiverDistrict || !receiverAddress) {
errMsg="请输入收货地址";
} else if (/\d{6}/.test(receiverZip)) {
errMsg="请输入邮编";
}
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('操作成功');
});
},
// 打开新增地址弹框
openAddressModal(){
this.showEditModal = true;
this.checkedItem = {};
this.showEditModal = true;
},
// 关闭弹框
closeModal(){
this.showEditModal = false;
this.checkedItem = {};
this.userAction = '';
this.showDelModal = false;
}
}
}
</script>