Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
12a8945a 1 parent 5d6c91e3

🦄 refactor: 写法优化

Inline Side-by-side
Showing 3 changed files with 47 additions and 23 deletions
......@@ -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%);
......
......@@ -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>
......
......@@ -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;">
<div :class="[kgInfo.multi_name ? 'heightLow' : 'heightLow', 'kg-name']">
<van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
<van-col class="title-wrapper" span="20">
<div :class="['heightLow', 'kg-name']">
<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">
<div v-if="kgInfo.multi_name" style="margin-left: 1.5rem;">
<van-col span="20" style="padding-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;">
{{ kgInfo.kg_name }}
</p>
<p v-else> {{ 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;{{
kgInfo.kg_total }}
<van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />
&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">
<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="['global-center', { 'rank-other': rank.rownum >= 4 }]">
<van-icon v-if="rank.rownum < 4" :name="icon_ranking(rank.rownum)" size="1.75rem" />
<span v-else>{{ rank.rownum }}&nbsp;</span>
</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>
......