pms-app/components/ignore/reason.vue

<template>
  <!-- 忽略输入弹窗 -->
  <uni-popup
    class="ignore-unipopup"
    ref="ignorePopupRef"
    type="bottom"
    :animation="false"
    :mask-click="false"
    borderRadius="10px 10px 10px 10px"
  >
    <view class="ignore-popup-box">
      <view>
        <uni-row class="flex-row align-center">
          <uni-col class="ignore-popup-title" :span="22">
            {{ $t("operation.ignoreReason") }}
          </uni-col>
          <uni-col :span="2">
            <uni-icons
              type="closeempty"
              size="20"
              color="#999"
              @click="closeIgnorePopup"
            ></uni-icons>
          </uni-col>
        </uni-row>
      </view>
      <view class="ignore-popup-content">
        <uni-easyinput
          type="textarea"
          class="ignore-popup-textarea"
          :placeholder="
            $t('operation.PleaseFillIn') + $t('operation.ignoreReason')
          "
          v-model="ignoreReason"
        ></uni-easyinput>
      </view>
      <view class="ignore-popup-btn">
        <button type="primary" @click="confirmIgnore">
          {{ $t("operation.submit") }}
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import dayjs from "dayjs";
import { computed, ref, reactive, watch, onMounted } from "vue";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n({
  useScope: "global",
});

// 接收父组件传递的参数
const props = defineProps({});

// 忽略弹窗
const ignorePopupRef = ref(null);

// 忽略理由
const ignoreReason = ref("");
const openIgnore = () => {
  ignorePopupRef.value.open();
};
const closeIgnorePopup = () => {
  ignorePopupRef.value.close();
  ignoreReason.value = "";
};
// 忽略弹窗确认
const confirmIgnore = (e) => {
  console.log("🚀 ~ confirmIgnore ~ e:", e);
  if (!ignoreReason.value) {
    uni.showToast({
      title: t("operation.PleaseFillIn") + t("operation.ignoreReason"),
      icon: "none",
    });
    return;
  }
  emit("ignore-submit", ignoreReason.value);
};

onMounted(() => {});

const emit = defineEmits(["ignore-submit"]);
// 提供外部方法
const expose = {
  openIgnore,
  close: closeIgnorePopup,
};
defineExpose(expose);
</script>

<style lang="scss" scoped>
.btn-ignore {
  margin-left: 10px;
  background-color: #e6a23c !important;
  border-color: #e6a23c !important;
  color: #fff;
}
.ignore-popup-box {
  padding: 20px;
  background: #fff;
  border-radius: 10px 10px 0 0;
}
.ignore-popup-title {
  text-align: center;
}
.ignore-popup-close {
  text-align: right;
}
.ignore-popup-content {
  margin: 15px;
}
</style>