ieplus-app/src/pagesStudy/pages/study-plan-edit/components/course-setting.vue

<template>
  <uv-popup ref="popup" mode="bottom" round="16" :close-on-click-overlay="false">
    <view class="py-23 bg-white rounded-16 overflow-hidden">
      <view class="flex items-center justify-between pt-20">
        <view class="px-46 py-20 text-28 text-fore-light" @click="handleCancel">取消</view>
        <text class="text-30 text-fore-title font-bold">课程学习</text>
        <view class="px-46 py-20 text-28 text-fore-title" @click="handleConfirm">确认</view>
      </view>
      <view class="pt-50 px-42 py-20 pb-100">
        <view class="px-20 h-104 rounded-10 bg-back flex items-center" @click="selected = 0">
          <ie-image :src="selected === 0 ? iconCheckActive : iconCheck" custom-class="w-32 h-32" mode="aspectFill" />
          <text class="ml-20 text-26 text-fore-title">暂无学习计划</text>
        </view>
        <view class="mt-30 px-20 h-104 rounded-10 bg-back flex items-center" @click="selected = 1">
          <ie-image :src="selected === 1 ? iconCheckActive : iconCheck" custom-class="w-32 h-32" mode="aspectFill" />
          <text class="ml-20 flex-1 text-26 text-fore-title">每日计划学习</text>
          <input type="number" class="w-134 h-72 bg-white rounded-4 text-center px-10" v-model="courseTime" />
          <text class="ml-20 text-26 text-fore-title">课时</text>
        </view>
      </view>
    </view>
  </uv-popup>
</template>
<script lang="ts" setup>
import iconCheck from '@/pagesStudy/static/image/icon-check.png';
import iconCheckActive from '@/pagesStudy/static/image/icon-check-active.png';
const selected = ref(0);
const courseTime = ref();
const popup = ref();
const globalCallback = ref();
const handleCancel = () => {
  close();
}
const handleConfirm = () => {
  if (selected.value === 1 && courseTime.value < 1) {
    uni.$ie.showToast('请输入合理的课时');
    return;
  }
  globalCallback.value(courseTime.value || 0);
  close();
}
const open = (time: number, callback: (time: number) => void) => {
  globalCallback.value = callback;
  courseTime.value = time || '';
  selected.value = time ? 1 : 0;
  popup.value.open();
}
const close = () => {
  popup.value.close();
}
defineExpose({ open, close });
</script>
<style lang="scss" scoped></style>