xihuaDesign/src/views/website/detail/article.tsx

import { useArticle, useCategory } from "@/modules";
import { css } from "@linaria/core";
import { Empty, message } from "ant-design-vue";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import PageTabs from "./PageTabs";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const categoryStore = useCategory();
    const articleStore = useArticle();

    const state = reactive({
      currFloor: {} as any,
      currMid: {} as any,
      currTree: {} as any,
      currBg: "",
      content: "",
      loading: true,
    });

    const initCategory = () => {
      const id = route.params.id;
      const currCategory = categoryStore.listController.state.list.find(
        (e: CategoryItem) => {
          return e._id == id;
        }
      );

      if (!currCategory) {
        if (categoryStore.listController.state.list.length > 0) {
          router.replace("/404");
        }
        return;
      }

      if (currCategory?.pid == "top") {
        state.currTree = categoryStore.categoryTree.find((e) => {
          return e._id == id;
        });
        state.currMid = state.currTree.children[0];
        if (state.currMid.children && state.currMid.children.length) {
          const cid = route.query.cid;
          if (cid) {
            state.currFloor = state.currMid.children.find((e: any) => {
              return e._id == cid;
            });
          } else {
            state.currFloor = state.currMid.children[0];
          }
        } else {
          state.currFloor = state.currMid;
        }
        return;
      }
      state.currMid = currCategory;
      if (currCategory.children && currCategory.children.length) {
        const cid = route.query.cid;
        if (cid) {
          state.currFloor = currCategory.children.find((e: any) => {
            return e._id == cid;
          });
        } else {
          state.currFloor = currCategory.children[0];
        }
      } else {
        state.currFloor = state.currMid;
      }
      const t = categoryStore.listController.state.list.find(
        (e) => e._id == currCategory.pid
      );

      if (t?.pid == "top") {
        state.currTree = t;
        return;
      }
      state.currTree = categoryStore.categoryTree.find((e) => {
        return e._id == t?.pid;
      });
    };

    const initArticle = async () => {
      const aid = route.query.aid;
      if (!aid) {
        state.loading = false;
        return;
      }
      const res = await articleStore.listController.itemDetail(aid as string);
      if (res.errorNo != 200) {
        message.warn("未查询到数据！");
        state.loading = false;
        return;
      }
      state.loading = false;
      state.content = res.result.content;
    };

    watch(
      () => categoryStore.listController.state.list,
      () => {
        initCategory();
      }
    );

    onMounted(() => {
      initCategory();
      initArticle();
    });

    return () => {
      const { currMid = {}, currTree = {} } = state;

      return (
        <div class={page}>
          <div
            class={"page_title_box"}
            style={{
              backgroundImage: `url(${
                currMid.cover ? currMid.cover : currTree.cover
              })`,
            }}
          >
            <div class={"title detail_page_w"}>
              <h1>{currTree.name}</h1>
              <h2>{currTree.subName}</h2>
            </div>
          </div>
          <div class={"page_tabs_box"}>
            <div class="detail_page_w">
              <PageTabs data={currTree.children} activeKey={currMid._id} />
            </div>
          </div>
          <div class={"page_content"}>
            <div class={"detail_page_w"}>
              <div innerHTML={state.content}></div>
              {!state.loading && !state.content && (
                <div class={"ant-list-empty-text"}>
                  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                </div>
              )}
            </div>
          </div>
        </div>
      );
    };
  },
});

const page = css`
  .page_title_box {
    position: relative;
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.2s ease-in-out;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 220px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
      opacity: 0.7;
      z-index: 1;
    }
    .title {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 28px;
      z-index: 2;
      h1 {
        font-size: 36px;
        font-weight: 400;
        margin-bottom: 16px;
        color: #fff;
      }
      h2 {
        margin-bottom: 0;
        height: 1em;
        font-size: 14px;
        font-weight: 300;
        color: #fff;
      }
    }
  }
  .page_tabs_box {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
  }
  .page_content {
    padding: 50px 0;
    line-height: 1.5;
    img {
      display: inline;
    }
  }
  @media screen and (max-width: 1280px) {
    .page_title_box {
      height: 400px;
      .title {
        h1 {
          font-size: 28px;
        }
      }
    }
  }
  @media screen and (max-width: 750px) {
    .page_title_box {
      height: 320px;
      .title {
        h1 {
          font-size: 24px;
        }
      }
    }
  }
`;