🦄 refactor: 写法优化

hookehuyr
Commit 12a8945a2e40de9b2c6abe91ccd83654cefca0c3 12a8945a 1 parent 5d6c91e3
Showing 3 changed files with 47 additions and 23 deletions
src/App.vue
src/views/client/donateList.vue
src/views/client/rankList.vue
--- a/src/App.vue
View file @12a8945
+++ b/src/App.vue
View file @12a8945
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-26 23:52:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-14 14:20:03
+ * @LastEditTime: 2022-06-25 00:47:11
  * @FilePath: /tswj/src/App.vue
  * @Description: 
 -->
@@ -86,7 +86,7 @@ body {
   color: red;
 }
-.glob-center {
+.global-center {
   position: relative; 
   top: 50%; 
   transform: translateY(-50%);
--- a/src/views/client/donateList.vue
View file @12a8945
+++ b/src/views/client/donateList.vue
View file @12a8945
@@ -45,13 +45,13 @@
             <van-image round width="3rem" height="3rem" :src="item.avatar ? item.avatar : icon_avatar" />
           </van-col>
           <van-col span="14">
-            <div class="name-info glob-center">
+            <div class="name-info global-center">
               <p>{{ item.name }}</p>
               <p style="color: #C5C5C5;">{{ item.donate_time }}</p>
             </div>
           </van-col>
           <van-col span="6" style="color: #222222; text-align: right; font-size: 1rem;">
-            <div class="glob-center">
+            <div class="global-center">
               <van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
               <span>&nbsp;2</span>
             </div>
--- a/src/views/client/rankList.vue
View file @12a8945
+++ b/src/views/client/rankList.vue
View file @12a8945
@@ -2,62 +2,59 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-30 13:51:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-25 00:29:24
+ * @LastEditTime: 2022-06-25 01:11:12
  * @FilePath: /tswj/src/views/client/rankList.vue
  * @Description: 幼儿园儿童捐赠金额排行榜
 -->
 <template>
   <div class="wrapper">
     <van-row>
-      <van-col span="20" style="padding: 1rem 0.5rem 1rem 0;">
+      <van-col class="title-wrapper" span="20">
-        <div :class="[kgInfo.multi_name ? 'heightLow' : 'heightLow', 'kg-name']">
+        <div :class="['heightLow', 'kg-name']">
-          <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
+          <van-row align="center" justify="center" class="title">
             <van-col span="4">
               <van-image round width="3.5rem" height="3.5rem" :src="kgInfo.kg_logo ? kgInfo.kg_logo : icon_logo"
                 style="vertical-align: text-bottom;" />
             </van-col>
-            <van-col span="20">
+            <van-col span="20" style="padding-left: 1.5rem;">
-              <div v-if="kgInfo.multi_name" style="margin-left: 1.5rem;">
+              <div v-if="kgInfo.multi_name">
                 <p>{{ kgInfo.multi_name[0] }}</p>
                 <p>{{ kgInfo.multi_name[1] }}</p>
               </div>
-              <p v-else style="margin-left: 1.5rem;">
+              <p v-else> {{ kgInfo.kg_name }} </p>
-                {{ kgInfo.kg_name }}
-              </p>
             </van-col>
           </van-row>
         </div>
       </van-col>
       <van-col>
         <div class="flower">
-          <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />&nbsp;{{
+          <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />
-          kgInfo.kg_total }}
+          &nbsp;{{ kgInfo.kg_total }}
         </div>
       </van-col>
     </van-row>
   </div>
+
   <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
     @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">
+          <div :class="['global-center', { 'rank-other': rank.rownum >= 4 }]">
-            <van-icon v-if="indexKey === 0" :name="icon_ranking1" size="1.75rem" />
+            <van-icon v-if="rank.rownum < 4" :name="icon_ranking(rank.rownum)" size="1.75rem" />
-            <van-icon v-if="indexKey === 1" :name="icon_ranking2" size="1.75rem" />
+            <span v-else>{{ rank.rownum }}&nbsp;</span>
-            <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">
+          <div class="name-info global-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;">
+          <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>
@@ -65,11 +62,12 @@
       </van-row>
     </div>
   </van-list>
+
   <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无明细" />
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
@@ -80,6 +78,19 @@ import { kgDonateRankAPI } from '@/api/C/kg.js'
 const $route = useRoute();
 useTitle($route.meta.title);
+const icon_ranking = (rownum) => {
+  switch (rownum) {
+    case 1:
+      return icon_ranking1
+    case 2:
+      return icon_ranking2
+    case 3:
+      return icon_ranking3
+    default:
+      return 0
+  }
+}
+
 const kgInfo = ref({});
 const kg_id = $route.query.kg_id;
 const donateRankList = ref([])
@@ -120,6 +131,14 @@ const onLoad = async () => {
   padding-right: 0.5rem;
   background-color: #F7F7F7;
   position: relative;
+  .title-wrapper {
+    padding: 1rem 0.5rem 1rem 0;
+    .title {
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
   .rank {
     position: relative;
@@ -160,4 +179,9 @@ const onLoad = async () => {
     height: 6rem;
   }
 }
+
+.rank-other {
+  text-align: center;
+  color: #84909F;
+}
 </style>