Browse Source

暫時修改介面

Name 1 year ago
parent
commit
babe97aaf7
3 changed files with 116 additions and 75 deletions
  1. 1 0
      .gitignore
  2. 75 62
      src/pages/home.vue
  3. 40 13
      src/pages/product.vue

+ 1 - 0
.gitignore

@@ -41,3 +41,4 @@ cordova/www/
 
 # Production build
 www/
+package-lock.json

+ 75 - 62
src/pages/home.vue

@@ -4,10 +4,20 @@
     <div class="view view-main">
       <!-- Navbar -->
       <div class="navbar">
-        <div class="navbar-inner">
+        <div class="custom-navbar-inner">
           <div class="left">
             <a href="#" @click="scanner" class="link icon-only"><i class="f7-icons size-50">add_round</i></a>
           </div>
+          <div class="searchbar">
+            <div class="searchbar-inner">
+              <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="clean_text"></span>
+              </div>
+            </div>
+          </div>
+    
         </div>
       </div>
 
@@ -25,65 +35,48 @@
             </template>
 
             <template v-if="message=='NA'">
-              <div class="content-block">
-                <div class="searchbar">
-                  <div class="searchbar-inner">
-                    <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="clean_text"></span>
-                    </div>
-                  </div>
-                </div>
-              </div>
               <div class="content-block" @click="scanner">
                 <img src="../assets/img/scanner.png" width="100%" alt="開始掃瞄">
               </div>
             </template>
-
-            <template v-else>
-              <div class="content-block">
-                <div class="searchbar">
-                  <div class="searchbar-inner">
-                    <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="clean_text"></span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <template v-for="barcode in last_product">
-                <div :key="barcode.SKU">
-                  <f7-card>
-                    <f7-card-content :padding="false">
-                      <img :src="barcode.Pics" width="100%"/>
-                    </f7-card-content>
-                  </f7-card>
+            
+            <template v-else v-for="barcode in last_product">
+              <div :key="barcode.SKU">
+                <f7-card class="demo-card-header-pic">
+                  <f7-card-header
+                    class="no-border"
+                    valign="bottom"
+                    v-if="barcode.Pics"
+                    :style="`background-image:url(${barcode.Pics})`"
+                  ></f7-card-header>
                   <f7-card-content>
-                    <h3>條件: {{ condition }}</h3>
-                    <p>型號: {{ barcode.SKU }}</p>
-                    <p>品名: {{ barcode.Name }}</p>
-                    <p>KName: {{ barcode.Kname }}</p>
-                    <p>價格: {{ barcode.MSRP }}</p>
+                    <p class="likes">SKU: {{ barcode.SKU }} &nbsp;&nbsp; 品名: {{ barcode.Name }}</p>
                   </f7-card-content>
-                  
-                  <f7-block-title>庫存</f7-block-title>
-                  <f7-list accordion-list>
-                    <template v-for="(stock, index) in barcode.Stock.BranchStock">
-                      <f7-list-item :key="index" accordion-item :title="stockName(stock.name, stock.shelf)" v-if="stock.total > 0">
-                        <f7-accordion-content>
-                          <f7-list>
-                            <f7-list-item v-for="(key, val) in stock.size" :key="val" v-if="Number.parseInt(key) > 0">
-                              {{ val }} : {{ key }}
-                            </f7-list-item>
-                          </f7-list>
-                        </f7-accordion-content>
-                      </f7-list-item>
-                    </template>
-                  </f7-list>
-                </div>
-              </template>
+                  <f7-card-footer>
+                    <f7-chip outline :text="`$ ${Number.parseInt(barcode.MSRP)}`"></f7-chip>
+                    <f7-chip outline :text="barcode.Kname"></f7-chip>
+                  </f7-card-footer>
+                </f7-card>
+                
+                <f7-block-title>庫存</f7-block-title>
+                <f7-list accordion-list>
+                  <template v-for="(stock, index) in barcode.Stock.BranchStock">
+                    <f7-list-item :key="index" accordion-item :title="stock.name" :after="stock.shelf" v-if="stock.total > 0">
+                      <f7-accordion-content>
+                        <f7-list>
+                          <f7-list-item
+                            v-for="(key, val) in stock.size"
+                            :key="val"
+                            v-if="Number.parseInt(key) > 0" 
+                            :title="delete_zero(val)"
+                            :badge="key">
+                          </f7-list-item>
+                        </f7-list>
+                      </f7-accordion-content>
+                    </f7-list-item>
+                  </template>
+                </f7-list>
+              </div>
             </template>
           </div>
         </div>
@@ -186,17 +179,37 @@ export default {
         alert("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
       })
     },
-    stockName (name, shelf) {
-      if (shelf !== '') {
-        return `${name}(${shelf})`
-      } else {
-        return name
-      }
-    },
     clean_text () {
       this.sku_text = ''
+    },
+    delete_zero(val) {
+      const now_val = val.split('.')
+      if (now_val[1] == '0') {
+        return now_val[0]
+      } else {
+        return now_val.join('.')
+      }
     }
   }
 }
 </script>
-      
+
+<style scoped>
+  .custom-navbar-inner {
+    display: flex;
+  }
+  .searchbar {
+    width: 100% !important;
+  }
+  .searchbar-inner {
+    height: 95% !important;
+  }
+  .demo-card-header-pic .card-header {
+    height: 100vw;
+    background-size: cover;
+    background-position: center;
+  }
+  .likes {
+    color: #8e8e93;
+  }
+</style>

+ 40 - 13
src/pages/product.vue

@@ -1,27 +1,34 @@
 <template>
   <f7-page name="product">
     <f7-navbar :title="title" back-link="Back"></f7-navbar>
-    <f7-card>
-      <f7-card-content :padding="false">
-        <img :src="product.Pics" width="100%"/>
+    <f7-card class="demo-card-header-pic">
+      <f7-card-header
+        class="no-border"
+        valign="bottom"
+        v-if="product.Pics"
+        :style="`background-image:url(${product.Pics})`"
+      ></f7-card-header>
+      <f7-card-content>
+        <p class="likes">SKU: {{ product.SKU }} &nbsp;&nbsp; 品名: {{ product.Name }}</p>
       </f7-card-content>
+      <f7-card-footer>
+        <f7-chip outline :text="`$ ${Number.parseInt(product.MSRP)}`"></f7-chip>
+        <f7-chip outline :text="product.Kname"></f7-chip>
+      </f7-card-footer>
     </f7-card>
-    <f7-card-content>
-      <h3>條件: {{ title }}</h3>
-      <p>型號: {{ product.SKU }}</p>
-      <p>品名: {{ product.Name }}</p>
-      <p>KName: {{ product.Kname }}</p>
-      <p>價格: {{ product.MSRP }}</p>
-    </f7-card-content>
     
     <f7-block-title>庫存</f7-block-title>
     <f7-list accordion-list>
       <template v-for="(stock, index) in product.Stock.BranchStock">
-        <f7-list-item :key="index" accordion-item :title="stockName(stock.name, stock.shelf)" v-if="stock.total > 0">
+        <f7-list-item :key="index" accordion-item :title="stock.name" :after="stock.shelf" v-if="stock.total > 0">
           <f7-accordion-content>
             <f7-list>
-              <f7-list-item v-for="(key, val) in stock.size" :key="val" v-if="Number.parseInt(key) > 0">
-                {{ val }} : {{ key }}
+              <f7-list-item
+                v-for="(key, val) in stock.size"
+                :key="val"
+                v-if="Number.parseInt(key) > 0" 
+                :title="delete_zero(val)"
+                :badge="key">
               </f7-list-item>
             </f7-list>
           </f7-accordion-content>
@@ -60,7 +67,27 @@
         } else {
           return name
         }
+      },
+      delete_zero(val) {
+        const now_val = val.split('.')
+        if (now_val[1] == '0') {
+          return now_val[0]
+        } else {
+          return now_val.join('.')
+        }
       }
     }
   }
 </script>
+
+<style scoped>
+  .demo-card-header-pic .card-header {
+    height: 100vw;
+    background-size: cover;
+    background-position: center;
+  }
+  .likes {
+    color: #8e8e93;
+  }
+</style>
+