feat: the shop can create a order into DB

backend/main.py

@@ -107,6 +107,23 @@ def shop_check():
     else:
         return jsonify({'status': False})
 
+@app.route('/shop/<address>/products', methods=['GET'])
+def shop_products(address):
+    db = sqlite3.connect(DATABASE)
+    cursor = db.cursor()
+    cursor.execute("SELECT  `products`.`id`, `products`.`name`, `products`.`price`, `products`.`code` FROM `shops`, `products` \
+                   WHERE `shops`.id = `products`.`shop_id`and `shops`.`address`=?", (address, ))
+    result = cursor.fetchall()
+    
+    ans = {'products': {}}
+    for product in result:
+        ans['products'][str(product[3])] = {
+            'id': product[0],
+            'name': product[1],
+            'price': str(product[2]),
+        }
+    return jsonify(ans)
+
 if __name__ == '__main__':
     initDB()
     app.run(host="0.0.0.0")

src/views/ShopPayView.vue

@@ -22,29 +22,57 @@ export default {
       web3: null,
       token: null,
       bank: null,
-      picName: '',
-      pic: '',
-      credit: '',
-      arrear: '',
+      warningModalStatus: false,
+      successModalStatus: false,
+      msg: '',
+      isWaiting: false,
+      products: {},
+      productCar: [],
+      orderId: '0'
     }
   },
   async mounted() {
-    // if (!this.$cookies.isKey('linked')) {
-    //   this.$router.push('/')
-    // }
     this.web3 = new Web3(window.ethereum)
-    this.clientAddr = this.$cookies.get('address')
+    if (this.$cookies.isKey('address')) {
+      this.clientAddr = this.$cookies.get('address')
+    } else {
+      console.log("Use default address")
+      this.clientAddr = import.meta.env.VITE_DEFAULT_SHOP
+    }
     this.web3.eth.defaultAccount = this.clientAddr
     this.token = new this.web3.eth.Contract(SBT, this.SBTAddress)
     this.bank = new this.web3.eth.Contract(Bank, this.BankAddress)
+
+    var result = await fetch(import.meta.env.VITE_BACKEND_PREFIX + "/shop/" + this.clientAddr + "/products")
+    var data = await result.json()
+    for (let product in data['products']) {
+      this.products[product] = data['products'][product]
+    }
+  },
+  computed: {
+    amount() {
+      if (!this.web3) {
+        return 0
+      }
+      var ans = 0
+      for (let product of this.productCar) {
+        ans += Number(product['price']) * product['count']
+      }
+      return this.web3.utils.fromWei(ans.toString())
+    }
   },
   methods: {
     onScanSuccess(decodedText, decodedResult) {
       // handle the scanned code as you like, for example:
       console.log(`Code matched = ${decodedText}`, decodedResult);
-      var last_id = decodedText.split('/').pop()
+      var product = this.products[decodedText]
+      this.productCar.push({
+        'name': product['name'],
+        'id': product['id'],
+        'price': product['price'],
+        'count': 1
+      })
       this.scanner.clear()
-      this.$router.push('/client/pay/'+last_id)
     },
     scan() {
       this.scanner = new Html5QrcodeScanner(
@@ -52,6 +80,36 @@ export default {
         { fps: 10, qrbox: { width: 250, height: 250 } },
         /* verbose= */ false);
       this.scanner.render(this.onScanSuccess);
+    },
+    async send() {
+      this.isWaiting = true
+
+      var data = {}
+      data['from'] = this.clientAddr
+      data['products'] = []
+      for (let product of this.productCar) {
+        data['products'].push({
+          'product_id': product['id'],
+          'count': product['count']
+        })
+      }
+      try {
+        var result = await fetch(import.meta.env.VITE_BACKEND_PREFIX+"/order", {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(data)
+        })
+        this.orderId = await result.json()
+        this.msg = '完成'
+        this.successModalStatus = true
+      } catch (error) {
+        this.msg = '錯誤'
+        this.warningModalStatus = true
+      }
+      this.productCar = []
+      this.isWaiting = false
     }
   }
 }
@@ -71,18 +129,43 @@ export default {
               <PageTitle title="店家收款" subtitle="掃描商品條碼以加入收款單"></PageTitle>
             </div>
             <div class="block">
-              
-            </div>
-            <div class="block">
-              <button class="button is-success is-outlined is-large" @click="scan">Pay</button>
+              <button class="button is-success is-outlined is-large" @click="scan">掃描商品條碼</button>
               <div id="reader" width="300px"></div>
             </div>
+            <div class="block">
+              <table class="table is-fullwidth">
+                <tbody>
+                  <tr>
+                    <th colspan="4" style="text-align: center;">商品清單</th>
+                  </tr>
+                  <template v-for="product in productCar">
+                    <tr>
+                      <td>{{ product['name'] }}</td>
+                      <td>{{ this.web3.utils.fromWei(product['price']) }} ETH</td>
+                      <td><input class="input is-info" type="number" v-model="product['count']">個</td>
+                    </tr>
+                  </template>
+                  <tr>
+                    <td colspan="3">共計 {{ amount }} ETH</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="block">
+              <template v-if="!isWaiting">
+                <button class="button is-info is-outlined is-large" @click="send">確認以上訂單</button>
+              </template>
+              <template v-else>
+                <button class="button is-info is-outlined is-large is-loading"></button>
+              </template>
+            </div>
           </div>
+
         </div>
       </div>
     </div>
   </section>
   <WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus = false"></WarningModal>
   <SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus = false"
-    link="/signup/linksbt" btnName="繼續"></SuccessModal>
+    :link="`/shop/pay/${this.orderId}`" btnName="繼續"></SuccessModal>
 </template>