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

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

const chaptersList = ref(
  new Array(10)
    .fill({
      title: "测试1",
      id: 1,
      children: new Array(5)
        .fill({
          id: 11,
        })
        .map((item, index) => {
          return {
            title: `测试1-${index + 1}`,
            id: index + item.id,
            isStudied: index === 1 ? 0 : index === 2 ? 20 : 100,
          };
        }),
    })
    .map((iten, index) => {
      return {
        ...iten,
        title: `测试${index + 1}`,
        id: index + 1,
      };
    })
);

const onClickButton = (isStudied) => {
  console.log(isStudied);
};

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需要等待
  }, 300);

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

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

const onChange = ({ show }) => {
  showContainer.value = !show;
};

const onClickMask = () => {
  showContainer.value = false;
};
</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 4rpx 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: #002fa7;
    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>