pc--vr/src/views/forum/topic.vue

<script setup>
import { EditPen, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import MomentLayout from "~/components/MomentLayout/index.vue";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
//论坛接口
import * as topic from "~/api/topic";
import * as forum from "~/api/forum";
import { onMounted } from "vue";

//标题

// document.title = toptitle ;

//论坛列表
let toptitle = ref();
let foruminfo = ref([]);
const __forum__ = async () => {
  try {
    const { data } = await forum.list({
      is_page: 0,
      topic_id: route.query.id,
    });
    foruminfo.value = data;
    toptitle.value = data[0].topic.title;
    document.title = "【" + toptitle.value + "】话题";
  } catch (error) {}
};
onMounted(__forum__);

// 话题推荐
let topList = ref([]);
const __news__ = async () => {
  try {
    const { data } = await topic.list({
      is_recommend: 1,
      is_page: 0,
    });
    topList.value = data;
  } catch (error) {}
};

onMounted(__news__);

//参加话题
const jointopic = () => {
  router.push({
    path: "/forum/edit",
    query:{
      id:route.query.id
    }
  });
};

const handleRefreshListData = () => {
  // TODO: 刷新列表数据
};

//返回
const returnup = () => {
  router.go(-1);
};
</script>

<template>
  <div class="topic-container flex-row">
    <div class="topic__left-context">
      <div class="topic__header">
        <div class="topic-back-btn flex-row flex-aic">
          <el-icon :size="18"> <ArrowLeft /> </el-icon
          ><span @click="returnup">返回</span>
        </div>
        <div class="topic__header-main">
          <div class="topic-title">#{{ toptitle }}</div>
          <p class="topic-descs">descssssss</p>
          <el-button type="primary" :icon="EditPen" @click="jointopic"
            >参与</el-button
          >
        </div>
      </div>
      <div class="context">
        <template v-for="(item, idx) in foruminfo" :key="idx">
          <MomentLayout
            type="forum"
            :detail="item"
            @refresh="handleRefreshListData"
          />
        </template>
      </div>
    </div>
    <div class="topic__side">
      <div class="see-more flex-row flex-aic flex-jc-sb">
        <span>查看全部论坛</span>
        <el-icon :size="18">
          <ArrowRight></ArrowRight>
        </el-icon>
      </div>

      <!-- 论坛推荐 -->
      <dl class="forum-recommend">
        <dt>论坛推荐</dt>
        <dd class="ellipsis" v-for="(item, index) in topList" :key="index">
          {{ item.title }}
        </dd>
      </dl>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topic {
  &-container {
    column-gap: 20px;
  }

  &__header {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 10px;

    .topic-back-btn {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 38px;
      border-bottom: 1px solid #f6f6f6;
      padding: 20px 20px 6px;
      margin-bottom: 18px;
    }

    &-main {
      padding: 0 20px 20px;
    }

    .topic-title {
      font-size: 26px;
      font-weight: 600;
      color: #222222;
    }

    .topic-descs {
      font-size: 14px;
      font-weight: 400;
      color: #777777;
    }
  }

  &__left-context {
    width: 0;
    flex: 1;

    .context {
      .moment-layout-container {
        margin-bottom: 20px;
        border-radius: 10px;
      }
    }
  }

  &__side {
    width: 400px;

    .see-more {
      padding: 16px 20px;
      border-radius: 10px;
      background-color: #fff;
      margin-bottom: 20px;

      font-size: 16px;
      font-weight: 500;
      color: #222222;
    }

    .forum-recommend {
      list-style: none;
      padding: 0;
      margin: 0;
      background-color: #fff;
      border-radius: 10px;
      padding-bottom: 13px;

      dt {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        padding: 14px 20px 10px;
        border-bottom: 1px solid #f6f6f6;
      }

      dd {
        padding: 6px 20px;
        margin: 0;
      }
    }
  }
}
</style>