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 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-18 21:12:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-01 11:06:29
* @LastEditTime: 2022-06-01 15:32:49
* @FilePath: /tswj/src/api/C/kg.js
* @Description: 幼儿园相关接口
*/
......@@ -11,6 +11,7 @@ import { fn, fetch } from '@/api/fn';
const Api = {
KG_LIST: '/srv/?a=kg_list',
KG_DONATE_LIST: '/srv/?a=donate_list',
KG_DONATE_RANK: '/srv/?a=donate_rank',
}
/**
......@@ -28,3 +29,12 @@ export const kgListAPI = (params) => fn(fetch.get(Api.KG_LIST, params));
* @returns {array} data
*/
export const kgDonateListAPI = (params) => fn(fetch.get(Api.KG_DONATE_LIST, params));
/**
* @description 幼儿园捐赠排行榜
* @param {*} kg_id 幼儿园ID
* @param {*} limit 20
* @param {*} offset 0
* @returns {array} data
*/
export const kgDonateRankAPI = (params) => fn(fetch.get(Api.KG_DONATE_RANK, params));
......
......@@ -74,7 +74,10 @@ export default {
},
toRank () {
this.$router.push({
path: '/client/rankList'
path: '/client/rankList',
query: {
kg_id: this.$route.query.kg_id
}
});
}
}
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 13:51:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 18:08:05
* @LastEditTime: 2022-06-01 15:47:05
* @FilePath: /tswj/src/views/client/donateList.vue
* @Description: 幼儿园儿童捐赠金额排行榜
-->
......@@ -13,7 +13,7 @@
<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,7 +21,7 @@
<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>
......@@ -34,78 +34,91 @@
</van-col>
</van-row>
</div>
<div v-for="(rank, indexKey) in infoList" :key="indexKey" class="van-hairline--bottom">
<van-row style="padding: 0.5rem;">
<van-col span="2">
<div v-if="indexKey < 3" class="glob-center">
<van-icon v-if="indexKey === 0" :name="icon_ranking1" size="1.75rem" />
<van-icon v-if="indexKey === 1" :name="icon_ranking2" size="1.75rem" />
<van-icon v-if="indexKey === 2" :name="icon_ranking3" size="1.75rem" />
</div>
<div v-else class="glob-center" style="text-align: center; color: #84909F;">{{ indexKey + 1 }}&nbsp;</div>
</van-col>
<van-col span="4">
<van-image v-if="rank.avatar" round width="3rem" height="3rem" :src="rank.avatar ? rank.avatar : icon_avatar" />
</van-col>
<van-col span="12">
<div class="name-info glob-center">
<p>{{ rank.name }}</p>
</div>
</van-col>
<van-col span="6" style="text-align: right; font-size: 1rem;">
<div class="glob-center" style="color: #222222;">
<van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
<span>&nbsp;2000</span>
</div>
</van-col>
</van-row>
</div>
<van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" :immediate-check="false" @load="onLoad">
<div v-for="(rank, indexKey) in donateRankList" :key="indexKey" class="van-hairline--bottom">
<van-row style="padding: 0.5rem;">
<van-col span="2">
<div v-if="indexKey < 3" class="glob-center">
<van-icon v-if="indexKey === 0" :name="icon_ranking1" size="1.75rem" />
<van-icon v-if="indexKey === 1" :name="icon_ranking2" size="1.75rem" />
<van-icon v-if="indexKey === 2" :name="icon_ranking3" size="1.75rem" />
</div>
<div v-else class="glob-center" style="text-align: center; color: #84909F;">{{ indexKey + 1 }}&nbsp;</div>
</van-col>
<van-col span="4">
<van-image round width="3rem" height="3rem" :src="rank.perf_avatar ? rank.perf_avatar : icon_avatar" />
</van-col>
<van-col span="14">
<div class="name-info glob-center">
<p>{{ rank.perf_name }}</p>
</div>
</van-col>
<van-col span="4" style="text-align: right; font-size: 1rem;">
<div class="glob-center" style="color: #222222;">
<van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
<span>&nbsp;{{ rank.qty }}</span>
</div>
</van-col>
</van-row>
</div>
</van-list>
<van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无明细" />
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { 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, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower, icon_logo, no_image } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { kgDonateRankAPI } from '@/api/C/kg.js'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const infoList = 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 donateRankList = 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 kgDonateRankAPI({ kg_id, limit: limit.value, offset: offset.value });
kgInfo.value = data;
donateRankList.value = data.rank_list;
offset.value = donateRankList.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 kgDonateRankAPI({ kg_id, limit: limit.value, offset: offset.value });
donateRankList.value = [...donateRankList.value, ...data.rank_list];
offset.value = donateRankList.value.length;
loading.value = false;
// 数据全部加载完成
if (!data.rank_list.length) {
// 加载状态结束
finished.value = true;
}
if (!donateRankList.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;
......