sports-merchant-minapp/src/subPack/classInspectionDetaile/index.vue

<template>
  <wd-navbar :title="titleArr[type]" fixed placeholder safeAreaInsetTop :bordered="false" leftArrow
    @click-left="router.back()"></wd-navbar>
  <view class="px32rpx py-24rpx" v-if="data">
    <course disabled :item="courseItem"></course>
    <view class="mt24rpx flex items-center" v-if="todayClass.length">
      <image src="@/subPack/static/nz.png" class="w-30rpx h30rpx"></image>
      <view class="text-32rpx ml-3 font-semibold">今日上课</view>
    </view>
    <view class="mt24rpx">
      <template v-for="item in todayClass" :key="item.id">
        <view class="mb24rpx">
          <ClassItem :type="type" :item="item" showBtn></ClassItem>
        </view>
      </template>
    </view>
    <view class="title">
      <view class="mt24rpx mb24rpx flex text-32rpx items-center" v-if="NormalClass.length">
        <view class="mr28rpx" :class="[tab == 0 ? 'text-#0074FF' : 'text-[rgb(0,0,0,0.3)]']" @click="tab = 0">正常课({{
          NormalClass?.length }})</view>
        <view :class="[tab == 1 ? 'text-#0074FF' : 'text-[rgb(0,0,0,0.3)]']" @click="handleGoView">补课({{
          MakeUpCasses?.length }})</view>
      </view>
      <view v-for="item in NormalClass" class="mb24rpx" :key="item.id">
        <ClassItem :type="type" :item="item" :showBtn="false"></ClassItem>
      </view>
      <view v-if="MakeUpCasses?.length" class="text-#0074FF mt24rpx mb24rpx view">补课({{ MakeUpCasses?.length }})</view>
      <view v-for="item in MakeUpCasses" class="mb24rpx" :key="item.id">
        <ClassItem :type="type" :item="item" :showBtn="false"></ClassItem>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import router from "@/router";
const tab = ref(0);
const type = ref(0);
const titleArr = ["拍照验课", "选择课程", "选择延期课时"];
const { courseItem } = storeToRefs(useCourseStore());
const queryId = ref();
onLoad((query: any) => {
  type.value = query.type;
  queryId.value = query.id;
  console.log(query, '拍照');

});
const NormalClass = computed(() => {
  return data.value.filter((it) => it.coursesType == 0 && !it.orToday);
});
const MakeUpCasses = computed(() => {
  return data.value.filter((it) => it.coursesType == 1 && !it.orToday);
});
const todayClass = computed(() => {
  return data.value.filter((it) => it.orToday);
});
onShow(() => {
  getData(queryId.value);
});
const { send: getData, data } = useRequest(
  (courseId: string) =>
    Apis.app.getCourseInfo({
      pathParams: {
        courseId,
      },
    }),

  {
    immediate: false,
  },
).onSuccess(() => {
  setTimeout(() => {
    uni
      .createIntersectionObserver(getCurrentInstance())
      .relativeToViewport(".title")
      .observe(".view", (res) => {
        console.log(res, "监听");

        if (res.intersectionRatio == 0) {
          tab.value = 0;
        }
      });
  }, 10);
});
function handleGoView() {
  tab.value = 1;
  uni.pageScrollTo({ selector: ".view" });
}
</script>

<style scoped></style>
<route lang="json">{
  "name": "classInspectionDetaile",
  "style": {
    "navigationBarTitleText": "拍照验课",
    "navigationStyle": "custom"
  }
}</route>