exam_mp/pages/regulations/index.vue

<template>
  <Container
    title="法规"
    :scrollY="maskStyle.height < 0"
    @onSafeAreaChange="onSafeAreaChange"
  >
    <uni-collapse
      ref="collapse"
      v-model="value"
      class="class-content"
      @change="onChnage"
      v-show="!showContainer"
    >
      <view class="free-content">
        <uni-collapse-item
          :open="index <= 1"
          :title="item.name"
          v-for="(item, index) in chaptersList.slice(0, 2)"
          :key="item.id"
          class="text"
        >
          <view class="-mt-20">
            <Tree
              :chaptersList="item.children"
              @onChnage="onChnage"
              @onClickButton="onClickButton"
            />
          </view>
        </uni-collapse-item>
      </view>
      <!-- 付费功能 -->
      <view class="pay-content" v-if="chaptersList.length > 2">
        <view
          class="modal-mask"
          :style="{
            height: `${maskStyle.height}px`,
            width: `${maskStyle.width}px`,
          }"
          v-if="maskStyle.height > 0"
        >
          <uni-icons type="locked" color="#fff" size="35"></uni-icons>
          <view class="modal-wrapper" @click="onClickMask">邀请好友可解锁</view>
        </view>
        <uni-collapse-item
          :title="item.name"
          v-for="item in chaptersList.slice(2)"
          :key="item.id"
          class="text"
        >
          <view class="-mt-20">
            <view class="content" v-for="i in item.children" :key="i.id">
              <view class="text"> {{ i.name }}</view>
              <view class="buttons">
                <view
                  @click="onClickButton(i)"
                  class="comment"
                  v-if="i.isStudied === 0"
                  >开始学习</view
                >
                <view
                  @click="onClickButton(i)"
                  class="comment warning"
                  v-if="i.isStudied > 0 && i.isStudied < 100"
                  >继续学习</view
                >
                <view
                  @click="onClickButton(i)"
                  class="comment"
                  v-if="i.isStudied === 100"
                  >去练习</view
                >
                <view
                  class="comment success"
                  @click="onClickButton(i)"
                  v-if="i.isStudied === 100"
                  >已学习</view
                >
              </view>
            </view>
          </view>
        </uni-collapse-item>
      </view>
    </uni-collapse>
    <Modal
      ref="popup"
      background-color="#fff"
      v-model:open="showContainer"
      @change="onChange"
      title="邀请新客户解锁课程"
    >
      <text class="unlock"
        >邀请一名新用户注册并完成第一章全部考点学习，可解锁新两章内容</text
      >
      <template #footer>
        <button>立即邀请</button>
      </template>
    </Modal>
  </Container>
</template>

<script setup name="regulations">
import Tree from "../../components/Tree/Tree.vue";
import Container from "../../components/Container/Container.vue";
import Modal from "@/components/Modal/Modal.vue";
import { ref, getCurrentInstance, onMounted } from "vue";
import { getRect, arrayToTree } from "../../utils";
import { getRoute, router } from "../../utils/router";
import { request } from "../../utils/request";
const collapse = ref(null);
const popup = ref(null);
const showContainer = ref(false);
const value = ref("");
const instance = getCurrentInstance();
const safeArea = ref({});
const maskStyle = ref({
  height: 0,
  width: 0,
});

const chaptersList = ref([]);

// 点击学习按钮
const onClickButton = (item) => {
  router.push({
    url: "/pages/regulations/learing",
    params: {
      id: item.id,
      parent_id: item.parent_id,
      name: item.name
    },
  });
};

const resolveHeight = () =>
  setTimeout(() => {
    getRect({
      name: ".free-content",
      instance,
      onSuccess(res) {
        maskStyle.value.width = safeArea.value?.source?.width || 0;
        maskStyle.value.height = safeArea.value.height - res.height;
      },
    });
    // 动画300需要等待
  }, 800);

const onSafeAreaChange = (s) => {
  safeArea.value = s;
  resolveHeight();
};

const onChnage = () => {
  resolveHeight();
}

const onClickMask = () => {
  showContainer.value = true;
};

onMounted(async () => {
  const id = getRoute().params.id;
  const res = await request(
    "api/question_bank/question_reception/chapter/get_all_chapter",
    {
      id,
    }
  );
  chaptersList.value = arrayToTree({
    list: res.data.map((item) => ({ isStudied: 0, ...item })),
    firstId: +id,
  });
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #000000;
}

.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx 10rpx 40rpx;
  .buttons {
    display: flex;
    gap: 10rpx;
  }
  .comment {
    width: 132rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: $primary;
    border: 1px solid $primary;
    font-family: "PingFang SC, PingFang SC";
    font-weight: 500;
    font-size: 28rpx;
    color: $primary;
    border-radius: 4rpx;
  }

  .comment.success {
    color: $success;
    border: 1px solid $success;
  }

  .comment.warning {
    color: $warning;
    border: 1px solid $warning;
  }
}

.unlock {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #000000;
  margin: 100rpx 0;
  display: block;
}

.class-content {
  height: 100%;
}

.pay-content {
  flex: 1;
  position: relative;

  .modal-mask {
    background-color: rgba($color: #858585, $alpha: 0.8);
    position: absolute;
    height: 100%;
    z-index: 9999;
    left: -24rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 34rpx;
  }
}

.modal-wrapper {
  width: 685rpx;
  height: 64rpx;
  background: #dfdfdf;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>