feat: shop log

fix: update client address when paying

backend/main.py

@@ -84,16 +84,35 @@ def get_order(id):
         })
 
     # shop name
-    cursor.execute("SELECT `address`, `name`, `amount` FROM `shops`, `orders` WHERE `orders`.`shop_id`=`shops`.`id` and `orders`.`id`= ?", (id, ))
+    cursor.execute("SELECT `address`, `name`, `amount`, `client_addr` FROM `shops`, `orders` WHERE `orders`.`shop_id`=`shops`.`id` and `orders`.`id`= ?", (id, ))
     result = cursor.fetchone()
     ans['shop'] = {
         'name': result[1],
         'address': result[0]
     }
     ans['amount'] = str(result[2])
+    ans['client'] = result[3]
 
     return jsonify(ans)
 
+@app.route('/order/<id>', methods=['PATCH'])
+def update_client(id):
+    client = request.get_json()['client']
+
+    db = sqlite3.connect(DATABASE)
+    cursor = db.cursor()
+    
+    ans = {}
+
+    # products
+    cursor.execute("UPDATE `orders` SET `client_addr`=? WHERE `id`=?", (client, id ))
+
+    db.commit()
+    db.close()
+
+    return jsonify({'status': 'OK'})
+
+
 @app.route('/shop/check', methods=['POST'])
 def shop_check():
     address = request.get_json()['address']

src/router/index.js

@@ -10,6 +10,8 @@ import ClientPayView from '../views/ClientPayView.vue'
 import PaymentView from '../views/PaymentView.vue'
 import ShopPayView from '../views/ShopPayView.vue'
 import ShopPayQRcodeView from '../views/ShopPayQRcodeView.vue'
+import ShopLogView from '../views/ShopLogView.vue'
+import OrderView from '../views/OrderView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -69,6 +71,16 @@ const router = createRouter({
       name: 'shopayqrcode',
       component: ShopPayQRcodeView
     },
+    {
+      path: '/shop/log',
+      name: 'shopaylog',
+      component: ShopLogView
+    },
+    {
+      path: '/order/:id',
+      name: 'order',
+      component: OrderView
+    },
   ]
 })
 

src/views/OrderView.vue

@@ -0,0 +1,109 @@
+<script>
+
+import Web3 from 'web3';
+import SBT from '@/assets/SBT.json'
+import WarningModal from '../components/WarningModal.vue'
+import SuccessModal from '../components/SuccessModal.vue'
+import PageTitle from '../components/PageTitle.vue'
+import Bank from '@/assets/Bank.json'
+
+
+export default {
+  components: { PageTitle },
+  data() {
+    return {
+      SBTAddress: import.meta.env.VITE_SBT_ADDR,
+      BankAddress: import.meta.env.VITE_BANK_ADDR,
+      clientAddr: '',
+      web3: null,
+      token: null,
+      bank: null,
+      link: '',
+      orderId: '',
+      products: [],
+      amount: "0",
+      amountWei: "0",
+      client: '',
+      shop: {
+        'address': '',
+        'name': '',
+      },
+      waiting: false
+    }
+  },
+  async mounted() {
+    // if (!this.$cookies.isKey('linked')) {
+    //   this.$router.push('/')
+    // }
+    this.web3 = new Web3(window.ethereum)
+    this.clientAddr = this.$cookies.get('address')
+    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)
+
+    // get order
+    this.orderId = this.$route.params.id
+    console.log("id: ", this.orderId)
+    const response = await fetch(`${import.meta.env.VITE_BACKEND_PREFIX}/order/${this.orderId}`);
+    var orderData = await response.json();
+    console.log(orderData)
+    this.products = orderData.products
+    this.amountWei = orderData.amount
+    this.client = orderData.client
+    this.amount = this.web3.utils.fromWei(orderData.amount, 'ether')
+    this.shop = orderData.shop
+  },
+}
+
+</script>
+
+<template>
+  <section class="blog-posts">
+    <div class="container">
+      <div class="block">
+        <PageTitle title="訂單資訊" subtitle=""></PageTitle>
+      </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 products">
+              <tr>
+                <td><b>{{ product.name }}</b></td>
+                <td>{{ web3.utils.fromWei(product.price, 'ether') }} ETH/個</td>
+                <td> * {{ product.count }} 個</td>
+                <td> 合計 {{ web3.utils.fromWei(product.price, 'ether') * product.count }} ETH</td>
+              </tr>
+            </template>
+            <tr>
+              <td colspan="3"></td>
+              <td>共計 {{ amount }} ETH</td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="table is-fullwidth">
+          <tbody>
+
+            <tr>
+              <th>支付地址：</th>
+              <td colspan="3">{{ this.client }}</td>
+            </tr>
+            <tr>
+              <th>店家地址：</th>
+              <td colspan="3">{{ this.shop.address }} ( {{ this.shop.name }} )</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="block">
+        <div class="columns">
+          <div class="column is-2 is-offset-5">
+              <button @click="this.$router.go(-1)" class="button is-danger is-fullwidth is-medium is-outlined">返回</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

src/views/PaymentView.vue

@@ -76,6 +76,13 @@ export default {
       // await this.bank.methods.pay(this.number, this.shop.address, this.amountWei).send({ from: this.clientAddr })
       try {
         await this.bank.methods.pay(this.orderId, this.shop.address, this.amountWei).send({ from: this.clientAddr })
+        await fetch(import.meta.env.VITE_BACKEND_PREFIX+"/order/"+this.orderId, {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({'client': this.clientAddr})
+        })
         this.link = '/client/info'
         this.msg = '支付成功！<br>已經支付'+this.amount+" ETH 給"+this.shop.name+" ("+this.shop.address+")"
         this.successModalStatus = true

src/views/ShopLogView.vue

@@ -0,0 +1,92 @@
+<script>
+import Web3 from 'web3';
+import SBT from '@/assets/SBT.json'
+import PageTitle from '../components/PageTitle.vue'
+import ClientNav from '../components/ClientNav.vue'
+import ShopNav from '../components/ShopNav.vue'
+
+export default {
+  components: { PageTitle, ClientNav, ShopNav },
+  data() {
+    return {
+      SBTAddress: import.meta.env.VITE_SBT_ADDR,
+      clientAddr: '',
+      web3: null,
+      token: null,
+      log: [],
+    }
+  },
+  async mounted() {
+    this.web3 = new Web3(window.ethereum)
+    this.clientAddr = this.$cookies.get('address')
+    this.web3.eth.defaultAccount = this.clientAddr
+    this.token = new this.web3.eth.Contract(SBT, this.SBTAddress)
+
+    var borrow = await this.token.getPastEvents("Borrow", { fromBlock: 0, toBlock: 'latest', filter: { shop: this.clientAddr } })
+    console.log(borrow)
+    for (let i of borrow) {
+      let result = i.returnValues
+      let obj = {
+        bank: result['bank'],
+        shop: result['shop'],
+        client: result['client'],
+        id: result['id'],
+        amount: this.web3.utils.fromWei(result['amount'], 'ether'),
+      }
+      this.log.push(obj)
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<template>
+  <section class="blog-posts">
+    <div class="container">
+      <div class="columns">
+        <div class="column is-2">
+          <ClientNav path="shoplog"></ClientNav>
+          <template v-if="this.$cookies.get('isShop') == 'true'">
+            <ShopNav path="shoplog"></ShopNav>
+          </template>
+
+        </div>
+        <div class="column">
+          <div class="container">
+            <div class="block">
+              <PageTitle title="店家收款紀錄" subtitle="查詢客戶付款狀況"></PageTitle>
+            </div>
+            <div class="block">
+              <h1 class="title is-4">收款紀錄</h1>
+              <table class="table is-fullwidth is-striped is-hoverable">
+                <thead>
+                  <tr>
+                    <th>#</th>
+                    <th>客戶</th>
+                    <th>銀行</th>
+                    <th>帳款編號</th>
+                    <th>金額</th>
+                    <th>詳細訂單狀況</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <template v-for="(value, index) of log">
+                    <tr>
+                      <th>{{ index }}</th>
+                      <td>{{ value.client }}</td>
+                      <td>{{ value.bank }}</td>
+                      <td>#{{ value.id }}</td>
+                      <td>{{ value.amount }} ETH</td>
+                      <td><RouterLink :to="'/order/'+value.id" class="button is-info is-outlined">查詢</RouterLink></td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>