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

hookehuyr
Commit 6c43dfedff93767a1a4404b864474b111d9e1757 6c43dfed 1 parent 12a8945a
Showing 4 changed files with 78 additions and 38 deletions
src/components/FlowerIcon/index.vue
src/components/RankingItem/index.vue
src/views/client/donateList.vue
src/views/client/rankList.vue
--- a/src/components/FlowerIcon/index.vue 0 → 100644
View file @6c43dfe
+++ b/src/components/FlowerIcon/index.vue 0 → 100644
View file @6c43dfe
+<!--
+ * @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>
--- a/src/components/RankingItem/index.vue
View file @6c43dfe
+++ b/src/components/RankingItem/index.vue
View file @6c43dfe
@@ -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
+ * @LastEditTime: 2022-06-25 10:17:55
- * @FilePath: /tswj/src/components/RankingList/index.vue
+ * @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">
+        <div :class="[{ 'text': indexKey >= 3 }, { 'avatar': indexKey < 3 }]">
-          <van-icon v-if="indexKey === 0" :name="icon_ranking1" size="1.75rem" />
+          <van-icon v-if="indexKey < 3" :name="iconRanking(indexKey)" size="1.75rem" />
-          <van-icon v-if="indexKey === 1" :name="icon_ranking2" size="1.75rem" />
+          <span v-else>{{ indexKey + 1 }}&nbsp;</span>
-          <van-icon v-if="indexKey === 2" :name="icon_ranking3" size="1.75rem" />
         </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 })">
+        <flower-icon :qty="rankInfo.qty" align="bottom" @on-click="onFlowerClick" />
-          <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />&nbsp;{{
-          rankInfo.qty }}
-        </div>
       </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: {
--- a/src/views/client/donateList.vue
View file @6c43dfe
+++ b/src/views/client/donateList.vue
View file @6c43dfe
@@ -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">
+        <flower-icon :qty="kgInfo.kg_total" align="bottom" />
-          <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />&nbsp;{{
-          kgInfo.kg_total }}
-        </div>
       </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">
+            <flower-icon :qty="item.qty" align="top" color="#222222" />
-              <van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
-              <span>&nbsp;2</span>
-            </div>
           </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);
--- a/src/views/client/rankList.vue
View file @6c43dfe
+++ b/src/views/client/rankList.vue
View file @6c43dfe
@@ -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">
+        <flower-icon :qty="kgInfo.kg_total" align="bottom" />
-          <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />
-          &nbsp;{{ kgInfo.kg_total }}
-        </div>
       </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;">
+          <flower-icon :qty="rank.qty" align="top" 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>
@@ -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