diff --git a/backend/__debug_bin1230854055 b/backend/__debug_bin2218940084
similarity index 99%
rename from backend/__debug_bin1230854055
rename to backend/__debug_bin2218940084
index 6603d7e..f0dad9d 100755
Binary files a/backend/__debug_bin1230854055 and b/backend/__debug_bin2218940084 differ
diff --git a/backend/modules/medias/router.go b/backend/modules/medias/router.go
index 30d22fa..4fb82b5 100755
--- a/backend/modules/medias/router.go
+++ b/backend/modules/medias/router.go
@@ -29,5 +29,5 @@ func (r *Router) Register(router fiber.Router) {
 	group.Get(":hash", r.controller.Show)
 	group.Get(":hash/:type<regex([video|audio])>", r.controller.MediaIndex)
 	group.Get(":hash/:type<regex([video|audio])>/:segment.ts", r.controller.MediaSegment)
-	group.Get(":hash/checkout", r.controller.Checkout)
+	group.Patch(":hash/checkout", r.controller.Checkout)
 }
diff --git a/frontend/src/views/PlayView.vue b/frontend/src/views/PlayView.vue
index 8906eae..bec178e 100644
--- a/frontend/src/views/PlayView.vue
+++ b/frontend/src/views/PlayView.vue
@@ -22,7 +22,7 @@
       </template>
 
       <template v-else>
-        <van-row gutter="20">
+        <van-row gutter="20" v-if="!pageLoading">
           <van-col span="12">
             <van-button type="primary" plain round @click="play(item.hash, 'video')" size="large" block>看视频</van-button>
           </van-col>
@@ -43,6 +43,7 @@ import { onBeforeUnmount, onMounted } from "vue";
 
 const router = useRouter();
 const route = useRoute();
+const pageLoading = ref(true)
 
 const item = ref({
   title: "加载中...",
@@ -77,6 +78,53 @@ onMounted(() => {
   });
 });
 
+const buy = () => {
+  // get use balance
+  request
+    .get("/users/info")
+    .then((res) => {
+      if (res.data.balance < item.value.price) {
+        showConfirmDialog({
+          title: '余额不足',
+          message: `您的账户余额为 ${res.data.balance} 点，不足以购买此视频。是否前往充值？`,
+        })
+          .then(() => {
+            router.replace({
+              name: "tab.user",
+              params: {
+                tenant: route.params.tenant,
+              },
+            });
+          })
+          .catch(() => {
+            return;
+          });
+
+        return;
+      }
+
+      showConfirmDialog({
+        title: '购买确认',
+        message: `您的账户余额为 ${res.data.balance} 点，购买此视频将花费 ${item.value.price} 点。是否确认购买？`,
+      })
+        .then(() => {
+          request
+            .patch(`/medias/${route.params.hash}/checkout`)
+            .then((res) => {
+              showSuccessToast('购买成功');
+              loadMedia(route.params.hash);
+            })
+            .catch((err) => {
+              showFailToast('购买失败: ' + err.response.data.message);
+            });
+        })
+        .catch(() => {
+          return;
+        });
+    });
+
+};
+
 const onClickLeft = () => {
   if (route.meta.from?.name) {
     router.back();
@@ -91,17 +139,18 @@ const onClickLeft = () => {
 };
 
 const loadMedia = (hash) => {
-  setTimeout(() => {
-    request
-      .get(`/medias/${hash}`)
-      .then((res) => {
-        console.log(res);
-        item.value = res.data;
-      })
-      .catch((err) => {
-        console.error("ERROR", err);
-      });
-  }, 1000);
+  request
+    .get(`/medias/${hash}`)
+    .then((res) => {
+      console.log(res);
+      item.value = res.data;
+    })
+    .catch((err) => {
+      console.error("ERROR", err);
+    })
+    .finally(() => {
+      pageLoading.value = false
+    });
 };
 
 const play = (hash, type) => {