fix: issues

frontend/src/components/ListItemCard.vue

@@ -0,0 +1,30 @@
+<template>
+  <van-card
+    v-for="item in list"
+    :key="item.Hash"
+    price="2.00"
+    desc="描述信息"
+    title="商品标题"
+    thumb="https://fastly.jsdelivr.net/van-listt/assets/ipad.jpeg"
+    lazy-load="true"
+    @click="play(item)"
+  >
+    <template #tags>
+      <van-space>
+        <van-tag plain type="primary">视频</van-tag>
+        <van-tag plain type="primary">音频</van-tag>
+        <van-tag plain type="primary">PDF</van-tag>
+      </van-space>
+    </template>
+  </van-card>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true,
+  },
+});
+</script>

frontend/src/utils/request.js

@@ -0,0 +1,30 @@
+import axios from 'axios'; // 引入axios
+
+console.log("__GA: ", __GA)
+const service = axios.create({
+    baseURL: "/v1",
+    timeout: 30,
+    headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + __GA,
+    },
+})
+
+// http request 拦截器
+service.interceptors.request.use(
+    (config) => {
+        return config
+    },
+    (error) => {
+    }
+)
+
+// http response 拦截器
+service.interceptors.response.use(
+    (response) => {
+        return response
+    },
+    (error) => {
+    }
+)
+export default service

frontend/src/views/tabs/HomeView.vue

@@ -3,27 +3,26 @@
 
   <van-back-top bottom="80" />
 
-  <van-list
-    v-model:loading="loading"
-    :finished="finished"
-    finished-text="没有更多了"
-    @load="onLoad"
-  >
-    <van-card
-      v-for="item in list"
-      :key="item"
-      price="2.00"
-      desc="描述信息"
-      title="商品标题"
-      thumb="https://fastly.jsdelivr.net/van-listt/assets/ipad.jpeg"
-      lazy-load="true"
-      @click="play(item)"
-    >
+  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" offset="100" @load="loadData">
+    <van-card v-for="item in items" :key="item" :desc="item.title" :thumb="item.poster" @click="play(item)">
+      <template #title>
+        <span>{{ item.title }}</span>
+      </template>
+      <template #price>
+        <template v-if="item.discount == 100"> 价格：{{ item.price }} 点 </template>
+
+        <template v-else>
+          <del>{{ item.price }}</del>
+          <span>{{ (item.price * item.discount) / 100 }}</span>
+        </template>
+      </template>
+
       <template #tags>
         <van-space>
-          <van-tag plain type="primary">视频</van-tag>
-          <van-tag plain type="primary">音频</van-tag>
-          <van-tag plain type="primary">PDF</van-tag>
+          <van-tag v-for="resource in item.resources" plain type="primary">
+            <template v-if="resource == 'video'">视频</template>
+            <template v-if="resource == 'audio'">音频</template>
+          </van-tag>
         </van-space>
       </template>
     </van-card>
@@ -33,35 +32,58 @@
 <script setup>
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import request from "@/utils/request";
 
 const router = useRouter();
 
 const search = ref("");
-const list = ref([]);
+const items = ref([]);
 const loading = ref(false);
 const finished = ref(false);
 
-const onLoad = () => {
-  // 异步更新数据
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-  setTimeout(() => {
-    for (let i = 0; i < 10; i++) {
-      list.value.push(list.value.length + 1);
-    }
+const offset = ref("");
 
-    // 加载状态结束
-    loading.value = false;
-
-    // 数据全部加载完成
-    if (list.value.length >= 40) {
-      finished.value = true;
-    }
-  }, 1000);
-};
+const onLoad = () => { };
 
 const play = (item) => {
   // vue router goto play view
-  console.log("play", item);
+  console.log("play -", item);
   router.push({ name: "play", params: { id: item } });
 };
+
+const loadData = () => {
+  loading.value = true;
+  console.log("loadData");
+  // request /v1/medias
+  const data = {
+    offset: offset.value,
+    action: 0,
+  };
+  request
+    .post("/medias", data)
+    .then((res) => {
+      console.log(res);
+      if (offset.value == "") {
+        items.value = res.data;
+      } else {
+        items.value = items.value.concat(res.data);
+        if (res.data.length == 0) {
+          finished.value = true;
+        }
+      }
+
+      offset.value = res.data[res.data.length - 1].hash;
+    })
+    .catch((err) => {
+      console.error(err);
+    })
+    .finally(() => {
+      loading.value = true;
+      // finished.value = true;
+    });
+};
+
+onMounted(() => {
+  // loadData();
+});
 </script>