exam_mp/components/Tree/Tree.vue

<script setup name="Tree">
import Tree from "./Tree.vue";
const props = defineProps({
  chaptersList: {
    type: Array,
    default: () => [],
  },
  keys: {
    type: Object,
    default: () => ({
      value: "id",
      label: "name",
      children: "children",
      process: "study_status",
    }),
  },
  leave: {
    type: Number,
    default: 1,
  },
});

const emit = defineEmits(["onChnage", "onClickButton"]);
</script>

<template>
  <template v-for="items in chaptersList" :key="items[keys.value]">
    <uni-collapse
      class="class-content"
      @change="emit('onChnage')"
      v-if="items?.[keys.children]?.length"
    >
      <uni-collapse-item
        :title="items[keys.label]"
        :key="items[keys.value]"
        class="text"
        :leave="leave"
      >
        <view class="-mt-20">
          <Tree
            :chaptersList="items[keys.children]"
            :leave="leave + 1"
            @onClickButton="(e) => emit('onClickButton', e)"
            @change="emit('onChnage')"
          />
        </view>
      </uni-collapse-item>
    </uni-collapse>
    <view v-else>
      <view
        class="content"
        :style="{
          paddingLeft: `${leave * 5 * 2 + 10}rpx`,
        }"
      >
        <view class="text"> {{ items[keys.label] }}</view>
        <view class="buttons">
          <view
            @click="emit('onClickButton', items)"
            class="comment"
            v-if="items[keys.process] === 1"
            >开始学习</view
          >
          <view
            @click="emit('onClickButton', items)"
            class="comment warning"
            v-if="items[keys.process] === 2"
            >继续学习</view
          >
          <view
            @click="emit('onClickButton', items)"
            class="comment"
            v-if="items[keys.process] === 4"
            >去练习</view
          >
          <view
            @click="emit('onClickButton', items)"
            class="comment success"
            v-if="items[keys.process] === 3"
            >已学习</view
          >
        </view>
      </view>
    </view>
  </template>
</template>

<style lang="scss" scoped>
@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: 20rpx 20rpx 10rpx 0;
  .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>