ieplus-app/src/pagesStudy/pages/study-plan/components/page-calendar.vue

<template>
  <view class="mt-24 bg-white relative z-4">
    <uni-calendar :insert="true" :lunar="false" :readonly="true" :showMonth="false" :selected="selected"
      :endDate="endDate" @change-month="changeMonth" />
    <view class="wrap mt-20 w-fit mx-auto px-98 py-16 flex items-center justify-center">
      <ie-image src="/pagesStudy/static/image/icon-calendar.png" custom-class="w-22 h-22" />
      <text class="ml-4 text-20 text-primary">{{ tip }}</text>
    </view>
    <view class="mt-40 mx-40 mb-30 grid grid-cols-2 gap-x-26 gap-y-26">
      <view v-for="item in stat" :key="item.name" class="relative p-30 rounded-10 bg-back">
        <ie-image :src="item.icon" custom-class="w-52 h-70 absolute top-20 right-25" />
        <view class="text-30 text-fore-light font-bold">{{ item.name }}</view>
        <view class="mt-4">
          <text class="text-36 text-fore-title font-bold">{{ item.value }}</text>
          <text class="ml-20 text-24 text-fore-light">{{ item.unit }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
const stat = ref([
  {
    name: '答题数',
    unit: '道题',
    value: '0/90',
    icon: '/pagesStudy/static/image/icon-pen.png'
  },
  {
    name: '课程学习',
    unit: '课时',
    value: '0/5',
    icon: '/pagesStudy/static/image/icon-video.png'
  },
  {
    name: '学习时长',
    unit: '分钟',
    value: '0/120',
    icon: '/pagesStudy/static/image/icon-time.png'
  },
  {
    name: '正确率',
    unit: '',
    value: '70%',
    icon: '/pagesStudy/static/image/icon-chart.png'
  }
])
const selected = ref([
  {
    date: '2025-09-29',
    info: 2
  },
  {
    date: '2025-10-01',
    info: 1
  },
  {
    date: '2025-10-02',
    info: 3
  }
])
const endDate = ref('')
const todayPlanFinish = computed(() => {
  const todayTarget = selected.value.find(item => item.date === endDate.value)
  if (todayTarget) {
    return todayTarget.info > 2;
  }
  return false
});
const tip = computed(() => {
  if (todayPlanFinish.value) {
    return '恭喜你，今日计划已完成'
  }
  return '今日计划进行中，加油~'
});

const init = () => {
  endDate.value = uni.$uv.timeFormat(new Date(), 'yyyy-mm-dd')
}

const changeMonth = (e: any) => {
  console.log(e);
  uni.$ie.showLoading();
  setTimeout(() => {
    uni.$ie.hideLoading();
  }, 1000);
}

init();
</script>
<style lang="scss" scoped>
.wrap {
  background: linear-gradient(to right, white 0%, #E5F7FF 50%, white 100%);
}
</style>