ieplus-app/src/pagesStudy/pages/study-plan-edit/components/question-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">
        <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="mt-30 px-20 h-104 rounded-10 bg-back flex items-center">
          <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.number="questionCount" />
          <text class="ml-20 text-26 text-fore-title">道题</text>
        </view>
        <view class="mt-20 flex gap-x-20">
          <view class="flex-1 py-20 text-center rounded-6 text-28 text-fore-subcontnt"
            :class="questionCount === item ? 'bg-[#E5F7FF] text-primary' : 'bg-back'" v-for="item in quickOptions"
            @click="questionCount = item">{{ item }}</view>
        </view>
      </view>
    </view>
  </uv-popup>
</template>
<script lang="ts" setup>
const quickOptions = ref([90, 120, 150, 300, 450]);
const questionCount = ref();
const popup = ref();
const globalCallback = ref();
const handleCancel = () => {
  close();
}
const handleConfirm = () => {
  if (questionCount.value < 1) {
    uni.$ie.showToast('请输入合理的题数');
    return;
  }
  globalCallback.value(questionCount.value || 0);
  close();
}
const open = (time: number, callback: (time: number) => void) => {
  globalCallback.value = callback;
  questionCount.value = time || '';
  popup.value.open();
}
const close = () => {
  popup.value.close();
}
defineExpose({ open, close });
</script>
<style lang="scss" scoped></style>