组盘解盘功能优化

src/components/Modal.vue

@@ -1,57 +1,55 @@
 <template>
-    <div class="md-modal" v-if="mdShow">
-      <transition name="bounce">
-        <div class="modal-inner">
-            <div class="modal-content">
-                <!-- <div class="modal-message">{{question}}</div> -->
-                <slot></slot>
-            </div>
-            <div class="mgt15 fxrow">
-              <button class="fxcol btn btn-disabled submit-button" @click="closeModal">取消</button>
-              <button class="btn btn-disabled submit-button bl1px" v-if="comfirmDisable">确认</button>
-              <button class="btn submit-button" v-if="!comfirmDisable" @click="comfirm">确认</button>
-            </div>
-        </div>
-      </transition>
-      <transition name="fade">
-        <div class="overlay"></div>
-      </transition>
+<div>
+  <div class="modal-inner" :class="mdShow ? 'popshow' : 'pophide'">
+    <div class="modal_line"></div>
+    <div class="modal-content">
+      <slot></slot>
     </div>
+    <div class="submit-bar">
+      <button class="btn submit-button" @click="closeModal">取消</button>
+      <button class="btn submit-button" @click="comfirm">确认</button>
+    </div>
+  </div>
+  <div v-show="mdShow" class="overlay"></div>
+</div>
 </template>
 
 <script>
 export default {
   name: 'Modal',
   props: {
-    // question: String,
-    mdShow: Boolean,
-    comfirmDisable: Boolean,
-    type: String
+    mdShow: Boolean
   },
   methods: {
     closeModal () {
       this.$emit('closeModalCallback')
     },
     comfirm () {
-      this.$emit('comfirmCallback', this.type)
+      this.$emit('comfirmCallback')
     }
   }
 }
 </script>
 
 <style lang="stylus" scoped>
+.popshow
+  transform translateY(0)
+.pophide
+  transform translateY(100%)
 .modal-inner
-  position fixed
-  top 50%
-  left 50%
-  width 80%
-  font-size .28rem
-  overflow hidden
-  transition .3s
-  border-radius 4px
-  background-color #fff
-  transform translate3d(-50%, -50%, 0)
-  z-index 2018
+  position: fixed;
+  top: auto;
+  bottom: 0
+  left: 0;
+  width: 100%;
+  // height: 50%;
+  padding: .2rem;
+  background-color: #fff;
+  box-shadow: 0 -.8rem .16rem 0 rgba(28,31,33,.1);
+  border-top-left-radius: .2rem;
+  border-top-right-radius: .2rem;
+  z-index: 301;
+  transition: all .3s;
 .overlay
   position fixed
   top 0
@@ -60,10 +58,18 @@ export default {
   height 100%
   background-color rgba(0, 0, 0, .7)
   z-index 11
->>>.btn
-  border-radius 0
->>>.submit-button
-  margin 0
-.bl1px
-  border-left 1px solid #fff
+.modal_line
+  width 1rem
+  height .1rem
+  background-color #e0e0e1
+  border-radius .6rem
+  margin 0 auto 1rem auto
+.modal-content
+  font-size .34rem
+  color #000
+  line-height .4rem
+  margin 0 .15rem 1rem .15rem
+.submit-bar
+  position static
+  box-shadow none
 </style>

src/pages/proj/GroupDisk.vue

@@ -127,7 +127,11 @@ export default {
       try {
         let res = await rfReadMatBarCodeStatePackage(this.val1, val)
         if (res.ErrNO === '1') {
-          this.open = true
+          if (this.active === '') {
+            this.open = true
+          } else {
+            this._rfTrayPackage()
+          }
         } else {
           this.toast(res.ErrMsg)
           this.val2 = ''
@@ -184,7 +188,6 @@ export default {
           this._rfReadTrayStoragePackage()
           this.toast(res.ErrMsg)
           this.val2 = ''
-          this.active = ''
           this.$refs.myInput2.handleScan()
         } else {
           this.Dialog(res.ErrMsg)

src/pages/proj/OpenDisk.vue

@@ -40,27 +40,33 @@
       </div>
     </section>
     <section class="submit-bar">
-      <button class="btn submit-button" :class="{'btn-disabled' : !val1}" :disabled="disabled" @click="_rfTrayUnPackage">解盘</button>
+      <button class="btn submit-button" :class="{'btn-disabled' : !val1}" :disabled="disabled" @click="toSure">解盘</button>
       <button class="btn submit-button" @click="toCancle">取消</button>
     </section>
+    <modal :mdShow="mdShow" @closeModalCallback="closeModalCallback" @comfirmCallback="comfirmCallback">
+      是否确认解盘？
+    </modal>
   </section>
 </template>
 
 <script>
 import NavBar from '@components/NavBar.vue'
 import SearchBox from '@components/SearchBox.vue'
+import Modal from '../../components/Modal.vue'
 import {rfReadTrayStateUnPackage, rfReadTrayStorageUnPackage, rfTrayUnPackage} from '@config/getData2'
 export default {
   name: 'GroupDisk',
   components: {
     NavBar,
-    SearchBox
+    SearchBox,
+    Modal
   },
   data () {
     return {
       val1: '',
       dataList: [],
-      disabled: false
+      disabled: false,
+      mdShow: false
     }
   },
   mounted () {
@@ -106,6 +112,9 @@ export default {
         this._rfReadTrayStateUnPackage(e)
       }
     },
+    toSure () {
+      this.mdShow = true
+    },
     /** 解盘 */
     async _rfTrayUnPackage () {
       this.disabled = true
@@ -136,6 +145,13 @@ export default {
       this.dataList = []
       this.disabled = false
       this.$refs.myInput1.handleScan()
+    },
+    closeModalCallback () {
+      this.mdShow = false
+    },
+    comfirmCallback () {
+      this.mdShow = false
+      this._rfTrayUnPackage()
     }
   }
 }