Browse Source

組件拆分 加入ios readme

Name 1 year ago
parent
commit
26a720909f
4 changed files with 127 additions and 155 deletions
  1. 22 0
      README.md
  2. 69 0
      src/components/detail.vue
  3. 31 92
      src/pages/home.vue
  4. 5 63
      src/pages/product.vue

+ 22 - 0
README.md

@@ -96,6 +96,28 @@ $ yarn demo # 若要測試原生的東西,如 barcode 掃描,可由這個指
 ## 安裝方式 
 
 #### iOS
+1. cd 到 cordova資料夾
+2. 建立 ios platform
+  - 輸入 `cordova platform add ios`
+  - 輸入 `cordova build ios`
+3. 打開 xcode 加入 apple id
+  - 打開 Xcode,到 Preferences > Accounts,
+  - 按下 + 鈕來加入帳號(一般的apple帳號即可)
+4. 使用 xcode 開啟專案
+  - 在專案底下 platforms/ios/<專案名稱>.xcodeproj
+5. 相關設定
+  - Identity - Bundle Identifier 不能跟別人重複
+  - Signing - Team 要選擇,選完後會有ign Certificate
+  - Info - 要加入 Privacy - Camera Usage Description 允許程式使用相機
+  - 點左上角的執行即可 build 到手機
+6. 安裝後注意事項
+  - 會出現『Device is passcode protected xcode』
+    - 要先開 xcode 再接上 iphone ,這時候 iphone 會問你是否信任裝置,要點信任
+  - 出現『A build only device cannot be used to run this target』
+    - 需要到『系統』『設定』『裝置管理』加入信任
+  - APP開啟後,點所有按鈕都沒反應 Content Security Policy 的問題
+    - index.html 需要設定 `<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">`
+
 
 #### Android 
 

+ 69 - 0
src/components/detail.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <f7-card class="demo-card-header-pic" :title="product.SKU">
+      <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">{{ 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-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="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>
+
+<script>
+export default {
+  props: ['product'],
+  data () {
+    return {}
+  },
+  methods: {
+    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: 60vw;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  .likes {
+    color: #8e8e93;
+  }
+</style>

+ 31 - 92
src/pages/home.vue

@@ -2,7 +2,6 @@
   <f7-page name="home">
     
     <div class="view view-main">
-      <!-- Navbar -->
       <div class="navbar">
         <div class="custom-navbar-inner">
           <div class="left">
@@ -20,64 +19,16 @@
     
         </div>
       </div>
-
-      <!-- Pages -->
+      
       <div class="pages navbar-through toolbar-through">
         <div data-page="index" class="page">
           <div class="page-content">
-            <template v-if="error_message!=''">
-              <div class="content-block-title">錯誤訊息</div>
-              <div class="content-block">
-                <div class="content-block-inner">
-                  <h3>{{ error_message }}</h3>
-                </div>
-              </div>
-            </template>
-
             <template v-if="message=='NA'">
               <div class="content-block" @click="scanner">
                 <img src="../assets/img/scanner.png" width="100%" alt="開始掃瞄">
               </div>
             </template>
-            
-            <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>
-                    <p class="likes">SKU: {{ barcode.SKU }} &nbsp;&nbsp; 品名: {{ barcode.Name }}</p>
-                  </f7-card-content>
-                  <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>
+            <detail v-else :product="current_product"></detail>
           </div>
         </div>
       </div>
@@ -87,22 +38,20 @@
 
 <script>
 import axios from 'axios'
+import detail from '../components/detail'
 export default {
   data () {
     return {
       url: "https://preerp.tranyi.com/scanners",
-      error_message: '',
-      message: '',
-      last_product: [],
-      loading: '0',
+      current_product: '',
       sku_text: '',
       condition: '',
-      error_message: '',
-      message: 'NA',
-      response_json: '',
-      history: []
+      message: 'NA'
     }
   },
+  components: {
+    detail
+  },
   methods: {
     scanner () {
       const self = this
@@ -112,31 +61,27 @@ export default {
           const existBarcodeList = self.$store.getters.barcodeList
           let item = existBarcodeList.find(item => item.barcode === result.text)
           if (item) {
-            self.last_product = []
-            self.last_product.push(item)
+            self.current_product = item
             return
           }
 
           axios.get(self.url,{params: {barcode: result.text}}).then(res => {
             if (!res || JSON.stringify(res.data) == '{}') {
               //無資料
-              self.error_message = result.text + "(查無資料)"
-              self.last_product = []
+              this.show_alertText(result.text + "(查無資料)")
             } else {
               //有資料
-              self.error_message = ''
               self.message = result.text
-              self.last_product = []
-              self.last_product.push(res.data)
+              self.current_product = res.data
               const scannerData = {...res.data, barcode: result.text, type: 'barcode'}
               self.$store.dispatch('addProductToScanner', scannerData)
             }
           }).catch(err => {
-            alert("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
+            this.show_alertText("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
           })
         },
         function (error) {
-          self.error_message = '掃描失敗' + error
+          this.show_alertText('掃描失敗' + error)
         },
         {
           // preferFrontCamera : true, // iOS and Android
@@ -157,39 +102,41 @@ export default {
       const existSkuList = this.$store.getters.skuList
       let item = existSkuList.find(item => item.SKU === this.sku_text)
       if (item) {
-        this.last_product = []
-        this.last_product.push(item)
+        this.current_product = item
         return
       }
       axios.get(this.url, {params: {sku: this.sku_text}}).then(res => {
         if (!res || JSON.stringify(res.data) == '{}') {
           //無資料
-          this.error_message = this.sku_text + "(查無資料)"
-          this.last_product = []
+          this.show_alertText('查無資料')
         } else {
           //有資料
-          this.error_message = ''
           this.message = this.sku_text
-          this.last_product = []
-          this.last_product.push(res.data)
-          
+          this.current_product = res.data
           this.$store.dispatch('addProductToScanner', {...res.data, type: 'sku'})
         }
+        this.sku_text = ""
       }).catch(err => {
-        alert("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
+        this.show_alertText("網路連接錯誤,請確保內部網路連線正常。\n如仍有問題,請回報錯誤資訊:" + JSON.stringify(err))
       })
     },
     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('.')
+    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,
+        });
       }
-    }
+      self.notificationCloseOnClick.open();
+    },
   }
 }
 </script>
@@ -204,12 +151,4 @@ export default {
   .searchbar-inner {
     height: 95% !important;
   }
-  .demo-card-header-pic .card-header {
-    height: 100vw;
-    background-size: cover;
-    background-position: center;
-  }
-  .likes {
-    color: #8e8e93;
-  }
 </style>

+ 5 - 63
src/pages/product.vue

@@ -1,49 +1,20 @@
 <template>
   <f7-page name="product">
     <f7-navbar :title="title" back-link="Back"></f7-navbar>
-    <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-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="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>
+    <detail :product="product"></detail>
   </f7-page>
 </template>
 <script>
+  import detail from '../components/detail'
   export default {
     data () {
       return {
         title: ''
       }
     },
+    components: {
+      detail
+    },
     computed: {
       product () {
         const { id, type } = this.$f7route.params
@@ -59,35 +30,6 @@
         }
         return currentProduct
       }
-    },
-    methods: {
-      stockName (name, shelf) {
-        if (shelf !== '') {
-          return `${name}(${shelf})`
-        } 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>
-