fix: issues

frontend/src/components/BalanceHistory.vue

@@ -0,0 +1,65 @@
+<template>
+    <van-cell-group inset title="消费历史">
+        <van-cell v-for="h in histories" size="large" :title="processTitle(h)" :label="parseDate(h.created_at)"
+            :value="h.balance + '点'" />
+    </van-cell-group>
+</template>
+
+
+<script>
+import request from "@/utils/request";
+import { defineComponent, onMounted, ref } from 'vue';
+
+
+export default defineComponent({
+    props: {
+    },
+    setup(props) {
+        const histories = ref([]);
+
+        const processTitle = (h) => {
+            if (h.type === "charge") {
+                return "充值";
+            } else if (h.type === "consume") {
+                return "消费";
+            } else if (h.type === "refund") {
+                return "退款";
+            }
+        }
+
+        const loadHistories = () => {
+            request.get("/users/balance-histories").then((res) => {
+                histories.value = res.data;
+            }).catch((err) => {
+                console.log(err);
+            });
+        };
+
+        const parseDate = (timeStr) => {
+            const date = new Date(timeStr);
+
+            // 获取年、月、日、时、分 using UTC
+            const year = date.getUTCFullYear();
+            const month = date.getUTCMonth() + 1; // 月份是从0开始计数的，所以要加1
+            const day = date.getUTCDate();
+            const hour = date.getUTCHours();
+            const minute = date.getUTCMinutes();
+
+            // 按照要求格式输出
+            const formattedTime = `${year}年${month}月${day}日 ${hour}时${minute}分`;
+            return formattedTime;
+        }
+
+        onMounted(() => {
+            loadHistories();
+        });
+
+        return {
+            histories,
+            processTitle,
+            loadHistories,
+            parseDate,
+        }
+    }
+})
+</script>

frontend/src/components/ChargeCode.vue

@@ -0,0 +1,52 @@
+<template>
+    <van-cell-group inset title="充值码">
+        <van-cell v-for="c in codes" size="large" :title="getCodeAmountTitle(c)" :value="c.code" @click="copyCode(c)" />
+    </van-cell-group>
+</template>
+
+
+<script>
+import request from "@/utils/request";
+import { defineComponent, onMounted } from 'vue';
+
+
+export default defineComponent({
+    props: {
+        contact: String,
+    },
+    setup(props) {
+        const codes = ref([]);
+
+        const loadChargeCodes = () => {
+            request.get("/users/codes").then((res) => {
+                codes.value = res.data;
+            }).catch((err) => {
+                console.log(err);
+            });
+        };
+
+        const getCodeAmountTitle = (code) => {
+            return code.amount / 100 + " 元/ " + code.amount + " 点";
+        };
+
+        const copyCode = (code) => {
+            navigator.clipboard.writeText(code.code).then(() => {
+                showSuccessToast('充值码已复制');
+            }).catch((err) => {
+                showFailToast('复制失败');
+            });
+        };
+
+        onMounted(() => {
+            loadChargeCodes();
+        });
+
+        return {
+            codes,
+            getCodeAmountTitle,
+            copyCode,
+            loadChargeCodes,
+        }
+    }
+})
+</script>

frontend/src/components/ChargeNoticeBar.vue

@@ -0,0 +1,29 @@
+<template>
+    <van-notice-bar left-icon="volume-o" :text="'购买充值码请添加客服微信：' + contact + '（点击复制微信号）'" @click="copyCode(contact)" />
+</template>
+
+
+<script>
+import { defineComponent } from 'vue';
+
+
+export default defineComponent({
+    props: {
+        contact: String,
+    },
+    setup(props) {
+        const copyCode = (code) => {
+            navigator.clipboard.writeText(code).then(() => {
+                showSuccessToast('客服微信已复制');
+            }).catch((err) => {
+                showFailToast('复制失败');
+            });
+        };
+
+
+        return {
+            copyCode,
+        }
+    }
+})
+</script>

frontend/src/views/tabs/UserView.vue

@@ -1,6 +1,7 @@
 <template>
-  <van-image width="100%" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+  <div style="width:100%; height: 50px;background-color: #3700B3;"></div>
 
+  <charge-notice-bar v-if="user.admin_contact" :contact="user.admin_contact" />
   <!-- 可以使用 CellGroup 作为容器 -->
   <van-cell-group>
     <van-cell size="large" title="账户余额" :value="user.balance ?? '--'" />
@@ -11,28 +12,25 @@
     </van-field>
   </van-cell-group>
 
-  <van-cell-group title="充值码" v-if="user.is_admin">
-    <van-cell v-for="c in codes" size="large" :title="getCodeAmountTitle(c)" :value="c.code" @click="copyCode(c)" />
-  </van-cell-group>
+  <charge-code v-if="user.is_admin === true" />
 
+  <balance-history />
 
 
 </template>
 
 <script setup>
+import BalanceHistory from "@/components/BalanceHistory.vue";
+import ChargeCode from "@/components/ChargeCode.vue";
+import ChargeNoticeBar from "@/components/ChargeNoticeBar.vue";
 import request from "@/utils/request";
 
-const codes = ref({});
 const user = ref({});
 const chargeCode = ref("")
 
 const loadUserInfo = () => {
   request.get("/users/info").then((res) => {
     user.value = res.data;
-
-    if (user.value.is_admin) {
-      loadChargeCodes();
-    }
   }).catch((err) => {
     console.log(err);
   });
@@ -42,17 +40,6 @@ onMounted(() => {
   loadUserInfo();
 });
 
-const loadChargeCodes = () => {
-  if (!user.value.is_admin) {
-    return;
-  }
-
-  request.get("/users/codes").then((res) => {
-    codes.value = res.data;
-  }).catch((err) => {
-    console.log(err);
-  });
-};
 
 const confirmCharge = () => {
   if (!chargeCode.value) {
@@ -80,16 +67,6 @@ const confirmCharge = () => {
     });
 };
 
-const getCodeAmountTitle = (code) => {
-  return code.amount / 100 + " 元/ " + code.amount + " 点";
-};
-
-const copyCode = (c) => {
-  // h5 copy c.code to clipboard
-  navigator.clipboard.writeText(c.code);
-
-  showSuccessToast(getCodeAmountTitle(c) + " 已复制");
-};
 </script>