Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6c43dfed 1 parent 12a8945a

✨ feat(列表项包含小红花数量显示的页面): 新增小红花显示组件

Inline Side-by-side
Showing 4 changed files with 78 additions and 38 deletions
<!--
* @Date: 2022-06-25 03:29:05
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-25 10:26:12
* @FilePath: /tswj/src/components/FlowerIcon/index.vue
* @Description: 文件描述
-->
<template>
<div class="flower" @click="goTo">
<van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" :style="{ verticalAlign: align }" />
<span :style="{ color }">&nbsp;{{ qty }}</span>
</div>
<!-- <div class="global-center" style="color: #222222;" @click="goTo">
<van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" :style="{ verticalAlign: align }" />
<span>&nbsp;{{ qty }}</span>
</div> -->
</template>
<script setup>
import { icon_flower } from '@/utils/generateIcons.js'
const props = defineProps({
qty: Number,
color: String,
align: String,
})
const emit = defineEmits(['on-click']);
const goTo = () => {
emit('on-click', true)
}
</script>
<style lang="less" scoped>
.flower {
text-align: center;
position: absolute;
top: 40%;
right: 0.5rem;
color: #713610;
}
</style>
......@@ -2,24 +2,19 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 10:20:34
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-07 14:50:28
* @FilePath: /tswj/src/components/RankingList/index.vue
* @LastEditTime: 2022-06-25 10:17:55
* @FilePath: /tswj/src/components/RankingItem/index.vue
-->
<template>
<div class="wrapper">
<van-row>
<van-col span="2" class="rank">
<div v-if="indexKey < 3" class="avatar">
<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 :class="[{ 'text': indexKey >= 3 }, { 'avatar': indexKey < 3 }]">
<van-icon v-if="indexKey < 3" :name="iconRanking(indexKey)" size="1.75rem" />
<span v-else>{{ indexKey + 1 }}&nbsp;</span>
</div>
<div v-else class="text">{{ indexKey + 1 }}</div>
</van-col>
<!-- FIXME: 高度先统一，以后有问题再说 -->
<!-- <van-col span="18" :class="{ 'content-wrapper': !rankInfo.multi_name }"> -->
<van-col span="18" class="content-wrapper">
<!-- <div :class="[rankInfo.multi_name ? 'height6rem' : 'height3rem', 'kg-name']" -->
<div :class="[rankInfo.multi_name ? 'height3rem' : 'height3rem', 'kg-name']"
@click="go('/client/chooseBook', { kg_id: rankInfo.id })">
<van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
......@@ -29,8 +24,6 @@
</van-col>
<van-col span="20">
<div v-if="rankInfo.multi_name" style="margin-left: 0.5rem;">
<!-- <p style="line-height: 2;">{{ rankInfo.multi_name[0] }}</p>
<p>{{ rankInfo.multi_name[1] }}</p> -->
<p>{{ rankInfo.multi_name[0] }}<br />{{ rankInfo.multi_name[1] }}</p>
</div>
<p v-else style="margin-left: 0.5rem;">
......@@ -41,24 +34,40 @@
</div>
</van-col>
<van-col>
<div class="flower" @click="go('/client/donateList', { kg_id: rankInfo.id })">
<van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />&nbsp;{{
rankInfo.qty }}
</div>
<flower-icon :qty="rankInfo.qty" align="bottom" @on-click="onFlowerClick" />
</van-col>
</van-row>
</div>
</template>
<script setup>
import { icon_logo, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js'
import { icon_logo, icon_ranking1, icon_ranking2, icon_ranking3 } from '@/utils/generateIcons.js'
import { ref } from 'vue'
import _ from 'lodash'
import FlowerIcon from '@/components/FlowerIcon'
import { useGo } from '@/hooks/useGo'
const go = useGo()
const iconRanking = (index) => {
switch (index) {
case 0:
return icon_ranking1
case 1:
return icon_ranking2
case 2:
return icon_ranking3
default:
return 0
}
}
const onFlowerClick = (v) => {
if (v) {
go('/client/donateList', { kg_id: rankInfo.value.id })
}
}
// eslint-disable-next-line no-unused-vars
const props = defineProps({
item: {
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 13:51:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-25 00:29:43
* @LastEditTime: 2022-06-25 10:28:13
* @FilePath: /tswj/src/views/client/donateList.vue
* @Description: 幼儿园捐赠人捐赠金额排行榜
-->
......@@ -29,10 +29,7 @@
</div>
</van-col>
<van-col>
<div class="flower">
<van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />&nbsp;{{
kgInfo.kg_total }}
</div>
<flower-icon :qty="kgInfo.kg_total" align="bottom" />
</van-col>
</van-row>
</div>
......@@ -51,10 +48,7 @@
</div>
</van-col>
<van-col span="6" style="color: #222222; text-align: right; font-size: 1rem;">
<div class="global-center">
<van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
<span>&nbsp;2</span>
</div>
<flower-icon :qty="item.qty" align="top" color="#222222" />
</van-col>
</van-row>
</div>
......@@ -71,6 +65,7 @@ import { useTitle } from '@/utils/generatePackage.js'
import { icon_avatar, no_image, icon_flower, icon_logo } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { kgDonateListAPI } from '@/api/C/kg.js'
import FlowerIcon from '@/components/FlowerIcon'
const $route = useRoute()
useTitle($route.meta.title);
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 13:51:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-25 01:11:12
* @LastEditTime: 2022-06-25 10:30:13
* @FilePath: /tswj/src/views/client/rankList.vue
* @Description: 幼儿园儿童捐赠金额排行榜
-->
......@@ -27,10 +27,7 @@
</div>
</van-col>
<van-col>
<div class="flower">
<van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />
&nbsp;{{ kgInfo.kg_total }}
</div>
<flower-icon :qty="kgInfo.kg_total" align="bottom" />
</van-col>
</van-row>
</div>
......@@ -41,7 +38,7 @@
<van-row style="padding: 0.5rem;">
<van-col span="2">
<div :class="['global-center', { 'rank-other': rank.rownum >= 4 }]">
<van-icon v-if="rank.rownum < 4" :name="icon_ranking(rank.rownum)" size="1.75rem" />
<van-icon v-if="rank.rownum < 4" :name="iconRanking(rank.rownum)" size="1.75rem" />
<span v-else>{{ rank.rownum }}&nbsp;</span>
</div>
</van-col>
......@@ -54,10 +51,7 @@
</div>
</van-col>
<van-col span="4" style="text-align: right; font-size: 1rem;">
<div class="global-center" style="color: #222222;">
<van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
<span>&nbsp;{{ rank.qty }}</span>
</div>
<flower-icon :qty="rank.qty" align="top" color="#222222" />
</van-col>
</van-row>
</div>
......@@ -74,11 +68,12 @@ import { useTitle } from '@/utils/generatePackage.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'
import FlowerIcon from '@/components/FlowerIcon'
const $route = useRoute();
useTitle($route.meta.title);
const icon_ranking = (rownum) => {
const iconRanking = (rownum) => {
switch (rownum) {
case 1:
return icon_ranking1
......