printStickerModal.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <u-mask class="commonModal" :show="isShow" :mask-click-able="false">
  3. <view class="modal-con">
  4. <view class="modal-title">打印贴签</view>
  5. <view class="modal-main">
  6. <u-radio-group v-model="printType">
  7. <u-radio name="manual">
  8. <view class="print-con">
  9. <u-image class="item-pic" src="../../static/default/icon_print_manual.png" width="80" height="80"></u-image>
  10. <view class="print-main">
  11. <text class="print-type">手动打印</text>
  12. <text class="print-exp">在产品列表中自行选择需要打印贴签的产品</text>
  13. </view>
  14. </view>
  15. </u-radio>
  16. <u-radio name="scan">
  17. <view class="print-con">
  18. <u-image class="item-pic" src="../../static/default/icon_print_code.png" width="80" height="80"></u-image>
  19. <view class="print-main">
  20. <text class="print-type">扫码打印</text>
  21. <text class="print-exp">扫描产品条形码进行打印</text>
  22. </view>
  23. </view>
  24. </u-radio>
  25. </u-radio-group>
  26. </view>
  27. <view class="modal-footer">
  28. <view class="button-cancel" @click="isShow=false">取消</view>
  29. <view class="button-confirm" @click="handleConfirm">确定</view>
  30. </view>
  31. </view>
  32. </u-mask>
  33. </template>
  34. <script>
  35. export default {
  36. props: {
  37. openModal: { // 弹框显示状态
  38. type: Boolean,
  39. default: false
  40. }
  41. },
  42. data() {
  43. return {
  44. isShow: this.openModal, // 是否打开弹框
  45. printType: 'manual'
  46. }
  47. },
  48. methods: {
  49. // 确认
  50. handleConfirm(){
  51. this.$emit('confirm', this.printType)
  52. }
  53. },
  54. watch: {
  55. // 父页面传过来的弹框状态
  56. openModal (newValue, oldValue) {
  57. this.isShow = newValue
  58. },
  59. // 重定义的弹框状态
  60. isShow (newValue, oldValue) {
  61. if (!newValue) {
  62. this.$emit('close')
  63. }
  64. }
  65. }
  66. }
  67. </script>
  68. <style lang="scss" scoped>
  69. .commonModal{
  70. width: 100%;
  71. height: 100%;
  72. position: absolute;
  73. left: 0;
  74. top: 0;
  75. .modal-con{
  76. width: 78%;
  77. margin: 50% auto 0;
  78. background-color: #fff;
  79. border-radius: 24upx;
  80. .modal-title{
  81. text-align: center;
  82. font-size: 30upx;
  83. color: #000;
  84. padding: 30upx 30upx 0;
  85. }
  86. .modal-main{
  87. margin: 20upx 0 30upx;
  88. ::v-deep .u-radio{
  89. width: 94%!important;
  90. flex-direction: row-reverse;
  91. justify-content: space-between;
  92. margin: 0 3%;
  93. }
  94. ::v-deep .u-radio__icon-wrap{
  95. flex-shrink: 0;
  96. }
  97. ::v-deep .u-radio__label{
  98. flex-grow: 1;
  99. border-bottom: 2upx dashed #E5E5E5;
  100. padding: 3% 0;
  101. }
  102. .print-con{
  103. display: flex;
  104. justify-content: space-between;
  105. align-items: center;
  106. .item-pic{
  107. flex-shrink: 0;
  108. margin-right: 20upx;
  109. }
  110. .print-main{
  111. flex-grow: 1;
  112. .print-type{
  113. display: block;
  114. font-size: 30upx;
  115. color: #222;
  116. }
  117. .print-exp{
  118. display: block;
  119. font-size: 26upx;
  120. color: #666E75;
  121. line-height: 40upx;
  122. }
  123. }
  124. }
  125. }
  126. .modal-footer{
  127. font-size: 30upx;
  128. display: flex;
  129. justify-content: space-between;
  130. align-items: center;
  131. text-align: center;
  132. border-top: 1upx solid #E5E5E5;
  133. .button-cancel{
  134. color: #999;
  135. border-right: 1upx solid #E5E5E5;
  136. flex-grow: 1;
  137. padding: 20upx 0;
  138. }
  139. .button-confirm{
  140. color: #2A86F4;
  141. flex-grow: 1;
  142. padding: 20upx 0;
  143. }
  144. }
  145. }
  146. }
  147. </style>