exam_mp/pages/regulations/learing.vue

<script setup name="regulations">
import Container from "../../components/Container/Container.vue";
import uvParse from "../../uni_modules/uv-parse/components/uv-parse/uv-parse.vue";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getRoute, router } from "../../utils/router";
import { request } from "../../utils/request";

const context = ref([]);
const otherParams = ref({});
const scrollTop = ref(0);
let se = ref(0);

const normalText = (text) =>
  text
    .replace(/<table.*?style="(.*?)*?>/g, (text) =>
      text.replace(/(?:\bwidth:[^;]+;|\bmargin-left:[^;]+;)/g, "")
    )
    .replace(
      /<p[^>]*style="[^"]*margin:\s*[^;\s]+\s+[^;\s]+\s+[^;\s]+\s+[^;\s]+;[^"]*">/g,
      (text) =>
        text
          .replace(
            /(<p[^>]*style="[^"]*margin:\s*)[^;\s]+\s+[^;\s]+\s+[^;\s]+\s+[^;\s]+;/g,
            "$18pt 0;"
          )
          .replace(/line-height:\s*[^;]+;/g, "line-height: 1.5;")
    )
    .replace(/(<p[^>]*style="[^"]*margin:\s*)[^;\s]+(\s+[^;]+;)/g, "$17pt$2")
    .replace(
      /<img([^>]*?)width="[^"]*"([^>]*?)height="[^"]*"([^>]*?)\/>/g,
      '<img$1width="100%"$2height="100%"$3/>'
    );

const onScroll = (e) => {
  se.value = e.detail.scrollTop;
  scrollTop.value = e.detail.scrollTop;
};
const submitScrollTop = (is_done, scroll) => {
  if (otherParams.value.is_done) return;
  request(
    "api/question_bank/question_reception/point/set_point_study_progress",
    {
      id: getRoute().params.id,
      scroll_top: scroll || se.value,
      is_done,
    }
  );
};
const onSubmit = () => {
  submitScrollTop(1, 0);
  const params = getRoute().params;
  // TODO: 提交滚动条位置，并跳转页面
  router.push({
    url: `/pages/regulations/practice`,
    params: {
      title: params.name,
      id: params.id,
    },
  });
};

const onBack = () =>
  new Promise((resolve) => {
    // 提交滚动条位置，并跳转页面
    submitScrollTop(0);
    resolve(true);
  });

onShow(() => {
  request("api/question_bank/question_reception/point/get_chapter_point", {
    id: getRoute().params.id,
  }).then((res) => {
    const { point_content, ...data } = res.data;
    context.value = point_content.map((item) => {
      return {
        ...item,
        context: normalText(item.detail),
      };
    });
    otherParams.value = data;
  });
});

const onClick = (e, index) => {
  scrollTop.value = e.currentTarget.offsetTop
};
</script>

<template>
  <Container
    :title="getRoute().params?.name"
    @onScroll="onScroll"
    :empty="!context.length"
    :scrollTop="scrollTop"
    :onBack="onBack"
  >
    <view>
      <view :key="item.id" v-for="(item, index) in context">
        <view
          class="title"
          :class="{
            'mt-40': index !== 0,
            [`title-${index}`]: true,
          }"
          @click="(e) => onClick(e, index)"
          >考 点{{ index + 1 }} {{ item.name }}</view
        >
        <uv-parse class="text" :content="item.context" selectable />
      </view>
      <text class="button mt-30" @click="onSubmit">已学完, 开启练习模式</text>
    </view>
  </Container>
</template>

<style scoped lang="scss">
.title {
  color: #703060;
  font-weight: bold;
  text-align: center;
  padding: 30rpx 0;
  font-size: 40rpx;
  // position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  line-height: 2;
}

.mt-30 {
  margin-top: 30rpx;
}
</style>