Browse Source

改善使用者體驗 微重構

Name 11 months ago
parent
commit
1fd5f3ca9c
4 changed files with 50 additions and 60 deletions
  1. 1 1
      src/components/app.vue
  2. 11 24
      src/components/detail.vue
  3. 18 0
      src/mixins/notify.js
  4. 20 35
      src/pages/home.vue

+ 1 - 1
src/components/app.vue

@@ -5,7 +5,7 @@
   <f7-views tabs class="safe-areas">
     <!-- Tabbar for switching views-tabs -->
     <f7-toolbar tabbar labels bottom>
-      <f7-link tab-link="#view-home" tab-link-active icon-ios="f7:barcode" icon-aurora="f7:barcode" icon-md="material:select_all" text="開始掃描"></f7-link>
+      <f7-link tab-link="#view-home" tab-link-active icon-ios="f7:home" icon-aurora="f7:home" icon-md="material:select_all" text="首頁"></f7-link>
       <f7-link tab-link="#view-history" icon-ios="f7:list_fill" icon-aurora="f7:list_fill" icon-md="material:view_list" text="歷史紀錄"></f7-link>
       <f7-link tab-link="#view-settings" icon-ios="f7:settings_fill" icon-aurora="f7:settings_fill" icon-md="material:settings" text="相關設定"></f7-link>
     </f7-toolbar>

+ 11 - 24
src/components/detail.vue

@@ -5,8 +5,8 @@
         class="no-border"
         valign="bottom"
         v-if="detail_product.Pics"
-        :style="`background-image:url(${detail_product.Pics})`"
-      ></f7-card-header>
+        :style="`background-image:url(${detail_product.Pics})`">
+      </f7-card-header>
       <f7-card-content>
         <p class="likes">{{ detail_product.Name }}</p>
       </f7-card-content>
@@ -26,17 +26,17 @@
     <f7-list accordion-list>
       <f7-list-item 
         v-for="(stock, index) in detail_product.Stock.BranchStock"
-        :key="index"
+        v-if="stock.total > 0"
         accordion-item
+        :key="index"
         :title="`${stock.name} (${stock.total})`"
-        :after="stock.shelf"
-        v-if="stock.total > 0">
+        :after="stock.shelf">
         <f7-accordion-content>
           <f7-list>
             <f7-list-item
               v-for="(key, val) in stock.size"
-              :key="val"
-              v-if="Number.parseInt(key) > 0" 
+              v-if="Number.parseInt(key) > 0"
+              :key="val" 
               :title="delete_zero(val)"
               :badge="key">
             </f7-list-item>
@@ -49,8 +49,10 @@
 
 <script>
 import axios from 'axios'
+import notify from '../mixins/notify'
 export default {
   props: ['product'],
+  mixins: [notify],
   data () {
     return {
       shelfs: [
@@ -107,13 +109,13 @@ export default {
               }
               ).then(res => {
                 if (res.data.status === 'fail') {
-                  self.show_alertText(res.data.msg)
+                  self.notify(res.data.msg)
                 } else {
                   const product = res.data.product
                   self.$store.dispatch('setCurrentProduct', product)
                   self.$store.dispatch('editProductToScanner', {product: product})
                 }
-              }).catch(err => self.show_alertText(err))
+              }).catch(err => self.notify(err))
             }
           },
           {
@@ -124,21 +126,6 @@ export default {
           }
         ]
       }).open()
-    },
-    show_alertText(text) {
-      const self = this
-      // Create toast
-      if (!self.notificationCloseOnClick) {
-        self.notificationCloseOnClick = self.$f7.notification.create({
-          icon: '<i class="f7-icons">info_round</i>',
-          title: '錯誤訊息',
-          titleRightText: 'now',
-          subtitle: text,
-          closeOnClick: true,
-          closeButton: true
-        });
-      }
-      self.notificationCloseOnClick.open();
     }
   }
 }

+ 18 - 0
src/mixins/notify.js

@@ -0,0 +1,18 @@
+export default {
+  methods: {
+    notify(text) {
+      // Create toast
+      if (!this.notificationCloseOnClick) {
+        this.notificationCloseOnClick = this.$f7.notification.create({
+          icon: '<i class="f7-icons">info_round</i>',
+          title: '錯誤訊息',
+          titleRightText: 'now',
+          subtitle: text,
+          closeOnClick: true,
+          closeButton: true
+        })
+      }
+      this.notificationCloseOnClick.open()
+    }
+  }
+}

+ 20 - 35
src/pages/home.vue

@@ -7,12 +7,12 @@
        <f7-nav-title sliding>KixScannerPro</f7-nav-title>
       <f7-nav-right>
         <f7-link 
-        class="searchbar-enable"
-        data-searchbar=".searchbar-components"
-        icon-ios="f7:search"
-        icon-aurora="f7:search"
-        icon-md="material:search">
-      </f7-link>
+          class="searchbar-enable"
+          data-searchbar=".searchbar-components"
+          icon-ios="f7:search"
+          icon-aurora="f7:search"
+          icon-md="material:search">
+        </f7-link>
       </f7-nav-right>
 
       <f7-searchbar
@@ -20,13 +20,13 @@
         expandable
         placeholder="Search SKU"
         :value="sku_text"
+        :disable-button="!this.$theme.aurora"
         @input="sku_text=$event.target.value"
         @keyup.enter.native="textFind"
-        :disable-button="!this.$theme.aurora"
       ></f7-searchbar>
     </f7-navbar>
 
-    <div class="content-block" @click="scanner" v-if="message=='NA'">
+    <div class="content-block" @click="scanner" v-if="flag===false">
       <img src="../assets/img/scanner.png" width="100%" alt="開始掃瞄">
     </div>
     <div v-else>
@@ -38,7 +38,9 @@
 <script>
 import axios from 'axios'
 import detail from '../components/detail'
+import notify from '../mixins/notify'
 export default {
+  mixins: [notify],
   data () {
     return {
       // url: "http://localhost:4000/scanners",
@@ -72,9 +74,11 @@ export default {
             return
           }
           axios.get(self.url,{params: {barcode: result.text}}).then(res => {
-            if (!res || JSON.stringify(res.data) == '{}') {
+            if (!res) {
+              return
+            } else if (JSON.stringify(res.data) == '{}') {
               //無資料
-              self.show_alertText(result.text + "(查無資料)")
+              self.notify(result.text + "(查無資料)")
             } else {
               //有資料
               const scannerData = {...res.data, barcode: result.text, type: 'barcode'}
@@ -84,11 +88,11 @@ export default {
               self.flag = true
             }
           }).catch(err => {
-            self.show_alertText("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
+            self.notify("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
           })
         },
         function (error) {
-          self.show_alertText('掃描失敗' + error)
+          // self.notify('掃描失敗' + error)
         },
         {
           // preferFrontCamera : true, // iOS and Android
@@ -117,38 +121,19 @@ export default {
       axios.get(this.url, {params: {sku: this.sku_text}}).then(res => {
         if (!res || JSON.stringify(res.data) == '{}') {
           //無資料
-          this.show_alertText('查無資料')
+          this.notify('查無資料')
         } else {
           //有資料
           this.message = this.sku_text
+          this.sku_text = ""
           this.$store.dispatch('setCurrentProduct', res.data)
           this.$store.dispatch('addProductToScanner', {...res.data, type: 'sku'})
           this.flag = true
-          this.sku_text = ""
         }
       }).catch(err => {
-        this.show_alertText("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
+        this.notify("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
       })
-      
-    },
-    clean_text () {
-      this.sku_text = ''
-    },
-    show_alertText(text) {
-      const self = this
-      // Create toast
-      if (!self.notificationCloseOnClick) {
-        self.notificationCloseOnClick = self.$f7.notification.create({
-          icon: '<i class="f7-icons">info_round</i>',
-          title: '錯誤訊息',
-          titleRightText: 'now',
-          subtitle: text,
-          closeOnClick: true,
-          closeButton: true
-        });
-      }
-      self.notificationCloseOnClick.open();
-    },
+    }
   }
 }