Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0d174961 1 parent 921f2596

✨ feat(家长端): 新增儿童捐赠排行榜页面

Inline Side-by-side
Showing 3 changed files with 181 additions and 1 deletions
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-25 18:03:54
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 11:59:59
* @LastEditTime: 2022-05-31 17:42:23
* @FilePath: /tswj/src/router/routes/modules/client/index.js
* @Description: 家长端展示页路由表
*/
......@@ -41,6 +41,14 @@ const index = [{
},
children: []
}, {
path: '/client/rankList',
name: '幼儿园儿童捐赠金额排行榜',
component: () => import('@/views/client/rankList.vue'),
meta: {
title: '排行榜'
},
children: []
}, {
path: '/client/chooseBook',
name: '客户端选择爱心书籍',
component: () => import('@/views/client/chooseBook.vue'),
......
/*
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-17 11:34:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 17:38:05
* @FilePath: /tswj/src/utils/generateIcons.js
* @Description: 图标集合
*/
import icon_video from '@images/video.png'
import icon_up from '@images/icon-guanbi@2x.png'
import icon_down from '@images/icon-zhankai@2x.png'
......@@ -11,6 +19,13 @@ import icon_shoucang1 from '@images/icon-shoucang01@2x.png'
import icon_shoucang2 from '@images/icon-shoucang02@2x.png'
import icon_liuyan from '@images/icon-liuyan@2x.png'
import icon_book from '@images/shu@2x.png'
import icon_me from '@images/icon-my@2x.png'
import icon_home from '@images/icon-home@2x.png'
import icon_rank from '@images/icon-paihang@2x.png'
import icon_ranking1 from '@images/1@2x.png'
import icon_ranking2 from '@images/2@2x.png'
import icon_ranking3 from '@images/3@2x.png'
import icon_flower from '@images/xiaohua@2x.png'
export {
icon_video,
......@@ -26,4 +41,11 @@ export {
icon_shoucang1,
icon_shoucang2,
icon_book,
icon_me,
icon_home,
icon_rank,
icon_ranking1,
icon_ranking2,
icon_ranking3,
icon_flower,
}
......
<!--
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 13:51:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 18:08:05
* @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;">
<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-col>
<van-col span="20">
<div v-if="kgInfo.multi_name" style="margin-left: 1.5rem;">
<p>{{ kgInfo.multi_name[0] }}</p>
<p>{{ kgInfo.multi_name[1] }}</p>
</div>
<p v-else style="margin-left: 1.5rem;">
{{ kgInfo.name }}
</p>
</van-col>
</van-row>
</div>
</van-col>
<van-col span="4">
<div class="flower">
<van-icon :name="icon_flower" color="#c5c5c5" size="1.5rem" style="vertical-align: bottom;" />&nbsp;3000
</div>
</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>
</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 { } from '@/utils/generateModules.js'
import { icon_avatar, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js'
//import { } from '@/composables'
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({
name: '杨浦民办科技幼稚园',
multi_name: '',
avatar: '',
})
// 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(' ');
}
</script>
<style lang="less" scoped>
.wrapper {
padding: 0 2rem 0 0.5rem;
background-color: #F7F7F7;
position: relative;
.rank {
position: relative;
.avatar {
position: absolute;
top: 0;
left: 20%;
}
.text {
position: absolute;
top: 0.5rem;
left: 40%;
color: #84909F;
}
}
.flower {
text-align: center;
position: absolute;
top: 40%;
color: #713610;
font-size: 1.25rem;
}
.kg-name {
position: relative;
height: 3rem;
}
.heightLow {
height: 3rem;
}
.heightHigh {
height: 6rem;
}
}
</style>