fe-student/src/views/discuss/DiscussPage.vue

<template>
  <div class="surveydetail" style="padding: 30px">
    <!-- 面包屑导航 -->
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div class="crumb">
        <div>混合制项目</div>
        <div style="margin-left: 6px; margin-right: 6px">/</div>
        <div>管理者进阶-腾飞班</div>
        <div style="margin-left: 6px; margin-right: 6px">/</div>
        <div style="font-weight: 700; font-size: 16px">讨论详情</div>
      </div>
      <div class="prevnext">
        <div class="prev">
          <img
            style="width: 23px; height: 23px"
            src="../../assets/image/prev.png"
          />
          <div style="margin-left: 7px">上一个</div>
        </div>
        <div class="prev" style="margin-left: 31px">
          <div style="margin-right: 7px">下一个</div>
          <img
            style="width: 23px; height: 23px"
            src="../../assets/image/next.png"
          />
        </div>
      </div>
    </div>
    <!-- 面包屑导航 -->
    <!-- 标题 -->
    <div class="title">{{ info.name }}</div>
    <!-- 标题 -->
    <!-- 详细内容 -->
    <div class="bascinfo clearfix">
      <!-- 中间部分 -->
      <div class="middletitle">
        <div class="title">
          {{ info.name }}
        </div>
        <!--        <button class="btn">发表帖子</button>-->
      </div>

      <div>
        <div class="line clearfix">
          <div class="linetitle">{{ info.sName }}</div>
          <div class="radi"></div>
          <div class="intime">进行中</div>
        </div>
        <div class="allbtn">
          <button :class="`btnone ${param.searchType == 1 ? 'active' : ''}`">
            最新
          </button>
          <button
            :class="`btntwo ${param.searchType == 2 ? 'active' : ''}`"
            style="margin-left: 20px"
          >
            最热
          </button>
        </div>
        <div
          class="discusslist"
          v-for="(d, j) in info?.discussDtoList"
          :key="j"
        >
          <div class="itemtitle">{{ d.discussName }}</div>
          <div class="itemdiscuss">
            {{ d.discussExplain }}
          </div>
          <div class="allstar clearfix">
            <div @click="comment(d)" style="display: flex; cursor: pointer">
              <span class="iconfont icon-pinglun" style="color: #b3bdc4"></span>
              <div class="count">{{ d.commentNum || 0 }}</div>
            </div>
            <div @click="like(d)" style="display: flex; cursor: pointer">
              <span
                class="iconfont icon-dianzan"
                :style="{
                  color: d.praised ? 'red' : '#b3bdc4',
                  marginLeft: '19px',
                }"
              ></span>
              <div class="count">{{ d.praiseNum || 0 }}</div>
            </div>
            <div @click="collection(d)" style="display: flex; cursor: pointer">
              <span
                class="iconfont icon-shoucang"
                :style="{
                  color: d.collected ? 'red' : '#b3bdc4',
                  marginLeft: '19px',
                }"
              ></span>
              <div class="count">{{ d.collectionNum || 0 }}</div>
            </div>
          </div>
          <div class="thinline"></div>
        </div>
      </div>
    </div>
    <!-- 详细内容 -->
  </div>
</template>

<script setup>
import { request, useRequest } from "@/api/request";
import { COMMENT_COLLECTION, COMMENT_PRAISE, DISCUSS_LIST } from "@/api/api";
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const {
  query: { id, type },
} = useRoute();

const param = ref({
  type,
  id,
});
const { data: info } = useRequest(DISCUSS_LIST, param.value);

const state = reactive({
  activeName: "first",
});

function comment({ discussId: id }) {
  router.push({ path: "discussdetail", query: { id, type } });
}

function like(d) {
  d.praised ? (d.praiseNum -= 1) : (d.praiseNum += 1);
  d.praised = !d.praised;
  request(COMMENT_PRAISE, { targetId: d.discussId, type: 3 });
}

function collection(d) {
  d.collected ? (d.collectionNum -= 1) : (d.collectionNum += 1);
  d.collected = !d.collected;
  request(COMMENT_COLLECTION, { targetId: d.discussId, type: 4 });
}
</script>

<style scoped lang="scss">
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.active {
  color: red;
}

.surveydetail {
  .crumb {
    color: #fff;
    display: flex;
    font-size: 14px;
    line-height: 24px;
  }

  .prevnext {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;

    .prev {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }

  .title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 24px;
    margin-top: 17px;
    margin-left: -11px;
  }

  .bascinfo {
    min-height: 800px;
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 24px;
    display: block;
    .middletitle {
      display: flex;
      margin-top: 64px;
      position: relative;

      .title {
        font-size: 24px;
        font-weight: 800;
        color: #4a9cf8;
        margin-left: 79px;
        margin-right: 210px;
      }

      @media screen and (max-width: 1574px) {
        .title {
          margin-bottom: -24px;
        }
      }

      .btn {
        cursor: pointer;
        position: absolute;
        width: 146px;
        height: 46px;
        background: #2478ff;
        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
        border-radius: 4px;
        border: 0;
        font-size: 16px;
        font-weight: 800;
        color: #ffffff;
        right: 45px;
        top: 5px;
      }
    }

    .line {
      display: flex;
      margin: 47px 45px 0 75px;
      //max-width: 1810px;
      // height: 50px;
      background: #f9f9f9;
      position: relative;

      .linetitle {
        margin: 14px 120px 17px 28px;
        font-size: 16px;
        font-weight: 800;
        color: #333333;
      }

      .radi {
        position: absolute;
        width: 11px;
        height: 11px;
        border: 2px solid #0060ff;
        border-radius: 50%;
        margin-top: 19px;
        right: 91px;
      }

      .intime {
        position: absolute;
        margin-top: 15px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #0060ff;
        right: 36px;
      }
    }

    .allbtn {
      margin-top: 21px;
      margin-left: 105px;

      .active {
        background: #387df7 !important;
        color: #ffffff !important;
      }

      .btnone {
        width: 44px;
        height: 26px;
        border-radius: 4px;
        border: 0;
        background-color: #fff;
        font-size: 14px;
        font-weight: 500;
        color: #6e7b84;
        cursor: pointer;
      }

      .btntwo {
        font-size: 14px;
        font-weight: 500;
        color: #6e7b84;
        background-color: #fff;
        border: 0;
        cursor: pointer;
      }
    }

    .discusslist {
      margin-left: 105px;
      margin-top: 39px;

      .itemtitle {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        margin-right: 88px;
      }

      .itemdiscuss {
        margin-top: 15px;
        width: 812px;
        height: 39px;
        font-size: 14px;
        font-weight: 500;
        color: #666666;
        line-height: 24px;
      }

      .allstar {
        display: flex;
        margin-top: 18px;
        // margin-left: 105px;
        .sameone {
          width: 14px;
          height: 14px;
        }

        .count {
          margin-left: 7px;
          font-size: 14px;
          font-weight: 500;
          color: #b3bdc4;
        }

        .pinglun {
          background-image: url(../../assets/image/pinglun.png);
        }

        .dianzan {
          margin-left: 19px;
          background-image: url(../../assets/image/dianzan2.png);
        }

        .shoucang {
          margin-left: 19px;
          background-image: url(../../assets/image/shoucang.png);
        }
      }

      .thinline {
        // max-width: 1450px;
        width: calc(100% - 88px);

        margin-top: 33px;
        border-top: 1px solid #999999;
        opacity: 0.2;
      }
    }
  }
}
</style>