pc--vr/src/views/index/components/Recommend.vue

<script setup>
import { ref, onMounted } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import SvgIcon from "~/components/SvgIcon/index.vue";
import * as topicApi from "~/api/topic";
import { useRouter } from "vue-router";
const router = useRouter();
const list = ref([]);
const page = ref(1);
const total = ref(0);
const last_page = ref(0);
const __list__ = async () => {
  try {
    const { data } = await topicApi.list({
      page: page.value,
      limit: 10,
      is_recommend: 1,
    });
    list.value = data.list;
    total.value = data.total;
    last_page.value = data.last_page;
  } catch (error) {}
};
onMounted(__list__);

//换一页
const next = () => {
  if (last_page.value == 1) {
    ElMessage.warning({
      message: "当前已是最新页",
      type: "warning",
    });
  } else if (last_page.value == page.value) {
    page.value = 1;
  } else {
    page.value++;
  }
  __list__();
};

//跳转到该话题
const topicinfo = (item) => {
  router.push({
    path: "/forum/topic/:id",
    query: {
      id: item.id,
      title:item.title,
      description:item.description
    },
  });
};
</script>

<template>
  <div class="recommend-container">
    <div class="heade flex-row flex-aic flex-jc-sb">
      <div class="title flex-row flex-aic">
        <SvgIcon name="fire" :size="18" color="rgba(255, 81, 21, 1)" />
        忆象推荐
      </div>
      <div class="more flex-row flex-aic" @click="next" style="cursor: pointer">
        <el-icon :size="16">
          <Refresh />
        </el-icon>
        换一批
      </div>
    </div>
    <div class="main">
      <ul class="">
        <li
          @click="topicinfo(item)"
          v-for="(item, idx) in list"
          :key="idx"
          class="flex-row flex-aic"
          style="cursor: pointer"
        >
          <span :class="['idx', idx <= 2 ? `idx--${idx + 1}` : '']">{{
            1 + idx
          }}</span>
          <div class="desc ellipsis">{{ item.title }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.recommend-container {
  padding: 16px;
  background-color: #fff;
  border-radius: 6px;

  .heade {
    padding-top: 12px;
    padding-bottom: 16px;

    .title {
      font-weight: 500;
      color: #333333;
      line-height: 22px;
    }

    .more {
      font-size: 12px;
      font-weight: 400;
      color: #777777;
      line-height: 17px;

      .el-icon {
        margin-right: 3px;
      }
    }
  }

  .main {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      line-height: 38px;

      .idx {
        width: 16px;
        text-align: center;
        margin-right: 10px;
        font-size: 18px;
        font-weight: 600;
        color: #c0c0c0;

        &--1 {
          color: #e02020;
        }

        &--2 {
          color: #ff5115;
        }

        &--3 {
          color: #f7b500;
        }
      }

      .desc {
        width: 0;
        flex: 1;
        font-size: 14px;
        font-family: AppleColorEmoji;
        color: #444444;
      }
    }
  }
}
</style>