排行榜新增搜索

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-30 13:51:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-25 12:26:56
+ * @LastEditTime: 2024-12-03 15:13:35
  * @FilePath: /tswj/src/views/client/rankList.vue
  * @Description: 幼儿园儿童捐赠金额排行榜
 -->
@@ -32,6 +32,13 @@
     </van-row>
   </div>
 
+  <div style="background-color: #F7F7F7; height: auto; padding: 1rem; padding-top: 0;">
+      <div style="background-color: #FFF; border-radius: 1rem; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between;">
+        <input type="text" v-model="perf_name" placeholder="请输入要搜索的表演者姓名" @blur="onSearch" style="border: 0; width: 100%;">
+        <van-icon name="search" />
+      </div>
+    </div>
+
   <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
     @load="onLoad">
     <div v-for="(rank, indexKey) in donateRankList" :key="indexKey" class="van-hairline--bottom">
@@ -95,9 +102,10 @@ const limit = ref(10)
 const offset = ref(0)
 const finishedTextStatus = ref(false);
 const emptyStatus = ref(false);
+const perf_name = ref('');
 
 const onLoad = async () => {
-  const { data } = await kgDonateRankAPI({ kg_id, limit: limit.value, offset: offset.value });
+  const { data } = await kgDonateRankAPI({ kg_id, limit: limit.value, offset: offset.value, perf_name: perf_name.value });
   kgInfo.value = data;
   // 有空格分割name
   if (kgInfo.value.kg_name.indexOf(' ') > -1) {
@@ -118,6 +126,13 @@ const onLoad = async () => {
     emptyStatus.value = false;
   }
 }
+
+const onSearch = () => {
+  offset.value = 0;
+  donateRankList.value = [];
+  finished.value = false;
+  onLoad()
+}
 </script>
 
 <style lang="less" scoped>