YingXingAI/components/LeaveMessage.vue

<template>
  <!-- 留言 -->
  <u-popup
    v-model="showPopup"
    mode="bottom"
    @close="closePopup"
    close-icon-color="#333"
    close-icon-pos="top-right"
    borderRadius="16"
    closeable
  >
    <view class="leave-message-container">
      <view class="leave-message-title">留言</view>
      <view class="leave-message-content">
        <textarea
          class="message-input"
          v-model="messageContent"
          placeholder="请输入留言，100字以内"
          maxlength="100"
          placeholder-style="color: #999999;"
          :disabled="loading"
        ></textarea>
      </view>
      <view class="message-buttons">
        <u-button
          class="submit-btn"
          type="primary"
          @click="handleSubmit"
          :disabled="loading"
        >
          {{ loading ? "提交中..." : "提交" }}
        </u-button>
        <u-button
          class="cancel-btn"
          type="default"
          @click="closePopup"
          :disabled="loading"
        >
          取消
        </u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "LeaveMessage",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    teacher: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      showPopup: false,
      messageContent: "",
      loading: false,
    };
  },
  watch: {
    show: {
      handler(newVal) {
        this.showPopup = newVal;
      },
      immediate: true,
    },
    showPopup(val) {
      if (val !== this.show) {
        this.$emit("update:show", val);
      }
    },
  },
  methods: {
    closePopup() {
      if (this.loading) return; // 如果正在提交，阻止关闭
      this.messageContent = "";
      this.showPopup = false;
      this.$emit("update:show", false);
    },
    handleSubmit() {
      if (this.loading) return; // 如果正在提交，阻止重复提交

      if (!this.messageContent.trim()) {
        uni.showToast({
          title: "请输入留言内容",
          icon: "none",
        });
        return;
      }

      // 模拟接口调用
      this.loading = true;
      uni.showLoading({
        title: "提交中...",
      });

      // 模拟网络请求延迟
      setTimeout(() => {
        // 模拟接口调用成功
        uni.hideLoading();
        this.loading = false;

        // 发送留言内容和教师信息给父组件
        this.$emit("submit", {
          content: this.messageContent,
          teacher: this.teacher,
          success: true,
        });

        // 成功提示
        uni.showToast({
          title: "留言成功",
          icon: "success",
        });

        // 清空留言内容
        this.messageContent = "";
        // 关闭弹窗
        this.showPopup = false;
        this.$emit("update:show", false);
      }, 1500); // 模拟1.5秒的网络延迟
    },
  },
};
</script>

<style lang="scss" scoped>
.leave-message-container {
  padding: 40rpx 0 0;
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;

  .leave-message-title {
    font-size: 32rpx;
    color: #333333;
    text-align: left;
    padding-left: 30rpx;
    margin-bottom: 30rpx;
    font-weight: 400;
  }

  .leave-message-content {
    padding: 0 30rpx;

    .message-input {
      width: 100%;
      height: 280rpx;
      background-color: #f5f5f5;
      border-radius: 16rpx;
      padding: 24rpx;
      font-size: 28rpx;
      box-sizing: border-box;
      color: #333333;
    }
  }

  .message-buttons {
    padding: 30rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50rpx;

    .cancel-btn,
    .submit-btn {
      width: 156rpx;
      height: 70rpx;
      margin: 0;
      border-radius: 16rpx;
    }

    .submit-btn {
      background-color: #477bfb;
    }
  }
}
</style>