<template> <u-mask class="commonModal" :show="isShow" :mask-click-able="false"> <view class="modal-con"> <view class="modal-title">打印贴签</view> <view class="modal-main"> <u-radio-group v-model="printType"> <u-radio name="manual"> <view class="print-con"> <u-image class="item-pic" src="../../static/default/icon_print_manual.png" width="80" height="80"></u-image> <view class="print-main"> <text class="print-type">手动打印</text> <text class="print-exp">在产品列表中自行选择需要打印贴签的产品</text> </view> </view> </u-radio> <u-radio name="scan"> <view class="print-con"> <u-image class="item-pic" src="../../static/default/icon_print_code.png" width="80" height="80"></u-image> <view class="print-main"> <text class="print-type">扫码打印</text> <text class="print-exp">扫描产品条形码进行打印</text> </view> </view> </u-radio> </u-radio-group> </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 } }, data() { return { isShow: this.openModal, // 是否打开弹框 printType: 'manual' } }, methods: { // 确认 handleConfirm(){ this.$emit('confirm', this.printType) } }, 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; .modal-con{ width: 78%; margin: 50% auto 0; background-color: #fff; border-radius: 24upx; .modal-title{ text-align: center; font-size: 30upx; color: #000; padding: 30upx 30upx 0; } .modal-main{ margin: 20upx 0 30upx; /deep/ .u-radio{ width: 94%!important; flex-direction: row-reverse; justify-content: space-between; margin: 0 3%; } /deep/ .u-radio__icon-wrap{ flex-shrink: 0; } /deep/ .u-radio__label{ flex-grow: 1; border-bottom: 2upx dashed #E5E5E5; padding: 3% 0; } .print-con{ display: flex; justify-content: space-between; align-items: center; .item-pic{ flex-shrink: 0; margin-right: 20upx; } .print-main{ flex-grow: 1; .print-type{ display: block; font-size: 30upx; color: #222; } .print-exp{ display: block; font-size: 26upx; color: #666E75; line-height: 40upx; } } } } .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>