<template> <u-mask class="commonModal" :show="isShow" :mask-click-able="false"> <view class="modal-con"> <view class="modal-title">上架入库后,货架库存将会增加</view> <view class="modal-main"> <view class="modal-p">本次共上架入库<text>{{totalKs}}</text>款产品,共<text>{{totalNums}}</text>件</view> <u-input v-model="form.remarks" placeholder="请输入出库备注(最多500字符)" type="textarea" :maxlength="500" :border="true" :auto-height="false" :custom-style="{height: '100upx'}" /> </view> <view class="modal-footer"> <view class="button-cancel" @click="isShow=false">取消</view> <view class="button-confirm" @click="handleConfirm">确认上架入库</view> </view> </view> </u-mask> </template> <script> export default { props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, totalKs: { type: [String,Number], default: '0' }, totalNums: { type: [String,Number], default: '0' } }, data() { return { isShow: this.openModal, // 是否打开弹框 form: { dispatchType: undefined, remarks: '' }, dispatchTypeList: [] } }, methods: { // 确认 handleConfirm(){ this.$emit('confirm', this.form, 0) }, }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') } } } } </script> <style lang="scss" scoped> .commonModal{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9999999; .modal-con{ width: 78%; margin: 50% auto; background-color: #fff; border-radius: 24upx; padding-top: 30upx; font-size: 30upx; .modal-title{ text-align: center; font-size: 26upx; color: #666; } .modal-main{ margin: 10upx 30upx 30upx; font-size: 30upx; .modal-p{ color: #666; text-align: center; margin-bottom: 20upx; font-size: 26upx; text{ color: red; } } } .modal-footer{ font-size: 30upx; display: flex; justify-content: space-between; align-items: center; text-align: center; border-top: 1upx solid #E5E5E5; .button-cancel{ color: #999; border-right: 1upx solid #E5E5E5; flex-grow: 1; padding: 20upx 0; } .button-confirm{ color: #2A86F4; flex-grow: 1; padding: 20upx 0; } } } } </style>