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 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-25 18:03:54 3 * @Date: 2022-05-25 18:03:54
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-05-31 11:59:59 5 + * @LastEditTime: 2022-05-31 17:42:23
6 * @FilePath: /tswj/src/router/routes/modules/client/index.js 6 * @FilePath: /tswj/src/router/routes/modules/client/index.js
7 * @Description: 家长端展示页路由表 7 * @Description: 家长端展示页路由表
8 */ 8 */
...@@ -41,6 +41,14 @@ const index = [{ ...@@ -41,6 +41,14 @@ const index = [{
41 }, 41 },
42 children: [] 42 children: []
43 }, { 43 }, {
44 + path: '/client/rankList',
45 + name: '幼儿园儿童捐赠金额排行榜',
46 + component: () => import('@/views/client/rankList.vue'),
47 + meta: {
48 + title: '排行榜'
49 + },
50 + children: []
51 +}, {
44 path: '/client/chooseBook', 52 path: '/client/chooseBook',
45 name: '客户端选择爱心书籍', 53 name: '客户端选择爱心书籍',
46 component: () => import('@/views/client/chooseBook.vue'), 54 component: () => import('@/views/client/chooseBook.vue'),
......
1 +/*
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-17 11:34:35
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-05-31 17:38:05
6 + * @FilePath: /tswj/src/utils/generateIcons.js
7 + * @Description: 图标集合
8 + */
1 import icon_video from '@images/video.png' 9 import icon_video from '@images/video.png'
2 import icon_up from '@images/icon-guanbi@2x.png' 10 import icon_up from '@images/icon-guanbi@2x.png'
3 import icon_down from '@images/icon-zhankai@2x.png' 11 import icon_down from '@images/icon-zhankai@2x.png'
...@@ -11,6 +19,13 @@ import icon_shoucang1 from '@images/icon-shoucang01@2x.png' ...@@ -11,6 +19,13 @@ import icon_shoucang1 from '@images/icon-shoucang01@2x.png'
11 import icon_shoucang2 from '@images/icon-shoucang02@2x.png' 19 import icon_shoucang2 from '@images/icon-shoucang02@2x.png'
12 import icon_liuyan from '@images/icon-liuyan@2x.png' 20 import icon_liuyan from '@images/icon-liuyan@2x.png'
13 import icon_book from '@images/shu@2x.png' 21 import icon_book from '@images/shu@2x.png'
22 +import icon_me from '@images/icon-my@2x.png'
23 +import icon_home from '@images/icon-home@2x.png'
24 +import icon_rank from '@images/icon-paihang@2x.png'
25 +import icon_ranking1 from '@images/1@2x.png'
26 +import icon_ranking2 from '@images/2@2x.png'
27 +import icon_ranking3 from '@images/3@2x.png'
28 +import icon_flower from '@images/xiaohua@2x.png'
14 29
15 export { 30 export {
16 icon_video, 31 icon_video,
...@@ -26,4 +41,11 @@ export { ...@@ -26,4 +41,11 @@ export {
26 icon_shoucang1, 41 icon_shoucang1,
27 icon_shoucang2, 42 icon_shoucang2,
28 icon_book, 43 icon_book,
44 + icon_me,
45 + icon_home,
46 + icon_rank,
47 + icon_ranking1,
48 + icon_ranking2,
49 + icon_ranking3,
50 + icon_flower,
29 } 51 }
......
1 +<!--
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-30 13:51:47
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-05-31 18:08:05
6 + * @FilePath: /tswj/src/views/client/donateList.vue
7 + * @Description: 幼儿园儿童捐赠金额排行榜
8 +-->
9 +<template>
10 + <div class="wrapper">
11 + <van-row>
12 + <van-col span="20" style="padding: 1rem 0.5rem 1rem 0;">
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%);">
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;" />
17 + </van-col>
18 + <van-col span="20">
19 + <div v-if="kgInfo.multi_name" style="margin-left: 1.5rem;">
20 + <p>{{ kgInfo.multi_name[0] }}</p>
21 + <p>{{ kgInfo.multi_name[1] }}</p>
22 + </div>
23 + <p v-else style="margin-left: 1.5rem;">
24 + {{ kgInfo.name }}
25 + </p>
26 + </van-col>
27 + </van-row>
28 + </div>
29 + </van-col>
30 + <van-col span="4">
31 + <div class="flower">
32 + <van-icon :name="icon_flower" color="#c5c5c5" size="1.5rem" style="vertical-align: bottom;" />&nbsp;3000
33 + </div>
34 + </van-col>
35 + </van-row>
36 + </div>
37 + <div v-for="(rank, indexKey) in infoList" :key="indexKey" class="van-hairline--bottom">
38 + <van-row style="padding: 0.5rem;">
39 + <van-col span="2">
40 + <div v-if="indexKey < 3" class="glob-center">
41 + <van-icon v-if="indexKey === 0" :name="icon_ranking1" size="1.75rem" />
42 + <van-icon v-if="indexKey === 1" :name="icon_ranking2" size="1.75rem" />
43 + <van-icon v-if="indexKey === 2" :name="icon_ranking3" size="1.75rem" />
44 + </div>
45 + <div v-else class="glob-center" style="text-align: center; color: #84909F;">{{ indexKey + 1 }}&nbsp;</div>
46 + </van-col>
47 + <van-col span="4">
48 + <van-image v-if="rank.avatar" round width="3rem" height="3rem" :src="rank.avatar ? rank.avatar : icon_avatar" />
49 + </van-col>
50 + <van-col span="12">
51 + <div class="name-info glob-center">
52 + <p>{{ rank.name }}</p>
53 + </div>
54 + </van-col>
55 + <van-col span="6" style="text-align: right; font-size: 1rem;">
56 + <div class="glob-center" style="color: #222222;">
57 + <van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
58 + <span>&nbsp;2000</span>
59 + </div>
60 + </van-col>
61 + </van-row>
62 + </div>
63 +</template>
64 +
65 +<script setup>
66 +import { ref } from 'vue'
67 +import { useRoute, useRouter } from 'vue-router'
68 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
69 +//import { } from '@/utils/generateModules.js'
70 +import { icon_avatar, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js'
71 +//import { } from '@/composables'
72 +const $route = useRoute();
73 +const $router = useRouter();
74 +useTitle($route.meta.title);
75 +
76 +const infoList = ref([{
77 + avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
78 + name: '杨妮妮'
79 +}, {
80 + avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
81 + name: '杨妮妮'
82 +}, {
83 + avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
84 + name: '杨妮妮'
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 +
93 +const kgInfo = ref({
94 + name: '杨浦民办科技幼稚园',
95 + multi_name: '',
96 + avatar: '',
97 +})
98 +// TEMP: 测试数据
99 +// kgInfo.value.name = kgInfo.value.name + ' ' + kgInfo.value.name;
100 +// 有空格分割name
101 +if (kgInfo.value.name.indexOf(' ') > -1) {
102 + kgInfo.value.multi_name = kgInfo.value.name.split(' ');
103 +}
104 +</script>
105 +
106 +<style lang="less" scoped>
107 +.wrapper {
108 + padding: 0 2rem 0 0.5rem;
109 + background-color: #F7F7F7;
110 + position: relative;
111 +
112 + .rank {
113 + position: relative;
114 +
115 + .avatar {
116 + position: absolute;
117 + top: 0;
118 + left: 20%;
119 + }
120 +
121 + .text {
122 + position: absolute;
123 + top: 0.5rem;
124 + left: 40%;
125 + color: #84909F;
126 + }
127 + }
128 +
129 + .flower {
130 + text-align: center;
131 + position: absolute;
132 + top: 40%;
133 + color: #713610;
134 + font-size: 1.25rem;
135 + }
136 +
137 + .kg-name {
138 + position: relative;
139 + height: 3rem;
140 + }
141 +
142 + .heightLow {
143 + height: 3rem;
144 + }
145 +
146 + .heightHigh {
147 + height: 6rem;
148 + }
149 +}
150 +</style>