✨ feat(选择幼儿园): 新需求样式调整，列表变成排行榜形式

hookehuyr
Commit f1c1146476ccb23517de61c0f1ae74047351d62c f1c11464 1 parent b4764354
Showing 2 changed files with 75 additions and 28 deletions
src/components/RankingItem/index.vue
src/views/client/chooseSchool.vue
--- a/src/components/RankingItem/index.vue
View file @f1c1146
+++ b/src/components/RankingItem/index.vue
View file @f1c1146
@@ -2,35 +2,41 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-30 10:20:34
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-05-31 11:56:24
+ * @LastEditTime: 2022-05-31 16:30:54
  * @FilePath: /tswj/src/components/RankingList/index.vue
 -->
 <template>
-  <!-- TODO: 捐赠排行榜item组件完善 -->
+  <div class="wrapper">
-  <div style="margin: 1rem 0; background-color: #FFF; position: relative;">
     <van-row>
-      <van-col span="2" style="position: relative;">
+      <van-col span="2" class="rank">
-        <div style="position: absolute; top: 0; left: 20%;">
+        <div v-if="indexKey < 3" class="avatar">
-          <van-icon :name="icon_ranking" size="1.25rem" />
+          <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 style="position: absolute; top: 0; left: 40%;">1</div>
+        <div v-else class="text">{{ indexKey + 1 }}</div>
       </van-col>
-      <van-col span="18" style="padding: 1rem 0;">
+      <van-col span="18" style="padding: 1rem 0.5rem 1rem 0;">
-        <!-- 如果多个学校遍历包裹结构 -->
+        <div :class="[rankInfo.multi_name ? 'height6rem' : 'height3rem', 'kg-name']" @click="go('/client/chooseBook', { kg_id: rankInfo.id })">
-        <div style="position: relative; height: 3rem;" @click="go('/client/chooseBook', { kg_id: item.id })">
           <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
             <van-col span="4">
-              <van-image round width="3rem" height="3rem" :src="item.avatar ? item.avatar : icon_avatar" style="vertical-align: text-bottom;" />
+              <van-image round width="3rem" height="3rem" :src="rankInfo.avatar ? rankInfo.avatar : icon_avatar" style="vertical-align: text-bottom;" />
             </van-col>
             <van-col span="20">
-              <p class="title">{{ item.name }}</p>
+              <div v-if="rankInfo.multi_name" style="margin-left: 0.5rem;">
+                <p>{{ rankInfo.multi_name[0] }}</p>
+                <p>{{ rankInfo.multi_name[1] }}</p>
+              </div>
+              <p v-else style="margin-left: 0.5rem;">
+                {{ rankInfo.name }}
+              </p>
             </van-col>
           </van-row>
         </div>
       </van-col>
       <van-col span="2">
-        <div style="text-align: center; position: absolute; top: 40%;" @click="go('/client/donateList', { kg_id: item.id })">
+        <div class="flower" @click="go('/client/donateList', { kg_id: rankInfo.id })">
-          <van-icon name="arrow" color="#c5c5c5" size="1.25rem" />3000
+          <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />&nbsp;3000
         </div>
       </van-col>
     </van-row>
@@ -39,7 +45,13 @@
 <script setup>
 import icon_avatar from '@images/que-logo@2x.png'
-import icon_ranking from '@images/icon-shoucang02@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'
+
+import { ref } from 'vue'
+import _ from 'lodash'
 import { useGo } from '@/hooks/useGo'
 const go = useGo()
@@ -51,30 +63,65 @@ const props = defineProps({
     default(rawProps) {
       return rawProps
     }
+  },
+  indexKey: {
+    type: Number,
+    default(rawProps) {
+      return rawProps
+    }
   }
 })
 const emit = defineEmits(['on-icon-click']);
 const handle = () => {
   emit('on-icon-click', '')
 }
+const rankInfo = ref('');
+rankInfo.value = _.cloneDeep(props.item);
+// TEMP: 测试数据
+// rankInfo.value.name = rankInfo.value.name + ' ' + rankInfo.value.name;
+// 有空格分割name
+if (rankInfo.value.name.indexOf(' ') > -1) {
+  rankInfo.value.multi_name = rankInfo.value.name.split(' ');
+}
 </script>
 <style lang="less" scoped>
 .wrapper {
-  background-color: #fff;
+  margin: 1rem 0;
-  margin: 2rem 0;
+  background-color: #FFF;
-  height: 3rem;
+  position: relative;
-  // overflow: auto;
+
+  .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;
+  }
+
+  .kg-name {
+    position: relative;
+    height: 3rem;
+  }
-  .avatar {
+  .height3rem {
-    vertical-align: middle;
+    height: 3rem;
   }
-  .title {
+  .height6rem {
-    color: #222222; 
+    height: 6rem;
-    display: inline-block; 
-    vertical-align: super; 
-    margin-left: 2rem;
   }
 }
 </style>
--- a/src/views/client/chooseSchool.vue
View file @f1c1146
+++ b/src/views/client/chooseSchool.vue
View file @f1c1146
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-04-21 11:21:39
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-05-31 11:30:12
+ * @LastEditTime: 2022-05-31 15:52:12
  * @FilePath: /tswj/src/views/client/chooseSchool.vue
  * @Description: 选择学校列表
 -->
@@ -11,7 +11,7 @@
     <div class="modify-top" />
     <div class="wrapper-content">
       <template v-for="(item, key) in schoolList" :key="key">
-        <ranking-item :item="item" />
+        <ranking-item :item="item" :index-key="key" />
       </template>
     </div>
   </div>