Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
02dec58a 1 parent 0a49c07f

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

Inline Side-by-side
Showing 3 changed files with 88 additions and 62 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-18 21:12:23 3 * @Date: 2022-05-18 21:12:23
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-06-01 11:06:29 5 + * @LastEditTime: 2022-06-01 15:32:49
6 * @FilePath: /tswj/src/api/C/kg.js 6 * @FilePath: /tswj/src/api/C/kg.js
7 * @Description: 幼儿园相关接口 7 * @Description: 幼儿园相关接口
8 */ 8 */
...@@ -11,6 +11,7 @@ import { fn, fetch } from '@/api/fn'; ...@@ -11,6 +11,7 @@ import { fn, fetch } from '@/api/fn';
11 const Api = { 11 const Api = {
12 KG_LIST: '/srv/?a=kg_list', 12 KG_LIST: '/srv/?a=kg_list',
13 KG_DONATE_LIST: '/srv/?a=donate_list', 13 KG_DONATE_LIST: '/srv/?a=donate_list',
14 + KG_DONATE_RANK: '/srv/?a=donate_rank',
14 } 15 }
15 16
16 /** 17 /**
...@@ -28,3 +29,12 @@ export const kgListAPI = (params) => fn(fetch.get(Api.KG_LIST, params)); ...@@ -28,3 +29,12 @@ export const kgListAPI = (params) => fn(fetch.get(Api.KG_LIST, params));
28 * @returns {array} data 29 * @returns {array} data
29 */ 30 */
30 export const kgDonateListAPI = (params) => fn(fetch.get(Api.KG_DONATE_LIST, params)); 31 export const kgDonateListAPI = (params) => fn(fetch.get(Api.KG_DONATE_LIST, params));
32 +
33 +/**
34 + * @description 幼儿园捐赠排行榜
35 + * @param {*} kg_id 幼儿园ID
36 + * @param {*} limit 20
37 + * @param {*} offset 0
38 + * @returns {array} data
39 + */
40 +export const kgDonateRankAPI = (params) => fn(fetch.get(Api.KG_DONATE_RANK, params));
......
...@@ -74,7 +74,10 @@ export default { ...@@ -74,7 +74,10 @@ export default {
74 }, 74 },
75 toRank () { 75 toRank () {
76 this.$router.push({ 76 this.$router.push({
77 - path: '/client/rankList' 77 + path: '/client/rankList',
78 + query: {
79 + kg_id: this.$route.query.kg_id
80 + }
78 }); 81 });
79 } 82 }
80 } 83 }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-30 13:51:47 3 * @Date: 2022-05-30 13:51:47
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-05-31 18:08:05 5 + * @LastEditTime: 2022-06-01 15:47:05
6 * @FilePath: /tswj/src/views/client/donateList.vue 6 * @FilePath: /tswj/src/views/client/donateList.vue
7 * @Description: 幼儿园儿童捐赠金额排行榜 7 * @Description: 幼儿园儿童捐赠金额排行榜
8 --> 8 -->
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
13 <div :class="[kgInfo.multi_name ? 'heightHigh' : 'heightLow', 'kg-name']"> 13 <div :class="[kgInfo.multi_name ? 'heightHigh' : 'heightLow', 'kg-name']">
14 <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);"> 14 <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
15 <van-col span="4"> 15 <van-col span="4">
16 - <van-image round width="4rem" height="4rem" :src="kgInfo.avatar ? kgInfo.avatar : icon_avatar" style="vertical-align: text-bottom;" /> 16 + <van-image round width="4rem" height="4rem" :src="kgInfo.kg_logo ? kgInfo.kg_logo : icon_logo" style="vertical-align: text-bottom;" />
17 </van-col> 17 </van-col>
18 <van-col span="20"> 18 <van-col span="20">
19 <div v-if="kgInfo.multi_name" style="margin-left: 1.5rem;"> 19 <div v-if="kgInfo.multi_name" style="margin-left: 1.5rem;">
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 <p>{{ kgInfo.multi_name[1] }}</p> 21 <p>{{ kgInfo.multi_name[1] }}</p>
22 </div> 22 </div>
23 <p v-else style="margin-left: 1.5rem;"> 23 <p v-else style="margin-left: 1.5rem;">
24 - {{ kgInfo.name }} 24 + {{ kgInfo.kg_name }}
25 </p> 25 </p>
26 </van-col> 26 </van-col>
27 </van-row> 27 </van-row>
...@@ -34,78 +34,91 @@ ...@@ -34,78 +34,91 @@
34 </van-col> 34 </van-col>
35 </van-row> 35 </van-row>
36 </div> 36 </div>
37 - <div v-for="(rank, indexKey) in infoList" :key="indexKey" class="van-hairline--bottom"> 37 + <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" :immediate-check="false" @load="onLoad">
38 - <van-row style="padding: 0.5rem;"> 38 + <div v-for="(rank, indexKey) in donateRankList" :key="indexKey" class="van-hairline--bottom">
39 - <van-col span="2"> 39 + <van-row style="padding: 0.5rem;">
40 - <div v-if="indexKey < 3" class="glob-center"> 40 + <van-col span="2">
41 - <van-icon v-if="indexKey === 0" :name="icon_ranking1" size="1.75rem" /> 41 + <div v-if="indexKey < 3" class="glob-center">
42 - <van-icon v-if="indexKey === 1" :name="icon_ranking2" size="1.75rem" /> 42 + <van-icon v-if="indexKey === 0" :name="icon_ranking1" size="1.75rem" />
43 - <van-icon v-if="indexKey === 2" :name="icon_ranking3" size="1.75rem" /> 43 + <van-icon v-if="indexKey === 1" :name="icon_ranking2" size="1.75rem" />
44 - </div> 44 + <van-icon v-if="indexKey === 2" :name="icon_ranking3" size="1.75rem" />
45 - <div v-else class="glob-center" style="text-align: center; color: #84909F;">{{ indexKey + 1 }}&nbsp;</div> 45 + </div>
46 - </van-col> 46 + <div v-else class="glob-center" style="text-align: center; color: #84909F;">{{ indexKey + 1 }}&nbsp;</div>
47 - <van-col span="4"> 47 + </van-col>
48 - <van-image v-if="rank.avatar" round width="3rem" height="3rem" :src="rank.avatar ? rank.avatar : icon_avatar" /> 48 + <van-col span="4">
49 - </van-col> 49 + <van-image round width="3rem" height="3rem" :src="rank.perf_avatar ? rank.perf_avatar : icon_avatar" />
50 - <van-col span="12"> 50 + </van-col>
51 - <div class="name-info glob-center"> 51 + <van-col span="14">
52 - <p>{{ rank.name }}</p> 52 + <div class="name-info glob-center">
53 - </div> 53 + <p>{{ rank.perf_name }}</p>
54 - </van-col> 54 + </div>
55 - <van-col span="6" style="text-align: right; font-size: 1rem;"> 55 + </van-col>
56 - <div class="glob-center" style="color: #222222;"> 56 + <van-col span="4" style="text-align: right; font-size: 1rem;">
57 - <van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" /> 57 + <div class="glob-center" style="color: #222222;">
58 - <span>&nbsp;2000</span> 58 + <van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
59 - </div> 59 + <span>&nbsp;{{ rank.qty }}</span>
60 - </van-col> 60 + </div>
61 - </van-row> 61 + </van-col>
62 - </div> 62 + </van-row>
63 + </div>
64 + </van-list>
65 + <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无明细" />
63 </template> 66 </template>
64 67
65 <script setup> 68 <script setup>
66 -import { ref } from 'vue' 69 +import { ref, onMounted } from 'vue'
67 -import { useRoute, useRouter } from 'vue-router' 70 +import { useRoute } from 'vue-router'
68 -import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js' 71 +import { useTitle } from '@/utils/generatePackage.js'
69 //import { } from '@/utils/generateModules.js' 72 //import { } from '@/utils/generateModules.js'
70 -import { icon_avatar, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js' 73 +import { icon_avatar, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower, icon_logo, no_image } from '@/utils/generateIcons.js'
71 //import { } from '@/composables' 74 //import { } from '@/composables'
75 +import { kgDonateRankAPI } from '@/api/C/kg.js'
72 const $route = useRoute(); 76 const $route = useRoute();
73 -const $router = useRouter();
74 useTitle($route.meta.title); 77 useTitle($route.meta.title);
75 78
76 -const infoList = ref([{ 79 +const kgInfo = ref({});
77 - avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5', 80 +const kg_id = $route.query.kg_id;
78 - name: '杨妮妮' 81 +const donateRankList = ref([])
79 -}, { 82 +const loading = ref(false)
80 - avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5', 83 +const finished = ref(false)
81 - name: '杨妮妮' 84 +const limit = ref(10)
82 -}, { 85 +const offset = ref(0)
83 - avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5', 86 +const finishedTextStatus = ref(false);
84 - name: '杨妮妮' 87 +const emptyStatus = ref(false);
85 -}, {
86 - avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
87 - name: '杨妮妮'
88 -}, {
89 - avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
90 - name: '杨妮妮'
91 -}])
92 88
93 -const kgInfo = ref({ 89 +onMounted(async () => {
94 - name: '杨浦民办科技幼稚园', 90 + const { data } = await kgDonateRankAPI({ kg_id, limit: limit.value, offset: offset.value });
95 - multi_name: '', 91 + kgInfo.value = data;
96 - avatar: '', 92 + donateRankList.value = data.rank_list;
93 + offset.value = donateRankList.value.length;
94 + // 有空格分割name
95 + if (kgInfo.value.kg_name.indexOf(' ') > -1) {
96 + kgInfo.value.multi_name = kgInfo.value.kg_name.split(' ');
97 + }
97 }) 98 })
98 -// TEMP: 测试数据 99 +
99 -// kgInfo.value.name = kgInfo.value.name + ' ' + kgInfo.value.name; 100 +
100 -// 有空格分割name 101 +const onLoad = async () => {
101 -if (kgInfo.value.name.indexOf(' ') > -1) { 102 + const { data } = await kgDonateRankAPI({ kg_id, limit: limit.value, offset: offset.value });
102 - kgInfo.value.multi_name = kgInfo.value.name.split(' '); 103 + donateRankList.value = [...donateRankList.value, ...data.rank_list];
104 + offset.value = donateRankList.value.length;
105 + loading.value = false;
106 + // 数据全部加载完成
107 + if (!data.rank_list.length) {
108 + // 加载状态结束
109 + finished.value = true;
110 + }
111 + if (!donateRankList.value.length) {
112 + finishedTextStatus.value = false;
113 + emptyStatus.value = true;
114 + }
103 } 115 }
104 </script> 116 </script>
105 117
106 <style lang="less" scoped> 118 <style lang="less" scoped>
107 .wrapper { 119 .wrapper {
108 - padding: 0 2rem 0 0.5rem; 120 + padding-left: 0.5rem;
121 + padding-right: 1rem;
109 background-color: #F7F7F7; 122 background-color: #F7F7F7;
110 position: relative; 123 position: relative;
111 124
......