feat: add charge

frontend/src/router/index.js

@@ -28,7 +28,7 @@ const router = createRouter({
           // route level code-splitting
           // this generates a separate chunk (About.[hash].js) for this route
           // which is lazy-loaded when the route is visited.
-          component: () => import('../views/tabs/MeView.vue'),
+          component: () => import('../views/tabs/UserView.vue'),
         },
       ]
     },

frontend/src/views/tabs/MeView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

frontend/src/views/tabs/UserView.vue

@@ -0,0 +1,86 @@
+<template>
+  <van-image width="100%" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+
+  <!-- 可以使用 CellGroup 作为容器 -->
+  <van-cell-group>
+    <van-cell size="large" title="账户余额" :value="user.balance ?? '--'" />
+    <van-field v-model="chargeCode" center clearable label="充值" placeholder="请输入充值码" size="large">
+      <template #button>
+        <van-button size="small" type="primary" @click="confirmCharge">确认充值</van-button>
+      </template>
+    </van-field>
+  </van-cell-group>
+
+
+
+
+</template>
+
+<script setup>
+import request from "@/utils/request";
+
+const user = ref({});
+const chargeCode = ref("")
+
+const loadUserInfo = () => {
+  request.get("/users/info").then((res) => {
+    user.value = res.data;
+  }).catch((err) => {
+    console.log(err);
+  });
+};
+
+onMounted(() => {
+  loadUserInfo();
+});
+
+const confirmCharge = () => {
+  if (!chargeCode.value) {
+    return showFailToast('请输入充值码');
+  }
+
+  showConfirmDialog({
+    title: '充值确认',
+    message: "充值成功后此充值码将无法再次使用!",
+  })
+    .then(() => {
+      request
+        .patch(`/users/charge/${chargeCode.value}`)
+        .then(() => {
+          loadUserInfo();
+          showSuccessToast('充值成功');
+        })
+        .catch((err) => {
+          let message = err.response.data.message;
+          showFailToast(message);
+        });
+    })
+    .catch(() => {
+      console.log("取消充值");
+    });
+};
+</script>
+
+
+<style>
+.balance {
+  padding: 2em 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: azure;
+}
+
+.balance .title {
+  font-size: 1.5em;
+  color: #666;
+  padding-bottom: 1em;
+}
+
+.balance .num {
+  font-size: 2em;
+  color: #333;
+  font-weight: bold;
+}
+</style>