fix: search issues

frontend/src/components/ChargeCode.vue

@@ -1,5 +1,8 @@
 <template>
-    <van-cell-group inset title="充值码">
+    <van-cell-group inset>
+        <template #title>
+            <van-button block size="small" type="primary" plain @click="loadChargeCodes">刷新充值码</van-button>
+        </template>
         <van-cell v-for="c in codes" size="large" :title="getCodeAmountTitle(c)" :value="c.code" @click="copyCode(c)" />
     </van-cell-group>
 </template>

frontend/src/components/List.vue

@@ -1,9 +1,8 @@
 <template>
-  <van-search v-model="search" placeholder="请输入搜索关键词" />
+  <van-search v-if="!bought" v-model="search" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onSearchCancel" />
 
   <van-back-top bottom="80" />
 
-
   <van-list style="padding-bottom: 3em" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
     offset="100" @load="loadData">
     <list-item-card v-for="item in items" :key="item" :item="item" :bought="bought" />
@@ -26,6 +25,17 @@ export default defineComponent({
     const pageLimit = ref(10);
     const offset = ref("");
 
+    const onSearch = () => {
+      items.value = [];
+      offset.value = "";
+      finished.value = false;
+      loadData();
+    };
+
+    const onSearchCancel = () => {
+      search.value = "";
+      onSearch();
+    };
 
     const loadData = () => {
       // request /v1/medias
@@ -34,6 +44,7 @@ export default defineComponent({
         action: 0,
         limit: pageLimit.value,
         bought: props.bought,
+        title: search.value,
       };
 
       request
@@ -69,6 +80,8 @@ export default defineComponent({
       loading,
       finished,
       loadData,
+      onSearch,
+      onSearchCancel,
     };
   },
 });

frontend/src/views/PlayView.vue

@@ -1,20 +1,18 @@
 <template>
   <van-nav-bar :title="item.title" left-text="返回" left-arrow @click-left="onClickLeft" />
   <video id="video" :poster="item.poster"></video>
-  <van-progress v-if="playing" :percentage="100 * currentTime / item.duration" stroke-width="8" :show-pivot="false" />
+  <van-progress v-if="playing" :percentage="(100 * currentTime) / item.duration" stroke-width="8" :show-pivot="false" />
 
   <template v-if="false === item.bought">
     <van-notice-bar left-icon="volume-o" text="未购买的视频、音频默认播放时长为1分钟左右。" />
     <van-button square type="warning" @click="buy()" size="large" block>
-      花费 {{ item.price * item.discount / 100 }} 点 立即购买
+      花费 {{ (item.price * item.discount) / 100 }} 点 立即购买
     </van-button>
   </template>
   <template v-else></template>
 
-
   <div id="container">
     <van-space direction="vertical" fill size="2rem">
-
       <template v-if="playing">
         <van-row>
           <van-col span="24">
@@ -34,7 +32,6 @@
           </van-col>
         </van-row>
       </template>
-
     </van-space>
   </div>
 </template>
@@ -47,118 +44,110 @@ import { onBeforeUnmount, onMounted } from "vue";
 const router = useRouter();
 const route = useRoute();
 
-console.log("router: ", router);
-console.log("route: ", route.meta);
-
 const item = ref({
   title: "加载中...",
-})
+});
 
 const currentTime = ref(0);
 const duration = ref(0);
 const playing = ref(false);
 
 onBeforeUnmount(() => {
-  const player = document.getElementById('video');
+  const player = document.getElementById("video");
   if (player && playing.value) {
     stop();
   }
-})
+});
 
 onMounted(() => {
-  console.log(123123)
   loadMedia(route.params.hash);
-  const player = document.getElementById('video');
-  player.addEventListener('timeupdate', updateTime);
-  player.addEventListener('loadedmetadata', () => {
+  const player = document.getElementById("video");
+  player.addEventListener("timeupdate", updateTime);
+  player.addEventListener("loadedmetadata", () => {
     duration.value = player.duration;
   });
-  player.addEventListener('ended', function () {
+  player.addEventListener("ended", function () {
     console.log("Video ended");
     playing.value = false;
   });
-  player.addEventListener('pause', () => {
+  player.addEventListener("pause", () => {
     playing.value = false;
     player.currentTime = 0;
     currentTime.value = 0;
   });
-})
+});
 
 const onClickLeft = () => {
   if (route.meta.from?.name) {
-    router.back()
+    router.back();
     return;
   }
   router.replace({
-    name: 'tab.home',
+    name: "tab.home",
     params: {
-      tenant: route.params.tenant
-    }
+      tenant: route.params.tenant,
+    },
   });
 };
 
-
 const loadMedia = (hash) => {
-  console.log("loadMedia: ", hash);
   setTimeout(() => {
     request
       .get(`/medias/${hash}`)
       .then((res) => {
-        console.log(res)
+        console.log(res);
         item.value = res.data;
       })
       .catch((err) => {
         console.error("ERROR", err);
-      })
-  }, 1000)
-}
+      });
+  }, 1000);
+};
 
 const play = (hash, type) => {
   playing.value = true;
 
-  const player = document.getElementById('video');
-  const source = `/v1/medias/${hash}/${type}`
+  const player = document.getElementById("video");
+  const source = `/v1/medias/${hash}/${type}`;
   if (Hls.isSupported()) {
     var hls = new Hls({
       xhrSetup: function (xhr, url) {
-        xhr.setRequestHeader('Authorization', 'Bearer ' + __GA);
-      }
+        xhr.setRequestHeader("Authorization", "Bearer " + __GA);
+      },
     });
     hls.loadSource(source);
     hls.attachMedia(player);
     hls.on(Hls.Events.MANIFEST_PARSED, function () {
       player.play();
     });
-  } else if (player.canPlayType('application/vnd.apple.mpegurl')) {
+  } else if (player.canPlayType("application/vnd.apple.mpegurl")) {
     player.src = source;
-    player.addEventListener('loadedmetadata', function () {
+    player.addEventListener("loadedmetadata", function () {
       player.play();
     });
   }
-
-}
+};
 
 const updateTime = () => {
-  const player = document.getElementById('video');
+  const player = document.getElementById("video");
   currentTime.value = player?.currentTime;
 };
 
 const stop = () => {
-  const player = document.getElementById('video');
+  const player = document.getElementById("video");
   if (!player) {
     return;
   }
   player.pause();
   player.currentTime = 0;
   currentTime.value = 0;
-}
+};
 
 const formatTime = (time) => {
   const minutes = Math.floor(time / 60);
   const seconds = Math.floor(time % 60);
-  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
 };
-
 </script>
 
 <style scoped>
@@ -172,4 +161,4 @@ const formatTime = (time) => {
   width: 100%;
   object-fit: fill;
 }
-</style>
+</style>

frontend/src/views/tabs/UserView.vue

@@ -1,5 +1,4 @@
 <template>
-  <div style="width:100%; height: 50px;background-color: #3700B3;"></div>
 
   <charge-notice-bar v-if="user.admin_contact" :contact="user.admin_contact" />
   <!-- 可以使用 CellGroup 作为容器 -->