✨ feat(幼儿园捐赠排行榜): API联调

+/*
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-18 21:12:23
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-01 11:06:29
+ * @FilePath: /tswj/src/api/C/kg.js
+ * @Description: 幼儿园相关接口
+ */
 import { fn, fetch } from '@/api/fn';
 
 const Api = {
   KG_LIST: '/srv/?a=kg_list',
+  KG_DONATE_LIST: '/srv/?a=donate_list',
 }
 
 /**
@@ -10,3 +19,12 @@ const Api = {
  * @returns {array} data
  */
 export const kgListAPI = (params) => fn(fetch.get(Api.KG_LIST, params));
+
+/**
+ * @description 幼儿园捐赠列表页
+ * @param {*} kg_id 幼儿园ID
+ * @param {*} limit 20
+ * @param {*} offset 0
+ * @returns {array} data
+ */
+export const kgDonateListAPI = (params) => fn(fetch.get(Api.KG_DONATE_LIST, params));

@@ -2,18 +2,18 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-30 13:51:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-05-31 17:45:22
+ * @LastEditTime: 2022-06-01 15:02:10
  * @FilePath: /tswj/src/views/client/donateList.vue
  * @Description: 幼儿园捐赠人捐赠金额排行榜
 -->
 <template>
   <div class="wrapper">
     <van-row>
-      <van-col span="20" style="padding: 1rem 0.5rem 1rem 0;">
+      <van-col span="18" style="padding: 1rem 0.5rem 1rem 0;">
         <div :class="[kgInfo.multi_name ? 'heightHigh' : 'heightLow', 'kg-name']">
           <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
             <van-col span="4">
-              <van-image round width="4rem" height="4rem" :src="kgInfo.avatar ? kgInfo.avatar : icon_avatar" style="vertical-align: text-bottom;" />
+              <van-image round width="4rem" height="4rem" :src="kgInfo.kg_logo ? kgInfo.kg_logo : icon_logo" style="vertical-align: text-bottom;" />
             </van-col>
             <van-col span="20">
               <div v-if="kgInfo.multi_name" style="margin-left: 1.5rem;">
@@ -21,84 +21,102 @@
                 <p>{{ kgInfo.multi_name[1] }}</p>
               </div>
               <p v-else style="margin-left: 1.5rem;">
-                {{ kgInfo.name }}
+                {{ kgInfo.kg_name }}
               </p>
             </van-col>
           </van-row>
         </div>
       </van-col>
-      <van-col span="4">
+      <van-col span="6">
         <div class="flower">
-          <van-icon :name="icon_flower" color="#c5c5c5" size="1.5rem" style="vertical-align: bottom;" />&nbsp;3000
+          <van-icon :name="icon_flower" color="#c5c5c5" size="1.5rem" style="vertical-align: bottom;" />&nbsp;{{ kgInfo.kg_total }}
         </div>
       </van-col>
     </van-row>
   </div>
+  <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" :immediate-check="false" @load="onLoad">
+    <template v-for="(item, key) in donateList" :key="key">
       <div class="van-hairline--bottom">
         <van-row style="padding: 0.5rem 1rem;">
           <van-col span="4">
-        <van-image v-if="info.avatar" round width="3rem" height="3rem" :src="info.avatar ? info.avatar : icon_avatar" />
+            <van-image round width="3rem" height="3rem" :src="item.avatar ? item.avatar : icon_avatar" />
           </van-col>
-      <van-col span="16">
-        <div class="name-info" style="position: relative; top: 50%; transform: translateY(-50%);">
-          <p>{{ info.name }}</p>
-          <p style="color: #C5C5C5;">2022-05-27</p>
+          <van-col span="14">
+            <div class="name-info glob-center">
+              <p>{{ item.name }}</p>
+              <p style="color: #C5C5C5;">{{ item.donate_time }}</p>
             </div>
           </van-col>
-      <van-col span="4" style="text-align: right; font-size: 1rem;">
-        <div style="color: #222222;position: relative; top: 50%; transform: translateY(-50%);">
+          <van-col span="6" style="color: #222222; text-align: right; font-size: 1rem;">
+            <div class="glob-center">
               <van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
               <span>&nbsp;2</span>
             </div>
           </van-col>
         </van-row>
       </div>
+    </template>
+  </van-list>
+  <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无明细" />
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
-import { icon_avatar, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js'
+import { icon_avatar, no_image, icon_flower, icon_logo } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
+import { kgDonateListAPI } from '@/api/C/kg.js'
+
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
 
-const info = ref({
-  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
-  name: '杨妮妮'
-}, {
-  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
-  name: '杨妮妮'
-}, {
-  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
-  name: '杨妮妮'
-}, {
-  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
-  name: '杨妮妮'
-}, {
-  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
-  name: '杨妮妮'
-})
+const kgInfo = ref({});
+const kg_id = $route.query.kg_id;
+const donateList = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const limit = ref(10)
+const offset = ref(0)
+const finishedTextStatus = ref(false);
+const emptyStatus = ref(false);
 
-const kgInfo = ref({
-  name: '杨浦民办科技幼稚园',
-  multi_name: '',
-  avatar: '',
+onMounted(async () => {
+  const { data } = await kgDonateListAPI({ kg_id, limit: limit.value, offset: offset.value });
+  kgInfo.value = data;
+  donateList.value = data.donate_list;
+  offset.value = donateList.value.length;
+  // 有空格分割name
+  if (kgInfo.value.kg_name.indexOf(' ') > -1) {
+    kgInfo.value.multi_name = kgInfo.value.kg_name.split(' ');
+  }
 })
-// TEMP: 测试数据
-// kgInfo.value.name = kgInfo.value.name + ' ' + kgInfo.value.name;
-// 有空格分割name
-if (kgInfo.value.name.indexOf(' ') > -1) {
-  kgInfo.value.multi_name = kgInfo.value.name.split(' ');
+
+
+const onLoad = async () => {
+  const { data } = await kgDonateListAPI({ kg_id, limit: limit.value, offset: offset.value });
+  donateList.value = [...donateList.value, ...data.donate_list];
+  // donateList.value = _.uniqBy(donateList.value, 'id');
+  offset.value = donateList.value.length;
+  loading.value = false;
+  // 数据全部加载完成
+  if (!data.donate_list.length) {
+    // 加载状态结束
+    finished.value = true;
+  }
+  if (!donateList.value.length) {
+    finishedTextStatus.value = false;
+    emptyStatus.value = true;
+  }
 }
 </script>
 
 <style lang="less" scoped>
 .wrapper {
-  padding: 0 2rem 0 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
   background-color: #F7F7F7;
   position: relative;
 
@@ -123,6 +141,7 @@ if (kgInfo.value.name.indexOf(' ') > -1) {
     text-align: center;
     position: absolute;
     top: 40%;
+    right: 1rem;
     color: #713610;
     font-size: 1.25rem;
   }