leromro-mini/pages/common/rankingList/index.vue

<template>
  <view class="ranking-main">
    <view>
      <view class="ranking-title">
        <image src="@/static/img/容器@1x (1).png" mode="widthFix" class="ranking-title-img"></image>
        <view class="ranking-title-text">本月热门服务</view>
      </view>

      <view class="ranking-list" v-if="gitList && gitList.length > 0">
        <view v-for="(item, index) in gitList" :key="index" class="ranking-list-item">
          <image :src="item.businessIcon" mode="widthFix" class="ranking-list-item-img"></image>
          <view class="ranking-list-item-content">
            <view class="ranking-list-item-header">
              <view class="ranking-list-item-title">{{ item.businessName }}</view>
              <view class="ranking-list-item-rating">
                <view class="score-icons"><image src="@/static/img/容器@1x (3).png" mode="widthFix" class="star-icon" v-for="item in new Array(Number(item.score ))" :key="item"></image></view>
                <text class="score-text">{{ item.score }}星</text>
              </view>
            </view>
            <view class="ranking-list-item-bottom">
              <view class="ranking-list-item-tag">
                <view class="ranking-list-item-tag-text">
                  {{ item.businessTierName }}
                </view>
              </view>
              <view class="ranking-list-item-count">本月已服务：{{ item.totalCount }}</view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="ranking-list">
          <NoneView value="暂无服务数据" />  
      </view>
    </view>
  </view>
</template>

<script setup>
import { userSortShotService } from '@/api/VolunteerList.js'
import { onMounted, ref } from 'vue';
import NoneView from '@/components/NoneView/index.vue'
const userType = uni.getStorageSync('userType'); //读取本地存储
const gitList = ref([])

const gitData = async () => {
  if (userType === 2) {
    const res = await userSortShotService()
    gitList.value = res.data
  }
}

onMounted(() => {
  gitData()
})
</script>

<style scoped lang="scss">
.ranking-main {
  padding: 30rpx;
}

.ranking-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 30rpx;

  .ranking-title-img {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }

  .ranking-title-text {
    font-family: PingFang SC;
    font-size: 34rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
  }
}
.score-icons {
  display: flex;
}
.ranking-list {
  min-height: 500rpx ;
  .ranking-list-item {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
    align-items: center;
    
    .ranking-list-item-img {
      width: 84rpx;
      height: 84rpx;
      border-radius: 50%;
      margin-right: 22rpx;
      flex-shrink: 0;
      // top: 33rpx;
    }

    .ranking-list-item-content {
      flex: 1;
      display: flex;
      flex-direction: column;

      .ranking-list-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-bottom: -3rpx;

        .ranking-list-item-title {
          height: 42rpx;
          font-family: PingFang SC;
          font-size: 32rpx;
          font-weight: normal;
          line-height: 42rpx;
          letter-spacing: normal;
          color: rgba(0, 0, 0, 0.8);
          margin-bottom: 16rpx;
        }

        .ranking-list-item-rating {
          display: flex;
          align-items: center;

          .star-icon {
            width: 44rpx;
            height: 44rpx;
            margin-right: 10rpx;
          }

          .score-text {
            color: #FF7043;
            font-size: 28rpx;
            font-weight: 500;
          }
        }
      }

      .ranking-list-item-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ranking-list-item-tag {
          /* 自动布局子元素 */
          // width: 252rpx;
          // height: 34rpx;
          /* 自动布局 */
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          // padding: 8rpx 12rpx;
          z-index: 0;
          border-radius: 10rpx;
          box-sizing: border-box;
          border: 1rpx solid rgba(237, 93, 49, 0.8);
          padding: 8rpx 12rpx;

          .ranking-list-item-tag-text{
            /* 自动布局子元素 */
              // width: 228rpx;
              height: 22rpx;
              z-index: 0;
              font-family: PingFang SC;
                font-size: 26rpx;
                font-weight: normal;
                line-height: 22rpx;
                letter-spacing: 0.02em;
                color: #ED5D31;
          }
        }

        .ranking-list-item-count {
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.5);
          text-align: right;
        }
      }
    }
  }
}
</style>