Browse Source

初版可瀏覽歷史紀錄

Name 1 year ago
parent
commit
eb544146a2
10 changed files with 101 additions and 151 deletions
  1. 2 1
      package.json
  2. 6 120
      src/components/app.vue
  3. 2 2
      src/js/app.js
  4. 3 3
      src/js/routes.js
  5. 0 22
      src/pages/catalog.vue
  6. 30 0
      src/pages/history.vue
  7. 22 3
      src/pages/home.vue
  8. 11 0
      src/store/index.js
  9. 20 0
      src/store/scanner/index.js
  10. 5 0
      yarn.lock

+ 2 - 1
package.json

@@ -76,7 +76,8 @@
     "framework7-icons": "^2.3.1",
     "framework7-vue": "^4.4.0",
     "template7": "^1.4.1",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",

+ 6 - 120
src/components/app.vue

@@ -1,96 +1,25 @@
 <template>
 <f7-app :params="f7params" >
-  <!-- Status bar overlay for fullscreen mode-->
-  <f7-statusbar></f7-statusbar>
-
-  <!-- Left panel with cover effect-->
-  <f7-panel left cover theme-dark>
-    <f7-view>
-      <f7-page>
-        <f7-navbar title="Left Panel"></f7-navbar>
-        <f7-block>Left panel content goes here</f7-block>
-      </f7-page>
-    </f7-view>
-  </f7-panel>
-
-
-  <!-- Right panel with reveal effect-->
-  <f7-panel right reveal theme-dark>
-    <f7-view>
-      <f7-page>
-        <f7-navbar title="Right Panel"></f7-navbar>
-        <f7-block>Right panel content goes here</f7-block>
-      </f7-page>
-    </f7-view>
-  </f7-panel>
-
 
   <!-- Views/Tabs container -->
   <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:home_fil" icon-aurora="f7:home_fil" icon-md="material:home" text="Home"></f7-link>
-      <f7-link tab-link="#view-catalog" icon-ios="f7:list_fill" icon-aurora="f7:list_fill" icon-md="material:view_list" text="Catalog"></f7-link>
+      <f7-link tab-link="#view-history" icon-ios="f7:list_fill" icon-aurora="f7:list_fill" icon-md="material:view_list" text="History"></f7-link>
       <f7-link tab-link="#view-settings" icon-ios="f7:settings_fill" icon-aurora="f7:settings_fill" icon-md="material:settings" text="Settings"></f7-link>
     </f7-toolbar>
 
     <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
     <f7-view id="view-home" main tab tab-active url="/"></f7-view>
 
-    <!-- Catalog View -->
-    <f7-view id="view-catalog" name="catalog" tab url="/catalog/"></f7-view>
+    <!-- history View -->
+    <f7-view id="view-history" name="history" tab url="/history/"></f7-view>
 
     <!-- Settings View -->
     <f7-view id="view-settings" name="settings" tab url="/settings/"></f7-view>
 
   </f7-views>
-
-
-  <!-- Popup -->
-  <f7-popup id="my-popup">
-    <f7-view>
-      <f7-page>
-        <f7-navbar title="Popup">
-          <f7-nav-right>
-            <f7-link popup-close>Close</f7-link>
-          </f7-nav-right>
-        </f7-navbar>
-        <f7-block>
-          <p>Popup content goes here.</p>
-        </f7-block>
-      </f7-page>
-    </f7-view>
-  </f7-popup>
-
-  <f7-login-screen id="my-login-screen">
-    <f7-view>
-      <f7-page login-screen>
-        <f7-login-screen-title>Login</f7-login-screen-title>
-        <f7-list form>
-          <f7-list-input
-            type="text"
-            name="username"
-            placeholder="Your username"
-            :value="username"
-            @input="username = $event.target.value"
-          ></f7-list-input>
-          <f7-list-input
-            type="password"
-            name="password"
-            placeholder="Your password"
-            :value="password"
-            @input="password = $event.target.value"
-          ></f7-list-input>
-        </f7-list>
-        <f7-list>
-          <f7-list-button title="Sign In" login-screen-close @click="alertLoginData"></f7-list-button>
-          <f7-block-footer>
-            Some text about login information.<br>Click "Sign In" to close Login Screen
-          </f7-block-footer>
-        </f7-list>
-      </f7-page>
-    </f7-view>
-  </f7-login-screen>
 </f7-app>
 </template>
 <script>
@@ -108,58 +37,15 @@
           // App root data
           data: function () {
             return {
-              user: {
-                firstName: 'John',
-                lastName: 'Doe',
-              },
-              // Demo products for Catalog section
-              products: [
-                {
-                  id: '1',
-                  title: 'Apple iPhone 8',
-                  description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
-                },
-                {
-                  id: '2',
-                  title: 'Apple iPhone 8 Plus',
-                  description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
-                },
-                {
-                  id: '3',
-                  title: 'Apple iPhone X',
-                  description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
-                },
-              ]
-            };
+            }
           },
-
           // App routes
           routes: routes,
-
-
-
-          // Input settings
-          input: {
-            scrollIntoViewOnFocus: this.$device.cordova && !this.$device.electron,
-            scrollIntoViewCentered: this.$device.cordova && !this.$device.electron,
-          },
-          // Cordova Statusbar settings
-          statusbar: {
-            overlay: this.$device.cordova && this.$device.ios || 'auto',
-            iosOverlaysWebView: true,
-            androidOverlaysWebView: false,
-          },
-        },
-
-        // Login screen data
-        username: '',
-        password: '',
+        }
       }
     },
     methods: {
-      alertLoginData() {
-        this.$f7.dialog.alert('Username: ' + this.username + '<br>Password: ' + this.password);
-      }
+      
     },
     mounted() {
       this.$f7ready((f7) => {

+ 2 - 2
src/js/app.js

@@ -1,6 +1,6 @@
 // Import Vue
 import Vue from 'vue';
-
+import { store } from '../store'
 // Import Framework7
 import Framework7 from 'framework7/framework7.esm.bundle.js';
 
@@ -23,8 +23,8 @@ Framework7.use(Framework7Vue);
 // Init App
 new Vue({
   el: '#app',
+  store,
   render: (h) => h(App),
-
   // Register App Component
   components: {
     app: App

+ 3 - 3
src/js/routes.js

@@ -2,7 +2,7 @@
 import HomePage from '../pages/home.vue';
 import AboutPage from '../pages/about.vue';
 import FormPage from '../pages/form.vue';
-import CatalogPage from '../pages/catalog.vue';
+import HistoryPage from '../pages/history.vue';
 import ProductPage from '../pages/product.vue';
 import SettingsPage from '../pages/settings.vue';
 
@@ -24,8 +24,8 @@ var routes = [
     component: FormPage,
   },
   {
-    path: '/catalog/',
-    component: CatalogPage,
+    path: '/history/',
+    component: HistoryPage,
   },
   {
     path: '/product/:id/',

+ 0 - 22
src/pages/catalog.vue

@@ -1,22 +0,0 @@
-<template>
-  <f7-page name="catalog">
-    <f7-navbar title="Catalog"></f7-navbar>
-    <f7-list>
-      <f7-list-item
-        v-for="(product) in products"
-        :key="product.id"
-        :title="product.title"
-        :link="`/product/${product.id}/`"
-      ></f7-list-item>
-    </f7-list>
-  </f7-page>
-</template>
-<script>
-  export default {
-    data: function () {
-      return {
-        products: this.$f7.data.products,
-      };
-    }
-  };
-</script>

+ 30 - 0
src/pages/history.vue

@@ -0,0 +1,30 @@
+<template>
+  <f7-page name="catalog">
+    <f7-block-title>已掃過商品</f7-block-title>
+    <f7-list media-list>
+      <template v-for="(list,index) in scannerList">
+        <f7-list-item
+          link="#"
+          :key="index"
+          :title="list.sku"
+          :after="'$' + list.price"
+          :subtitle="list.kname"
+          :text="list.name">
+          <img slot="media" :src="list.image" width="80" />
+        </f7-list-item>
+      </template>
+    </f7-list>
+  </f7-page>
+</template>
+<script>
+  export default {
+    data () {
+      return { }
+    },
+    computed: {
+      scannerList () {
+        return this.$store.getters.scannerList
+      }
+    }
+  };
+</script>

+ 22 - 3
src/pages/home.vue

@@ -31,7 +31,7 @@
                     <div class="searchbar-input-wrap">
                       <input type="search" placeholder="Search SKU" v-model="sku_text" @keyup.enter="textFind">
                       <i class="searchbar-icon"></i>
-                      <span class="input-clear-button" @click="textFind"></span>
+                      <span class="input-clear-button" @click="clean_text"></span>
                     </div>
                   </div>
                 </div>
@@ -48,7 +48,7 @@
                     <div class="searchbar-input-wrap">
                       <input type="search" placeholder="Search SKU" v-model="sku_text" @keyup.enter="textFind">
                       <i class="searchbar-icon"></i>
-                      <span class="input-clear-button" @click="textFind"></span>
+                      <span class="input-clear-button" @click="clean_text"></span>
                     </div>
                   </div>
                 </div>
@@ -124,6 +124,15 @@ export default {
               self.message = result.text
               self.last_product = []
               self.last_product.push(res.data)
+
+              const scannerData = {
+                image: res.data.Pics,
+                sku: res.data.SKU,
+                name: result.text,
+                kname: res.data.Kname,
+                price: res.data.MSRP
+              }
+              self.$store.dispatch('addProductToScanner', scannerData)
             }
           }).catch(err => {
             alert("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
@@ -158,7 +167,14 @@ export default {
           this.message = this.sku_text
           this.last_product = []
           this.last_product.push(res.data)
-          console.log(res.data)
+          const scannerData = {
+            image: res.data.Pics,
+            sku: res.data.SKU,
+            name: res.data.Name,
+            kname: res.data.Kname,
+            price: res.data.MSRP
+          }
+          this.$store.dispatch('addProductToScanner', scannerData)
         }
       }).catch(err => {
         alert("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
@@ -170,6 +186,9 @@ export default {
       } else {
         return name
       }
+    },
+    clean_text () {
+      this.sku_text = ''
     }
   }
 }

+ 11 - 0
src/store/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import scanner from './scanner/index'
+
+Vue.use(Vuex)
+
+export const store = new Vuex.Store({
+  modules: {
+    scanner
+  }
+})

+ 20 - 0
src/store/scanner/index.js

@@ -0,0 +1,20 @@
+export default {
+  state: {
+    scannerList: []
+  },
+  mutations: {
+    pushProduct (state, payload) {
+      state.scannerList.push(payload)
+    }
+  },
+  actions: {
+    addProductToScanner ({commit}, payload) {
+      commit('pushProduct', payload)
+    }
+  },
+  getters: {
+    scannerList (state) {
+      return state.scannerList
+    }
+  }
+}

+ 5 - 0
yarn.lock

@@ -7338,6 +7338,11 @@ vue@^2.6.10:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
 
+vuex@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.1.tgz#0c264bfe30cdbccf96ab9db3177d211828a5910e"
+  integrity sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg==
+
 watchpack@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"