add

frontend/src/views/family/Bills.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="page-card">
+    <h3>Bills</h3>
+    <div style="margin-bottom: 12px;">
+      <el-select v-model="elderId" placeholder="Select elder" @change="load">
+        <el-option v-for="elder in elders" :key="elder.id" :label="elder.name" :value="elder.id" />
+      </el-select>
+    </div>
+    <el-table :data="items" stripe>
+      <el-table-column prop="month" label="Month" />
+      <el-table-column prop="total" label="Total" />
+      <el-table-column prop="status" label="Status" />
+      <el-table-column label="Actions" width="160">
+        <template slot-scope="scope">
+          <el-button size="mini" type="primary" @click="pay(scope.row)" :disabled="scope.row.status === 'PAID'">
+            Pay
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { familyElders, familyBills, familyPay } from "../../api";
+
+export default {
+  data() {
+    return { elders: [], elderId: "", items: [] };
+  },
+  async created() {
+    try {
+      const res = await familyElders();
+      this.elders = res.data.data;
+    } catch (e) {
+      this.$message.error(e.message || "load failed");
+    }
+  },
+  methods: {
+    async load() {
+      if (!this.elderId) return;
+      try {
+        const res = await familyBills(this.elderId);
+        this.items = res.data.data;
+      } catch (e) {
+        this.$message.error(e.message || "load failed");
+      }
+    },
+    async pay(row) {
+      try {
+        await familyPay(row.id, { method: "ONLINE" });
+        this.$message.success("paid");
+        this.load();
+      } catch (e) {
+        this.$message.error(e.message || "pay failed");
+      }
+    }
+  }
+};
+</script>