<template> <Modal v-model="showModal" width="500"> <div class="deliver-modal"> <div class="deliver-info"> <Row class-name="info-row"> <Col span="4" class-name="info-col">收货仓库:</Col> <Col span="20">{{storeInfo.storeName}}</Col> </Row> <Row class-name="info-row"> <Col span="4">物流公司:</Col> <Col span="20"> <Select v-model="expressId"> <Option v-for="item in expresses" :value="item.id" :key="item.id"> {{ item.companyName }} </Option> </Select> </Col> </Row> <Row class-name="info-row"> <Col span="4">物流单号:</Col> <Col span="20"> <Input v-model="expressNumber" placeholder="请填写发货商品对应的唯一物流单号"></Input> </Col> </Row> <p class="info-tip"> 发往:{{storeInfo.storeName}}{{storeInfo.address}}{{storeInfo.adminName}}{{storeInfo.phone}} </p> </div> </div> <div slot="footer"> <Button type="text" size="large" @click="hide">取消</Button> <Button type="primary" size="large" :loading="showLoading" @click="deliver">提交</Button> </div> </Modal> </template> <script> export default { name: 'modal-deliver', props: { expresses: { type: Array, default() { return []; } }, storeInfo: { type: Object, default() { return {}; } } }, data() { return { showModal: false, showLoading: false, expressId: '', expressNumber: '', }; }, methods: { show() { this.showModal = true; this.expressId = ''; this.expressNumber = ''; }, hide() { this.showLoading = false; this.showModal = false; }, deliver() { if (!this.expressId) { this.$Message.error('请选择物流公司'); return; } if (!this.expressNumber) { this.$Message.error('请填写物流单号'); return; } if (!/^[a-zA-Z\d]{6,20}$/.test(this.expressNumber)) { this.$Message.error('物流单号不符合规则'); return; } this.showLoading = true; this.$emit('deliver', {expressId: this.expressId, expressNumber: this.expressNumber}); } } }; </script> <style lang="scss"> .deliver-modal { padding: 30px; .info-row { line-height: 40px; } .info-tip { margin-top: 20px; color: #f00; text-align: center; } .ivu-modal { width: 50%; } } </style>