ieplus-app/src/pagesStudy/pages/exam-start/components/question-correct-popup.vue

<template>
  <!-- #ifdef H5 -->
  <teleport to="body">
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <root-portal externalClass="theme-ie">
      <!-- #endif -->
      <uv-popup ref="popupRef" mode="center" :close-on-click-overlay="false" :closeable="false" :round="12">
        <view class="theme-ie popup-content box-border bg-white">
          <view class="popup-header">
            <view class="popup-header-title">
              <text>试题纠错</text>
            </view>
          </view>
          <view class="px-30">
            <view class="h-60 flex items-center justify-between border-0 border-b border-solid border-[#efefef]">
              <view class="flex items-center gap-x-10">
                <text>试题编号</text>
                <ie-image src="/static/image/icon-lock.png" custom-class="w-26 h-26" mode="aspectFit" />
              </view>
              <text class="text-fore-light">{{ questionId }}</text>
            </view>
            <view class="mt-30">
              <uv-textarea v-model="remark" placeholder="在这里填写问题描述" count :height="100" :maxlength="200" />
            </view>
          </view>
          <view class="mt-50 mx-30 mb-30 flex items-center gap-x-30">
            <view class="flex-1">
              <uv-button type="error" plain shape="circle" @click="close">取消</uv-button>
            </view>
            <view class="flex-1">
              <uv-button type="primary" shape="circle" :disabled="submitBtnDisabled"
                @click="handleSubmit">提交</uv-button>
            </view>
          </view>
        </view>
      </uv-popup>
      <!-- #ifdef MP-WEIXIN -->
    </root-portal>
    <!-- #endif -->
    <!-- #ifdef H5 -->
  </teleport>
  <!-- #endif -->
</template>

<script lang="ts" setup>
import { correctQuestion } from '@/api/modules/study';
const popupRef = ref();
const questionId = ref(0);
const remark = ref('');
const loading = ref(false);
const submitBtnDisabled = computed(() => !remark.value?.trim() || loading.value);
const open = (id: number) => {
  if (id !== questionId.value) {
    remark.value = '';
  }
  questionId.value = id;
  popupRef.value.open();
}
const emit = defineEmits<{
  close: [];
}>();
const close = () => {
  popupRef.value.close();
  emit('close');
}
const handleSubmit = () => {
  loading.value = true;
  correctQuestion({ questionid: questionId.value, remark: remark.value.trim() }).then((res) => {
    loading.value = false;
    uni.$ie.showToast('提交成功，等待工作人员处理');
    close();
  }).catch((err) => {
    console.log(err)
    loading.value = false;
  })
}
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.popup-content {
  @apply w-[88vw];
}

.popup-header {
  @apply px-30 h-100 flex items-center justify-center;
}

.popup-header-title {
  @apply flex items-center text-30 text-fore-title font-bold;
}
</style>