cankao-h5/src/components/HotIndustryList.vue

<template>
  <view class="hot-industry-container">
    <u-skeleton rows="5" title loading style="margin-bottom: 30rpx" v-if="loading"></u-skeleton>

    <!-- 行业列表 -->
    <view class="industry-list" v-else>
      <view v-for="(item, index) in industryList" :key="index" class="industry-item" :style="getItemBgStyle(index)"
        @click="goDetail(item, index)">
        <!-- 这里预留图标位置，可自行补充 <image :src="item.icon" class="industry-icon" /> 等 -->
        <view style="
            position: absolute;
            top: 0;
            z-index: 999;
            display: flex;
            align-items: center;
            height: 100%;
          ">
          <img src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/zixun/ranking_icon_1_1.png" class="top3numbk"
            v-if="index < 3 && index == 0" />
          <img src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/zixun/ranking_icon_2_2.png" class="top3numbk"
            v-else-if="index < 3 && index == 1" />
          <img src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/zixun/ranking_icon_3_3.png" class="top3numbk"
            v-else-if="index < 3 && index == 2" />
          <text class="rank" v-else>{{ index + 1 }}</text>
          <text class="industry-name">{{ item.content }}</text>
        </view>
        <img src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/zixun/ranking_bg_1.png" class="top3bk"
          v-if="index < 3 && index == 0" />
        <img src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/zixun/ranking_bg_2.png" class="top3bk"
          v-if="index < 3 && index == 1" />
        <img src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/zixun/ranking_bg_3.png" class="top3bk"
          v-if="index < 3 && index == 2" />
      </view>
    </view>

    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
      @handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
  </view>
</template>

<script setup>
import { defineProps, defineEmits, watch, ref } from "vue";
import LoginPopup from "@/components/loginPopup/index.vue";
import { Session } from "@/utils/storage";

// 定义接收的行业列表数据 props，每个元素包含 name 字段
const props = defineProps({
  industryList: {
    type: Array,
    required: true,
    default: () => [],
  },
  // 0:热门行业池 1：风口概念池
  type: {
    type: String,
    default: () => 0,
  },
});

const loading = ref(true);

watch(
  () => props.industryList,
  (newValue, oldValue) => {
    loading.value = false;
  }
);

// 定义触发的事件，点击“查看全部”时通知父组件
const emit = defineEmits(["viewAll"]);
const onViewAll = () => {
  emit("viewAll");
};

// 根据排名设置背景样式，这里前3名可设置不同背景，可根据实际需求调整
const getItemBgStyle = (index) => {
  if (index === 0) {
    return {
      backgroundColor: "#fff",
      filter: Session.get("token") ? "" : "blur(5px)",
    }; // 第1名背景示例
  } else if (index === 1) {
    return {
      backgroundColor: "#fff",
      filter: Session.get("token") ? "" : "blur(5px)",
    }; // 第2名背景示例
  } else if (index === 2) {
    return {
      backgroundColor: "#fff",
      filter: Session.get("token") ? "" : "blur(5px)",
    }; // 第3名背景示例
  }
  return {
    backgroundColor: "#F2F6FE",
    filter: Session.get("token") ? "" : "blur(5px)",
  }; // 其他名次背景
};
const clickItem = ref({});
const clickIndex = ref({});
function goDetail(item, index) {
  clickItem.value = item;
  clickIndex.value = index;
  if (Session.get("token")) {
    uni.navigateTo({
      url:
        "/pages/realtimeInfo/rankDetail?value=" +
        item.value +
        "&type=" +
        props.type +
        "&index=" +
        index,
    });
  } else {
    LoginShow.value = true;
  }
}

const LoginShow = ref(false);
const isLoginStatus = ref();
// 关闭弹框
const handlePopupClose = () => {
  LoginShow.value = false;
};

// 登录成功之后的回调
const handlePopupSuccessCallback = () => {
  isLoginStatus.value = true;

  // uni.navigateTo({
  //   url:
  //     "/pages/realtimeInfo/rankDetail?value=" +
  //     clickItem.value.value +
  //     "&type=" +
  //     props.type +
  //     "&index=" +
  //     clickIndex.value,
  // });
};

// 登录失败之后的回调
const handlePopupErrorCallback = () => {
  console.log("登录失败");
};
</script>

<style scoped>
.hot-industry-container {
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 14px;
  color: #999;
  text-decoration: underline;
}

.industry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.industry-item {
  display: flex;
  align-items: center;
  border-radius: 6px;
  position: relative;
  height: 74rpx;
}

.industry-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.rank {
  margin-left: 30rpx;

  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #868b98;
  line-height: 42rpx;
  text-align: left;
  font-style: normal;
  margin-right: 40rpx;
}

.industry-name {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #222222;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
}

.top3bk {
  width: 100%;
  height: 74rpx;
}

.top3numbk {
  width: 42rpx;
  height: 50rpx;
  margin-right: 25rpx;
  margin-left: 20rpx;
}
</style>