chooseTypeModal.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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. <view class="modal-p">本次共上架入库<text>{{totalKs}}</text>款产品,共<text>{{totalNums}}</text>件</view>
  7. <u-input v-model="form.remarks" placeholder="请输入出库备注(最多500字符)" type="textarea" :maxlength="500" :border="true" :auto-height="false" :custom-style="{height: '100upx'}" />
  8. </view>
  9. <view class="modal-footer">
  10. <view class="button-cancel" @click="isShow=false">取消</view>
  11. <view class="button-confirm" @click="handleConfirm">确认上架入库</view>
  12. </view>
  13. </view>
  14. </u-mask>
  15. </template>
  16. <script>
  17. export default {
  18. props: {
  19. openModal: { // 弹框显示状态
  20. type: Boolean,
  21. default: false
  22. },
  23. totalKs: {
  24. type: [String,Number],
  25. default: '0'
  26. },
  27. totalNums: {
  28. type: [String,Number],
  29. default: '0'
  30. }
  31. },
  32. data() {
  33. return {
  34. isShow: this.openModal, // 是否打开弹框
  35. form: {
  36. dispatchType: undefined,
  37. remarks: ''
  38. },
  39. dispatchTypeList: []
  40. }
  41. },
  42. methods: {
  43. // 确认
  44. handleConfirm(){
  45. this.$emit('confirm', this.form, 0)
  46. },
  47. },
  48. watch: {
  49. // 父页面传过来的弹框状态
  50. openModal (newValue, oldValue) {
  51. this.isShow = newValue
  52. },
  53. // 重定义的弹框状态
  54. isShow (newValue, oldValue) {
  55. if (!newValue) {
  56. this.$emit('close')
  57. }
  58. }
  59. }
  60. }
  61. </script>
  62. <style lang="scss" scoped>
  63. .commonModal{
  64. width: 100%;
  65. height: 100%;
  66. position: absolute;
  67. left: 0;
  68. top: 0;
  69. z-index: 9999999;
  70. .modal-con{
  71. width: 78%;
  72. margin: 50% auto;
  73. background-color: #fff;
  74. border-radius: 24upx;
  75. padding-top: 30upx;
  76. font-size: 30upx;
  77. .modal-title{
  78. text-align: center;
  79. font-size: 26upx;
  80. color: #666;
  81. }
  82. .modal-main{
  83. margin: 10upx 30upx 30upx;
  84. font-size: 30upx;
  85. .modal-p{
  86. color: #666;
  87. text-align: center;
  88. margin-bottom: 20upx;
  89. font-size: 26upx;
  90. text{
  91. color: red;
  92. }
  93. }
  94. }
  95. .modal-footer{
  96. font-size: 30upx;
  97. display: flex;
  98. justify-content: space-between;
  99. align-items: center;
  100. text-align: center;
  101. border-top: 1upx solid #E5E5E5;
  102. .button-cancel{
  103. color: #999;
  104. border-right: 1upx solid #E5E5E5;
  105. flex-grow: 1;
  106. padding: 20upx 0;
  107. }
  108. .button-confirm{
  109. color: #2A86F4;
  110. flex-grow: 1;
  111. padding: 20upx 0;
  112. }
  113. }
  114. }
  115. }
  116. </style>